Web Development Reading List #104

7 min read
Design, Web Design, 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.

Hey, lovely to have you back here. Facebook announced that they built their first cross-platform React Native app. After nearly three years of development, Modernizr 3 is out now. Heydon Pickering explains how to re-create the goodness of gifs in a vector format with SVG. 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.

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. — Ed.

Hey, lovely to have you back here. It’s getting autumn here in Germany which means fog is back again and the trees are getting their lovely golden or red colors again. Time to spend the weekend out in the nature and take a deep breath, far away from your work. Just a few hours can help to get the refreshment you needed for days or a week already. And after that, start catching up with what I serve you in today’s list:

News

As iOS 9 is out since this week, there are a couple of new things you can use now in iOS 9 Safari: Content Blockers arrived, Safari View Controller can be used instead of WKWebView, NavigationTiming API is back, Picture in Picture is available for iPad, proprietary Backdrop CSS filters, CSS Scroll Snapping and @supports is available, too.
Facebook announced that they built their first cross-platform React Native app. While iOS has been announced earlier this year, they now offer React Native for Android as well.
If you want to try Service Worker from localhost or other insecure origins, you can start Chrome (starting in v44) with the following flag via the command line: ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=https://your.insecure.host. Of course you should use this only for development and don’t call other sites in this browser instance.
Opera 32 is out and shares the news with Chromium 45: ES6 Arrow functions, further ES6 array and typed array functions are available now, Object.assign(), CSP Level 2 self rule is implemented and vibration notifications are now possible to trigger.
After nearly three years of development, Modernizr 3 is out now. The new version is modular, has increased tests, no core test separation anymore and they also have new build steps to make it easier for you.

Concepts & Design

Forms are still hard to build. Especially when we need to ask for more than just the basics, a form can get messy and unusable due to clutter and a rubbish user interface. Here are some tips to a better form UI.

Tools

Neocities tries to get back the platform that powered millions of websites in the early days of the web: Geocities. But they don’t want to do the same errors again, so they try to build it on an independent, redundant infrastructure. Now they shared how they want to achieve their vision of the distributed web. Baseline is to use IPFS, a peer-to-peer hyper media protocol, with HTTP only as interim “fallback”.

Security

The recent Ashley Madison hack has shown how to make your originally safe password hashing useless. Many passwords have been already decrypted that way and it again turns out that most passwords are super simple and predictable. It shows that even if the passwords wouldn’t have been cracked, hackers could still run word-lists on the hashes and get access to the accounts easily. Always choose a strong password and use them only once.

Web Performance

James Avery, CEO of Adzerk, a big ad serving company, has published an article in which he shares the opinion of many users: People won’t stop using ad-blockers and privacy tools. And the ad industry will not stop ad-blockers. Instead the industry needs to stick to Do-Not-Track settings, needs to actively support privacy and stop making websites slow. It’s refreshing to read such encouragement and strong words against his own industry while others keep quiet or try to file lawsuits against ad-blockers.

HTML / SVG

Heydon Pickering explains how to re-create the goodness of gifs in a vector format with SVG. A great source to dive deeper into animations and if you’re doing children books or playful graphical animations this is the resource to refer to.

Accessibility

In times where we inject animations on scroll, let elements fly in and make use of other playful animations on websites, we also need to think about users who get distracted or get ill by such “enhancements”. Val Head writes how you can really enhance your motion animated website with some controllers that allow people to disable the animations.

JavaScript

Jets.js is a live search/filter for your site that has great performance. Instead of handling class or style changes on each affected item, it uses dynamic inline CSS rules that are way faster when you have a lot of targets. A simple but great concept.
The series “Let’s talk about the Web Animations API” by Dan Wilson consists of five steps that introduce you to the new API, tell you what it is, how to use it, how to deal with timelines, player options, multiple animations, group or sequence effects, and motion paths.

CSS / Sass

While you probably used currentColor already, the way older inherit value gets ignored way too often. With “Back to the :roots”, simurai explains what is possible with CSS when you make effective use of the cascade and its specificity. And instead of trying to get rid of it you can use it in your components to be flexible and avoid maintenance work.
Organizing CSS files can be quite challenging. That is why so many people and especially larger teams choose techniques like BEM or ITCSS which help to stay organized with all the selectors being added over time in a project.

Work & Life

Seb Lester is a master calligrapher. Jeff from Booooooom has talked to him and asked him about calligraphy, his life and how to do great work by seeing client work as your own.

Think Outside The Box By Seb Lester — Think outside the box by Seb Lester

Jared Laham describes the importance of doing real crafts to stay creative and how making knives helps him to be a better designer.
In the best work environments, we are better at what we do every day because we want it and our employers nurture the exploration. When interviewing job candidates, you might not want to ask about strengths and weaknesses anymore but about the places that the candidate hasn’t explored, but wants to.

Go Beyond…

The world wide fund for nature reports that a single generation of humans (ours) has managed to wipe out nearly 50% of all world’s marine species. We finally need to recognize that this is reality and that for example the oceans will not at all be a healthy environment anymore without marine species living in there.
It’s nice to always have the latest gadget and I’m often not different here. We all like this but what this means to our environment is quite awful. Maybe we should step back a bit and reconsider if we really need the newest gadget from Kickstarter (that we usually don’t use anyway). The article shows where the resources of our electronic devices are from and how the environment looks like over there.

By the way, I added Stripe as donation option now and you can support WDRL now easier than ever with your favourite service!

And with that I’ll close for this week. Please share the list if you liked it and spread the word!

Thanks and all the best,

Anselm