Smashing Newsletter: Issue #109

This newsletter issue was sent out to 180,037 newsletter subscribers on Tuesday, May 20th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Performance matters, and so does typography. When we redesigned Smashing Magazine back in 2012, we cared a lot about creating a consistent, well-crafted and unique typographic experience that would work well and remain “stable” among screen resolutions and devices. However, with two (subsetted) typefaces totalling up to six fonts (Regular, Bold and Italic), we ended up with a quite sizeable amount of web fonts that had to be downloaded to render the website.

Editorial

Unfortunately, this hurt performance. Obviously, as it always is with web fonts, you want to prevent a frequent FOUT, but you also don’t want to download fonts the entire time. Furthermore, you don’t want to keep sending HTTP requests to Fontdeck or Typekit, and you wouldn’t want to block content from rendering while web fonts are still being downloaded. For some time, our readers kept seeing shiny underlines that displayed links on the page, and the text would remain entirely invisible until all of the web fonts had been fully downloaded.

Over the last few weeks, we’ve been experimenting a lot with web fonts and what we can do to improve performance. We’re currently embedding WOFF files by using Base64 encoding in a separate CSS stylesheet, that loads the stylesheet onLoad once the page starts rendering, and then stores the fonts in localStorage so the web fonts are always be pulled from localStorage once they are cached. As a result, the first load may take some time (although the page would start to render quickly), but subsequent loads are bound to be much faster.

We are planning to publish a short article about our findings with stats and comparisons of what we’ve encountered during this process. If you happen to discover any issues or problems while browsing through Smashing Magazine this week, please feel free to share your feedback on Twitter via @smashingmag or get in touch with us directly. And if you’ve experienced and learned something new about web fonts in your own projects, please do share your insights using #smfonts2 — we’d love to collect, mention and share them in the upcoming article very soon!

Cheers from the Düsseldorf’s Beyond Tellerrand conference,
— Vitaly (@smashingmag)

Table of Contents

01. Getting Content For Prototyping, The Easy Way3
02. Free HTML5 Templates For Your Toolbox4
03. Icon Freebies: Payment Icons and Ocean Explorers5
04. Why Complicate Things When They Can Be So Simple?6
05. Breaking News At 1000ms7
06. 99% Invisible: A Little Radio Gem8
07. PourOver: A Client-Side Solution For Fast Filtering And Sorting9
08. Hand-Picked Screencasts For Developers10
09. Comparing Costs In Cities11
10. Full-Day Smashing Workshops12

131. Getting Content For Prototyping, The Easy Way

So you’ve developed a brilliant new app and testing day has arrived… booo! One of the first things you’d probably want to figure out is whether your app’s database is ready to be bombed with tons of data, because that is exactly what will happen. So how do you get your test data? Well, you’ll have to enter everything manually. No, of course not. No one would want to go through such pain. But even if you didn’t have another choice, doing so might leave important bugs undiscovered. The bottom line is that you need realistic data, but where (and how) can you get it from?

Getting Content For Prototyping, The Easy Way14

Well, luckily for you, there are some inventive solutions available to help you easily create mock data. For example, the Sketch app plugin15 allows you to quickly create dummy content such as avatars, names, text and geo location data. (If you haven’t tried Sketch yet but would like to hear why it’s cool, read this16.) The plugin is free and was developed by Timur Carpeev who credits it to four content creator tools you’ll simply love just as much: Unsplash17, ui Faces18, uinames19 and mockaroo20. If you’re more into Photoshop, Kaku21 is a simple Photoshop plugin that helps you translate your text layers into a different language. Useful? Absolutely! (ea)

222. Free HTML5 Templates For Your Toolbox

As you know, every web project is different. One crucial aspect of being able to stay affordable and efficient at your work is to reuse some components that are similar throughout all the projects (e.g. setting up media queries, mix-ins, grid etc.). That’s why we all have a collection of boilerplate templates or components that can be reused for future projects. You know, a toolbox that you can constantly update with new techniques, snippets and templates.

Free HTML5 Templates For Your Toolbox23

Well, you can now save even more time by reusing some of the solutions that others kindly offer for free. HTML5 Up24, for example, offers a handful of fully responsive templates which are customizable and freely available under a CC license. Blacktie25 is another service that offers general templates but also themes for various CMS — also freely available under a CC license. Last but not least, there is Get Template26 which provides everything you need to create a lovely “Coming Soon” page in minutes, or start prototyping really quickly until you find time to give it a proper spin. (ml)

