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: New Year’s Special Edition

This newsletter issue was sent out to 171,501 newsletter subscribers on Tuesday, December 31st 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


It’s the same story every single year. As Christmas and New Year’s Eve approach us, the email flow slows down, autoresponders are turned on and tweets get filled up with weird Unicode characters, accompanied by uppercase and exclamation marks. This time of year feels a bit like magic (both outside and inside), and you find yourself turning up the music while you experiment with new techniques and tools, and dive into all the wonderful articles you’ve bookmarked over the months.


This time is an empowering, magical time in which you learn a lot, and get excited to jump into the new year with an overwhelming anticipation to put all of these techniques into practice. Well, at least that’s how it works for us. We decided to prepare an unscheduled special New Year’s edition of the Smashing newsletter, in which we share with you some useful tricks, techniques and tools that we’ve (re)discovered over the last couple of days. No ads, no plugs, nothing you don’t need—nada. Just the things we’ve learned, and hope they’ll prove quite useful for you, too.

Happy reading, happy learning and happy celebrating tonight! And don’t forget to make a truly smashing wish between the years—they always come true, you know.

— Vitaly (@smashingmag)

Table of Contents

  1. Don’t Forget The Little Things3
  2. Turbocharging Your Sublime With Useful Plugins4
  3. Exporting Vector Layers From Photoshop Into SVG5
  4. User Interface Names And Avatars For Your Mock-Ups6
  5. Deferring JavaScript After The Load, The Easy Way7
  6. Unicode Browser Support Table8
  7. Exploring Shapes For Design9
  8. Thanks For Being Smashing!10

1. Don’t Forget The Little Things

It’s almost 2014 and it’s time we all double-checked our assets to make sure that everything is well prepared for the new year. When was the last time you updated your email signature? Perhaps you changed your specialization, or you just moved to a new area with a new phone number? What about the copyright date? Résumé in need of a refresh? Perhaps some CSS3 code snippets don’t need vendor prefixes any longer? Templates? Pull requests? Backups? Passwords? And let’s not forget about invoice reminders and your own workstation!

Don't Forget The Little Things11

Feeling lost now? Good. Because we have a comprehensive list of little things to do before the new year12, containing everything you might want to keep in mind before the new year. Handy? You bet. Now let’s take care of those little things before the party starts! (vf)

2. Turbocharging Your Sublime With Useful Plugins

In the end, it’s all about a good workflow, isn’t it? Having just the right tools for specific tasks—the tools that empower you to get things done quickly and avoid repetitive tasks—can make quite a difference. So, if you have a couple of slow hours during the holidays, it’s probably worth looking into your text editing workflow and improving it a bit. Here’s how:

Turbocharging Your Sublime With Useful Plugins13

For example, if you tend to use Sublime Text a lot, you probably have mastered its keyboard shortcuts by now, i.e. file switching (cmd+p), switching projects (cmd+alt+p), opening preferences (cmd+,) and even finding a certain term and then selecting them all for multi-editing (cmd+f, then alt+enter). There are many other Sublime shortcuts14 and useful Sublime plugins and extensions15, such as Clipboard History Plugin16, SideBarEnhancements17 and Emmet18 that will prove quite useful. And let’s not forget about Spacegray19, a clean UI theme for more comfortable typing. Now, if this won’t set you on the right path for the upcoming year, what will? (vf)

3. Exporting Vector Layers From Photoshop Into SVG

Illustrator or Sketch are convenient tools for drawing illustrations, but what if you received a deliverable with shapes or illustrations embedded into the PSD file? Slicing SVGs one by one is no fun, so what about having a little script that will save you some time and headache along the way?

Exporting Vector Layers From Photoshop Into SVG20

Export PS layers to SVG21 is a little Photoshop script that lets you export your vector layers from PS to SVG with one single click. Once activated, the script exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute—assuming that Illustrator is available as well. The script only works on vector layers, and not on groups of layers. You have to subscribe to a weekly newsletter to receive it though. It might be worth it. (vf)

4. User Interface Names And Avatars For Your Mock-Ups

We’ve all been there: to provide a prototype more context, we usually prefer to avoid lorem ipsum and lifeless default profile pictures, and so we go ahead and grab images and random names from Facebook, Twitter or any blogs that we find ourselves visiting a lot. However, there’s a much better and easier way to give that prototype exactly what it needs.

User Interface Names And Avatars For Your Mock-Ups22

UI Faces lets you grab sample avatars for your prototypes, personas or even live websites. And if you need an appropriate name, you can use UI Names23 to generate male and/or female names with a single click. No more searching, and no more clever names that may sound a bit weird to your stakeholders. (vf)

5. Deferring JavaScript After The Load, The Easy Way

Since CSS and JavaScript block any rendering of a page, it’s good practice to deliver HTML and CSS to the users as soon as possible, and specifically defer loading of secondary JavaScripts to the time after the page has been fully loaded and rendered. Well, we could use async and defer, but they actually won’t let the HTML+CSS load and render first, and load JavaScript later. We could inline the code into the page, and probably put it at the bottom of the page, but then the scripts would still have to be loaded before the page gets rendered.

Deferring JavaScript After The Load, The Easy Way24

