Menu Search
Jump to the content X X

The Smashing Email Newsletter

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.

Mailchimp Subscriber Count /

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.

If you’re looking for older issues of the Smashing Newsletter, we’ve prepared all of them in a downloadable ZIP file21 (226 MB) for you starting from Issue #14.

Last Newsletter Issue #184

This newsletter issue was sent out to 228,599 newsletter subscribers on Tuesday, June 20th 2017.


How do you manage unpredictability in your designs? What if customers’ names are too short or too lengthy, or images too wide or too small? Since we’re building flexible, responsive systems these days, our websites have to be reliable and resilient enough to manage unexpected content issues. That’s why design mock-ups need dynamic content22, and whenever we design, it’s a good idea to plug in text from Mandarin and German alongside English to see how our interface responds to them. In fact, there are many23 tools24 and25 plug-ins26 helping you with just that.


But what if you need something very specific? Let’s say, a list of airports, colleges, GPS coordinates, movies, names, songs, or even TV shows? In that case, you can use Lists.Design28, a growing repository of real data ready to be placed directly into your design. Besides, there are also a couple of simple CSS techniques to handle unexpectedly long or short content29, e.g. for long links or words inside a card or long article tags.

Usually, we just don’t know what content will be flowing into our beautifully crafted and built layouts, and by keeping a number of extreme cases in mind when designing, we can test and code just enough to make sure that things still work as expected in most cases — regardless of what comes our way.

Table of Contents

  1. The Spellbook Of Modern Web Development30
  2. Enter The Next Level Of Front-End31
  3. Building Flexbox + CSS Grid First!32
  4. Turn Sketch Files Into Shareable Prototypes33
  5. An HTML Audio Player For The Modern Era34
  6. Beautiful Demo Of Gif Masking In SVG35
  7. Accessibility Dos And Don’ts For Your Office Wall36
  8. Vintage Movie Poster Design Gems37
  9. Upcoming Smashing Workshops38
  10. New On Smashing Job Board39
  11. Smashing Highlights (From Our Archives)40
  12. Recent Articles On Smashing Magazine41

421. The Spellbook Of Modern Web Development

Web development is full of challenges. Not seldomly, we spend hours wracking our brains, trying to smash a bug or finally get to grips with that new technique everyone has been talking so much about lately. Don’t you sometimes wish there was something like a magic wand to assist you? You say your spell and (poof!) things work out just as you want them to? Well, we’re grown-ups and we all know that these kinds of things don’t exist. Or, do they?

Spellbook of Modern Web Dev43

There certainly is no magic wand to solve your web dev problems, but there is something that’s almost as good: the Spellbook of Modern Web Dev44. No kidding, Dexter Yang put it together. The spellbook (which lives in a GitHub repo) wants to provide the complete view angle of modern web development with JavaScript. So, to give you some extra power, it lists more than 2,000 links to projects, tools, plugins, services, articles, books, and sites that focus on the most frequent problems and the most commonly used stuff. Now disappear, you nasty bugs! (cm)

452. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!

The web is constantly changing. So, where can you learn the new best practices for design systems and how to optimize your websites’ performance? At SmashingConf Barcelona46 of course! We are returning to the magical Palau de la Música Catalana on October 17th and 18th with two packed days of hands-on, practical sessions by some of the most respected members of our industry.

SmashingConf Barcelona47

As always, the focus of the conference will be practical tips, techniques and strategies for front-end, UX and everything web-related. This might be the conference that will keep you inspired for quite some time — two full days, with networking activities and a diverse, versatile line-up. We’d love you to join us, you know. Tickets are now available48. See you there? ;-) (cm)

493. Building Flexbox + CSS Grid First!

How do you build CSS layouts these days? Would you build your components and the layout with floats and positioning first, and then enhance with Flexbox and CSS Grid Layout50? Or the other way around, building with Flexbox and CSS Grid Layout first, and providing a fallback to legacy browsers?


The answer to this question will (of course) depend on your browser support and the experience you choose to provide for legacy browsers. One thing is almost certain though; with Flexbox (for components) and Grid (for layout), you’ll usually get much faster to better results — inherently flexible layouts and shorter CSS. For this purpose, it’s useful to know the fallbacks you might want to provide for legacy browsers. Rachel Andrew published a list of CSS Grid “fallbacks” and overrides52 alongside grab & go patterns53 for layouts built with CSS Grid. Ah, and here are a couple of useful things to know about Flexbox54 which could be useful for debugging as well. (vf)

554. Turn Sketch Files Into Shareable Prototypes

