Smashing Newsletter: Issue #107

This newsletter issue was sent out to 177,890 newsletter subscribers on Tuesday, April 15th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Do you remember back in the days when you used dial-up to connect to the Web, or do Bulletin Board Systems or FidoNet even ring a bell anymore? Ah, the good old times2, when you could almost sense the beauty of a modem’s handshake3. When HTTP (the underlying foundation of the Web) was initially designed in the early 90s, that was the kind of world that existed back then. In fact, bandwidth and connections were much, much different from what we use today.

Editorial4

As remarkable as it is, HTTP/1.1, the version of HTTP in common use, has a few limitations; browsers can use a maximum of 6 connections per domain, request and response headers are uncompressed, and there is just one single request per connection. Well, Google has been working on a revised version of HTTP, a new networking protocol that aims to specifically speed up the Web.

The result is SPDY5 which augments HTTP with several speed-related features like unlimited number of parallel requests per connection, quicker slow start as well as better compression. Developers can also prioritize resources, and the protocol even uses SSL/TLS by default. Fallback? Since SPDY is an extension of HTTP/1.1, it always falls back to good old HTTP/1.1 in case it’s not supported by a particular browser. The results speak for themselves: 64% decrease in average page load times and 23% mean page load time improvement on mobile. SPDY has become an integral part of the HTTP/2.06 specification — which is already on its way!

Can we use SPDY today? Yes! In fact, there is no reason not to use it. It requires both server-side and client-side implementations though. You can use mod_spdy7 for Apache 2.2, and ngx_http_spdy_module8 for Nginx, and browser support is quite good9, with only Safari, iOS Safari and IE<=10 not supporting SPDY. The protocol (in different versions) is supported in Chrome 4+, Firefox 13+, Opera 12.1+, Amazon Sink and Android, so no wonder that Gmail, WordPress.com, Facebook and Twitter are using it already today.

So, while HTTP/2.0 hasn’t gained traction just yet, we can combine progressive enhancement with SPDY today to speed up our websites immensely, and make the Web that we all love and shape every day even faster and better for our users.

— Vitaly (@smashingmag)

Table of Contents

01. Designing An SVG Icon System10
02. Hello Coders, Need JavaScript Superpowers?11
03. Handy Resources For Responsive Email Design12
04. Photoshop In Real Life13
05. Smart Techniques For CSS Ninjas14
06. Faster CSS Debugging With Pesticide15
07. Fast And Beautiful Web Fonts16
08. The Magic Of CSS17
09. Using Web Workers Yet?18
10. Brilliant Little Brain Gems19
11. Full-Day Smashing Workshops20

211. Designing An SVG Icon System

What do you use more often: SVG or icon fonts? Obviously, both options have great use cases for resolution-independent image assets, yet SVG seems to be more reliable22 when it comes to cross-browser support. If SVG fails, it fails gracefully to PNG (as long as PNG fallback is provided). If an icon font fails, the user sees nothing. This is always the case with Opera Mini, for example. However, icon fonts are often preferred because they provide us with an encapsulated system to manage our icons—nicely bundled into one single icon font.

Designing An SVG Icon System23

But we can create similar icon systems with SVG24, too. Since SVG is just markup and source file (unlike PNGs), we can maintain a folder of SVG files, bundle them all into one single SVG, and use use and defs within SVG to refer to the specific images within our HTMP markup. Sounds difficult? It’s not. In fact, svgstore Grunt task25 and IcoMoon26 can take care of everything: just provide a folder of images, and it generates one single SVG and markup for you. The PNG fallback will have to be defined in CSS though. On CSS-Tricks, Chris Coyier has a more detailed write-up on SVG systems27 which is definitely worth reading. Well, now you have another reason to use SVG after all. (vf)

282. Hello Coders, Need JavaScript Superpowers?

Is JavaScript (almost) the first thing on your mind after waking up in the morning? Does JavaScript make or break your day? Do you need JavaScript superpowers? No? Well, hop on over to the next article then. Yes? Stay right here! There’s quite a resource to help make your life easier with JavaScript — guaranteed!

Hello Coders, Need JavaScript Superpowers?29

