Web Weekly #47 (#blogPost)

Happy Monday, party people! 👋This week has been a rollercoaster! I discovered that Natalie Imbruglia’s "Torn" is a cover, jumped into a massive JavaScript…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Happy Monday, party people! 👋

This week has been a rollercoaster! I discovered that Natalie Imbruglia's "Torn" is a cover, jumped into a massive JavaScript ecosystem rabbit hole (including skypack, snowpack, rollup and esbuild – more to come), and received some beautiful npom stickers. It's been a good week, and I hope you had a good one, too!

This week's Web Weekly includes:

  • The outdated video element
  • Accessibility warnings in browser dev tools
  • color-scheme in CSS and HTML

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

Something that made me smile

Did you ever want to render images as HTML checkboxes? Me neither, but I have to say, doing so makes me happy!

"Checkbox" yourself

Do we need a better video element?

With YouTube being the big player, how often do you use the good old video element? I don't use it at all. Daniel Aleksandersen argues that the element's functionality is lacking what we need; I agree!

Think about videos

"Every project CSS"

Do you have CSS that you include in every project? I don't (but definitely should!). Josh W. Comeau shared and explained his CSS reset approach. It's a good read with many examples.

Include some base styles

Lovely little websites

I loved Cosima Mielke's collection of creative websites. Her post includes countless sites that make the web so beautiful!

Discover some good stuff

It's all about the "fried ratio"

Speaking of fun little websites; Chris Williams' "Fry Universe 🍟" explains why you might like some fries more than others. The site comes with fancy 3D models built with the canvas element.

See some 3D magic

Accessibility warnings in Edge developer tools

I argued that browser dev tools should show more accessibility warnings two years ago. I'm delighted to see that Edge keeps innovating and shows accessibility hints right in the elements panel. Good stuff!

See more a11y warnings

A suspicious npm command

Did you know that npm includes a birthday command? The command is supposed to be an easter egg, but its source code is obfuscated. The "malicious" code resulted in a GitHub issue discussion worth a read.

Learn more about "npm birthday"

How to get around paywalled articles

I haven't tried 12ft.io yet, but it claims to make paywalled articles accessible. It's worth a try.

Break some article paywalls

Fascinating number facts

The following fact about numbers blew my mind! Pick a random number like 12345, shuffle the digits (54321) and subtract one from another. The result will always be a multiple of 9.

(12 - 21) / 9 = -1
(345 - 354) / 9 = -1
(54321 - 12345) / 9 = 4664

This trick works for any number! Samuel Bernheim shared how to use this fact for "party math tricks" (everybody loves these, right?).

Level up your party game

Vanilla CSS entrance animations

Creating CSS Animation is tough. That's maybe why a lot of people go for JavaScript solutions to add some website delight. Neale Van Fleet shared how to animate elements without any JavaScript. I'm down!

Animate some entrances

Til recap: Dark mode and color-scheme

Firefox 96 will come with color-scheme support. color-scheme allows you to define that your website supports dark and light mode so that browsers can adjust UI controls such as input elements and scroll bars.

If you're shipping dark mode, now's the time to implement a proper color scheme definition!

Define your color scheme

If you learned something, no matter if small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

A new Tiny Helper

If you tried to vectorize an image, you might know that there are many tools, but few do a great job creating SVGs. Thomas Steiner released svgco.de, which will come in handy!

Vectorize everything

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

A quote to think about

This week I learned that Natalie Imbruglia's song "Torn" is a cover. 🤯 This YouTube comment is too real!

Every "90s kid" comes of age 3 times: 18th birthday, 21st birthday, the day they find out Natali Imbruglia's version of "Torn" is a cover.

A song that makes you stop coding

This week's song is a track I'll keep around for next summer. "Thieves" is a nicely rolling house track that caught my ear.

Listen to "Thieves"

Thank you for reading!

And that's a wrap for the forty-seventh 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! 🎉 👋


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2021-11-28T23:00:00+00:00) Web Weekly #47 (#blogPost). Retrieved from https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/

MLA
" » Web Weekly #47 (#blogPost)." Stefan Judis | Sciencx - Sunday November 28, 2021, https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/
HARVARD
Stefan Judis | Sciencx Sunday November 28, 2021 » Web Weekly #47 (#blogPost)., viewed ,<https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/>
VANCOUVER
Stefan Judis | Sciencx - » Web Weekly #47 (#blogPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/
CHICAGO
" » Web Weekly #47 (#blogPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/
IEEE
" » Web Weekly #47 (#blogPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/. [Accessed: ]
rf:citation
» Web Weekly #47 (#blogPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/11/28/web-weekly-47-blogpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.