Want to turn a Sketch file into a working and shareable prototype without leaving Sketch? Mirr.io56 makes it possible. The lightweight Sketch tool breathes some life into your static designs and lets you share them with just one click. A Sketch plugin combined with a desktop app preview tool makes it possible.


To add some motion to your Sketch file, comes with an integrated Events panel that makes it easy to apply events like transitions to layers and groups. You can also add a timer to an artboard, for example, which comes in especially handy for splash or loading screen animations. The preview itself works on any device and in any browser and updates live. Once you’re happy with your prototype, you can use a short URL to share the design with others. is free to download and doesn’t require any sign-up.

Ah, and a shameless plug, of course. These and many tips and tricks are part of the brand-new Sketch Web Guide58, written by Christian Krammer (author of our lovely Sketch Handbook59). The web guide takes you through every aspect of Sketch in 13 fully revised and updated chapters. To make learning as practical as possible, Christian created one main example project which you can follow along. The guide is constantly updated, too. (cm)

605. An HTML Audio Player For The Modern Era

When you want to embed audio on a website, there’s usually no getting around the default browser solution. AmplitudeJS61 now attempts to change that. The HTML audio player gives you full control over the design, and with only 9KB compressed, it’s super lightweight, too. An “audio player for the modern era”, as its makers describe it.


The tool lets you organize media into as many playlists as you like, supports live streams (native SoundCloud support is on board, too), and comes with advanced actions like shuffle and repeat. Did we mention that it’s touch-friendly, too? To use the player in your project, you only need to include a single line of code in the <head> of your HTML page and you’re good to go. Definitely worth checking out. (cm)

636. A Beautiful Demo Of GIF Masking In SVG

Now here comes a little something to leave you in awe (and to tinker with, of course): Sarah Drasner made a beautiful CodePen demo64 to show how masking in SVG on images with opacity can create stunning illumination and paint effects.

Gif masking in SVG65

If you’re looking for more experiments like this, also be sure to check out Yoksel’s rainbow bird66 which works similarly. (cm)

677. Accessibility Dos And Don’ts For Your Office Wall

Making sure that your design is usable and accessible for anyone is crucial, but what exactly are the needs of different groups of people? Did you know, for example, that users on the autistic spectrum could have issues with bright contrasting colors? Or that it can help dyslexic people if they can change the contrast between background and text?

Accessibility Posters68

To raise awareness for good design practice, an accessibility team at designed a series of six posters69 that show the five most important dos and don’ts to cater to users with low vision, hearing impairments, dyslexia, and motor disabilities, as well as users on the autistic spectrum and screen reader users. And, well, the dos that run across the posters are design principles that are applicable to anyone: good color contrasts, legible font sizes, and linear layouts. Great to print out and hang on the office walls! (cm)

708. Vintage Movie Poster Design Gems

You’ve got a sweet spot for movie poster design? Well, then we have a very special piece of eye candy for you that is sure to keep you busy quite a while (maybe even longer as you’d like it to): a delicious collection of thousands of rare and vintage film posters71 from all across the world.


The New York-based gallery Posteritati showcases its gems online, so you can browse through them to your heart’s content. No matter if you’re interested in posters of a certain genre, country, year, director, actor, or artist, the huge collection certainly has got you covered. And just like a good movie, it caters for some jaw-dropping moments, too: Among the exhibits, you’ll find an Argentinian King Kong poster from 1933, for example, that is for sale for a whopping $75,000. Popcorn, anyone? (cm)

739. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Smashing Public Workshops75

Workshops at SmashingConf Freiburg, Germany

Workshops at SmashingConf Barcelona, Spain

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.com88 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!

8910. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board90:

  • Technical Project Manager, Systems Engineering91 at American Institutes for Research (Washington)
    “We’re looking for a Technical Project Manager to join our team of more than a hundred software and system engineers, UI designers, project managers and software specialists who are smart, creative, and excited by what they do.”
  • Front-End Developer92 at Trimble Inc. (Boulder, CO)
    “We’re looking for a Front-End Developer who has broad experience from web design to site building and theming. You are interested in modern web development, have an eye for design and experience in backend development of content management systems.”
  • Senior Level Angular Developer – 8 Week Contract93 at DeBruce Foundation (USA)
    “We’re looking for an Angular Developer to assist us for the next 8 weeks in re-writing an application from WP to now an angular platform.”

