🧒 Stefan's Web Weekly #17

stefanjudis

Stefan Judis

Posted on May 2, 2021

🧒 Stefan's Web Weekly #17

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. πŸ˜†

Fun CSS tweet: div[style*="margin: 16px 0;"] {margin: 0 !important}

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.

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.

πŸ‘‰ Read about crypto miners

A lifetime investment – dotfiles

Your unofficial guide to dotfiles on GitHub.

Years ago, I started investing in my 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.

πŸ‘‰ Get inspired by other folks' dotfiles

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.

Webkit's recent release notes (14.1) were full of new features. They include gap support in flex layouts, date support for input elements (I can't believe it!), 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. πŸ‘‡

πŸ‘‰ Get ready for individual CSS transforms

The new CSS color-contrast() function

Graphic explaining how CSS color-contrast() works

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.

πŸ‘‰ Learn about color-contrast

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")); }); }

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.

πŸ‘‰ Learn about the shared element transition proposal

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.

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! πŸ’―

πŸ‘‰ Read "Your team is not them"

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.

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

πŸ‘‰ Read the Million report

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

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.

πŸ‘‰ Slow yourself down

CSS education in DevTools

Can we have "Learn more" resources for the CSS cascade?

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!

πŸ‘‰ Advocate for more CSS education

The power of habits

The four stages of habit

Last year I read James Clear's book Atomic Habits. 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. πŸ™ˆ

πŸ‘‰ Improve your habits

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

Eva, who writes on 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

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

πŸ‘‰ Browse Code themes

Find more single-purpose online tools on tiny-helpers.dev

Three valuable projects to have a look at

A quote to think about

Katherine Peterson shared some wisdom on technology and framework preferences, 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"

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. πŸ™ˆ

πŸ‘‰ Listen to "Lost in My Mind"

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. β™₯️

If you're not a subscriber, you can change that! πŸ˜‰


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.

πŸ’– πŸ’ͺ πŸ™… 🚩
stefanjudis
Stefan Judis

Posted on May 2, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related