Web Development Reading List #128: Firefox 45, A Multi-Colored Font And Better Force-Pushing
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.
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.
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
Further Reading
- A User-Centered Approach To Web Design For Mobile Devices
- The Elements Of The Mobile User Experience
- A Guide To Designing Touch Keyboards (With Cheat Sheet)
- Beyond The Button: Embracing The Gesture-Driven Interface
(mrn)