Web Development Reading List #128: Firefox 45, A Multi-Colored Font And Better Force-Pushing

5 min read
Tools, Coding, Web Development Reading List
Share on Twitter, LinkedIn

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 ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.

Another week comes to an end, with new browser announcements, releases and cool new tools that you might want to check out. I make it short: Have fun reading this week’s reading list and enjoy your weekend!

News

Firefox 45 is out and now re-evaluates responsive images in srcset on resize or viewport changes. Also, the Web Speech Synthesis API and window.onstorage were implemented, and you can now test CSS Grid Layouts. Firefox Nightly also got an interesting new feature: the browser can read text in Reader View.
Opera’s desktop browser for developers now has an option to natively block ads on websites. This is a big experiment since it’ll block ads completely, without any options, and unlike Firefox’s privacy protection mode that only removes trackers but not ads in general, the Opera experiment uses the big adblock EasyList. The goal seems to be saving customer’s data budgets, and, respectively, their money.

Concepts & Design

These tips for saving SVG for the web with Adobe Illustrator are a great guide for creating graphics for the web.
Bixa Color is a multi-color font face for the web. Multi-color in that case means indeed that a glyph can have not only one but multiple colors.
Sometimes micro-copy and tiny word changes make a big difference for a page’s UX.

Multi-color font — Each glyph of the Bixa Color font can have not only one but multiple colors.

Tools

In the last reading list, I wrote about team retrospectives. Indeed, for remote teams, this is a bit harder to achieve. That’s why it’s very interesting to read a tutorial on how to build a real-time retrospective board with video chat.
Pushing git updates with --force is something you usually should avoid. There are reasons why some teams forbid this entirely, I personally like to use it for edge-cases where you want to squash your feature branch before merging. Tute Costa shares a way to prevent you from overwriting remote changes when force-pushing by using the --force-with-lease option instead.

Security

You think PBKDF2 is pretty secure and takes long to brute-force? Well, it’s not the case when you replace the cryptographic keys with precomputed values. Attackers are able to save 50% of PBKDF2’s CPU intensive operations by doing that, cutting the security in half. Given this fact, you might want to consider using Argon2 from now on.

Privacy

When you use location data in your web application, you should be aware of the legal implications of using geodata of your users. The article explains what you should take care of, how you can implement this behavior properly and how to respect your users’ privacy.

Web Performance

There is now a way to save your user’s data. It’s only available in Chrome 49 (and Opera, Yandex) where users can opt in to a feature that sends a new header to each HTTP request. As developers, we can use this header to serve smaller assets to such users. Pretty great!
The MIT has found a way to speed up website loading by decreasing network trips. I’m curious how this concept will be built into software solutions in the future.

JavaScript

Ever heard of Element.scrollIntoView()? It’s a nice JavaScript function to scroll the current element into the visible area of the browser window. You can pass along options for the positioning as well, but unfortunately, scrollIntoViewOptions only works in Firefox at the moment. The generic support for it however is pretty good already.

CSS/Sass

Toggling stuff is not always easy. That’s why Kitty Giraudel from Edenspiekermann released a11y-toggle, a small JavaScript plugin that creates easy, accessible toggle elements.
Have you ever thought of styling how a broken image is displayed on your website? Because broken images happen quite often (especially on mobile connections) it might be worth thinking about this.

Work & Life

Ted Goas shares how he works as the sole designer in a team full of developers. This is particularly interesting as we often hear about teams where it’s the other way round and also because we often have a developer-centered perspective on the matter.

Design in a sea of engineering — What is it like to be the sole designer in a team of engineers? Designer Ted Goas shares how he gets by in an engineering led company. (Image credit: Ted Goas)

Going Beyond…

Since Facebook announced that they donate to good causes and try to improve the health of the human species itself, Google joined this marketing train. Davey Alba from WIRED explains why they did so, and what benefits such corporations get from it. Because, as stated back when Mark Zuckerberg announced the big donation to his own charity, they could also just pay more taxes and help people that way. But of course, there’s another side to it, and that’s why they want to do this on their own.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation or share this resource with other people. You can learn more about the costs of the project here. It’s available via email, RSS and online.

Thanks and all the best, Anselm