9411. Smashing Highlights (From Our Archives)

  • How To Prepare For Front End Developer Interview Questions95

    Moving on from your current job or stepping out into the real world once you’ve completed your studies can be daunting. Taking time to do a little preparation goes a long long way.
  • Reviving A Historic Typeface96

    Typeface revivals are a virtually never-ending source of inspiration, as well as a good opportunity for graphic designers to learn some history. The similarities between this process and the work of palaeontologists when reconstructing the appearance of dinosaurs and other extinct animals from fossils are striking.
  • Why Transitions Are Important97

    Life and nature are one big transition. The sun slowly rises to mark a new day and then slowly sets to mark the end of the day and the beginning of night. We are created in the womb and from small cells we grow, are born and gradually age until we die. Perhaps these natural transitions in life are what make artificial transitions feel… well, right.

9812. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.


  1. 1 #newsletter-issues
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30 #a1
  31. 31 #a2
  32. 32 #a3
  33. 33 #a4
  34. 34 #a5
  35. 35 #a6
  36. 36 #a7
  37. 37 #a8
  38. 38 #a9
  39. 39 #a10
  40. 40 #a11
  41. 41 #a12
  42. 42 #
  43. 43
  44. 44
  45. 45 #
  46. 46
  47. 47
  48. 48
  49. 49 #
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55 #
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60 #
  61. 61
  62. 62
  63. 63 #
  64. 64
  65. 65
  66. 66
  67. 67 #
  68. 68
  69. 69
  70. 70 #
  71. 71
  72. 72
  73. 73 #
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89 #
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94 #
  95. 95
  96. 96
  97. 97
  98. 98 #
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107

