Smashing Newsletter: Issue #221

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.

If your goals include getting into public speaking then take a look and see if there is a Global Diversity CFP Day happening near you. If you are already an experienced public speaker then perhaps you could offer to be a mentor — or even set up an event of your own. You can read my write-up of last year, “Getting Started In Public Speaking: Global Diversity CFP Day.”

So, let’s get started!

— Rachel Andrew (@rachelandrew)

In Defense Of Utility-First CSS
Learn And Practice JavaScript The Easy Way
SmashingConf San Francisco 2019
Hand-Curated Freebies For Designers And Developers
Accessible SVG Icons With Inline Sprites
AI-Powered Alt Texts
Behind The Scenes Of The GOV.UK Navigation
Get Your Layout Ready For Screen Readers
Rethinking Drag And Drop
Remove Backgrounds With AI
Upcoming In Smashing Membership

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.

SmashingConfs are friendly, inclusive events focused on real-world problems and solutions.

If your boss needs some convincing, you can download our Convince Your Boss PDF (249 KB). Only a few Early Birds left!

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)

8. Get Your Layout Ready For Screen Readers

To help you create layouts that aren’t only visually appealing but also shine on a conceptual basis, Ben Robertson summarized what you need to consider to get your layouts ready for screen readers. The foundation: well-structured HTML markup, thoughtful use of ARIA roles, and careful labeling of site sections using ARIA labels. Speaking of HTML markup: Bruce Lawson also shared a great guide on the practical value of semantic HTML. (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.

Another drag-and-drop solution worth checking out comes from Harris Schneiderman. His list reorder module Dragon Drop is keyboard and assistive technology accessible thanks to live regions. (cm)

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)

11. Upcoming In Smashing Membership

While we added our newest book Form Design Patterns to the Smashing Membership only a few weeks ago, we are already working on two new titles which we’ll release early this year! All future eBooks are included in the Smashing Membership.

Coming up next:

📺 Smashing TV: “Internationalisation Is A Piece Of Cake” with Eli Schütze Ramírez. (Jan 8, 11:00 AM Eastern)

We are most grateful for your support which allows us to bring you great content, pay all our authors fairly, and reduce advertising on the site. (You could become a Member, too! 😉)

January 8, 2019 Smashing Newsletter: Issue #221

Previous Issues