Smashing Newsletter: Issue #197

Editorial

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)

When One SVG Embedding Technique Isn’t Enough
Meet Uppy, A Sleek And Modular File Uploader
Take Your First Steps As A Tech Speaker
Using Deep Learning To Turn Design Mockups Into Code
Little UI Details
An Offline Front-End Playground Right In Your Browser
Freebie: Spices Icons To Make Your Project Even More Tasty

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 ). Clever! Be sure to check out Sara’s write-up of how exactly she did that. (cm)

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 3^rd 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 3^rd — 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)

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)

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)

January 16, 2018 Smashing Newsletter: Issue #197

Previous Issues