We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBook just for you.
Of course, you can cancel your subscription at any time (just check the “unsubscribe” link in the footer of the last newsletter issue). The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you. You have our word!
Please keep in mind that we keep the number of ads per issue to a minimum; and to help us cover our costs, we send out at most one monthly special issue which is dedicated to Smashing projects and products. We appreciate your support, and we’ll make sure to keep your subscription worthwhile.
- Issue #189 is scheduled for Tuesday, August 29th 2017
- See below for Issue # 1881 published on Tuesday, August 15th
- Issue #187 | Tuesday, August 1st 20172 – Readers: 227,579
- Issue #186 | Tuesday, July 18th 20173 – Readers: 227,520
- Issue #185 | Tuesday, July 4th 20174 – Readers: 227,600
- Issue #184 | Tuesday, June 20th 20175 – Readers: 228,599
- Issue #183 | Tuesday, June 6th 20176 – Readers: 228,882
- Issue #182 | Tuesday, May 23th 20177 – Readers: 229,438
- Issue #181 | Tuesday, May 9th 20178 – Readers: 230,055
- Issue #180 | Tuesday, April 25th 20179 – Readers: 230,055
- Issue #179 | Tuesday, April 11th 201710 – Readers: 231,209
- Issue #178 | Tuesday, March 21st 201711 – Readers: 231,624
- Issue #177 | Tuesday, March 7th 201712 – Readers: 231,990
- Issue #176 | Tuesday, February 21st 201713 – Readers: 233,268
Last Newsletter Issue #188
This newsletter issue was sent out to 227,450 recipients newsletter subscribers on Tuesday, August 15th 2017.
One of the most common questions asked when hiring designers and developers is whether they have a side project or contribute to open source. In a way, it’s almost expected that a candidate is willing to spend their spare time on something that will keep them on their toes after working hours and weekends. For companies, that’s a sign that a candidate is willing to learn and improve things, rather than just work through 9 to 5. And so indeed many of us work on such projects: often not only to polish up our CVs, but to stay up to date with modern technologies, help others, scratch our own itch, and just get better at our work.
Think about the products, libraries and services you love and use every single day. Think about the people crafting those interfaces or maintaining those repos for all of us to use. They’re working hard and investing a lot of their limited time because they care. Yet, too often a lot of work goes unnoticed and uncredited. Support them. Drop them an email today saying “thank you”, give them a shout-out on Twitter or Facebook, recommend them to your friends and colleagues and total strangers. Or perhaps send them a little gift or a small donation.
It might not sound like a big deal, but it just might make someone’s day after a long weekend of redesigning a broken UI or fixing way too many bugs. Give them the motivation they need to keep going and improve something you use.
Cheers to all you hardworking folks out there!
Table of Contents
- Better Breadcrumbs The Scotch Egg Way15
- Ready To Master New Challenges? SmashingConf Barcelona Is Coming!16
- Freebie: Scaramella, A Typeface With A Story17
- A Way Forward To More Meaningful Animations18
- Flexbox And Grid Explained For Designers19
- A Video Podcast To Learn Accessibility20
- Safari About To Support Service Workers21
- Style Encapsulation With Shadow DOM22
- Upcoming Smashing Workshops23
- New On Smashing Job Board24
- Popular Articles On Smashing25
- Most Recent Articles On Smashing26
271. Better Breadcrumbs The Scotch Egg Way
Do you remember the fairy tale about Hansel and Gretel and how they dropped breadcrumbs onto the forest ground to find their path back home? Well, on the web, breadcrumbs play a similar role. Breadcrumb navigation can improve how users find their way around by giving them a sense of where they are within a site’s structure. But not all breadcrumbs are equally helpful.
As Andy Beaumont points out29, static breadcrumb menus often prevent users from finding something that is on the same level as an already open level. The solution: Scotch Egg Navigation30. It allows the user to see all available options at each level of the hierarchy, thanks to a dropdown. This way, they can move to any point in that hierarchy without backing out and in again. If you want to see examples of what such user-friendly breadcrumbs can look like in action, check out the website of household appliance manufacturer Liebherr31, or the navigation on the site of the Parisian-based school École Estienne32. (cm)
332. Ready To Master New Challenges? SmashingConf Barcelona Is Coming!
The web is constantly changing. So, what could be better than learning first-hand from people who know their craft — Marcy Sutton, Brad Frost, Sarah Drasner, Chris Coyier and Monica Dinculescu, among others? Well, SmashingConf Barcelona34 is returning to the magical Palau de la Música Catalana once again this fall (Oct 17–18th) to boost up your skills. Two packed days of hands-on, practical sessions by some of the most respected members of the community.
Join us on our journey to the sunny Mediterranean seaside where we’ll explore new front-end challenges, UX strategies, and design patterns that you’ll be able to apply immediately to you work. No fluff or theory, just things that have worked in real-life projects — with enough time for networking, of course. Grab your ticket and see you there!36 (cm)
373. Freebie: Scaramella, A Typeface With A Story
Scaramella. What a fine-sounding name. What’s hiding behind it, is a real goodie, too. With the idea in mind to create a free typeface for feminist projects, Scaramella38 was designed by Brazil-based designer Camilla Scaramella whose family name was passed down to her by two generations of women.
Scaramella shines with its unique handwriting style and comes in two versions: Regular and Brush. To let the connections between the letters flow as naturally as possible (which is one of the main challenges with handwriting typography), Camilla analyzed each and every letter carefully. And, well, the result speaks for itself. You can download Scaramella for free — and use it for non-feminist purposes, too, of course! (cm)
404. A Way Forward To More Meaningful Animations
Animation can be a powerful tool to enhance the user experience, but only if used carefully can they unleash their real power. Too much of it, on the other hand, might cause confusion or dislike.
To help us gain a better understanding of when animation makes sense, Roman Kalina summarized the three types of animation that actually bring benefits42 for the user: Animations that grab the user’s attention, animations to guide your users through your app and show them what to do, and, last but not least, the ones that are visually pleasing and cater for little sparks of delight. To help us get animation right, Roman also provides a four-point checklist with questions we should ask ourselves whenever we plan to use animation effects in a project. With these guidelines in mind, we can make animation a lot more meaningful. (cm)
435. Flexbox And Grid Explained For Designers
Here we go again. Without any doubt, Flexbox and CSS Grid have completely changed how we design for the web today by giving us entirely new possibilities to create the layouts we imagine — without weird hacks or workarounds. For designers, however, it might not always be that clear what the fuss is all about when they hear developers mentioning them in a conversation.
But no worries, Jon Yablonski’s “Designer’s Guide to Flexbox and Grid45” sheds some light into the dark and explains everything designers (and devs who haven’t gotten a chance to get their hands dirty with the concepts yet) need to know about these transformational layout tools. Light-bulb moments guaranteed. (cm)
466. A Video Podcast To Learn Accessibility
According to the WHO, over a billion people have some form of disability47 — that’s 15% of the world’s population. With these figures in mind, it’s just about time to get a better grasp at accessibility as many of us are struggling with it48. If you want to broaden your knowledge on accessibility, the Chrome Developers video podcast49 hosted by Rob Dodson is a good place to start.
22 episodes of A11ycasts have already been released, all of them between 5 to 12 minutes long, demonstrating real-world accessibility problems and solutions to fix them. Among other things, you’ll learn the basics of ARIA, how to check your project for accessibility, how screen readers work, and why semantics matter. Be sure to tune in. It’s worth it. (cm)
517. Safari About To Support Service Workers
A WebKit ticket and associated patch created by Apple Engineer Brady Eidson provoked collective glee in the web community. Apple is finally working on supporting service workers in Safari. Great news, especially since Service Workers are the foundation of progressive web apps.
Does that mean that Apple will fully support PWAs? Jason Grigsby points out that it’s too early to tell53 what these news actually mean for the full list of features that are part of the PWA definition. He also stresses that PWAs have always worked in Safari, so you shouldn’t wait on Apple to build one. Once service workers will be supported, Safari users will get an upgraded experience.
568. SVG Magic That’ll Leave You In Awe
You thought you knew SVG? Well, Sarah Drasner will teach you better. Her slides titled “SVG can do THAT?!57” are full of SVG experiments that bend the rules of what we thought is possible with scalable vector graphics. From extraordinary UI elements to stunning animations that are not only interactive but also responsive, the slides are a treasure chest full of SVG inspiration.
Along the way, Sarah will take you on a journey through fancy SVG techniques and animation effects and unravel the secret behind SVGs that draw themselves. The presentation is also a great way to discover some real SVG artists and their works. Have you heard of Sullivan Nolan, for example? Her morphing SVG slider59 uses SVG to paint women of the 20th century. Stunning! (cm)
609. Style Encapsulation With Shadow DOM
A small and snappy page is the ideal of what we all are striving for. Something that gets by without a lot of code but relies on reusable components instead. To keep your code as simple and fast as possible, encapsulated styles can do wonders. And to make them happen without any external tools, there’s no getting around Shadow DOM, as Monica Dinculescu argues61.
Shadow DOM hasn’t been around for too long yet, but it comes with a mighty power: It encapsulates the CSS and markup you bundle with your implementation, hiding the implementation details of your elements. To help you wrap your head around the concept and understand why it might be a more elegant solution as faking style encapsulation with CSS Modules or
<iframe>, for example, be sure to check out Monica’s blog post63. Watch out, though: Since Shadow DOM is still a relatively new spec, older browsers might need a polyfill. (cm)
6410. Upcoming Smashing Conferences
We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just 2 days packed with practical front-end and UX techniques. Coming up: SmashingConf Freiburg, Germany65 (Sep 11–12) and SmashingConf Barcelona, Spain66 (Oct 17–18). That — and we love cats, too.
SmashingConf Freiburg, Germany (Sep 11–12)
- SmashingConf Freiburg 2017 Tickets68, Sep 11–12
- Modular Design69 – Alla Kholmatova (September 13)
- Advanced CSS Layouts With Flexbox and CSS Grids70 – Rachel Andrew (September 13)
SmashingConf Barcelona, Spain (Oct 17–18)
- SmashingConf Barcelona 2017 Tickets72, Oct 17–18
- Reaching For Particles On The Web: Modular Design73 – Alla Kholmatova (October 16)
- Atomic Design: Process & Patterns74 – Brad Frost (October 16)
- Persuasive Design75 – Horace Dediu (October 16)
- New Front-End Adventures In Responsive Web Design76 – Vitaly Friedman (October 16)
- Concept, Create, And Sell!77 – Anton & Irene (October 19)
- How To Convince Clients And Colleagues The Right Way78 – Paul Boag (October 19)
- Advanced SVG Animation79 – Sarah Drasner (October 19)
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at email@example.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!
8111. New On Smashing Job Board
- Front-End Developer84 at 1&1 Mail & Media Applications SE (Munich, Germany)
“For our Scrum teams we are searching for a talented, passionate and self-motivated front-end developer for creating user friendly websites, with clean and well organized code.”
- PHP Developer85 at kmo (Brisbane, Australia)
“kmo is looking for a PHP developer with excellent PHP skills, source control experience, and the ability to integrate custom functionality with open source platforms.”
8612. Most Popular Articles On Smashing
- The Surprising Relationship Between Gamification And Modern Persuasion87
Dive deep into gamification, explore why it is a great tool for growth and learn how persuasion science (more precisely, the “mass interpersonal persuasion” phenomenon) proves that.
- Creating Custom Inputs With Vue.js88
Component-based libraries or frameworks such as Vue have given us the wonderful ability to create reusable components. Joseph Zimmerman explains how you can use Vue to create custom radio buttons and checkboxes.
- The iOS 10.3 Security Alert Is Killing App Store Downloads: Here’s How To Fix It89
As part of the iOS 10.3 release, Apple has introduced (yet) another redirection mechanism that developers must handle when attempting to implement mobile deep-link routing. This post examines the issue in detail and discusses solutions to fix it.
9013. Most Recent Articles On Smashing
- Designing The Perfect Feature Comparison Table91
When shopping online, users might need a bit of extra help to decide on a product. That’s where feature comparison tables come in. This article looks into all the fine details to make your next feature comparison table helpful and accessible.
- How To Work Out What To Charge Clients: The Honest Version92
Paul Boag shares his honest approach to working out what to charge clients for the work you deliever. A method that doesn’t use any complex value-based pricing formulas and that might sound inelegant at times — but, well, it has proved itself successful.
- Building A Simple AI Chatbot With Web Speech API And Node.js93
Learn to use the Web Speech API and Node.js to create an artificial intelligence voice chat interface in the browser. The app will listen to the user’s voice and reply with a synthetic voice.
- 1 #newsletter-issues
- 2 https://www.smashingmagazine.com/smashing-newsletter-issue-187/
- 3 https://www.smashingmagazine.com/smashing-newsletter-issue-186/
- 4 https://www.smashingmagazine.com/smashing-newsletter-issue-185/
- 5 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
- 6 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
- 7 https://www.smashingmagazine.com/smashing-newsletter-issue-182/
- 8 https://www.smashingmagazine.com/smashing-newsletter-issue-181/
- 9 https://www.smashingmagazine.com/smashing-newsletter-issue-180/
- 10 https://www.smashingmagazine.com/smashing-newsletter-issue-179/
- 11 https://www.smashingmagazine.com/smashing-newsletter-issue-178/
- 12 https://www.smashingmagazine.com/smashing-newsletter-issue-177/
- 13 https://www.smashingmagazine.com/smashing-newsletter-issue-176/
- 14 mailto:firstname.lastname@example.org
- 15 #a1
- 16 #a2
- 17 #a3
- 18 #a4
- 19 #a5
- 20 #a6
- 21 #a7
- 22 #a8
- 23 #a9
- 24 #a10
- 25 #a11
- 26 #a12
- 27 #
- 28 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
- 29 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
- 30 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
- 31 https://home.liebherr.com/en/ltu/products/household-appliances/floor-mounted-appliances-for-households/wine-cabinets/wine-cabinets.html
- 32 http://www.ecole-estienne.paris/ecole/presentation/
- 33 #
- 34 https://smashingconf.com/barcelona-2017/
- 35 https://smashingconf.com/barcelona-2017/
- 36 http://smashingconf.com/barcelona-2017/registration/
- 37 #
- 38 https://www.behance.net/gallery/55233053/Scaramella-Free-Font
- 39 https://www.behance.net/gallery/55233053/Scaramella-Free-Font
- 40 #
- 41 https://plat4m.com/blog/3-types-of-animations-that-improve-user-experience
- 42 https://plat4m.com/blog/3-types-of-animations-that-improve-user-experience
- 43 #
- 44 https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
- 45 https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
- 46 #
- 47 http://www.who.int/mediacentre/factsheets/fs352/en/
- 48 https://twitter.com/smashingmag/status/894844798456266752
- 49 https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
- 50 https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
- 51 #
- 52 https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/
- 53 https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/
- 54 https://diekus.net/logo-pwinter/
- 55 https://medium.com/samsung-internet-dev/we-now-have-a-community-approved-progressive-web-apps-logo-823f212f57c9
- 56 #
- 57 http://slides.com/sdrasner/svg-can-do-that#/
- 58 http://slides.com/sdrasner/svg-can-do-that#/119
- 59 https://codepen.io/nolakat/pen/mWNvdb
- 60 #
- 61 https://meowni.ca/posts/shadow-dom/
- 62 https://meowni.ca/posts/shadow-dom/
- 63 https://meowni.ca/posts/shadow-dom/
- 64 #
- 65 https://www.smashingconf.com
- 66 https://smashingconf.com/barcelona-2017/
- 67 https://smashingconf.com
- 68 https://shop.smashingmagazine.com/products/smashingconf-freiburg-2017
- 69 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
- 70 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
- 71 https://smashingconf.com/barcelona-2017/
- 72 https://shop.smashingmagazine.com/products/smashingconf-barcelona-2017
- 73 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
- 74 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
- 75 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
- 76 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
- 77 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
- 78 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
- 79 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
- 80 mailto:email@example.com
- 81 #
- 82 http://jobs.smashingmagazine.com/
- 84 https://jobs.smashingmagazine.com/j/Front-end-Developer-in-Munich/2503586
- 85 https://jobs.smashingmagazine.com/j/PHP-Developer/2503581
- 86 #
- 87 https://www.smashingmagazine.com/2017/08/relationship-gamification-modern-persuasion/
- 88 https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/
- 89 https://www.smashingmagazine.com/2017/08/fixing-ios-security-alert/
- 90 #
- 91 https://www.smashingmagazine.com/2017/08/designing-perfect-feature-comparison-table/
- 92 https://www.smashingmagazine.com/2017/08/what-to-charge-clients/
- 93 https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/