Menu Search
Jump to the content X X
Smashing Conf San Francisco

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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #103

This newsletter issue was sent out to 175,052 newsletter subscribers on Tuesday, February 18th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


It seems that we often tend to start caring about things only once they’ve disappeared instead of providing enough value to them every day, but I guess that’s just human nature. Personally, it makes me very sad to see fantastic websites, applications, conferences, tools and articles disappearing2, leaving no trace behind on the Web — good, great ideas that have been transformed into actual products not finding enough traction to survive in our fast-paced, success-driven industry.


There is always a good reason why an app has been taken down, or why the development or designer team has decided to focus on other, more important or less risky enterprises. Sometimes they get replaced by more focused alternatives, and perhaps that’s a good thing. But quite often they leave an empty room full of lost excitement, mislabeled forms and abandoned user profiles. That’s just how it is, but it doesn’t change the fact that it’s a sad state of affairs.

So why not take a minute of your time today to turn to your email client, write a short “thank you” message, and thank an owner of a service or a tool that you have been using for quite some time, to let them know that you appreciate their time and efforts, as well as their pull requests and their endless bug hunting nights. Without these people, the Web would be a much more silent and much less remarkable place, and that’s something we have to care about and value as we use those wonderful, enabling, time-saving services.

— Vitaly (@smashingmag)

Table of Contents

  1. Flipping 3D Countdown With CSS And JavaScript4
  2. User Interface Animations And Interactions5
  3. Did You Know, You Might Not Need jQuery?6
  4. Long Live Dingbats!7
  5. The Style Guide Is Your Friend8
  6. Speed Up Your Workflow With Sass/LESS Libraries9
  7. Your Data Belongs To You10
  8. Animation Meets Geometry And Typography11
  9. This Won’t Leave You Out In The Rain12
  10. Here’s An Animated Alphabet!13
  11. Beam Me Up, Futura!14
  12. Full-Day Smashing Workshops15

161. Flipping 3D Countdown With CSS And JavaScript

Let’s say you’re working on a website that requires you to implement a countdown on the front page. Perhaps it’s an online shop that plans to launch a new campaign soon, or perhaps a conference website on which tickets must go on sale at a specific time. How would you build it?

Flipping 3D Countdown With CSS And JavaScript

The Viget team has come up with a clever CSS/JavaScript technique that combines foreground and background count cards. Whenever necessary, it takes one of the following cards and hides it, while taking the opposite current card and flipping it forward towards the user. Once this has been done, some basic JavaScript is used to toggle the current state of cards. The code is available on Codepen17. And once again, another problem solved. (vf)

182. User Interface Animations And Interactions

When done properly, transitions and animations can draw users in and create a smooth, enjoyable experience. In fact more often than not, it’s not just about showing a change of state in interfaces but also explaining the purpose of a function or helping users out with clever hints and tips. Finding those nifty interactions isn’t easy though, so whenever a designer or developer dedicates time to collect them all in one place, that place is definitely worth bookmarking and coming back to.

User Interface Animations And Interactions19

With Use Your Interface20, UX designer Josh Davey has put together a library of “transitional” interaction design patterns that he has found. Six Ux21 is a similar resource containing transitions that last at six seconds, with lots of short animated GIFs showcasing the design patterns. If you’ve been looking for UI animations, make sure to visit UI Animations22, and you can also visit First Time UX23 and Onboarding UX Pinterest Board24 for examples of good onboarding. Now that should be enough for a while! And if you have a nice example to add, the owners of the sites would be more than happy to receive your submissions! (kv)

253. Did You Know, You Might Not Need jQuery?

Back in the good old days with good old browsers, JavaScript implementations across browsers were buggy and inconsistent, so jQuery was a godsend and almost unavoidable in any project. Times have changed now, and with a solid JavaScript implementation available in browsers these days, perhaps it’s time to rethink whether jQuery is really necessary as a default. So, if you’re developing a library for instance, you need to consider whether you actually need jQuery as a dependency. Or at the very least, you need to know what jQuery is doing for you26, and what it isn’t.

Did You Know, You Might Not Need jQuery?27

