Web Weekly #4 (#blogPost)

This week’s edition includes more MacOS menubar apps, too small mouse cursors, a single-div CSS panda and the question if the img HTML element is too complicated.

Ready? Let’s do it!

An eight-year-old explains how to build a single-div CSS panda



Section titled An eight-year-old explains how to build a single-div CSS panda

8 year old explaining how to make a single-div CSS panda

I’m always amazed by single-div CSS art, but I’m mindblown when an 8-year-old enters the CSS magic game and explains how it works! ?

Watch Diana explain her CSS panda

Is your mouse cursor too small?



Section titled Is your mouse cursor too small?

Scott Hanselmann "Hey friends, your mouse cursor is too small.

After watching Scott Hanselmann’s ode to big mouse cursors, I increased mine (just a bit) and well… It is much better. ? Give it a try!

Join the #BigMouseGang

Menubar apps

Last week I shared the MeetingBar menubar app. It shows the time left to your next meeting, and you can enter virtual meeting rooms super quickly!

This week, I thought, why not share other menubar apps I don’t want to miss.

  • BarTender – Hide all the unimportant icons in the menubar.
  • Netlify Menubar – I built this. ? The app shows you Netlify build status and notifies you when you’re site deployed.
  • MonitorControl – Control the sound and display of your second monitor.

What are your favourite apps? I always love to discover new tools!

Explainer video of focus-visible

Firefox soon supports :focus-visible. If you want to learn more about it, I posted an explainer #devsheet on Twitter.

Watch explainer video

Constantly think about audiences  A lot of communication fails because the same thing – a piece of text, or a video clip, or a presentation – is used over and over again to communicate to different audiences.

The ability to write and communicate clearly is an essential skill when creating content online. “How to be clear” is an excellent read not only for content creators.

Read “How to be clear”

Why you shouldn’t write only “Hello”



Section titled Why you shouldn’t write only “Hello”

No hallo. Please don't say just hello in chat

I love it when I find “random” sites on the internet. It’s amazing that people sit down, buy domains and code websites just to make a point. ?

nohello.net explains, why you shouldn’t just write “Hello” in real-time chats.

Check nohello.net

DevSheet explaining complex selectors in CSS not

Complex CSS selectors in :not() pseudo-classes are now supported in evergreen browsers (Chromium, Safari and Firefox). CSS becomes more powerful every month!

Learn more about complex selectors

Don’t use functions as callbacks unless they’re designed for it



Section titled Don’t use functions as callbacks unless they’re designed for it

Source code: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it's more like: const readableNumbers = someNumbers.map((item, index, arr) =>   toReadableNumber(item, index, arr), );

Jake Archibald published an article about callback handling. I never realised that passing callbacks directly to native functions can break eventually. This post changed how I’ll write JavaScript in the future.

Reconsider your callback code

Did native image loading become too complicated?



Section titled Did native image loading become too complicated?

Example code snippets for Image components in Eleventy, Next and Gatsby

A while back, I shared a snippet of a complete picture element. It covers future image formats, decoding, viewport handling, and many other things. The snippet shows that image handling is complicated in 2021!

That’s why more and more frameworks started implementing user-friendly image handling to make our lives easier:

Are powerful abstractions the future of image loading? I wonder if it’s time to rethink the img and picture element.

Screenshots of weekly logs

I started following more people that publish regular notes online. These casual notes often include links and resources that are outside of my usual bubble. Here are three blogs that I enjoy reading:

If you’re posting your weekly/monthly notes online, let me know!

Three new tiny helpers: Pixelr, Avataaar and SVG Crop

I added more tools to tiny-helpers.dev:

Find more Tiny Helpers

Three useful projects to have a look at



Section titled Three useful projects to have a look at

Wise words from Wylesha Rachell. ?

I document purely for selfish reasons because If I’m busy, I don’t want anybody to ask me questions.

A song that makes you stop coding



Section titled A song that makes you stop coding

Cover: Moneybrother – They're building walls around us now

This week, our local independent radio station played Moneybrother’s “They’re building walls around us”. I was a huge Moneybrother fan when I moved to Berlin, and I still love this song. It’s a classical indie track with lots of strings. ?

Listen to Moneybrother

And that’s a wrap for the fourth Web Weekly! ?

If you enjoyed this edition, a quick share means the world to me. 🙂

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.



Reply to Stefan


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

This week's edition includes more MacOS menubar apps, too small mouse cursors, a single-div CSS panda and the question if the img HTML element is too complicated.

Ready? Let's do it!

An eight-year-old explains how to build a single-div CSS panda

Section titled An eight-year-old explains how to build a single-div CSS panda

8 year old explaining how to make a single-div CSS panda

