Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Smashing Newsletter: Issue #188

This newsletter issue was sent out to 227,450 recipients newsletter subscribers on Tuesday, August 15th 2017.

Editorial

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!
Vitaly (@smashingmag)

Table of Contents

  1. Better Breadcrumbs The Scotch Egg Way1
  2. Ready To Master New Challenges? SmashingConf Barcelona Is Coming!2
  3. Freebie: Scaramella, A Typeface With A Story3
  4. A Way Forward To More Meaningful Animations4
  5. Flexbox And Grid Explained For Designers5
  6. A Video Podcast To Learn Accessibility6
  7. Safari About To Support Service Workers7
  8. Style Encapsulation With Shadow DOM8
  9. Upcoming Smashing Workshops9
  10. New On Smashing Job Board10
  11. Popular Articles On Smashing11
  12. Most Recent Articles On Smashing12

131. 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.

Breadcrumb Navigation14

As Andy Beaumont points out15, static breadcrumb menus often prevent users from finding something that is on the same level as an already open level. The solution: Scotch Egg Navigation16. 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 Liebherr17, or the navigation on the site of the Parisian-based school École Estienne18. (cm)

192. 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 Barcelona20 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.

SmashingConf Barcelona21

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!22 (cm)

233. 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, Scaramella24 was designed by Brazil-based designer Camilla Scaramella whose family name was passed down to her by two generations of women.

Scaramella25

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)

264. 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.

3 Types Of Animations That Improve The User Experience27

To help us gain a better understanding of when animation makes sense, Roman Kalina summarized the three types of animation that actually bring benefits28 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)

295. 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.

Designer’s Guide to Flexbox and Grid30

But no worries, Jon Yablonski’s “Designer’s Guide to Flexbox and Grid31” 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)

326. A Video Podcast To Learn Accessibility

According to the WHO, over a billion people have some form of disability33 — 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 it34. If you want to broaden your knowledge on accessibility, the Chrome Developers video podcast35 hosted by Rob Dodson is a good place to start.

A11ycasts36

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)

377. 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.

Apple Starts Work on Progressive Web Apps38

Does that mean that Apple will fully support PWAs? Jason Grigsby points out that it’s too early to tell39 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.

Speaking of PWAs, did you know that there’s a community-approved logo for them40 now? Peter O’Shaughnessy shares more details41 about how it came to be. (cm)

428. 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?!43” 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.

SVG Can Do That?44

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 slider45 uses SVG to paint women of the 20th century. Stunning! (cm)

469. 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 argues47.

Shadow DOM48

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 post49. Watch out, though: Since Shadow DOM is still a relatively new spec, older browsers might need a polyfill. (cm)

5010. 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, Germany51 (Sep 11–12) and SmashingConf Barcelona, Spain52 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201753

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201757

SmashingConf Barcelona, Spain (Oct 17–18)

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com66 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!

6711. New On Smashing Job Board

Here are some of the most recent job openings at Smashing Jobs68:

  • Javascript Expert69 at Yugen (Anywhere)
    “We are looking to hire a Javascript expert with canvas and 2.5/3d graphics experience and single page application experience.”
  • Front-End Developer70 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 Developer71 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.”

7212. Most Popular Articles On Smashing

7613. Most Recent Articles On Smashing

  • Designing The Perfect Feature Comparison Table77
    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 Version78
    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.js79
    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.

Footnotes

  1. 1 #a1
  2. 2 #a2
  3. 3 #a3
  4. 4 #a4
  5. 5 #a5
  6. 6 #a6
  7. 7 #a7
  8. 8 #a8
  9. 9 #a9
  10. 10 #a10
  11. 11 #a11
  12. 12 #a12
  13. 13 #
  14. 14 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
  15. 15 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
  16. 16 http://blog.andybeaumont.com/post/6534021484/scotch-egg-navigation
  17. 17 https://home.liebherr.com/en/ltu/products/household-appliances/floor-mounted-appliances-for-households/wine-cabinets/wine-cabinets.html
  18. 18 http://www.ecole-estienne.paris/ecole/presentation/
  19. 19 #
  20. 20 https://smashingconf.com/barcelona-2017/
  21. 21 https://smashingconf.com/barcelona-2017/
  22. 22 http://smashingconf.com/barcelona-2017/registration/
  23. 23 #
  24. 24 https://www.behance.net/gallery/55233053/Scaramella-Free-Font
  25. 25 https://www.behance.net/gallery/55233053/Scaramella-Free-Font
  26. 26 #
  27. 27 https://plat4m.com/blog/3-types-of-animations-that-improve-user-experience
  28. 28 https://plat4m.com/blog/3-types-of-animations-that-improve-user-experience
  29. 29 #
  30. 30 https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
  31. 31 https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
  32. 32 #
  33. 33 http://www.who.int/mediacentre/factsheets/fs352/en/
  34. 34 https://twitter.com/smashingmag/status/894844798456266752
  35. 35 https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
  36. 36 https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
  37. 37 #
  38. 38 https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/
  39. 39 https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/
  40. 40 https://diekus.net/logo-pwinter/
  41. 41 https://medium.com/samsung-internet-dev/we-now-have-a-community-approved-progressive-web-apps-logo-823f212f57c9
  42. 42 #
  43. 43 http://slides.com/sdrasner/svg-can-do-that#/
  44. 44 http://slides.com/sdrasner/svg-can-do-that#/119
  45. 45 https://codepen.io/nolakat/pen/mWNvdb
  46. 46 #
  47. 47 https://meowni.ca/posts/shadow-dom/
  48. 48 https://meowni.ca/posts/shadow-dom/
  49. 49 https://meowni.ca/posts/shadow-dom/
  50. 50 #
  51. 51 https://www.smashingconf.com
  52. 52 https://smashingconf.com/barcelona-2017/
  53. 53 https://smashingconf.com
  54. 54 https://shop.smashingmagazine.com/products/smashingconf-freiburg-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  57. 57 https://smashingconf.com/barcelona-2017/
  58. 58 https://shop.smashingmagazine.com/products/smashingconf-barcelona-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
  64. 64 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
  65. 65 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
  66. 66 mailto:vitaly@smashingconf.com
  67. 67 #
  68. 68 http://jobs.smashingmagazine.com/
  69. 69 https://jobs.smashingmagazine.com/j/Javascript-Expert/2503588
  70. 70 https://jobs.smashingmagazine.com/j/Front-end-Developer-in-Munich/2503586
  71. 71 https://jobs.smashingmagazine.com/j/PHP-Developer/2503581
  72. 72 #
  73. 73 https://www.smashingmagazine.com/2017/08/relationship-gamification-modern-persuasion/
  74. 74 https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/
  75. 75 https://www.smashingmagazine.com/2017/08/fixing-ios-security-alert/
  76. 76 #
  77. 77 https://www.smashingmagazine.com/2017/08/designing-perfect-feature-comparison-table/
  78. 78 https://www.smashingmagazine.com/2017/08/what-to-charge-clients/
  79. 79 https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top