Lightnews — Scholar-powered news

Ana Tudor

@anatudor.bsky.social

5.2K followers 58 following 2.5K posts

Same me, another platform. I code stuff. It usually involves some Maths. I enjoy music mandatory religion classes warned me about. And other things that may kill me. https://thebabydino.github.io/

thebabydino.github.io

Posts Media Videos Starter Packs

Pinned

Ana Tudor @anatudor.bsky.social · Jul 31

For anyone who missed it: I have now set up membership tiers on Ko-fi! #KofiMembershipChallenge

ko-fi.com/anatudor

Because praise doesn't keep me afloat... but you can!

Support Ana Tudor

If you like my work and you want me to be able to continue coding, please consider supporting it.

ko-fi.com

2 4

Ana Tudor @anatudor.bsky.social · 5h

It has been doable without anchor positioning for a long time. Using the indices of the grid trap cells.

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 1d

Yet another post on handcoding simple #SVG shapes vs. just getting them drawn in a visual editor. Handcoded ones are fewer bytes & 100% accurate.

You can pass drawn ones through a tool like SVGOMG, but it won't change the actual curves to make them perfectly smooth, no lumps, perfectly symmetrical.

Screenshot of the SVG drawn in a visual SVG. The curves aren't perfectly smooth, there are ugly lumps when looking at it carefully. They also aren't perfectly symmetrical.

Screenshot of the same idea of an SVG shape, but handcoded. The curves are smooth, there are no lumps anywhere and they are perfectly symmetrical.

Code generated for the SVG drawn in a visual editor. The viewBox isn't properly chosen, so we have lots of ugly values with a few decimals. There are also more curves than necessary, they aren't smoothly connected, which leads to lumps and the number values can tell they aren't perfectly symmetrical. There's also a zero length horizontal line in the middle - this does nothing.

```
<svg viewBox='0 0 1 1'>
<path d='m1,0.502
h-0.076
c-0.045,0.005,-0.094,0.018,-0.124,0.052
c-0.05,0.055,-0.125,0.221,-0.175,0.331
c-0.05,0.11,-0.092,0.165,-0.1,0.055
c-0.012,-0.155,-0.023,-0.407,-0.025,-0.438
h0
c0,0,-0.013,-0.276,-0.025,-0.442
c-0.008,-0.11,-0.05,-0.055,-0.1,0.055
c-0.05,0.11,-0.125,0.276,-0.175,0.331
c-0.05,0.055,-0.15,0.055,-0.2,0.055
v-0.502
h1'/>
</svg>
```

Handcoded SVG. The viewBox is properly chosen so we can have integer numbers and easy symmetry in the path data. The number of curves is kept to a minimum and they are smoothly connected to avoid lumps.

```
<svg viewBox='-40 -40 80 80'>
<path d='M-40 0
c15 0 16-2 25-20
8-16 9-20 11-20
2 0 3 0 4 40
s2 40 4 40
c2 0 4-4 11-20
8-16 10-20 25-20
v-40 h-80'/>
</svg>
```

2 22

Ana Tudor @anatudor.bsky.social · 8h

Because this got asked on reddit www.reddit.com/r/css/commen...

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen.io: codepen.io/thebabydino/...

#CSS #Maths

1 5

Reposted by Ana Tudor

Polar Bears International @polarbearsinternational.org · 9h

Can polar bears go terrestrial and adapt to a land-based diet? The short answer is no. Learn why: pbears.org/45v7LGA: pbears.org/45v7LGA

1 17

Ana Tudor @anatudor.bsky.social · 13h

I used containment + place-self: stretch + object-fit.

Completely forgot about the height + min-height trick.

Ana Tudor @anatudor.bsky.social · 17h

Starter code codepen.io/pen?template...

CodePen - Create a New Pen

...

codepen.io

1 1

Ana Tudor @anatudor.bsky.social · 18h

#cssChallenge2025 You have a `section` with a `p` on the left & an `img` on the right. How do you make the `img` height always be determined by the `p` with the tiniest bit of CSS? 😼

No changing the HTML structure in any way, no pseudos, no background declarations, no JS. Just a tiny bit of #CSS.

2 1 8

Ana Tudor @anatudor.bsky.social · 1d

Also, if you could test this in actual Safari and let me know if you see the same Firefox issue (horizontal lines at certain levels of browser zoom), I'd be really grateful 🙏

codepen.io/thebabydino/...

Reposts appreciated if you cannot test yourself.

