Script Raccoon

Plan of a tall building with several layers, indicated with buttons with misaligned plus symbol inside

Label saying "Hotel" along with a misaligned plus symbol

This plus symbol 😳

When you login to an app / website on a new device and it doesn't ask you to verify the device via a code sent by email, what do you think about the app?

I immediately think that this app has low security standards. Maybe I am exaggerating, though.

I'm glad it's becoming the standard.

I wonder how many people would update Chrome that way :D

Still, a very interesting chain of vulnerabilities.

<button onclick="document.body.innerHTML=' '">Don't click me!</button>

Reminds me how often the free plan among other paid plans is greyed out or needs to be found first by scrolling down a lot. Well they gotta do everything to get the money.

Simple
Versatile
Elegant
Lightweight
Tiny
Effortless

... or ...

Repetitive
Entangled
Awkward
Complicated
Tedious

Choose your framework wisely

Some tiny JS is hidden in the markup, though. It would be interesting if this works without JS 🤔 (and input of type range).

If only the syntax would be nice...

I got these accessibility warnings when I started with Svelte. I learned a lot from these warnings and also made a full accessibility course at some point - since then I never got any such warnings anymore. I completely forgot they exist. They seem to be a good introduction to the topic.

Some images are down in that post.

Hmmm, your twitch page says that there is no content. 🤔

That just sounds too familiar from tech 😆.

Sometimes I apply a "git mindset" to real life. Fixed one thing? Good, let's commit it (pause)! Noticed something bigger? Let's start a branch! No time now? Write an issue for later!

Yeah sure cannot be more nerdy, but it helps to not get overwhelmed 😎

That sounds very dangerous to me? So yeah, definitely in a dev container.

Ah, yet another good reason not using placeholders (there are several more, such as bad contrast).

It always strikes me why people want to manually write minified code that is built using an extra library instead of writing expressive, readable code that works out of the box.

Disadvantages of Tailwind Why the popular CSS framework is not maintainable

Yeah...

scriptraccoon.dev/blog/tailwin...

Dodecahedron with pure, 3-dimensional #CSS 🤹

codepen.io/scriptraccoo...

For extra fun, you can even go inside!

Ok. Why isn't it the default? I assume backwards-compatibility? But couldn't there be a way of upgrading to a certain "version of CSS" in the future? For example, I would also like to have a version of CSS in which flex-wrap: wrap is the default, the current default value being almost always wrong.

BuT iDoN't hAvE rEaCt-NuMbEr-InPuT pAcKaGe 🤡

Why is the raccoon crying 😭

Optical Illusion with CSS #4 ...

I also made a few optical illusions with CSS a while back. Such as this one:

codepen.io/scriptraccoo...

Still not believing the code I wrote. ;)

"The straight lines" Yeah sure. "straight" 😁

Well done.

Octahedron with pure CSS :)
📎 codepen.io/scriptraccoo...

Just please don't redo the mistake of RSC...

Very nice effect, will read the article tomorrow!

We can also have an *approximate* CSS-only solution by doing that trick where the body is covered with a grid with many cells that update a custom property when hovering.

a black and white line drawing of a cow laying down on the ground . Alt: Drawing of a cow without legs that is walking on its udder

Never touch a running system. 😉

I think it is better to have all the settings right there but collapsed by default. And these fields should have defaults already set up.

Sounds like 1999 to me.

open.spotify.com/track/6EXi6Z...

I sort them by length.

top:
left:
scale:
height:
display:
position:
transition:
font-family:
padding-inline:
text-underline-offset:
animation-timing-function:
...

I know the general purpose (it's written in the docs well) but as I mentioned I never saw a use case (running in production - of course I know minimal examples) where snippets are really better than components.