Dear Friend,
We are well into the New year now, and before we know it, conference season will have arrived. In fact, I've taken a break from working on my presentation for the upcoming SmashingConf in London to write the intro to this newsletter. The entire focus of the conference will be performance; this is something we've made a priority at Smashing — both with our own site as well as with articles such as the Front-End Performance Checklist which we published last week.
Speaking at conferences and meetups is something I do a lot of, however, only a few years ago I was too scared of public speaking to get on stage. I know how hard it gets be to get started, so I'm very happy that we are featuring Global Diversity CFP Day in today's newsletter issue. I'll be helping out at my local event in Bristol (UK), so if you'd like to take your first steps as a public speaker, see if you can get along to an event in February.
Stay smashing!
— Rachel (@rachelandrew)
Table of Contents
1. When One SVG Embedding Technique Isn't Enough
The beauty of SVG has many sides. SVGs are performant, customizable, and above all, they are both a document and an image. That's where most of their power really comes from, as Sara Soueidan recently pointed out. Having worked on the front-end side of the Smashing Magazine redesign which went live just a few weeks ago, Sara faced quite a tricky SVG challenge. She had to deliver three fairly complex SVG images in a performant, accessible way. The twist: the image had to be searchable, selectable, and accessible as real HTML text.
In order to accomodate all of these prerequisites Sara's solution was to reference the SVG image from within the SVG document. Since she wanted the text to be inlined and the rest of the image to be external as well as cacheable, she opted to split each image into separate parts: text and illustration (stitched together using an inline <svg>). Clever! Be sure to check out Sara's write-up of how exactly she did that. (cm)
SmashingConf San Francisco (Apr 17-18)
"Coming to Smashing Conferences fundamentally changed how I develop websites." — Ryan Chittenden
With our third SmashingConf San Francisco taking place on April 17 & 18, we want to explore strategies for making outstanding and fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.
One track, two conference days, 14 brilliant speakers, and just 500 available seats. Make your experience even more memorable by attending one of our workshops. Get an early-bird ticket → before Jan 31st and save $100.
2. Meet Uppy, A Sleek And Modular File Uploader
Someone who loves to play fetch and won't chew on your shoes? Well, what might sound like the perfect pet dog, actually is something completely different. A file uploader. Uppy, to be more precise. With a superhero dog as a mascot, Uppy unifies everything you could wish for in a file uploader in one sleek, modular tool. And, well, it integrates seamlessly with any framework, too.
Uppy isn't picky when it comes to what it should fetch next — files from local disk, Google Drive, Dropbox, Instagram, remote URLs, cameras, and other exciting locations aren't a problem. The uploader supports drag-and-drop functionality, basic file manipulation like adding metadata, as well as uploading via tus resumable uploads or XHR/Multipart and remote sources, of course. You can use Uppy from a bundle straight from a CDN or as a module to import. Also, to make it fit your project perfectly, Uppy's UI is themeable, too. (cm)
3. Take Your First Steps As A Tech Speaker
Have you always wanted to become a tech conference speaker? Now's the time to make your dream a reality! February 3rd is declared Global Diversity CFP Day — the perfect occasion to finally give yourself that push and take your first steps in public speaking. No matter what you want to talk about, even if it isn't related to tech, there couldn't be a better opportunity as this one to share your perspective on a topic with others.
To celebrate diversity in tech and encourage aspiring speakers to get their ideas in front of an audience, the initiative organizes free workshops across the globe on February 3rd — from Ghana to India, Bulgaria to the UK, Brazil to the US. Experienced speakers will mentor you on your proposal, provide speaking advice, and finally get you on stage. Workshops are currently planned in 19 countries, and if you don't live anywhere close, there's a remote workshop you can participate in. No excuses this time! (cm)
Our sponsor:
Explore And Test Complex And Innovative Data-Driven Apps
Have you tried Qlik Playground yet? It's a free programming environment where you can learn about, use and experiment with Qlik's Associative Engine and APIs. By accessing public data sets (including your own GitHub data) through our APIs, you can create cool data-driven apps using powerful search, data retrieval without writing queries, out-of-the-box charts with a single line of code and more. Start playing now!
4. Using Deep Learning To Turn Design Mockups Into Code
Draw an app on paper, feed it to a neural network, and get the corresponding front-end code in less than a second. Emil Wallner, who experiments with deep learning, suggests a scenario like this could be common in less than two years from now. He argues that one thing is for sure: deep learning will significantly change front-end development, increase speed and lower the barrier for building software. To prove that all of this isn't as far away as it may sound, Emil shows how we can start exploring artificial front-end automation today.
In his proof of concept, he'll take you step by step through the process of teaching a neural network to code a basic HTML and CSS website based on the picture of a mockup. To start, he gives the neural network several screenshots with matching HTML. Once it has predicted all the matching HTML markup tags one by one, it receives the screenshots, as well as all the correct markup tags until this point. The training process is a complex one, and not free of pitfalls either, but it's interesting to see how an early experiment like this one could lay the foundations for something huge. (cm)
5. Little UI Details
As a designer, your goal is to create experiences that are pleasant and simple to use — for everybody. But what makes a good user interface? Well, sometimes it's the small details that make a difference. A subtle text shadow, a nice hover effect, a well-thought out visual hierarchy.
Steve Schoger often shares useful tips to improve a design on Twitter. Now, one of his avid readers, Tyrell Rummage, turned 21 of Steve's best tips into a concise little guide so you always have them at hand (along with code examples for each one). Did you know that, for example, if you have icons next to labels, coloring them slightly lighter than the text that goes with them will make the most important info (the label) pop out? Or that it is much more pleasing to the eye, if you use two slightly contrasted colors instead of a line to separate two adjacent boxes? Thanks, Steve! And thanks to Tyrell for putting the guide together! (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
6. An Offline Front-End Playground Right In Your Browser
You've got that coding idea in your head and want to quickly see what it will look like in the browser? Wouldn't it be cool if you could just open a new browser tab, and your front-end playground is already waiting for you to start experimenting? Well, that's exactly what Pinocode does.
Brought to life by Ebuka Bernard Ezeh, this browser-based playground gives you just what you need to let your coding ideas run wild: support for preprocessors and external libraries, instant previews, and (since creativity often strikes when you least expect it) it even works without an internet connection. If you like your creation, Pinocode lets you fork it, save it as an HTML file, edit it as CodePen, or preview a screenshot capture. Happy experimenting! (cm)
7. Freebie: Spices Icons To Make Your Project Even More Tasty
Sweet, sour, bitter, salty. Live is full of flavors. So why not create an icon set with everything that tickles our taste buds? Fikri Maulana did just that. His lovely, minimalistic Spices Icons are sure to add some flavor to any kind of cooking- or grocery-shopping-themed project. But maybe you can think of another use case, too?
40 icons are included in the set, depicting anything from garlic, lemons, and chilli peppers, to ginger, herbs, scallions, mushrooms and a lot more. All icons come in EPS and PNG formats and can be used for free in both personal and commercial projects. Thank you, Fikri! (cm)
8. New On Smashing Job Board
Here are some of the most recent job openings at Smashing Jobs:
- Front-End Developer at Bandzoogle (Anywhere)
"Bandzoogle builds tools that help bands succeed online. [...] We're looking for an experienced, well-rounded front-end developer to join our team. In this position you'll apply your CSS3/HTML5/ES6 skills to all aspects of the application, from our realtime web editor to the theming engine that powers our artists' sites." - Wordpress Web Designer at TrustYou (Munich, Germany)
"We are looking for a WordPress Web Designer to own design and implementation tasks for our web properties (e.g. corporate website, campaign landing pages etc.). The ideal candidate will have a very good knowledge of all aspects related to website development, design, user experience, information architecture and conversion optimization." - UX Designer at 4finance (Prague, Czech Republic)
"It's the job of a UX Designer at 4finance to frame a problem and identify the right path to resolving it as part of the overall strategy for creating and continuously improving our digital products that meet the real needs of real customers."
9. Most Popular Articles This Month
- Front-End Performance Checklist 2018 [PDF, Apple Pages]
Let's make 2018… fast! Our front-end performance checklist (PDF/Apple Pages) summarizes everything you need to know to create fast experiences today. - Visual Studio Code Can Do That?
Why is Visual Studio Code (VS Code) so popular, and do we really need another text editor? In this article, we'll take a look at how VS Code extends traditional text editor concepts and opens up entirely new avenues of productivity for developers. These are all the best things about VS Code that nobody ever bothered to tell you. - Introducing Web Payments: Easier Online Purchases With The Payment Request API
The W3C Working Group has been busy developing new standards to help make online payments much easier. In this article, Peter O'Shaughnessy provides you with the latest updates and explores the API with a basic example.
10. Most Recent Articles On Smashing
- Universal Principles Of User Experience Design
In an ever-changing discipline, it can be hard to keep abreast of everything as a user experience designer. This article provides an overview of universal principles of UX design, ensuring your skillset is built on firm foundations. - Ghost Button Design: Is This Really Still A Thing (And Why)?
For such a small design element, buttons sure are a complicated one to tackle. It makes sense, what with call-to-action buttons serving as the next step in your visitors' path to conversion. Mess that up and you might as well say "bye-bye" to business. - Designing For A Browserless Web
In this article, you'll learn useful tips and tricks for designing and developing progressive web applications (PWAs), specifically the ones that are added to the home screen on Android devices.
The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
No comments:
Post a Comment