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)
Table of Contents
- How To Design For Driverless Cars
- 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
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)
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)
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)
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)
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)
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)
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)
“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)
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)
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 firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy!
- Email, Design Teams, Regex and Compression
- CSS Linter, Regex, Performance, Accessible Components
- Free Fonts, CSS, Design Systems and SVG
- npm, Async CSS, Free SVG/EPS Icons
- Serverless, Gradients and Degreeless Design For Everyone
- State of CSS, Variable Fonts and Staying Focused
- Performance, Sketch and Animation Handbook
- Animation In React, CSS Sticky and Inclusive Design
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.