Web Development Reading List #135: Boxy SVG, How To Keep Up, CSS Frameworks

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.

After spring has started marvelously, this week brought us some snow again. But today, the sun is shining, it’s getting warmer, and nature is flourishing. Inspired by the fresh green of spring, I’d like to announce The Evergreen List. This is a sub-part of my reading list, collecting important links that stay relevant over a longer time so that you can find them more easily. Give the page a try and if you have feedback, just email me.

News

Node.js 6.0 has been released and it’ll be the new LTS version. However, the release also brought along a lot of changes. While this is great because performance and security have improved and cool new features were added, it also forces a lot of modules based on Node.js to update their code. That said, test carefully before upgrading it in a production environment.

Generic

“The web isn’t uniform” is probably one of the best expressions to describe how a request to a website works. Karolina Szczur shares why we should embrace this fact more.

Concept & Design

It’s not a secret that agile work methods have positive effects on both workers and managers, but do you know the history of agile innovation? And while we’re at it, this story shares interesting insights into how effective it can be to apply Scrum to schools. Last but not least, an article by Atlassian explains the differences between Kanban and Scrum very well.

Tools & Workflows

There are different ways to compare screenshots. Usually, for testing tools, this has been done with command line applications, but you can now also create visual diffs easily by using CSS blend modes.
React Native brings coding for the web to iOS applications, providing a great alternative to Cordova. A new article by Nash Vail teaches you to use React Native to build an iOS application.
Very often, when you have git changes, some indentation or whitespace setting is altered, too. This is a bit annoying as it results in very confusing diffs. But you can actually add a w=1 query param to GitHub diff URLs to ignore whitespace.

Una Kravets found a neat way to create visual diffs using CSS blend modes.

Security

Alexa’s top one million sites were analyzed for their CSP implementation. The result: 99.62% don’t have a Content Security Policy at all, and of the remaining share only 53 sites integrated it without unsafe-inline options.

Web Performance

Jake Archibald elaborates on common caching mistakes and how to build a caching concept for your documents that works with the browser’s native cache and Service Workers. If you think no-cache or must-revalidate means the browser does not cache such resources, or if you ever wanted to understand caching properly, read his article.

HTML & SVG

You can build vector graphics in SVG format with the Boxy SVG editor, a Chrome application that is based on web technologies. A pretty cool alternative to the heavy-weighted Illustrator and Sketch applications which often create SVG code that not every browser understands.

When it comes to SVGs, Boxy SVG is a good alternative to Illustrator and Sketch.

JavaScript

In the upcoming version of Chrome, the NodeList object will finally be an iterable. This is great because we’ll be able to use const elements = document.querySelectorAll('a'); elements.forEach(a => console.log(a.getAttribute('href'))) to get a list of all href attributes instead of an error. And as it’s defined as an iterable in the spec, too, we can hope for NodeList to gain wide-spread browser support in the future.
In promise-based asynchronous code, rejections are used for error handling. One risk is that rejections may get lost, leading to silent failures.

CSS/Sass

A lot of developers think about this differently, but a lot of others use frameworks for every project, even if it’s not the best decision to make. Read on why you might not need a CSS framework, about drawbacks and alternatives to the framework approach that won’t sacrifice efficiency when developing a project.

Work & Life

Being a young developer is easy. One learns fast, new technology is exciting, and every type of work is accomplished easily. But if you’re getting older, things change. You might have a family, not enough time for learning, or just have realized that you value your spare time more if you’re not programming. Adrian Kosmaczewski shares his experience with being a developer after 40 and why learning the basics of a programming language is more important than focusing on frameworks and specific libraries.

Going Beyond…

The story of Blake Ross is touching as for most people imagining something in their minds is an ability they make use of all the time. But Blake can’t visualize anything in his mind, and now he shares how he lives with that fact.

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