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 post1 last week was quite overwhelming, so we moved from a bi-monthly frequency to a weekly frequency (for now). — Ed.
Further Reading on SmashingMag:
- Stop Shouting. Start Teaching.2
- Lessons Learned From Leading New Web Professionals3
- Rekindling Your Passion For Web Design4
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 WDRL5; so, expect content to appear weekly here from now on.
- Typekit has added WOFF2 support7 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-ons8. Writing a Firefox extension has always been a massive effort compared to Chrome. Now, Mozilla is introducing WebExtensions9, 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 Browser10.
- A recent discussion, arising mostly from an article by Alex Russell titled “Doing Science on the Web11,” gives some new perspective on how we can test new web platform features without repeating the errors made with vendor prefixes. While Alex proposes that developers register for experiments, some people argue that this is worse and is a kind of vendor lock-in that would not work out12.
- TheNextWeb tested iOS 9’s content-blocker feature and found that it simply blocks all clutter and ads13 that are normally displayed on a website. Because this is enabled for all users, it will likely have a big impact on the revenue models of ad-driven websites.
Concepts And Design Link
- The in-depth article “UI Mechanics of a Date Picker15” 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 Design16”. If you’re sending email newsletters, then this study is interesting and provides good defaults.
- Brad Frost has talked a lot about death to bullshit17 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 typography18.
- 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 visualizer20, which shows you a live diagram of what you type.
- With the Ashley Madison data leak, we as developers should put more effort into securing our systems. Password hashing and encryption should already be the default, but as we now see, protecting email addresses and other private details is equally important21.
- Joel Weinberger’s slidedeck reveals where content security policy is heading next22 and why open web platform security is the better term for it.
- “We’re struggling to get traction with SSL23 because it’s still a premium service.”
- The UN’s new privacy chief, Joseph Cannataci, raises concerns about broken privacy on the Internet24 and expresses a desire to build a Geneva Convention for the Internet.
Web Performance Link
- If you want to measure front-end performance, then it’s important to measure how the page performs when it’s loaded25 and the user interacts with it.
- “A Beginner’s Guide to Website Speed Optimization26” by Kinsta is good for everyone who wants to understand the basics of what slows down a web page and why having a fast website is important.
HTML And SVG Link
- 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 element27 (such as a
div) set to
display: none, instead of setting it directly on the
- 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 container28 properly. If you struggled to understand
viewBoxand the box-module handling of SVG, this post is for you and you also get a mathematical refreshment for free.
- As a good developer, you care about your users. It’s well known but can’t be overstated that
outline: noneprevents accessibility on elements and should be avoided29.
- Marco Zehe, a blind accessibility engineer at Mozilla, shares the big accessibility improvements that have landed in Firefox 4130 for Mac OS X users.
- “The @font-face Dilemma31” by Chris Manning shares current methods of web font integration and compares old font loader methods with the newer font observer technique.
- Maurizio Mangione’s “Polymer Unit Testing33” is a great primer on why testing your custom web components is important.
CSS and Sass Link
- Sara Soueidan continues her series on the basics of CSS, this time discussing the various possibilities of styling check boxes and radio buttons34 with either CSS or SVG.
Work And Life Link
- Marcy Sutton asks “How will people remember you when you’re gone?35”
- I have posted several articles on agile workflows. I myself often work agile for projects, and yet I don’t want to hide “More Agile, More Problems36,” in which Steven Hoober talks about his experiences in over 200 agile projects.
Go Beyond Link
- The well-known artist Banksy has created a new kind of amusement park: Dismaland. A post on Imgur37 shows what it’s about. Also check out the official trailer38.
- That thing we work on all day, the Internet? Did you know it’s built on hacks?
- Noah Stokes’ “On Passion39” 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?40” 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 Eyes41” — 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 Flattr42 or Gratipay43 or by sharing this resource with others. You can learn more about the costs of the project44. It’s available via email and RSS and online.
Thanks and all the best,
- 1 https://www.smashingmagazine.com/2015/08/web-development-reading-list-100/
- 2 https://www.smashingmagazine.com/2012/04/stop-shouting-start-teaching/
- 3 https://www.smashingmagazine.com/2013/10/lessons-learned-leading-new-web-professionals/
- 4 https://www.smashingmagazine.com/2015/05/rekindling-your-passion-for-web-design/
- 5 https://wdrl.info/
- 6 http://blog.typekit.com/2015/08/26/woff2-support-added-to-typekit/
- 7 http://blog.typekit.com/2015/08/26/woff2-support-added-to-typekit/
- 8 https://blog.mozilla.org/addons/2015/08/21/the-future-of-developing-firefox-add-ons/
- 9 https://wiki.mozilla.org/WebExtensions
- 10 http://www.ucweb.com/
- 11 https://infrequently.org/2015/08/doing-science-on-the-web/
- 12 https://twitter.com/xeenon/status/634827067549310976
- 13 http://thenextweb.com/apple/2015/08/24/ios-9-content-blocking-will-transform-the-mobile-web-ive-tried-it/
- 14 https://medium.com/user-experience-design-1/ui-mechanics-of-a-date-picker-792f2aceb8aa
- 15 https://medium.com/user-experience-design-1/ui-mechanics-of-a-date-picker-792f2aceb8aa
- 16 https://www.smashingmagazine.com/2015/08/typographic-patterns-in-html-newsletter-email-design/
- 17 http://deathtobullshit.com/
- 18 http://johndjameson.com/blog/guidelines-for-letterspacing-type/
- 19 https://www.npmjs.com/package/esnow
- 20 https://knsv.github.io/mermaid/live_editor/
- 21 https://twitter.com/vincib/status/634680915667587073
- 22 https://docs.google.com/presentation/d/1oLiEv3LBynS-L4ZJ1tKLPmeD0rYzNG0uG2ClxjMG2zg/pub#slide=id.gb90d6ba1d_0_0
- 23 http://www.troyhunt.com/2015/08/were-struggling-to-get-traction-with.html
- 24 http://www.theguardian.com/world/2015/aug/24/we-need-geneva-convention-for-the-internet-says-new-un-privacy-chief
- 25 https://lab.getbase.com/measuring-frontend-performance-the-missing-ingredient/
- 26 https://kinsta.com/learn/page-speed/
- 27 https://stackoverflow.com/questions/24806913/how-can-i-refer-to-an-internal-gradient-definition-inside-an-svg-sprite-symbol
- 28 https://css-tricks.com/tight-fitting-svg-shapes/
- 29 http://www.outlinenone.com/
- 30 https://www.marcozehe.de/2015/08/25/improvements-in-accessibility-for-mac-os-x-in-firefox-41/
- 31 https://viget.com/extend/the-font-face-dilemma
- 33 https://medium.com/@granze/polymer-unit-testing-d6a69910dc31
- 34 https://blogs.adobe.com/dreamweaver/2015/08/css-vs-svg-styling-checkboxes-and-radio-buttons.html
- 35 https://the-pastry-box-project.net/marcy-sutton/2015-august-26
- 36 https://medium.com/@shoobe01/more-agile-more-problems-a5169c0a8b28
- 37 https://imgur.com/gallery/KfJ4X
- 38 https://www.youtube.com/watch?t=101&v=V2NG-MgHqEk
- 39 https://the-pastry-box-project.net/noah-stokes/2015-august-21
- 40 https://www.baldurbjarnason.com/notes/OSS-and-money/
- 41 http://www.theguardian.com/environment/2015/aug/26/bushfires-heatwaves-and-early-deaths-the-climate-is-changing-before-our-eyes
- 42 https://flattr.com/profile/helloanselm
- 43 https://gratipay.com/~Anselm%20Hannemann/
- 44 https://wdrl.info/costs/