↑ 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!

  1. 1

    I’ll subscribe

  2. 2

    Nice and useful!

  3. 3

    done deal.

  4. 4

    Rudra Ganguly

    April 21, 2010 6:19 am


  5. 5

    I’m there :)

  6. 6


    May 17, 2010 4:32 am

    have subscribed…. now let’s see…. how useful is it? I’ll be patient…

  7. 7

    It is really awesome to have all these issue. I am enjoying a lot, thank you very… very much.

  8. 8

    Richard Diamond

    June 5, 2010 4:38 am

    I am trying to subscribe to your newsletter which was forwarded to me by a friend. You need to “confirm my address by having me click on the link in the email you just sent me”, but that is not clear, and does not seem to work for me. Can you help?
    Thank you.

    • 9

      Vitaly Friedman

      June 27, 2010 4:22 am

      Exactly. You should receive an e-mail with a confimation link. Once you clicked on it, your subscription will be confirmed and you will receive the next issue of the newsletter.

  9. 10

    Of course !! :)

  10. 11

    One of my favourite newsletters. I look forward to it every fortnight!

    Keep it up guys :)

  11. 12

    thank you for being so useful, cheers :)

  12. 13

    I like it a lot, so much so I forward your recent newsletter to a couple of friends who I’m sure will sign up for it also!

  13. 14

    Smashing is one of the best magazine i have ever come across. Thanks, i lyk it guys.

  14. 15

    I just found out about this and I’m so excited! Thanks.

  15. 16

    Yay, Subscription Confirmed! :D

  16. 17

    Speaking of good design, enjoyed the article, but it’s not easy to print. You may want to think of having a print icon at the top and bottom of the article/ print friendly version that doesn’t include the comments. Great work on the content though.

  17. 18

    Subscription done..You are really good to miss out..:)

  18. 19

    On holidays at the moment and stumbled over your website while reading up on colour theory it’s fantastic thank you! Cheers

  19. 20

    im in here do smash me :d

  20. 21

    I’ve read many of your articles and I like the way they’re written and the info provided and that is the reason I am subscribing.

    Thanks! :)

  21. 22

    Oh, I always thought it’s just another way of receiving your blog articles. Good to know that the newsletter contains exclusive information! :)


  22. 23

    I find newsletters useful and generally interesting. They are a way to go beyond my inbred work inviornment.

  23. 24

    I’m happy to be here today, I had no idea that you guys sent out a newsletter! Now I’m a grateful subscriber.

  24. 25

    i am a regular visitor of Smashing MAG and i love it like anything. It acts as a supplement to my creative thrust. Although i have zillions of ideas bouncing inside my gray head, most of them are quenched and remaining pondering for something more. So i always want to be in touch with SM…. u ROCK!!!!….

  25. 26

    Great Work Guys but, Please keep the Subscribe option in an easily locatable place. I spent 10 Mins to find it.

  26. 27

    Exceptional straight forward subscription process. Also, sharing the .vcf is a great idea to forestall false-positive SPAM. Looking forward to you next issue, thanks!

  27. 28

    Its odd that I missed the last two edition, issue 35 and 36. Can you guys check my subscription status. My email is the one i used for this very comment.

    Thank you.

    • 29

      Vitaly Friedman

      July 4, 2011 11:06 pm

      Hi Joe,

      The status is perfectly fine. Perhaps your mail server marks our emails as “spam”? Could you please double-check it? Please make sure that our newsletters are whitelisted!


  28. 30

    Javier Gomez VE

    July 16, 2011 7:59 am


  29. 31

    Every single newsletter beats its reader count from the one before … amazing.

  30. 32

    Love your creativity, will follow through. Thumbs up!

  31. 33

    I love how well they express their ideas! geek ever!

  32. 34

    Strange for such an excellent site and webdeveloper-oriented bunch of geeks to have such an appalling email-signup process… ever heard of Campaign Monitor, guys?
    Just kiddin. I’m quite busy tuning MailChimp myself for some clients and it is a bit daunting to say the least. Didn’t expect to see default stuff coming from Smashing Mag though.

    cheers Peter Emil

  33. 35

    You guys just passed the 100k subscribers mark.

  34. 36


  35. 37

    you are a super team!!! great work!!!!

  36. 38

    Landon Cahow

    March 9, 2012 4:36 pm

    I’ve been subscribed to the Smashing Email Newsletter for a while now, it’s always full of great info and I look forward to getting it every time.

    Keep up the good work guys!

  37. 39

    Stefan Hansel

    April 23, 2012 9:40 pm

    Thanks for the great magazine! I’ve been reading your articles for a long time. And the Smashing Network has been a great resource too. Where has it gone?

  38. 40

    Dear Smashing Magazine , i can’t find anymore the smashing Network section !!! is it canceled ?

    Thanks in advance

    • 41

      You “have” to subscribe to get back into the network, still cant find a way round it.

      I am on my work PC, having already subscribed at home, seems like I cannot get into the network without re-subscribing….

      The smashing newsletter is great but I do not agree with the, seemingly, forceful way of gaining subscribers.

  39. 42

    Werner Swiegers

    April 26, 2012 11:33 am

    Yeah, what happened to the smashing network?

  40. 43

    Subscribed :)
    Got your Tweet

  41. 44

    Is there a way to update the emails for the subscription, I want to reroute the old email address and replace it with a new email address. The “cancel your subscription” link is not working today.

    Also is there a way get the older newsletters resent mailed, to your re-confirmed new address, just found I missed a few when they changed the work spam filters, I want the complete set in my mailbox. The newsletters are that great.

    • 45

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      December 18, 2012 3:29 pm

      The “cancel your subscription” link is actually working. Could you please try again, Eric? Thanks for your kind words!

  42. 46

    wow, looking at this list I realise just how many newsletters there have been! I signed up for the very first newsletter and have had them coming to my inbox for more than 2 years. How time flies!

    Always looking forward to the next newsletter, good stuff!

    ~ Steven Noble
    Graphics Cove

  43. 47

    done :D

  44. 48

    Heather Slabosz

    May 4, 2013 8:38 pm

    I was interested in receiving your newsletter (that I just signed up for) on this kindle fire (which I have not purchased yet) Is that possible? I will definitely not be running a data plan with it. I would just like to download to the kindle and read from there.

    I understand I can purchase the ebooks and use them on my kindle – but I am wondering if I can do the same with your newsletter.

    Much thanks, Heather

  45. 49

    How can i get regular update on activities, is there any subscribtion ?

  46. 50

    I’m trying to subscribe. I’m being sent to a wordpress login page for your domain which states that “this plugin is already installed” when i enter my email and hit the subscribe button

    • 51

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      July 26, 2013 1:05 am

      It must have been a temporary issue! Please try again, Meag!

  47. 52

    3 words, count me in.

  48. 53

    Let’s say we have an interesting article to share, could we post it for review somewhere?
    Would be nice to have to people read or opinion and tips / tricks.

  49. 54

    Jose Almonte

    March 21, 2014 6:46 pm

    I was jsut looking for some pdf books and free templates to practice what i´m learning about Semantic Web, SEO, HTML5, CSS, Prototyping, Responsive Web Design and i´m sure i´ve came to the right place.

    Thanks for sharing this wonderful content. Best regards to all.

  50. 55

    I’m surprised I can’t find anything on this! Any chance to subscribe to your newsletter by RSS?

  51. 60

    Hello, I downloaded your WP theme, but I have a problem with it. WordPress said that there is no style.css stylesheet
    Where can I get it?

    Kind regards Judith

  52. 61

    This is great! Thanks!

  53. 62

    Fakultet Gashi

    March 18, 2016 8:02 pm


    I can’t find any text about using your data on other websites. I’m gonna create a website and I want to use some of your articles. Can I do that or not ?


  54. 63

    Renata Jourdan

    June 26, 2016 8:16 pm

    Please!!! When can we have workshops in Lisbon!! :)


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top