Google’s JavaScript defer loading technique25 defers the loading until the onLoad event has fired (this is the idea that The Guardian uses as well) and loads JavaScript afterwards. To get a better understanding about the page load, make sure to read an article on how JavaScript loading works, what the critical rendering path26 in browsers looks like or Ilya Grigorik’s talk27 on this very issue. No rocket science, but clean and simple. Wouldn’t it be nice if WordPress, Joomla and Drupal loaded all secondary JavaScripts this way by default? (vf)

6. Unicode Browser Support Table

Unicode symbols are tricky beasts. They are useful and convenient, and can reduce the overhead of downloading an extra icon font or rendering an extra SVG shape, but Unicode support varies significantly among browsers. So what if your icon font doesn’t load and your Unicode character fallback isn’t displayed in the browser? If your users can’t see an icon at all, then the functionality might as well be non-existent. This is unacceptable.

Unicode Browser Support Table28

With Unify29, John Holt Ripley tirelessly collects data in regards to the support of Unicode characters tested on 77 devices. For example, if you’re using the 3 horizontal line “burger” icon for your navigation, it’s better to use 2261 (≡) with the 95% device support. Also, don’t forget that using the private use area of the unicode range might trigger IE8 into compatibility mode30. (vf)

7. Exploring Shapes For Design

Do you have a favorite… shape? Perhaps a rectangle (with CSS, we all are rectangle artists to some extent, aren’t we?), or maybe a rounded rectangle with a specific border-radius (0.5em?), or perhaps a more advanced SVG shape that you’ve used in your portfolio? Usually, we choose convenient shapes to create a design that works within a given context, but have you tried to challenge yourself to play with more unusual shapes?

Exploring Shapes For Design31

For It’s A Shape Christmas32, designers were given a “shape” to illustrate or animate using the Christmas theme. In the end, the result is a galore of unique designs playing with 5 different shapes, starting with a simple triangle and ending with a hexagon. The designs can be re-ordered by the shape and the designer. A great, and a beautiful source for looking beyond the more traditional shapes that we perhaps have got used to in our projects.

Ah, and if you’re a huge fan of shapes, well, perhaps you could consider following @DailyRectangle33 and @Daily_Blob34 on Twitter for daily inspiration of various shades of colors and blobs. (vf)

8. Thanks For Being Smashing!

For us, this year has been quite overwhelming and busy, yet we can’t be happier and more proud with the outcome. And of course, you have played a major part in it all, dear Smashing reader, and it wouldn’t have been possible without you. We appreciate your kind support from the very bottom of our hearts. You are smashing, and you should know that.

Thanks For Being Smashing!35

Two simple words can mean so much. They don’t take more than a short-lived breath of air to say and can be written in a couple of seconds. But they mean the world to us. Because you mean the world to us:

“Thank you.”

The authors in this newsletter issue are: Vitaly Friedman (vf), Iris Lješnjanin (il), Christiane Rosenberger (research), Elja Friedman (tools).

Editorial Image credits: Open Source Way36 (1) | Open Source Way37 (2)


  1. 1
  2. 2
  3. 3 #a1
  4. 4 #a2
  5. 5 #a3
  6. 6 #a4
  7. 7 #a5
  8. 8 #a6
  9. 9 #a7
  10. 10 #a8
  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
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37

↑ 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 am surprised at your article “Don’t Forget The Little Things” (or at least the article it linked to: “Don’t Forget The Small Stuff This Year”). While some of the information is very good, the article itself has many errors, not to mention it’s three (almost four) years old. Many of the links either don’t work, point to outdated information or link to sites that no longer exist. Also, when I clicked on the link to the “Smashing Newsletter”, the heading shows a date of January 28th, 2010. Perhaps the New Year celebrations started a bit too early? (Maybe taking your own advice would have helped solve these issues.)

    • 2

      Vitaly Friedman

      December 31, 2013 9:09 pm

      Thanks for your comment, Lee. The point of linking to the article was bringing your attention to the little details that are often forgotten. I hope we managed to do just that. The article is old, but again we just can’t update every single article from our archive. Sorry about that.

      The date on the “Smashing Newsletter” link is correct because this is the date when we published the newsletter page and when we started sending out newsletters.

      Actualy we’ve been taking our own advice all these days — it’s very sad to see that you haven’t noticed any changes on the site. But hey — no worries, happy new year, and all the best in your future endeavours next years to come! ;-)

      • 3

        Thanks, Vitaly, but it doesn’t make sense to post the date you started something unless you make it clear, like: “Established …” or something like that. Otherwise, it looks out of date.

        Yes, I understand you can’t rewrite and update every post but you just stated “The point of linking to the article was bringing your attention to the little details that are often forgotten,” yet you seem to have broken many of the little details that you mentioned, not counting basic online editing (e.g., making sure links work). If you wanted to make the point in the article it would have only taken a small amount of time to update the article and check a few links. I never said I didn’t notice any of the changes on your site. My comment as directed to an article you highlighted in your newsletter. Your site is very professional and I read it all the time. However, instances like this should be an embarrassment to you, not an opportunity to explain it away.

        Oh well, have a great new year.


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