273. Icon Freebies: Payment Icons and Ocean Explorers

Everybody loves icons. While some icon sets out there are plain practical, others resemble tiny works of art. One of these little masterpieces took our hearts by storm and it will probably take yours too: Guillaume Kurkdjian’s maritime-themed icons28 — think boats, squids, harpoons and buoys. With their flat, unicolored looks, they are summery light and anything but kitschy. You can download the icons for free, however, please understand that they have to be purchased for use in commercial projects.

Icon Freebies: Payment Icons and Ocean Explorers29

You were hoping for something that is, well, more suitable for daily use? How about Orlando TM Merone’s Payment Webfont30 then? The icon set consists of 34 SVG glyphs of payment provider logos and is sure to come in handy in your next e-commerce project. Apart from major credit card providers, it also includes less frequent payment options such as Bitcoin and Google Wallet and some country-specific alternatives. Nice! (cm)

314. Why Complicate Things When They Can Be So Simple?

Libraries are great because they provide us with well-tested, reliable solutions that take good care of legacy browsers so we don’t have to deal with them. However, quite often they could be an overkill, delaying loading of the website and increasing the work that browsers have to do to deliver a page. You may not need jQuery32, but then again, you should be aware of all the useful workarounds and bugfixes33 that jQuery provides. In fact, the same goes for commonly used libraries like Modernizr, too.

Why Complicate Things When They Can Be So Simple?34

For example, when it comes to SVG fallback (PNG), you don’t really need Modernizr for it because you can use clever35 tricks36 to deliver PNG to legacy browsers with just a few extra lines of CSS (no JavaScript required at all). The Guide To Using Modernizr Responsibly37 by Paul Irish provides a few pointers that you might want to be aware of when using Modernizr and common situations such as serving HTML5 elements in IE8, using styling hooks, using a JavaScript API, or none of them. A good quick guide that is definitely worth your time. (vf)

385. Breaking News At 1000ms

The web used to be all about flashy and shiny features that excited the users as well as the clients. Nowadays, the trend is shifting to minimalism and the focus has moved to accessible content and fast performance. Most of all, news magazines are constantly working on finding the best (and fastest) way to load content.

Breaking News At 1000ms39

Breaking news at 1000ms40” is a speaker deck prepared by Patrick Hamann which introduces how The Guardian has managed to ultimately provide their users the latest news under a second. The slides include details on what the common performance bottlenecks within the browsers are, and how the Guardian team has optimized and monitored each stage of the critical path to create fast, jank-free websites. (ml)

416. 99% Invisible: A Little Radio Gem

Have you ever heard of the “driveway moment”? It’s when a story on the radio is so good that you can’t leave your car although you’ve already reached your destination. Every radio producer aspires to create special moments like these. Moments that let us indulge completely into the story and forget about time. A little radio show that masters this special skill perfectly is 99% Invisible42.

99% Invisible: A Little Radio Gem43

99% Invisible is about design, architecture and, as its creator Roman Mars describes, “the 99% invisible activity that shapes our world”. This does not only sound promising, the show really is a little gem and a pleasure to listen to. The stories are told with a special love for detail and have their very own signature style — varied and exceptional. The production is completely independent and with currently 114 episodes available (new ones are being released every 10 to 14 days) already well established. If you haven’t already, make sure to tune in, you’ll be hooked — just like we are. (cm)

447. PourOver: A Client-Side Solution For Fast Filtering And Sorting

Filtering, sorting and selecting from a large collection such as an archive or a data-exploration app with 100,000s of items can be a real performance killer. Usually, each request that a user makes is handled by the server individually, resulting in a new network roundtrip each time. Luckily, there is now a library that counteracts this detour and caters for a much smoother, more responsive experience.

PourOver: A Client-Side Solution For Fast Filtering And Sorting45

Based on the principle of simple queries that can be composed with each other arbitrarily without having to recalculate their results, PourOver46 is basically a client-side index that creates a cache for every possibile combination. Sounds good? The code is available on GitHub47, together with a thorough introductory guide48 to get you started right away. (cm)

498. Hand-Picked Screencasts For Developers

If you’ve been struggling to understand Django as a beginner, or how to create an Android app from scratch, or have been trying to learn more about how Python works, you can close all those search tabs this very moment because you probably won’t be needing them no more.

Hand-Picked Screencasts For Developers50