Meet Superhero.js30, a great resource with useful articles, videos and presentations on how to create, test and maintain a large JavaScript code base. The website will help you better understand JavaScript syntax, better organize your projects and learn what’s on the horizon. Superhero.js is continuously updated and organized by @kimjoar31, @madsmobaek32 and @vandelay33. Thanks for creating this valuable resource, guys! (ea)

343. Handy Resources For Responsive Email Design

As email opening rates on mobile devices increase steadily, the need for responsive emails is growing. Two comprehensive resources that will give you an overview over the ins and outs of responsive email design are coming from designer Brian Graves. Responsive Email Resources35 neatly compiles tools and other resources, among them preprocessors, frameworks, tutorials, case studies and much more, to make your HTML emails fit for big and small screens alike.

Handy Resources For Responsive Email Design36

If you’re looking for specific design solutions to implement in your emails, you might also want to check out Responsive Email Patterns37, a handy construction kit full of patterns and modules for layout, navigation, lists, grid blocks, media and accordions. All patterns have been tested either using Litmus or on real devices; the supported email clients are listed on the site. Convenient and definitely worth a bookmark. (cm)

384. Photoshop In Real Life

Do you ever wish you could use Photoshop tools in real life? For example, when walking down the street, do you ever wish you could erase what you see? You know what I mean: Ctrl + Z would come in handy every now and then, wouldn’t it? Street Eraser39, a London street art project by Guus Ter Beek and Tayfun Sarier, does just that. It’s a fresh, creative approach to graffiti and I think it’s great!

Photoshop In Real Life40

The stickers are so cleverly placed that when you see the photo from your computer screen, it could look like a screen shot of a Photoshop file. What a way to meld the technical design realm with the real world! It’s fun and would definitely cause me to look twice. How about you? (sh)

415. Smart Techniques For CSS Ninjas

What is it about those wonderful, shiny snippets of code that makes us bookmark them, copy them into our own personal library and look out for the times when we can finally use them in real projects? Good code snippets provide good solutions to problems, and they can save quite a lof of time and headache, too. Rik Schennink has come up with a CSS snippet for Trippy Labels42 which combines input placeholder and label in one input field.

Smart Techniques For CSS Ninjas43

Shane Murphy has also published a simple responsive navigation44, which is displayed as a stacked list by default, and with JS available, it gets hidden and visibility is toggled via a button; at larger viewports the navigation is displayed horizontally. Furthermore, our Smashing Coding editor, Dudley Storey, has published a little tutorial on how to create decorated numbered lists with CSS counters and ::before45.

Not fancy enough? Well, if you want to have a more granular and consistent control on how your link underlines look like (and text-decoration: underline; and border-bottom arent’ just good enough for you), Gary Hepting has created a Underline pen on CodePen46, based on Marcin Wichary’s work47 for Medium.com. If you know some more fancy techniques, tweet to @smashingmag using the hashtag #smtechnique — we’ll do our best to spread the word. (vf)

486. Dear Comic Sans, Meet Comic Neue!

When Vincent Connare set about creating Comic Sans in ’94, to be used in speech bubbles in a Microsoft program (named MS Bob), he certainly didn’t have a clue that he was actually creating a typeface that people will love to hate. Comic Sans is mostly hated for the fact that it’s heavily ill-suited for the places where it can be found. Oddly enough, the childish typeface is popular on things such as prohibitive signs, which sometimes resembles a policeman wearing a clown costume.

Dear Comic Sans, Meet Comic Neue!49

Vincent is not to blame; he never really intended the font to be released for general use. So, everyone hates Comic Sans but what will hate alone bring us? Likely, nothing. Craig Rozynski decided he wanted to do more than just hate Comic Sans and created Comic Neue50, a reinterpretation of Comic Sans. Comic Neue doesn’t want to be the world’s most ubiquitous casual typeface, but it does look… interesting, and you can download it for free. Maybe it’s time for some love? ;-) (ea)

517. Faster CSS Debugging With Pesticide

Although writing CSS became much more convenient with preprocessors, CSS debugging still is a pain. Especially when layout containers and elements without background, borders or outlines behave wrong, it can be hard to visually observe what the problem is. Are you usually applying outline to HTML elements to make issues visible? I’m doing this, too, but here is a little tool to make our life just a bit easier.

Faster CSS Debugging With Pesticide52

