Lightnews — Scholar-powered news

Ana Tudor @anatudor.bsky.social · 2h

😭

I know this is true, seen it way too often, but I don't get it. I just couldn't leave it alone, I have to poke around, see how I can improve it...

1 8

Reposted by Ana Tudor

Alex Russell @infrequently.org · 20h

Look, you might think frontend is fine and going well, but today I found a 1.1MB PNG (that could have been a 40K AVIF) in the critical path of an important app.

Embedded in an SVG as a `data:` URL.

Shipped as a React component.

12 6 130

Ana Tudor @anatudor.bsky.social · 3h

This little thing I made a little over a year ago got picked on CodePen!

Tabs with rounded corners + borders. Has keyboard navigation.

#CSS #JS #SVG #subgrid

Ana Tudor @anatudor.bsky.social · Oct 13

Here's an example where I'm using something like this: switching between tabs.

Originally made this on @codepen.io after someone asked how to create tabs with rounded corners *and* borders.
codepen.io/thebabydino/...

Then finally polished it this weekend. Vanilla #CSS + #JS + a bit of #SVG magic.🪄

5

Ana Tudor @anatudor.bsky.social · 4h

I don't remember hundreds of passwords because I haven't made a hundred accounts in total in my lifetime. I'm pretty maniacal about avoiding most services that require an account. But I remember tens of long passwords for the accounts I do use.

1

Ana Tudor @anatudor.bsky.social · 5h

I've switched from Windows to Ubuntu over half a decade ago. And I'm happy with it, moves better than Windows on my laptop. A laptop whose age is in two digits. But Vivaldi is painfully slow, even after I've spent a ridiculous amount of time going through the settings and disabling all I could.

1

Ana Tudor @anatudor.bsky.social · 9h

`of` is followed by the radius

[end-point-x] [end-point-y] of [radius]

to get an arc "the other way" not the default, add `cw` (clockwise) at the end

Another example here codepen.io/thebabydino/...

screenshot of my linked demo, showing a progress ring and a map area curving above it

2

Ana Tudor @anatudor.bsky.social · 11h

Hey, look, this little thing made this week's CodePen Spark!

#CSS

Screenshot of this week's CodePen Spark with my demo featured.

1 15

Ana Tudor @anatudor.bsky.social · 12h

I'm shocked that people don't just remember such things. Cell phones or not. They might be in the phone memory, but I still know them without looking them up. Same goes for my ID series, bank account number, passwords.

1

Ana Tudor @anatudor.bsky.social · 23h

Evening tunes www.youtube.com/watch?v=4ntw...

KREATOR - Violent Revolution (OFFICIAL)

YouTube video by Kreator

www.youtube.com

Ana Tudor @anatudor.bsky.social · 1d

Saw them... over a dozen times starting from 2012... 🙃

1

Ana Tudor @anatudor.bsky.social · 1d

Evening tunes www.youtube.com/watch?v=4CJw...

SAXON - Frozen Rainbow (Official Video)

YouTube video by Silver Lining Music

www.youtube.com

1 1

Ana Tudor @anatudor.bsky.social · 1d

Yes. And yes, that's the obvious one, which I wanted to avoid due to accessibility issues with `display: contents`.

1

Ana Tudor @anatudor.bsky.social · 1d

You can find my solution here www.reddit.com/r/css/commen...

but try to see if you can figure it out yourself before checking

#CSS

How to approach this simple responsively layout in pure, modern CSS ?

www.reddit.com

2

Ana Tudor @anatudor.bsky.social · 1d

#cssChallenge2025

How would you get this result?The sections have unknown heights, impossible to predict how tall each will be and on narrow screens, we first have the top ones one under another and then the bottom ones one under another.

#CSS

2 4

Ana Tudor @anatudor.bsky.social · 1d

Other than undoing the effects of setting `display: flex` on the `html`, which is also not a smart thing to do, no idea. But I see this quite often.

1

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 2d

Please stop setting `width: 100vw` on the `body`.

It's unnecessary. By default, the `body` stretches horizontally as much as necessary.

It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.

#CSS

6 12 63

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Nov 1

