Web Development Reading List #107

5 min read
Coding, Tools, 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.

Lately, web development has become very complex. People being full-stack developers often complain to me that they can’t care about all these cool things in front-end development. People doing front-end still complain about having too few things to control the website, make it faster, more reliable.

This growing gap worries me about the future of usual websites. For big web applications and big websites, it’s great to have all the options and a dedicated front-end performance engineer. But what about an average website? A simple website for a painter can’t cost thousands of dollars.

Do we indeed lose individuality by moving our process towards templates-based design? I hope not. I hope we find a way to simplify our workflows again within the framework of web standards, and that we’ll be able to communicate them clearly so everyone in the industry can make use of them. Let’s pull this trigger together. And if you have a story to share, about the workflows you are using or the toolset you prefer, just add it to the comments or send me an email.

News

This week, the AMP project has been launched. It’s a web tool and special subset of web technologies to enforce fast web performance. It’s controversial because it requires a duplicated, adapted variant of your website and while not allowing you to use most JavaScript features, it throws a huge (open sourced, Google based) JavaScript on top and controls the content and loading behavior of your site. Tim Kadlec wrote up some good thoughts on AMP that don’t present just a biased opinion but show reasonable concerns while reflecting on the advantages of the project.

Tools

We tend to solve a lot of problems related to the front-end by delegating them to existing programs. We use libraries and tools which we don’t understand completely – and our code base grows and grows. Simplify your Workflow is not only a slogan, but a necessary development, says Hans Christian Reinl.
At the MAX conference this week, Adobe announced Project Comet, a UX design tool that makes creating prototypes fast, easy and collaborative.

Security

Sometimes it can be hard to figure out issues with your Content Security Policy or similar security and privacy settings on your website. But you can inspect the CSP or referrer policy via Firefox DevTools.

Privacy

Subgraph OS will be an open source, secured and Tor-based operating system that is designed for usability and takes privacy and security into its core, so you don’t need to worry anymore or understand the technical details in its full extend.

Web Performance

We’re often talking about optimizing our JPEGs or PNGs. Some people optimize their image assets by using the newer, more efficient WebP format. Now, FLIF is coming up, claiming an even better size-to-quality ratio and featuring responsive asset container – which would be awesome. Unfortunately, it is not supported anywhere which is also the problem why the WebP share is still so low.
Having metrics is good, but it’s more important to actually understand it. Because metrics are often misleading, you need to know what to make out of it and how to extract reasonable findings out of metrics.
Now as we have reached a state where we technically know so many tricks to improve a site’s performance, the topic of perceived performance is getting more attention. Paul Irish and Paul Lewis from Google wrote up how to optimize performance following the user-centric RAIL model.
There are many resources on the web featuring tricks to improve web font loading. But I haven’t found a resource combining all the approaches, so I wrote my own article: Using Web Fonts The Best Way (in 2015).

Accessibility

It’s two years old already, but still very useful. Take Karl Groves’ Diagnostic.css to test your webpage against the very basics of web accessibility.
When using interactive content on your website, we should always consider all users. For example, it could be a bad thing to show a full-sized, flickering or flashing video to an epileptic person. Therefore, the minimum requirement would be to always show controls to such interactive content or, even better, to warn people or not auto-play it.

CSS / Sass

Speaking of emails, Gmail is one of the clients that makes writing CSS templates for it very hard. Julie Ng summed up how she approaches responsive emails with the Gmail-first strategy. To help you with calculation of a responsive grid for your newsletter, Julie also built a tool called the Email Layout Calculator.

Work & Life

Zach Holman shares the difference of “Remote-First vs. Remote-Friendly” and explains why it’s important to not only treat remote working as side project in your team.
“Let a 1,000 flowers bloom. Then rip 999 of them out by the roots.” – this quote comes from Twitter’s tech lead of the Engineering Effectiveness group. The piece tells you a story about embracing developer’s work, letting the team grow and how to create an effective team.

Dark World Map — A world map showing the locations of remote workers, across all time zones.

Go Beyond…

“The secret to success in our fast-paced industry is, I believe, straightforward: make things, share things and – last, but by no means least – be nice to people. That’s it, really.”

And with that I’ll close for this week. In case 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 E-Mail, RSS and online.

Thanks and all the best, Anselm