January 8, 2019
Smashing Newsletter: Issue #221

Smashing Newsletter

This newsletter issue was sent out to 208,702 recipients newsletter subscribers on Tuesday, January 8, 2019.

Editorial

Happy New Year!

It seems hard to believe it is 2019 already, but here we are heading into a new year. I like the chance to look back over the year that has just happened and see whether I met the goals I set for myself, and what I want to bring forward or change in the next year. Here at Smashing, we spent some time thinking about 2018, and everything that had happened. As you can see in this article, we have been quite busy! I do love a good end of year review post; if you do too, then you might enjoy this collection put together by Smashing author Andy Bell.

Onward to 2019, perhaps you have taken time to set goals for the coming year. I hope that we at Smashing can help you to achieve some of them. I want to build on the great content our authors have brought to the magazine in 2018, publishing articles that help you navigate the breadth of technology we encounter in our work. Our Smashing conferences are going to bring some of the best speakers and workshop leaders to cities around the world, while Smashing Members will have access to our huge library of books as well as some exclusive webinars and more.

Perhaps your goals also include sharing what you know. We are always interested in proposals for articles. Take a look at our information about writing for us, and get in touch with an outline for a piece. We are very happy to work with first-time authors. If you have discovered something interesting while working on a project, or have a small project that you could teach readers how to build, we can help you shape that into a great tutorial.

1. In Defense Of Utility-First CSS

Utility-first CSS helps you write code that is easier to maintain and scale. However, not everyone is convinced. Some argue they might as well use inline styles, that utility-first bloats the HTML, or that it’s a whole other language to learn.

Sarah Dayan was also critical, advocating for BEM instead, but once she dived deeper into the topic, she revised her judgment. If you feel skeptical, too, Sarah’s article “In Defense Of Utility-First CSS” is for you. It debunks common misconceptions and helps you see the approach from a fresh perspective. (cm)

2. Learn And Practice JavaScript The Easy Way

How about starting the new year learning something new? If you always wanted to wrap your head around JavaScript but never got around to doing so, now’s the perfect occasion. Jad Joubran put together a free JavaScript course that teaches you modern JavaScript from scratch. The lessons are short and concise so that there’s lots of room to put your newly acquired skills to the test with challenges inspired by real-world projects. The course also includes a Flashcards app to test your knowledge on the go. (cm)

3. SmashingConf San Francisco 2019 (Apr 16-17)

We like breaking out of the predictable patterns. We take pride in putting our heart and soul into crafting friendly, inclusive and practical events, and SmashingConf San Francisco 2019 won’t be an exception. Expect live debugging, live sketching, live designing and live coding. Check the topics.

4. Hand-Curated Freebies For Designers And Developers

You’ve probably got some exciting new projects planned for this year, and, well, the right freebie at the right time could turn out to be invaluable to master those design and development challenges that are awaiting you. So if you’re on the lookout for a free asset to make your project complete — no matter if it’s a free font, SVG icons, or code plugins —, the ByPeople community might have something for you.

One of the biggest repositories of free assets, ByPeople features over 10,000 hand-curated downloadable goodies: free tools, icons, fonts, themes, templates, plugins, code snippets, and much more that could come in handy. A treasure chest. (cm)

5. Accessible SVG Icons With Inline Sprites

There’s hardly a project that gets by without icons. However, icons can also be misinterpreted and users who rely on assistive technologies will miss their meaning if there’s no text fallback in place.

6. AI-Powered Alt Texts

Alt texts are crucial for visually impaired users, but not all developers and content creators take the time to caption their images. Artificial intelligence could close the gap, as the Chrome extension Auto Alt Text shows. Once added to your browser, it will generate a descriptive caption when you right-click an image.

Sarah Drasner also tinkered with the idea of improving accessibility with the help of machine learning, especially social media posts that typically don’t have a way to enter alt text. Her approach is powered by Azure’s Computer Vision API and provides a dynamically generated alt text for images you upload. Check out her Codepen to see it in action. (cm)

7. Behind The Scenes Of The GOV.UK Navigation

The GOV.UK site is often mentioned as an example of stellar information architecture. But what makes it so successful? The design team recently gave a behind-the-scenes look at how they organize their content.

The key to making things easier to find is “step by step navigation” which is designed around user needs instead of the structure of the government. A fantastic example of how complex information can be turned into intuitive user journeys at scale. (cm)

9. Rethinking Drag And Drop

Drag and drop is an intuitive way of rearranging things, and with a bit of extra polishing you can make a basic drag-and-drop interaction stand out from the crowd. Just like the folks at Atlassian did. Their accessible drag and drop list react-beautiful-dnd makes the drag and drop behavior feel more natural and gives users the impression that they are moving physical objects around.

10. Remove Backgrounds With AI

We all know how time-consuming it can be to properly remove the background from a photo, especially when there are a lot of fine details involved. Luckily, AI once again caters for a much faster and simpler solution: The browser-based tool remove.bg automatically detects the foreground layers of your image and separates them from the background. Please note that the tool is trained to detect persons as foreground and everything else as background, so there needs to be at least one person in your image. An impressive little timesaver. (cm)