Web Development Reading List #132: The Challenges In Our Field, Debouncing And The Contain CSS Property

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

What has been your biggest web development challenge recently? Was it a development issue, a communication issue or an education issue in your team? Facing so many things that don’t work as expected these days in many different teams and projects, I now realize that we all are part of a very young industry, and by challenging not only our technical foundations but also traditional working habits, we have yet to find how we want to work. Share your challenges in the comments to this post, and enjoy the weekend!

News

Grunt 1.0.0 has been released. Long time no hear, it’s still one of the most used task runners for front-end workflows. Now finally the stable release is out, and with it, many bugs and glitches have been fixed, making it now a robust solution for long-term projects. I’m excited to hear that the development roadmap has very nifty features for it to keep evolving in the future.

Concepts & Design

“A Simple Web Developer’s Guide To Color” features great methods for finding a lovely color palette for your next project.
Gidole is an open source font that claims itself as a modern DIN and looks pretty great.

Tools

If you use GitLab, the self-hosted alternative to GitHub, you can now also create GitLab Pages, using a static site builder of your choice (like Jekyll, Hexo, Middleman, or others). You can also easily set up HTTPS for them, and — even better — there are plans to integrate Let’s Encrypt in it, so you get a “seamless” HTTPS experience along the way. This is quite amazing to see as it has strong potential now to replace many hosted services with just one self-hosted GitLab server for many people.

Security

Last week I mentioned a social-engineering attack to repositories using Greenkeeper. The developers of the tool now reacted and offer users a method to verify the identity of the Greenkeeper bot. As it turns out, the new GitHub feature that shows verified commits using PGP signatures isn’t very helpful for that kind of attacks.
A spectacular announcement regarding content security has been made this week by Whatsapp: all (group) messages, calls are now End-To-End encrypted with Open Whisper Systems’ protocol. While this is great to see as it enables encryption for over 1 billion users, you should be aware that your metadata attached to Whatsapp is still not encrypted and while your message content is encrypted for all in-between, Whatsapp is still closed source and they could theoretically build in a logger prior to when the content is encrypted without you noticing it.

Privacy

Today, as developers, we have many great features built into the browser. On the darker side, many of the features are affecting privacy and security of the user, as a site can read most of the information available even without user noticing anything. A demonstration shows what information a site can get about you without your confirmation. An eye-opener to re-think browser UIs and how much responsibility we, as developers, have to do the right thing. Be it educating the product owners or your own product where you voluntarily display a dialog to give a choice and notice about sending such data to your servers, we should embrace ethics. As a user, I tried to access the demo with a default Chrome setting (revealing horribly much sensitive data) and Firefox with Strict Tracking Protection, uBlock Origin, Disconnect and 3rd party cookies disabled. Despite all blockers, the latter reveals ‘only’ the data about my browser, its active plugins, my hardware and my local and public IP address.

Web Performance

Bryan McQuade has shared his insights on 2G Network issues observed in India. The most interesting fact around there could be that 2G users (which is also still a common state of network in the EU, and probably also in the U.S.) browse the Web with 100kbps and 200ms RTTs. Calibrate your assumptions and test your projects with similar settings.

Accessibility

Many of us are pretty hooked on Custom Elements, and that’s because they offer us a great way to encapsulate widgets into a smaller portion of markup. On the other hand, the semantics of Custom Elements is really hard as the browser cannot add any information to the element itself. Now a guide helps you understand what the browser does for you with a regular HTML element regarding semantics, accessibility, usability. So if you are using Custom Elements, don’t forget to do it properly and provide all the required information as well.
By now, many of you might have realized that while accessibility is quite important, it’s not always a simple task to achieve. Jamie Teh reviewed some challenges when using ARIA attributes. Once you got through it, it can make your application and your code better — if used appropriately, of course.

JavaScript

React 15 is out, and with it a couple of interesting changes: instead of setting innerHTML when mounting components, it now uses faster document.createElement, gets rid of the data-reactid attribute on every node and fixes SVG issues. In general, React now officially supports SVG, and produces cleaner markup by avoiding unnecessary <span> elements.
Seeing so much code that does not use debouncing or throttling for scroll, resize or typing events, I can only recommend this article for everyone not yet using it. The article visually explains the differences between a normal event listener, debouncing and throttling and shows example code for most common use cases.

CSS / Sass

Have you ever heard about the CSS contain property? I didn’t. Well, until I read the article by Michael Scharnagl, explaining that this little property will be soon helping us to solve a lot of use-cases for container queries. The property will allow authors to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.

Work & Life

“Being tired isn’t a Badge of Honor. Sustained exhaustion is not a rite of passage. It’s a mark of stupidity. In the long run, work is not more important than sleep. If you aren’t sure how important sleep is, think about this: You’ll die faster without sleep than you will without food.”

Going Beyond…

Last Sunday, my mother called me telling me about her issues when accessing her subscription management at a German newspaper “Sueddeutsche Zeitung” (SZ). She asked me because she thought something was wrong with her computer. Well, I checked it and it was the same for me. I noticed an extremely slow response from their server and then I saw something about “Panama Papers”. A data leak reported to the SZ has now been analyzed partially and the first reports are now published.
SZ’s site is a relatively heavy-weighted page with lots of scripts. The site was suffering several days from the massive amount of requests, being mostly inaccessible for many users. This could’ve been avoided by caring more about web performance and by stocking up the resources before such disclosures. On the other hand, it’s now clear that the leaked data has been obtained through vulnerabilities in old Outlook, WordPress and Drupal installations at the company managing the fake companies.

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