Was meant to become a CSS-Tricks post, but never happened, so here's the demo codepen.io/thebabydino/...

A star is made up of n rhombic arms with an acute angle computed as `360°/n`, rotated around their common vertex point. Each arm is initially a square with a diagonal split gradient.

#svg #pug

Illustration of the stars with 5 arms, each arm highlighted in a different colour.

- let l = 90;

svg(width='0' height='0')
//- diagonal split gradient
linearGradient#g(x2='1' y1='1')
stop(offset='.5' stop-color='#e78f4c')
stop(offset='.5' stop-color='#845d81')
//- arm is initially a square
rect#a(width=l height=l fill='url(#g)')

<!-- compiled code -->
<svg width='0' height='0'>
<!-- diagonal split gradient -->
<linearGradient id='g' x2='1' y1='1'>
<stop offset='.5' stop-color='#e78f4c'/>
<stop offset='.5' stop-color='#845d81'/>
</linearGradient>
<!-- arm is initially a square -->
<rect id='a' width='90' height='90' fill='url(#g)'/>
</svg>

1 5

Ana Tudor @anatudor.bsky.social · 2d

Really? That's what I use most of the time. I find not needing that is the edge case.

Placing things on circles, cylinders(codepen.io/thebabydino/...), spirals (2D codepen.io/thebabydino/... or 3D codepen.io/thebabydino/...), 3D shapes (codepen.io/thebabydino/... or codepen.io/thebabydino/...).

CSS infinite scroll gallery

Loosely inspired by [this Dribbble shot](https://dribbble.com/shots/24920850-Community-Gallery) and [this portfolio](https://icantcontrolmyego.net/). ...

codepen.io

2

Ana Tudor @anatudor.bsky.social · 2d

The time of year to remember this absolute gem... 😈

www.youtube.com/watch?v=a8u1...

Pretty Songs with Death Metal Lyrics!

YouTube video by Steve Terreberry

www.youtube.com

2

Ana Tudor @anatudor.bsky.social · 2d

Forgive me for I have sinned and asked Gemini for dummy text for CodePen demos...

Partial screenshot of me asking Gemini for "an unreal Halloween recipe featuring things that are bound to sound disgusting like spider webs, human limbs, roaches, mud, snake venom?" and getting back a "gloriously grotesque" recipe for "Grave Dirt and Viper's Brew".

4

Ana Tudor @anatudor.bsky.social · 2d

They don't factor in scrollbars. Not per spec & last I checked, not in practice in browsers either.

www.smashingmagazine.com/2023/12/new-...

`dvh` helps if the keyboard pops up or smth. But `dvw` & `svw` include the vertical scrollbar.

Container query units are the answer bsky.app/profile/anat...

1 2

Ana Tudor @anatudor.bsky.social · 2d

As for the `margin`, I'd either zero it on all elements (poor man's reset):

```
* { margin: 0 }
```

Or specifically on the `body`.

```
body { margin: 0 }
```

The `html` doesn't have a `margin` by default. And neither do `div` elements, which I'm assuming `#app` is.

5

Ana Tudor @anatudor.bsky.social · 2d

Why?

Assuming `#app` is the one visible child of the `body`, you can have it cover all available viewport space minus any scrollbars with:

```
html, body { display: grid }
html { min-height: 100% }
```

Then you can set any styles you want on the `#app`, including a flex layout if that works best.

2 6

Ana Tudor @anatudor.bsky.social · 2d

Even if it wasn't problematic, setting `width: 100vw` on the `body` would still be unnecessary.

And now we have container query units. Make the `html` a container, use `100cqw`. Like here codepen.io/thebabydino/...

If other containers are needed, we can do this frontendmasters.com/blog/using-c...

Super simple full-bleed + breakout tactic

[My take on a question asked on reddit](https://www.reddit.com/r/css/comments/1o3j0cl/comment/niwx1pj/). --- If the work I've been putting out since ...

codepen.io

1 6

Ana Tudor @anatudor.bsky.social · 2d

Please stop setting `width: 100vw` on the `body`.

It's unnecessary. By default, the `body` stretches horizontally as much as necessary.

It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.

#CSS

6 12 63