I'm always amazed by single-div CSS art, but I'm mindblown when an 8-year-old enters the CSS magic game and explains how it works! ?

Watch Diana explain her CSS panda

Is your mouse cursor too small?

Section titled Is your mouse cursor too small?

Scott Hanselmann "Hey friends, your mouse cursor is too small.

After watching Scott Hanselmann's ode to big mouse cursors, I increased mine (just a bit) and well... It is much better. ? Give it a try!

Join the #BigMouseGang

Menubar apps

Last week I shared the MeetingBar menubar app. It shows the time left to your next meeting, and you can enter virtual meeting rooms super quickly!

This week, I thought, why not share other menubar apps I don't want to miss.

  • BarTender – Hide all the unimportant icons in the menubar.
  • Netlify Menubar – I built this. ? The app shows you Netlify build status and notifies you when you're site deployed.
  • MonitorControl – Control the sound and display of your second monitor.

What are your favourite apps? I always love to discover new tools!

Explainer video of focus-visible

Firefox soon supports :focus-visible. If you want to learn more about it, I posted an explainer #devsheet on Twitter.

Watch explainer video

Constantly think about audiences  A lot of communication fails because the same thing – a piece of text, or a video clip, or a presentation – is used over and over again to communicate to different audiences.

The ability to write and communicate clearly is an essential skill when creating content online. "How to be clear" is an excellent read not only for content creators.

Read "How to be clear"

Why you shouldn't write only "Hello"

Section titled Why you shouldn't write only "Hello"

No hallo. Please don't say just hello in chat

I love it when I find "random" sites on the internet. It's amazing that people sit down, buy domains and code websites just to make a point. ?

nohello.net explains, why you shouldn't just write "Hello" in real-time chats.

Check nohello.net

DevSheet explaining complex selectors in CSS not

Complex CSS selectors in :not() pseudo-classes are now supported in evergreen browsers (Chromium, Safari and Firefox). CSS becomes more powerful every month!

Learn more about complex selectors

Don't use functions as callbacks unless they're designed for it

Section titled Don't use functions as callbacks unless they're designed for it

Source code: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it's more like: const readableNumbers = someNumbers.map((item, index, arr) =>   toReadableNumber(item, index, arr), );

Jake Archibald published an article about callback handling. I never realised that passing callbacks directly to native functions can break eventually. This post changed how I'll write JavaScript in the future.

Reconsider your callback code

Did native image loading become too complicated?

Section titled Did native image loading become too complicated?

Example code snippets for Image components in Eleventy, Next and Gatsby

A while back, I shared a snippet of a complete picture element. It covers future image formats, decoding, viewport handling, and many other things. The snippet shows that image handling is complicated in 2021!

That's why more and more frameworks started implementing user-friendly image handling to make our lives easier:

Are powerful abstractions the future of image loading? I wonder if it's time to rethink the img and picture element.

Screenshots of weekly logs

I started following more people that publish regular notes online. These casual notes often include links and resources that are outside of my usual bubble. Here are three blogs that I enjoy reading:

If you're posting your weekly/monthly notes online, let me know!

Three new tiny helpers: Pixelr, Avataaar and SVG Crop

I added more tools to tiny-helpers.dev:

Find more Tiny Helpers

Three useful projects to have a look at

Section titled Three useful projects to have a look at

Wise words from Wylesha Rachell. ?

I document purely for selfish reasons because If I'm busy, I don't want anybody to ask me questions.

A song that makes you stop coding

Section titled A song that makes you stop coding

Cover: Moneybrother – They're building walls around us now

This week, our local independent radio station played Moneybrother's "They're building walls around us". I was a huge Moneybrother fan when I moved to Berlin, and I still love this song. It's a classical indie track with lots of strings. ?

Listen to Moneybrother

And that's a wrap for the fourth Web Weekly! ?

If you enjoyed this edition, a quick share means the world to me. :)

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.


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-01-30T23:00:00+00:00) Web Weekly #4 (#blogPost). Retrieved from https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/

MLA
" » Web Weekly #4 (#blogPost)." Stefan Judis | Sciencx - Saturday January 30, 2021, https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/
HARVARD
Stefan Judis | Sciencx Saturday January 30, 2021 » Web Weekly #4 (#blogPost)., viewed ,<https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/>
VANCOUVER
Stefan Judis | Sciencx - » Web Weekly #4 (#blogPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/
CHICAGO
" » Web Weekly #4 (#blogPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/
IEEE
" » Web Weekly #4 (#blogPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/01/30/web-weekly-4-blogpost/. [Accessed: ]
rf:citation
» Web Weekly #4 (#blogPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/01/30/web-weekly-4-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.