Pesticide53 applies outlines to HTML elements in a website. As outline is hardly used in CSS (compared to border or background properties), your styles won’t be overwritten which makes it perfect for testing and debugging. You can either download the Chrome extension54 and simply toggle borders on and off. Alternatively, Pesticide offers a CSS file and a SASS partial to include in your HTML. Handy! (ml)

558. Fast And Beautiful Web Fonts

The large majority of content on the Web, just as in print, is written. However, while print typography has well-established principles, rules and guidelines, Web typography is often a rather tricky subject; not only due to the fact that it has to be responsive, but also because loading times and the quality of glyphs aren’t always optimal. Nevertheless, there is still something we can do about both, as the project Brick56 shows.

Fast And Beautiful Web Fonts57

Created by Alfred Xing, Brick takes up the cudgels for high-quality type by serving non-modified WOFF clones of the original fonts. The effect: the type maintains its quality and is rendered the way it is actually meant to be seen, while at the same time ensuring fast loading across all modern browsers. At the moment, there are 28 fonts that you can easily implement into your own projects. A quick start guide on GitHub58 tells you how to do it. Brick is open source and hence free to use. In addition to that, anyone interested is more than welcome to contribute to the project. Great work! (cm)

599. The Magic Of CSS

CSS can be quite messy. There are rules, and best practices, and common approaches, but sometimes playing around is just the most effective way to see what works and what doesn’t. Adam Schwartz has now started to share the insights he gained in this process of trial and error with all the other CSS adventurers out there — in a straight to the point and beautifully designed online textbook named The Magic of CSS60.

The Magic Of CSS61

The material is intermediate to advanced and currently fills six chapters with knowledge and lessons learned on layout, tables, color, typography and transitions. Apart from its illustrative examples the guide makes use of some nifty features to make everything as comprehensible as possible. Most CSS properties for example can be clicked to obtain more contextual information and in some examples altering parameters, such as the width of a box, yourself helps you better grasp one of those magic CSS moments. More, exciting chapters are already in the works, so make sure to pay the site a visit every now and then. (cm)

6210. Using Web Workers Yet?

Dear Web, we have a little problem. It’s called “JavaScript concurrency”. While browser vendors rapidly improve their JavaScript engines to tackle some of the bottlenecks, one hindrance for JavaScript is the language itself. Since it is a single-threaded environment, it cannot run multiple scripts at the same time. Although developers mimic concurrency using techniques like setTimeout(), setInterval(), XMLHttpRequest and event handlers, these techniques aren’t “clean” solutions. Luckily, HTML5 introduces Web Workers63 to bring threading to JavaScript.

Using Web Workers Yet?64

Web Workers spec65 define an API for creating background scripts in your Web application. For example, you can fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions. Moreover, they can help to avoid “unresponsive script” issues and make the interface more responsive and fast for users. The best part: Web Workers is well supported66 in modern browsers, including IE 10+, Firefox, Chrome, Safari, Opera, iOS Safari, Blackberry, IE Mobile and Android 4.4+. Head on over to HTML5Rocks: Web Workers Basics67 and Using Web Workers on MDN68 to get started right away, and learn more about implementation and usage. (ml)

6911. Brilliant Little Brain Gems

A bat and a ball together cost $1.10. The bat costs $1 more than the ball. How much does the ball cost? Most of us would probably answer 10 cents — that’s what intuitively comes to our minds. But actually, it’s 5 cents. If this leaves you with a puzzled look, don’t worry, it’s not about maths here. This supposedly simple problem is rather a wonderful example of what psychologists call a “substitution bias”, i.e. we’re constantly trying to minimize cognitive effort and substitute hard questions for the easier ones.

Brilliant Little Brain Gems70

Scientific findings like this one do not only make great conversation starters, but knowing how our brains work can actually help us build better products, too. However, staying on top of latest research usually takes up quite some time and efforts. Well, not with cognitive lode71. The site distills the latest findings from consumer psychology and behavioural economics down into helpful, easy to understand tidbits. Each one of them links further reading resources to dig deeper into a topic and even notes down takeaways for decision-makers. Brilliant! (cm)

7212. 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 Workshops73
The upcoming SmashingConf workshops will take place in the “Times Center74” in NYC, USA, located just off the Times Square district. Image credit75.

