About The Author

Anselm is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder … More about Anselm

Web Development Reading List #101

What’s happening in the industry? What important techniques have emerged recently? What about new case studies, insights, techniques and tools? Our dear friend Anselm Hannemann is keeping track of everything in the web development reading list so you don’t have to. The reaction on the first post last week was quite overwhelming, so we moved from a bi-monthly frequency to a weekly frequency (for now). — Ed. Welcome back to the Web Development Reading List (WDRL) for this week. Instead of the previously announced biweekly schedule here on Smashing Magazine, I will post it in sync with the original WDRL; so, expect content to appear weekly here from now on.

What’s happening in the industry? What important techniques have emerged recently? What about new case studies, insights, techniques and tools? Our dear friend Anselm Hannemann is keeping track of everything in the web development reading list so you don’t have to. The result is a carefully collected list of articles that popped up over the last week and which might interest you. The reaction on the first post last week was quite overwhelming, so we moved from a bi-monthly frequency to a weekly frequency (for now). — Ed.

Further Reading on SmashingMag:

Welcome back to the Web Development Reading List (WDRL) for this week. Instead of the previously announced biweekly schedule here on Smashing Magazine, I will post it in sync with the original WDRL; so, expect content to appear weekly here from now on.

Typekit has added WOFF2 support

News

  • Typekit has added WOFF2 support to its stack, which means you can save up to 30% on your web font kit’s size. To activate WOFF2 support, just republish your kits.
  • Mozilla will change the way you write add-ons. Writing a Firefox extension has always been a massive effort compared to Chrome. Now, Mozilla is introducing WebExtensions, largely compatible with Chrome’s extension model, making the whole workflow much simpler, faster and more secure.
  • According to the latest StatCounter data, UC Browser is still on the rise and has already passed IE Mobile and Opera. Soon, it might pass Android’s native browser. If you’re not already, you should start testing your websites and apps in UC Browser.

General

Concepts And Design

UI Mechanics of a Date Picker
  • The in-depth article “UI Mechanics of a Date Picker” breaks down the importance of small details in that little UI widget on your website, the date picker.
  • Anna Yeaman has collected a lot of emails and created an analysis of “Typographic Patterns in HTML Email Newsletter Design”. If you’re sending email newsletters, then this study is interesting and provides good defaults.
  • Brad Frost has talked a lot about death to bullshit already. Now, he’s published it as a web project with an interactive demo. So, if someones want you to integrate an auto-appearing overlay, modal or fade-in banner, let them test the experience for themselves on this website.
  • John D. Jameson shares some solid guidelines for letterspacing web typography.

Tools

  • Write ESXXXX JavaScript in a common way with Browserify and Babelify including extracted source maps and Uglifyify for production builds.”
  • Surely, this one isn’t for everyone, but people who want to build a diagram or graph from some code or a simple list will love the Mermaid diagram syntax visualizer, which shows you a live diagram of what you type.

Security

Privacy

Web Performance

HTML And SVG

  • If your website has SVG icons, then you’re probably using a sprite sheet. But it wouldn’t be SVG if it was easy. Turns out you should always use a wrapping HTML element (such as a div) set to display: none, instead of setting it directly on the svg root element.
  • Ana Tudor is always good for mathematical constructions of visual modules. Over on CSS-Tricks she shares a breakdown of how to fit SVG shapes into a container properly. If you struggled to understand viewBox and the box-module handling of SVG, this post is for you and you also get a mathematical refreshment for free.

Accessibility

JavaScript

  • The @font-face Dilemma” by Chris Manning shares current methods of web font integration and compares old font loader methods with the newer font observer technique.
  • You all know of the discussion around whether to use jQuery or not. However, you can do a couple of things with plain JavaScript that you probably didn’t know about.
  • Maurizio Mangione’s “Polymer Unit Testing” is a great primer on why testing your custom web components is important.

CSS and Sass

Work And Life

Go Beyond

  • The well-known artist Banksy has created a new kind of amusement park: Dismaland. A post on Imgur shows what it’s about. Also check out the official trailer.
  • That thing we work on all day, the Internet? Did you know it’s built on hacks?
  • Noah Stokes’ “On Passion” sheds new light on the overused term “passion.” Follow your passion, but do it wisely, and don’t turn everything into your passion — it wouldn’t work.
  • Who Benefits the Most From Open-Source Software?” Baldur Bjarnason asks this often avoided question and gives some answers you might not want to hear. The sad truth is that developers’ efforts are too often abused by companies that do not give back.
  • Bushfires, Heatwaves and Early Deaths: The Climate Is Changing Before Our Eyes” — and we still don’t care. It’s time to recognize that everyone is involved and can do something, even if it’s only a small change.

And with that, I’ll close for the week. If you like what I write each week, please support me via Flattr or Gratipay or by sharing this resource with others. You can learn more about the costs of the project. It’s available via email and RSS and online.

Thanks and all the best, Anselm

Smashing Editorial (al)