#SVG #filter

1 3

Ana Tudor @anatudor.bsky.social · 1d

Kai's vocals on this www.youtube.com/watch?v=t6Qe...

Thought I might make going to see them in Zurich this November possible, but it looks like it's not in the cards... expensive city, expensive ticket...

Sometimes there's that one show on a concert trip that just doubles the whole cost of it...

Majestic

YouTube video by Helloween - Topic

www.youtube.com

Ana Tudor @anatudor.bsky.social · 1d

My brain first read that as Pinterest-style 🍩

a box of donuts with different flavors and toppings is sitting on a table .

Alt: a box of donuts with different flavors and toppings is sitting on a table

media.tenor.com

Ana Tudor @anatudor.bsky.social · 1d

Filed a strange Epiphany bug 🪲 bugs.webkit.org/show_bug.cgi...

Updating an #SVG #filter via JS sometimes doesn't visually update the filter result, even though the `filter` element (and the primitives it contains) are always correctly updated.

300313 – SVG `filter` result doesn't update visually after certain (not any) changes via JS

bugs.webkit.org

Ana Tudor @anatudor.bsky.social · 1d

2 22

Reposted by Ana Tudor

CSS by T. Afif @css-only.dev · 2d

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us

12 46

Ana Tudor @anatudor.bsky.social · 2d

I see what you did there...

a cartoon dog is laughing and biting its nails .

Alt: Muttley sniggering.

media.tenor.com

Ana Tudor @anatudor.bsky.social · 2d

😈

Álvaro Montoro @alvaromontoro.com · 2d

Everyone who confuses correlation with causation ends up dead.

Ana Tudor @anatudor.bsky.social · 2d

Firefox SVG `filter` bug 🪲 bugzilla.mozilla.org/show_bug.cgi...

Gaps in between tiles created with `feTile` on browser zoom. This doesn't happen in Chrome.

#bug #firefox #SVG

Ana Tudor @anatudor.bsky.social · 2d

730 PM and I've spent all day filing bugs.

Here's the even worse part: I haven't even finished filing a single one of them.

😿

Reposted by Ana Tudor

Frontend Masters @frontendmasters.com · 6d

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . There are work-arounds, but this SVG filter can do it directly.

Don't run! There is powerful stuff to learn here through interactive demos.

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . There are work-arounds, but this SVG filter can do it directly. Don't run! There is powerful stuff to learn here through interactive demos.

frontendmasters.com

5 9

Ana Tudor @anatudor.bsky.social · 2d

Afternoon tunes www.youtube.com/watch?v=CsWH...

(in the "new music I like" category)

TESTAMENT - Shadow People (OFFICIAL MUSIC VIDEO)

YouTube video by Nuclear Blast Records

www.youtube.com

Ana Tudor @anatudor.bsky.social · 2d

Morning tunes www.youtube.com/watch?v=nRbY...

(still my favourite album from them)

Where Silent Gods Stand Guard

YouTube video by Amon Amarth - Topic

www.youtube.com

Reposted by Ana Tudor

Within Temptation @wtofficial.bsky.social · 2d

Starting the week with fire: our set at Summer Breeze 2025 🔥. #MetalMonday #MusicMonday

youtu.be/x1HWgl2hD-E

Within Temptation - Summer Breeze 2025 - ARTE Concert

YouTube video by ARTE Concert

youtu.be

1 7 29

Ana Tudor @anatudor.bsky.social · 2d

My kind of dummy content on a page:

* thrash and death metal lyrics for the headings

"I'll kill you and your dreams tonight" www.youtube.com/watch?v=WfKU...

* cupcake ipsum text for paragraphs

Slayer - Bloodline

YouTube video by SlayerVEVO

www.youtube.com

1 7

Ana Tudor @anatudor.bsky.social · 3d

People ask me how did you get good at Maths, what crash course do you think I should follow to get this good.

No idea, I just went to school. I did my homework. I did extra exercises.

Then just my 11th grade Calculus notebooks that I took to the recycling bin behind the block weighed more than me.

Ana Tudor @anatudor.bsky.social · 3d

17 years ago... 💀

For reference bugzilla.mozilla.org/show_bug.cgi...

The Safari one isn't much younger bugs.webkit.org/show_bug.cgi...

#CSS

1 6

Reposted by Ana Tudor

Chris Heilmann @codepo8.bsky.social · 3d

Two day old donkey foal zoomies.

1 1