🧢 Stefan's Web Weekly #17
Tags: webdev
Published: 2021-05-02 22:11:38

---
title: 🧢 Stefan's Web Weekly #17
published: true
description: The value of dotfiles, the new `color-contrast()` CSS function and language in leadership.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-17/
series: Web Weekly
---

## Welcome to Web Weekly #17!

Hello friends! I had a fairly unspectacular week (which is awesome!), but there was one thing that made me laugh out loud. I'm usually not into code humor but [look at this beauty](https://twitter.com/wortwart/status/1386627527641374720). 😆

![Fun CSS tweet: div[style*="margin: 16px 0;"] {margin: 0 !important}](https://images.ctfassets.net/f20lfrunubsq/6SofAMaK8lyvzg8WgFOS4z/12d933c47e5d15c1cf215e53d69d7928/Screenshot_2021-05-02_at_20.35.17.png)

This week's Web Weekly includes:

- the value of dotfiles
- the new `color-contrast()` CSS function
- language in leadership

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Ready? Steady. Go!

## Is crypto destroying free CI offerings?

![CI providers like LayerCI, GitLab, TravisCI, and Shippable are all worsening or shutting down their free tiers due to cryptocurrency mining attacks.](https://images.ctfassets.net/f20lfrunubsq/5UQZWzErwZZRb18NiFipW9/608fd2f7ba2eccb2a9528a5c0a355782/Screenshot_2021-05-02_at_20.03.06.png)

It was just a matter of time, but it seems that CI providers such as GitHub (with GitHub actions), Travis CI or Circle CI are increasingly facing the misuse of their platforms to mine cryptocurrency. Let's hope that the providers find a smart way to keep their free offering while banning the crypto actors.

👉 <a class="btn btn__small" href="https://layerci.com/blog/crypto-miners-are-killing-free-ci/">Read about crypto miners</a>

## A lifetime investment – dotfiles

![Your unofficial guide to dotfiles on GitHub.](https://images.ctfassets.net/f20lfrunubsq/G6QVkz1KuUIZ2VGmWQBAE/db5a626fe4f6cbdfa315e8236760a99f/Screenshot_2021-05-02_at_20.09.32.png)

Years ago, I started investing in [my dotfiles](https://github.com/stefanjudis/dotfiles/). Dotfiles projects store configuration files such as `.zshrc` or `.gitconfig` and often also include complete machine setup scripts.

Whenever I get a new machine, a new setup takes me an hour instead of days. If you're looking for some inspiration `dotfiles.github.io` lists various approaches to excellent dotfiles.

👉 <a class="btn btn__small" href="https://dotfiles.github.io/inspiration/">Get inspired by other folks' dotfiles</a>

## Individual CSS transforms landed in Safari

![CSS Individual Transform Properties – With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way.](https://images.ctfassets.net/f20lfrunubsq/2OQWUnJqvz9s8vLX1QhF9K/c8dbdd8a654320269d1626d6271a2e7b/Screenshot_2021-05-02_at_20.52.12.png)

[Webkit's recent release notes (14.1)](https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/) were full of new features. They include `gap` support in flex layouts, date support for input elements ([I can't believe it!](https://twitter.com/stefanjudis/status/1387834574026248192)), individual CSS transforms, and much more! It's a solid release. 👏

The new CSS properties `translate`, `rotate` and `scale` make animations more straightforward. But you can't just change every `transform` property to use them. I wrote about what you need to know. 👇

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/blog/order-in-css-transformation-transform-functions-vs-individual-transforms/">Get ready for individual CSS transforms</a>

## The new CSS `color-contrast()` function

![Graphic explaining how CSS color-contrast() works](https://images.ctfassets.net/f20lfrunubsq/52aq7oDG0rgb3JYawnAA0B/2d283f50c8e7713d5011bdc0fff50d14/Screenshot_2021-05-02_at_20.58.37.png)

Speaking of Safari, the recent tech preview also shipped a new CSS function – `color-contrast`. It's still very early days, but one day we can write CSS that automatically changes colors depending on contrast. Chris Coyier had a look at the new CSS feature.

👉 <a class="btn btn__small" href="https://css-tricks.com/exploring-color-contrast-for-the-first-time/">Learn about color-contrast</a>

## Can we finally have page transitions?

![Source code: function handleTransition() {   document.documentTransition.prepare({ rootTransition: "reveal-left", duration: 300, sharedElements: [e1, e2, e3] }).then(() => { doCustomThings(); document.documentTransition.start({ sharedElements: [newE1, newE2, newE3] }).then(() => console.log("transition finished")); }); }](https://images.ctfassets.net/f20lfrunubsq/2xg0CZA0DsIwurEJWOPxZw/c29697a0b0383b027839eafb97a33409/Screenshot_2021-05-02_at_21.29.39.png)

Here's another one from Chris Coyier. I'm 100% convinced that one reason for the overuse of JavaScript frameworks today is that there's no way to visually transition from one page to another. Let's hope that we finally make some progress on the matter.

👉 <a class="btn btn__small" href="https://css-tricks.com/shared-element-transitions/">Learn about the shared element transition proposal</a>

## The importance of language in leadership

![Your team is “we”. You are a driving force of that team, no matter how high up the hierarchy chain. What happens on that team is your responsibility. When you speak about your org, you should include yourself in the statement.](https://images.ctfassets.net/f20lfrunubsq/3pA9n0EO9WeLSGDOGCo0Ut/1096b944e50763363ce8b0bd6214532e/Screenshot_2021-05-02_at_21.46.58.png)

I'm leading Contentful's DevRel team for a year now, and I still have so many things to learn. Sarah Drasner wrote an excellent advice post on how to communicate when managing a team! 💯

👉 <a class="btn btn__small" href="https://css-tricks.com/your-team-is-not-them/">Read "Your team is not them"</a>

## The new WebAIM million report is out

![The 2021 WebAIM Million Report is now available. This annual accessibility analysis of the home pages of the top one million web sites provides insight into the current state of and trends for web accessibility.](https://images.ctfassets.net/f20lfrunubsq/7CK0BEUSr5dC5SJxm3FexX/dc24a76a6dd3347a027ffb26c1fdd63c/Screenshot_2021-05-02_at_21.38.15.png)

WebAIM (web accessibility in mind) published their yearly Million report. The report shares the state of the web in terms of web accessibility. It looks like the web is doing a better job than last year (it's still super bad, though).

👉 <a class="btn btn__small" href="https://webaim.org/blog/webaim-million-2021/">Read the Million report</a>

## Why you shouldn't run at full speed

![Specifically: I'm conscious of the amount of mental energy I spend at the office. I try to pace myself, to "eat until I'm 80% full."](https://images.ctfassets.net/f20lfrunubsq/1wbDUB2xCGaO3SrM7eMDq7/d5391c7416d185c8da1d63e21059fad4/Screenshot_2021-05-02_at_21.06.17.png)

Justin Jackson shared his approach to work (and life). He's running at 80% of his abilities and time commitment. This way of living resonates with me, and I'll try to adopt it.

👉 <a class="btn btn__small" href="https://justinjackson.ca/the-principle-that-changed-my-life">Slow yourself down</a>

## CSS education in DevTools

![Can we have "Learn more" resources for the CSS cascade?](https://images.ctfassets.net/f20lfrunubsq/4t5kuucWCQ4MqSL8lBBeJP/8d6874552700d4482f4b444d7497c46e/Screenshot_2021-05-02_at_21.54.41.png)

I was looking for the display of selector specificity in Chrome's/Firefox' developer tools yesterday. To my surprise, no developer tool shows selector specificity anywhere. Do we have an opportunity to teach developers CSS fundamentals while they're building for the web? I think so!

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/">Advocate for more CSS education</a>

## The power of habits

![The four stages of habit](https://images.ctfassets.net/f20lfrunubsq/5pTufuEQGCElv0A35AEkai/774b95442833890af778b536c297eb41/Screenshot_2021-05-02_at_22.00.27.png)

Last year I read James Clear's book [Atomic Habits](https://amzn.to/2Rnfe6M). The book describes ways to achieve more in life due to well-defined habits. Read the following excerpt to learn more. I can't recommend it enough. 🙈

👉 <a class="btn btn__small" href="https://jamesclear.com/three-steps-habit-change">Improve your habits</a>

## Reader shout out 💙

![Stefan's newsletter is the one newsletter I actually read on the day it gets in - instead of bookmarking it under MUST_READ and never getting around to doing that... I always learn something, whether it be about tech or how to be a more productive, effective, and inclusive developer. <3](https://images.ctfassets.net/f20lfrunubsq/3ZTXQcv2eTStd9SqHD5htm/72e06221eef3ebff905d2b9fc849a599/Screenshot_2021-05-02_at_22.34.28.png)

Eva, who writes on [includejs.dev](https://includejs.dev/), occasionally answers this newsletter to send me valuable resources. She also agreed to be included on my sign-up page. Thank you, Eva!

## A new Tiny Helper

![VSColors screenshot](https://images.ctfassets.net/f20lfrunubsq/pssbGEblfLnU4Wm02Smaq/c0eb9d8f7f536e1534f2b5afd112b5c6/Screenshot_2021-05-02_at_22.36.30.png)

VSColors helps you to find your next VS Code color theme.

👉 <a class="btn btn__small" href="https://www.vscolors.com/">Browse Code themes</a>

*Find more single-purpose online tools on [tiny-helpers.dev](https://tiny-helpers.dev/)*

## Three valuable projects to have a look at 

- [anishathalye/dotbot](https://github.com/anishathalye/dotbot) – A tool that bootstraps your dotfiles.
- [Stefanye/CSSHell](https://github.com/Stefanye/CSSHell) – A collection of common CSS mistakes, and how to fix them.
- [jsxtools/cqfill](https://github.com/jsxtools/cqfill) – A polyfill for CSS Container Queries.

## A quote to think about

[Katherine Peterson shared some wisdom on technology and framework preferences](https://twitter.com/katherinecodes/status/1388285111666241539), and I agree. My tech choices are usually based on things I know very well.

> When someone has a strong technology preference, it's often just because it's what they learned first.

## A song that makes you stop coding

![Screenshot of "The Head and the Heart - Lost in My Mind"](https://images.ctfassets.net/f20lfrunubsq/1pqdXQ0iQ4HEFg0VI0Y3hW/77dc810814009dd5d125face64a8cfb0/Screenshot_2021-05-02_at_22.46.23.png)

This week's song is a beautiful folk track from "The head and the heart". "Lost in My Mind" brought back many memories for me. 🙈

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=xjoA4nYBD5U">Listen to "Lost in My Mind"</a>

## Thank you for reading!

And that's a wrap for the seventeenth Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

- [Share it on Twitter](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter&url=https://www.stefanjudis.com/blog/web-weekly-17/).
- Forward it to someone who might like it.

If you're not a subscriber, [you can change that](https://www.stefanjudis.com/newsletter/)! 😉

---

**Stay safe, and I'll talk to you next week!** 🎉 👋

PS. I heard the cool kids use RSS. You can find [multiple feeds on my site](https://www.stefanjudis.com/feeds/).