Devcasts.io51 provides a good collection of screencasts grouped into three categories: frameworks, databases and languages. You can sort out the screencasts according to your level of expertise, and even watch the screencasts which the staff found particularly useful and informative. Now you have everything you need all in one place and no reasons for excuses not to learn and improve your skills! (kv)

529. Comparing Costs In Cities

If you’re like most people, you probably research as much as you can about a certain city before jumping onto that airplane. However, sometimes it tends to take up a lot of your time, and you find yourself bookmarking a good number of pages and doing all the math yourself. Well, not anymore. Expatistan’s Cost Of Living Index53 is bound to make your life easier with so many cost comparisons all in one place. It already consists of comparisons between more than 1,700 cities in the world.

Comparing Costs In Cities54

More than 235,000 visitors have already participated and entered almost 900,000 prices for clothing, a certain amount of milk or even the price of a Volkswagen to get a better understanding of how much living in a specific city can cost. The numbers are quite accurate, but need more people to keep the figures updated in order to provide their visitors with the necessary means to find out how expensive a place really is before moving there. If you’ve already visited a city or two, you’re most welcome to share the facts and figures with others! (kv)

5510. Full-Day Smashing Workshops

There are so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, so what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our Front-End & RWD workshops are all about: full practical days that will help you become a better front-end warrior, today.

Full-Day Smashing Workshops56

We’ve got a couple of practical, hands-on workshops coming up in Zürich, Switzerland:

If you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly[at]smashingconf[dot]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! (vf)

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://twitter.com/search?f=realtime&q=%23smfonts&src=typd
  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 #a9
  12. 12 #a10
  13. 13 #
  14. 14 https://github.com/timuric/Content-generator-sketch-plugin
  15. 15 https://github.com/timuric/Content-generator-sketch-plugin
  16. 16 http://alistapart.com/blog/post/design-tools-for-todays-web/
  17. 17 http://unsplash.com/
  18. 18 http://uifaces.com/
  19. 19 http://uinames.com/
  20. 20 http://www.mockaroo.com/
  21. 21 http://kaku.ps/
  22. 22 #
  23. 23 http://www.gettemplate.com/
  24. 24 http://html5up.net/
  25. 25 http://www.blacktie.co/
  26. 26 http://www.gettemplate.com/
  27. 27 #
  28. 28 http://guillaumekurkdjian.com/icons-ocean/
  29. 29 http://guillaumekurkdjian.com/icons-ocean/
  30. 30 http://www.orlandotm.com/payment-webfont/
  31. 31 #
  32. 32 http://youmightnotneedjquery.com/
  33. 33 https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit
  34. 34 https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
  35. 35 http://lynn.ru/examples/svg/en.html
  36. 36 http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images
  37. 37 https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
  38. 38 #
  39. 39 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014
  40. 40 https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014
  41. 41 #
  42. 42 http://99percentinvisible.org/
  43. 43 http://99percentinvisible.org/
  44. 44 #
  45. 45 http://nytimes.github.io/pourover/
  46. 46 http://nytimes.github.io/pourover/
  47. 47 https://github.com/NYTimes/pourover
  48. 48 http://nytimes.github.io/pourover/
  49. 49 #
  50. 50 http://www.devcasts.io/
  51. 51 http://www.devcasts.io/
  52. 52 #
  53. 53 http://www.expatistan.com/cost-of-living
  54. 54 http://www.expatistan.com/cost-of-living
  55. 55 #
  56. 56 http://www.smashingmagazine.com/workshops/
  57. 57 https://shop.smashingmagazine.com/andrew-clarke-responsive-web-design-zurich.html
  58. 58 https://shop.smashingmagazine.com/jeremy-keith-responsive-design-workshop-zurich.html
  59. 59 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html
  60. 60 https://shop.smashingmagazine.com/vitaly-friedman-responsive-design-zurich.html

The Smashing Newsletter Team 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!

Advertising
  1. 1

    Romeo Mihalcea

    May 20, 2014 5:13 pm

    Thank you for mentioning devcasts.io in your small list. It’s really a confirmation that we’re doing the right thing.

    2
  2. 2

    One thing I think needs to be stressed about web fonts is that they can (and often do) look different on a Windows machine and a Mac.

    I understand that a lot of people prefer to build websites on a Mac, but please please please take a look at the site on a Windows machine afterwards (particularly Chrome). Check that your font choice is still readable, and from my experience avoid ultra thin fonts altogether.

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top