Web Development Reading List #111: Preconnect, Dynamic Responsive Images, DOM Event Listeners
Each week when reviewing links I’m grateful that so many people write such great articles. Useful technical articles that help you resolve front-end issues, inspirational articles that motivate you to enjoy work again, and sort of “social” articles that reveal that there are still start-ups out there that do their best to be meaningful, and not just seeking an exit strategy to sell out. I’d love more people in the world think like that, embrace their employees’ work time, try to force workaholics to stop working, and build health monitors in the team.
News
- Only a few weeks after Node.js 4 was released, Node.js v5 has followed. You can grab it now, but don’t worry – version 4 will still be supported and updated for a quite long time as it’s a long-term release. You can also read about the new version releases and what’s important.
- Latest Chrome and Opera 33 now support
<link rel=preconnect>
as well as extended sandboxed iframe options,history.scrollRestoration
, CSS intrinsic sizing, Client Hints, and HKPK support. - Firefox has released v42. It includes the new, more bullet-proof tracking protection in private windows, extended security and privacy settings, mute audio tabs instantly, and WiFi debugging in DevTools.
Concepts & Design
- The Awesome collections got a new member: Awesome Stock Resources with a comprehensive overview of freely available stock photos and videos.
Tools
- For me personally this is a very annoying thing: deprecated, abandoned branches in git repositories. A how to mass-delete local and remote branches is a good round-up of solutions to this problem, and just a good reminder to keep things clean and focused.
- The new AVA test runner finally enables us to run tests much faster as it uses concurrency. You might want to check it out for your next project.
- With iOS 9 Apple has introduced a new kind of WebView. A hint: with an iOS app you can test all available WebViews on iOS easily.
Security
- Snyk finds and fixes known vulnerabilities in your Node.js dependencies. Also check out nsp which also can help you find vulnerabilities in your node.js applications.
Web Performance
- Dean Hume describes how to create dynamic reponsive images with WebP or JPEGXR images using Service Workers.
JavaScript
- Learn how to create and remove DOM Event Listeners the proper way.
- You can use Segment to animate your SVG path strokes easily. It’s a tiny library, so if you need only this functionality, consider using it instead of big libraries like GSAP.
- Ditch jQuery or use the upcoming release of jQuery 3? This question might keep you busy for a while. But jQuery is still relevant and you need to understand what jQuery is good for. It’s not just a DOM wrapper.
- The Pointer Events Polyfill is now available in version 0.4.0 which improves support for Webpack, Browserify and many small fixes.
Work & Life
- “Workaholics aren’t heroes. They don’t save the day, as they just use it up. The real hero is somebody who leaves work at work and comes home earlier because she figured out a faster way.” On how we all should put more focus on our work and get more spare time.
- Kickstarter’s Yancey Strickler speaks about the recent move of the company to become a public benefit corporation. He talks about venture capital, the poisonous urge to profit maximisation, idealism and how important it is for a company and people to not out-sell its values.
- Atlassian shares thoughts on establishing a health monitor in your project team.
Go Beyond…
- Make Me Uncomfortable: The Discomfort Zone at Epicurrence was a new and interesting experience for Jessica Collier, she says.
- One of the founders of Basecamp reflects on whether we should aim for owning the universe or rather focus on the one thing we want to actually solve. Because a lot of start-ups nowadays hardly focus on really making something better.
And with that I’ll close for this week. Please feel free to 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
Further Reading
- Responsive Web Design: What It Is And How To Use It
- Responsive Web Design Techniques, Tools and Strategies
- The State Of Responsive Web Design
- Design Process In The Responsive Age