We’ve got a couple of practical, hands-on workshops coming up in New York, USA, very soon:

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), Cosima Mielke (cm), Shavaughn Haack (sh), Melanie Lang (ml), 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://www.youtube.com/watch?v=vvr9AMWEU-c
  3. 3 http://www.windytan.com/2012/11/the-sound-of-dialup-pictured.html
  4. 4 https://www.youtube.com/watch?v=vvr9AMWEU-c
  5. 5 https://developers.google.com/speed/spdy/
  6. 6 http://http2.github.io/http2-spec/
  7. 7 https://code.google.com/p/mod-spdy/
  8. 8 http://nginx.org/en/docs/http/ngx_http_spdy_module.html
  9. 9 http://caniuse.com/spdy
  10. 10 #a1
  11. 11 #a2
  12. 12 #a3
  13. 13 #a4
  14. 14 #a5
  15. 15 #a6
  16. 16 #a7
  17. 17 #a8
  18. 18 #a9
  19. 19 #a10
  20. 20 #a11
  21. 21 #
  22. 22 https://docs.google.com/presentation/d/1n4NyG4uPRjAA8zn_pSQ_Ket0RhcWC6QlZ6LMjKeECo0/edit#slide=id.g178014302_0176
  23. 23 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
  24. 24 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
  25. 25 https://github.com/FWeinb/grunt-svgstore
  26. 26 http://icomoon.io/app/
  27. 27 http://css-tricks.com/svg-sprites-use-better-icon-fonts/
  28. 28 #
  29. 29 http://superherojs.com/
  30. 30 http://superherojs.com/
  31. 31 https://twitter.com/kimjoar
  32. 32 https://twitter.com/madsmobaek
  33. 33 https://twitter.com/vandelay
  34. 34 #
  35. 35 http://www.responsiveemailresources.com/
  36. 36 http://responsiveemailpatterns.com/
  37. 37 http://responsiveemailpatterns.com/
  38. 38 #
  39. 39 http://streeteraser.com/
  40. 40 http://streeteraser.com/
  41. 41 #
  42. 42 http://codepen.io/rikschennink/details/FHaLo
  43. 43 http://codepen.io/rikschennink/details/FHaLo
  44. 44 http://jsfiddle.net/shanomurphy/zp376/
  45. 45 http://demosthenes.info/blog/855/Creating-Decorated-Ordered-Lists-With-CSS
  46. 46 http://codepen.io/ghepting/pen/tLnHK/
  47. 47 https://medium.com/p/7c03a9274f9
  48. 48 #
  49. 49 http://comicneue.com/
  50. 50 http://comicneue.com/
  51. 51 #
  52. 52 http://pesticide.io/
  53. 53 http://pesticide.io/
  54. 54 https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh?hl=en-US
  55. 55 #
  56. 56 http://brick.im
  57. 57 http://brick.im
  58. 58 https://github.com/alfredxing/brick/wiki/Usage
  59. 59 #
  60. 60 http://adamschwartz.co/magic-of-css/
  61. 61 http://adamschwartz.co/magic-of-css/
  62. 62 #
  63. 63 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
  64. 64 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
  65. 65 http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#workers
  66. 66 http://caniuse.com/#feat=webworkers
  67. 67 http://www.html5rocks.com/en/tutorials/workers/basics/
  68. 68 https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
  69. 69 #
  70. 70 http://coglode.com/
  71. 71 http://coglode.com/
  72. 72 #
  73. 73 http://www.smashingmagazine.com/workshops/
  74. 74 http://thetimescenter.com/
  75. 75 http://commons.wikimedia.org/wiki/New_york_times_square-terabass.jpg
  76. 76 http://smashingconf.com/ny-2014/workshops/fabio-carneiro
  77. 77 http://smashingconf.com/ny-2014/workshops/jonathan-snook
  78. 78 http://smashingconf.com/ny-2014/workshops/mark-boulton
  79. 79 http://smashingconf.com/ny-2014/workshops/dan-rose
  80. 80 http://smashingconf.com/ny-2014/workshops/brian-suda

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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Great update as always; though, did you actually quote css “ninjas”?

    Can you just… not?

    Or I’ll need to reach out to you to create collaboration and deep dive on the real issues to create further synergies.

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