Smashing Newsletter: Issue #227

Editorial

This week, most of the Smashing team are packing up and heading out to San Francisco for SmashingConf. We’re all looking forward to spending time with attendees, but also each other. As a fully remote team, the conferences are one chance for us to meet face to face.

San Francisco is all sold out but tickets to SmashingConf Toronto are still available — we’d love to see you there! We also have an event coming up which is a little different: We have teamed up with Netlify to produce a JAMstack conference in London. Exciting times!

If you can’t get to our conferences, we understand. There are always lots of ways to interact with the Smashing Team and each other. Our articles often have lively comment threads, and Smashing Members can hop into the conversations in our Member Slack. We are also always happy to hear your ideas via our contact form. Do let us now what you want to see more of on the magazine. Our entire aim is the bring you the articles and resources that help you to build a better web!

– Rachel Andrew (@rachelandrew)

How To Design For Driverless Cars
Getting mailto: Right
Join The JAMstack Revolution!
CSS Debugging Made Easy
Code Your Way Into The CSS Hall Of Fame
Human Microcopy
A Modern Workflow For WordPress Development
Dark Mode Switch Tutorial
Master Boolean Operations The Fun Way
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. How To Design For Driverless Cars

How would you design a UI around a self-driving car experience? The Google Design team now shares a case study that gives valuable insights into how they tackled the challenge for their self-driving car service Waymo.

The crucial idea: The experience needs to build trust and reassure the passenger every step of the way — from confirming that they’ve found the right car and providing journey updates to showing that the car is aware of nearby vehicles, cyclists, and pedestrians. (cm)

2. Getting `mailto:` Right

mailto: links might not seem like a big deal as they are easy to implement. But UX-wise there are quite some pitfalls you might want to circumvent. Chris Coyier now takes you on a little journey into mailto: and the things you need to consider to cater for a user-friendly experience.

What’s to keep in mind for users who have a browser-based email client setup, for example? And how can you avoid bad surprises? These are just some of the questions that will be answered along the way. (cm)

3. Join The JAMstack Revolution!

Last week, we were delighted to announce ticket sales open for a brand new event: say hello to JAMstack_conf London taking place this July! Yep, we’re teaming up with our good ol’ friends at Netlify to learn together — directly from the creators powering one of the most transformational periods in web development to date.

The event will be a celebration of today’s modern web technologies as well as the engineers and companies who are pushing the boundaries of tomorrow’s web architecture. Static site generators, serverless architecture, and powerful APIs are giving front-end teams full-stack capabilities — without the pain of owning infrastructure. Join us! (ch)

4. CSS Debugging Made Easy

Debucsser. What might sound unpronounceable, actually makes CSS debugging easy. The simple CSS debugging tool was designed to be unobtrusive in your workflow. Hold Ctrl/CMD and move your mouse around to see the dimensions of an element on a page. You can also apply an outline class to all the elements on a page by adding a global class. Handy! (cm)

5. Code Your Way Into The CSS Hall Of Fame

Are you up for a little CSS challenge? The CSS code-golfing game CSS Battle is an opportunity to show how skilled you are when it comes to replicate a given target image in the least code possible. To make it to the leaderboard, the result needs to match the target image as closely as possible while using as few characters as possible. Ready to take on the challenge and battle your way to the top? (cm)

6. Human Microcopy

Finding the right words can be a challenge sometimes. If you need some fresh inspiration for your microcopy, Speak Human is for you. No matter if you want to come up with a friendly way to ask your users for their email or are looking for e-commerce copy that stands out from the crowd, the site is full of examples of clever, human-centric microcopy. (cm)

7. A Modern Workflow For WordPress Development

If you’re working with WordPress, WordPressify has the makings to take your development workflow to the next level. The built system comes with an integrated web server and auto-reload and is CSS preprocessor and ES6 ready. It also has a Babel compiler built-in and supports easy import for external JavaScript libraries and npm scripts as well as gulp tasks. WordPressify is free and open source. (cm)

8. Dark Mode Switch Tutorial

A dark/light mode switch is a nice feature. But how do you actually implement it? Sebastiano Guerriero takes you through the necessary steps. His approach shows how to create a dark theme for your project and then use CSS Custom Properties to switch to it from a default light theme when a specific data attribute or class is added to the body element. (cm)

9. Master Boolean Operations The Fun Way

“Union”, “subtract”, “intersect”, “difference” — if you’re using vector editors like Illustrator or Sketch, you know these kinds of boolean operations. So how confident are you in choosing the right one for your purpose?

The Boolean Game helps you find out in a playful way. To master the challenges, you need to rebuilt vector graphics with simple geometric shapes, and choose the right boolean operation, of course. A fun way to test your skills and sharpen your knowledge. (cm)

10. Upcoming In Smashing Membership

Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand-new book Art Direction for the Web is now available as a part of the Membership, too. Obviously.

Coming up next on Smashing TV:

Inspired By: Avaunt Magazine
with Andy Clarke on April 9 at 12:00 noon Eastern.
PWA For Production In 1-2-3 (Part 2)
with Maxim Salnikov on April 23 at 12:00 noon Eastern.
The Fabulous And Groovy Vadim And Vitaly Video Show
with Vadim Makeev and Vitaly Friedman on April 25 at 9:00 AM Eastern.
The How And Why Of Semantic HTML
with Mandy Michael on April 30 at 9:00 AM Eastern.

We are very grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (You could become a Member, too and join us in Smashingland where everyone is beautiful and you never get merge conflicts. ) (bl)

11. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

Web à Québec (April 9–11) in Quebec City, CA.
SmashingConf (April 15–18) in San Francisco, USA.
ImageCon SF (May 1–2) in San Francisco, USA.
Infoshare (May 8–9) in Gdańsk, PL.
A Day With (May 10–15) in Cluj-Napoca, Brasov, Bucharest, RO.
BTConf, (May 13–15) in Düsseldorf, DE.
You Gotta Love Frontend Conference (May 16–17) in Vilnius, LT. (This event offers a scholarship program.)
Frontend United (May 16–18) in Utrecht, NL.
HolyJS & MobiusConf & RIT (May 22–27) in St. Petersburg, RU.
Mastersgate (May 28–30) in Bratislava, SK.
SmashingConf Toronto (Jun 24–27) in Toronto, CA.
JAMstack_conf_london (Jul 9–10) in London, UK.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy!

April 9, 2019 Smashing Newsletter: Issue #227

Previous Issues