YouMightNotNeedjQuery.com28 was created by Adam Schwartz and Zack Bloom. The site features common interaction patterns — Ajax, Effects, Elements, Events and Utils — and shows how they are usually implemented with jQuery and how they could be implemented with plain vanilla JavaScript. You can also choose what’s the oldest version of IE you need to support and see what functions you need from jQuery and which isn’t. And if you do want to use jQuery, perhaps consider using the lighter jQuery 2.029 (IE9+ support) or just select the jQuery components you need with jQuery Builder30. (sh)

314. Long Live Dingbats!

When we think about dingbats, we probably think about those obscure system font symbols that are actually rarely used in practice, yet somehow find their way in local ads, school announcements and newspaper adverts. Formally, a dingbat is an ornament, character or spacer used in typesetting. Well, perhaps dingbats deserve a bit more credit after all.

Long Live Dingbats!32

Baynham Goredema from Johannesburg, South Africa, has created Haus Ethnik Dingbats33, a font which is basically a collection of motifs inspired from modifications on ethnic patterns derived from Zimbabwean material culture. Each character is a remarkable, beautiful pattern, with 26 uppercase characters and 26 lowercase characters and is available for free personal and commercial use. (vf)

345. The Style Guide Is Your Friend

In times when responsive design is a de-facto standard in Web design, not only our design and coding techniques change; so do the tools, communication, workflow and our deliverables. In fact, pattern libraries35 — a set of modules used on a website, with code snippets and usage notes — are often a part of the process, and frequently a part that helps speed up the workflow and keep the code clean and maintainable after the website has been released. Why? Because once a style guide is in place, it’s so difficult to make things wrong.

The Style Guide Is Your Friend36

Good examples of how a style guide could be organized is Code for America Style Guide37 and Yelp Styleguide38. They might look quite advanced and time consuming to build, but you can simply generate them on the fly out of your CSS and JavaScript code by using Barebones39, LivingStyleguide40, Styledocco41 or Kalei42.

How does it work? Well, all you need to do is simply write a description for important modules and functions right into your code as comments. These tools then grab the content of your comments and output the full pattern library for you. So whenever you change your code, the style guide will be updated right away as well. A good, simple way to ensure consistency and create a more future-friendly code base. (vf)

436. Speed Up Your Workflow With Sass/LESS Libraries

Everybody loves a good toolkit, but not as much as building their very own with tools that help them quickly start new projects and speed up their entire workflow. Preprocessors like LESS or Sass make it even easier to build complex sites, and with extensions built on top of them, front-end development is becoming more manageable every day. But wait, there are so many! How do you make sense of them all and select what works best for you?

Speed Up Your Workflow With Sass/LESS Libraries44

Chris Michel and Jared Hardy have released Sache45, a growing repository of Sass and Compass extensions. The entries are included from GitHub and categorized by tags. You can easily add your own Sass/Compass project by either adding the sache.json file to your public repository or by entering your project’s SSH clone URL. And if you find yourself using LESS instead of Sass, make sure to check LESS Hat46, a comprehensive library with 86 mixins. Also, how about trying to build your own toolkit and releasing it publicly? (ml)

477. Your Data Belongs To You

Most of us have already heard the news: two web services, bookmarking service Zootool and collaboration tool Editorially, have recently announced that they’re shutting down. They’re not the first ones to shut down, and they certainly won’t be the last ones. However, such cases remind us of the fact that any service could shut down any minute, and some may not even offer us the time to adjust and back up our data.

Your Data Belongs To You48

You may be one of those folks that look forward to seeing your personal nonsense finally leave those archives anyway, however, for some, there are tweets and posts that still hold valuable inofrmation that you have saved over the years. If you’d like to have a local backup of your data, you can use Google Takeout49, Facebook Archive50 and Twitter Archive51 — services that let you back up, archive and download all of your data in one nifty ZIP file. In fact, you can search through those archives much better than you can do online, and of course, this way you have everything stored in one place. (ml)

528. Animation Meets Geometry And Typography

Mix the relentless drive of a passionate artist with love for geometry and typography and what do we get? Typoly, of course, a beautiful free font created and designed by Kristian Kreaktive. This font was the result of a stormy night, and if you take a closer look at the animations, it isn’t that difficult to imagine how stormy that night must have been.

