Web Development Reading List #149: CSS Dynamic Colors, Refactoring CSS, And CSP Hashing

Even though we think everything happens in real-time nowadays, we need patience. While technology has been capable of real-time for long now, the “bottleneck” are human beings. Whether it’s a pull request that’s waiting for review since days or weeks or an email response, we need to keep in mind that delays might happen for a good reason.

Different people have different priorities, they might be focusing on something else at the moment, or they just take a break. Training patience is an important aspect of mental health, and, in the end, a well-thought-out, not instantly written feedback is better, too. Take your time and let others do the same.

To my readers in or near Germany: Some of you might be aware that I organize a small event, and this week I have one ticket to give away for the NightlyBuild conference 2016¹ in Cologne, Germany on September, 2nd. If you want to attend, just send me an email², and I’ll raffle the ticket on Tuesday.

News Link

• WebKit now supports <script> and <style> hashes³ so you don’t need to set your Content Security Policy to allow 'unsafe-inline'.

Privacy Link

• While researching a bit on user tracking, I found out about header enrichment, a technique used by mobile network providers to set unique identifiers. But more interestingly, while it’s advised by the IETF to not expose any of these headers to public servers, many ISPs do it anyway and leak the private IP addresses of devices, the IMEI/IMSI or even the phone number, to any server. This research paper⁴ by the ICSI analyzed the worldwide spread and impact on users’ privacy.
• Many of you might be aware that we can’t style :visited states and similar browser-history-based features in CSS very well. With CSS’ new mix-blend-mode-feature there seems to be a leak again that lets rogue sites inspect your browsing history. Michał Zalweski explains how it works⁵.
• Netflix engineers now share insights into how they protect the viewing privacy⁶ of their users by adding TLS to their video streams, which at that scale is a pretty challenging and interesting problem.

JavaScript Link

• Damon Bauer shares how you can build an image uploader in React.js⁷ and use it to manipulate the image for later usage.
• Peter van der Zee outlines how to reduce complexity in your code by thinking outside the box⁸. In another article worth reading, he also reflects on the question if we need JavaScript for everything⁹. The outcome of this little anecdote is nothing ground-breaking, but something we all should remind ourselves of from time to time.

CSS/Sass Link

• Erik Jung explores new ways to add dynamic themes in CSS with CSS variables and CSS Colors Level 4¹⁰ features like the new color() function.
• Meanwhile, Abbey Fitzgerald wrote a great tutorial on how to use CSS and SVG clipping and masking techniques¹¹ to create new types of layouts on websites.
• Harry Roberts now shares the slides to his talk “Refactoring CSS Without Losing Your Mind¹²”. Having experienced many of the mentioned problems already in the past, I think there are a lot of great tricks in there that can be really helpful.

Work & Life Link

• Today I read an interesting statement about constant learning¹⁵ (see the blockquote below) with which I fundamentally disagree. So instead of following this advice, I want to encourage you to take a break from constant learning every few days. There are reasons why you should rest on a weekend and recover from learning new things during the week: By taking a break, you’ll eagerly await learning something new afterwards.

“In today’s highly competitive business environment, we all need to be in constant learning mode. No one can afford to take a vacation from developing new skills, especially as economic and political uncertainty threaten businesses and job stability and make future career prospects unclear.”

• Rose Marcario, CEO of Patagonia, has published an essay on why it’s important that employers support families¹⁶. It’s not just about saying this but about taking meaningful, real action to make employees feel comfortable, have a good life, and enjoy working for their employer.

Going Beyond… Link

• The NASA started a new blog called “Science WOW!¹⁷” which shares educational articles on science each week. If you’re interested in learning how hurricanes form or about space exploration stuff, this might be for you.

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.

— Anselm

Footnotes Link

1. 1 https://nightlybuild.io/
2. 2 mailto:mail@wdrl.info
3. 3 https://webkit.org/blog/6830/a-refined-content-security-policy/
4. 4 https://www.icsi.berkeley.edu/pubs/networking/headerenrichment15.pdf
5. 5 https://lcamtuf.blogspot.de/2016/08/css-mix-blend-mode-is-bad-for-keeping.html
6. 6 http://techblog.netflix.com/2016/08/protecting-netflix-viewing-privacy-at.html
7. 7 https://css-tricks.com/image-upload-manipulation-react/
8. 8 http://qfox.nl/weblog/371
9. 9 http://qfox.nl/weblog/361
10. 10 https://cloudfour.com/thinks/building-themes-with-css4-color-features/
11. 11 https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
12. 12 https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind
13. 13 https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
14. 14 https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
15. 15 http://further.net/tricky-goals/
16. 16 https://www.linkedin.com/pulse/why-should-employers-care-families-rose-marcario
17. 17 https://blogs.nasa.gov/educationsciencewow/
18. 18 https://wdrl.info/donate
19. 19 https://wdrl.info/costs/

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to topTweet itShare on Facebook