Animation Meets Geometry And Typography

Francis Ford Coppola, director of The Godfather, once said that risk is an essential element of art: “If you don’t take a risk then how are you going to make something really beautiful, that hasn’t been seen before?” Kristian seems to be a designer who lives this up: “I fail again and again because trying new things or pushing my own limits is what keeps me alive.” Make sure to visit Kristian’s portfolio which portrays a quite remarkable collection of his other artworks as well. (ea)

539. This Won’t Leave You Out In The Rain

What’s the first thing you do in the morning? You probably check your weather app and ask yourself whether you have to put on that warm sweater today, right? Given the fact that we’re all still quite sleepy and mostly in a rush while making all of these decisions, wouldn’t it be handy to get a little bit of help if possible? Well, hold your horses, here it comes: the What To Wear daily report.

This Won't Leave You Out In The Rain

Curated by Joshua Porter, a brief report is delivered to your inbox every morning. It contains a simple weather strip (“feels-like temperatures” also included), clothing recommendations to help you stay prepared for what the day might bring, and an extra section with additional information such as road conditions, advice on whether it’s a good idea to bike to work, and the best time to exercise. The service is available for Boston, New York, San Francisco, Chicago, and Seattle, and subscribing to it is free. Simple, yet brilliant! (cm)

5410. Here’s An Animated Alphabet!

Ever had the inkling to design your own drop cap? If so, well then you have to check out CSS A–Z55! Basically, it’s a set of animated sketches for each letter of the alphabet, created entirely using HTML and CSS. Just take a look at the lovely “E” for “Espresso”. There’s little that is quite as fitting to explain the life of a designer as their daily caffeine intake. A new letter animation is published as a new post regularly, and there are just a few days left!

Here's An Animated Alphabet!56

If you’re interested in how these letters and animations are made, you can check out each post to take a closer look at the code. The tools used are Keyframer57, jsfiddle58 and good-ol’ faithful pen and paper. Still keen to give it a go? Why not create your own interpretation of the alphabet? (sh)

5911. Beam Me Up, Futura!

Typography aficionados watch out for typography everywhere, even in places where others normally wouldn’t think of. For example, how about… the future? Dave Addey has recently started a blog dedicated to typography and iconography in sci-fi and fantasy movies: Typeset In The Future60.

Beam Me Up, Futura!61

Stanley Kubrick’s classic 2001: A Space Odyssey and Duncan Jones’ Moon are the first movies that Dave examined for every howsoever small snippet of typography — be it on the buttons of futuristic gadgetry, on the patches of spacesuits, or in the film opening credits. There’s quite a lot of research behind it, but Dave’s entertaining writing style makes reading the extensive analysis of the typographic bits and pieces anything but dry. The project is not only great fun, but also a fascinating example of how design can tell and shape stories. We’re definitely looking forward to seeing more! (cm)

6212. Full-Day Smashing Workshops

You’ve probably already been there: as a good design agency or a front-end team, you have many projects going on and you never really find the time to actually study new techniques, tools and alternative workflows for your work. You could encourage your designers and developers to attend conferences and meet-ups, but what about having an in-house workshop instead — a workshop tailored exactly to your needs?

Full-Day Smashing Workshops63

Well, that’s what we do as well. Beyond our regular workshops64, we also organize in-house workshops65 and help solve issues that designers and developers have been running into. Responsive design, advanced front-end techniques, performance optimization, UX — we’re quite flexible about the topics, the length and the format of the workshops.

If you’re interested, just get in touch with Vitaly at and briefly describe what problems you’d like to solve. Don’t worry about the costs either — we’ll find a fair price for sure. Yes, it’s that easy! (vf)

Credits for the image used in the editorial: Jon Ashcroft66

The authors in this newsletter are: Kristina Vogt (kv), Shavaughn Haack (sh), Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


  1. 1
  2. 2
  3. 3
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12 #a9
  13. 13 #a10
  14. 14 #a11
  15. 15 #a12
  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
  31. 31 #
  32. 32
  33. 33
  34. 34 #
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  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

↑ 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. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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