Today I learned...

Quick bits of CSS, a pernickity way JS works, an important new way to think about HTML…if you didn’t know before today, there are probably other people here who want to learn it too!

I’ll start the topic off:

A tiny modern CSS progressive enhancement is the use of text-wrap: pretty which prevents typography “orphans” by evaluating the last four lines in a text block and makes adjustments so the last line has two or more words.

Learned from SmolCSS. I’ll be using that one immediately!

4 Likes

FYI, text-wrap: pretty is not supported in Mozilla Firefox or Apple Safari.

2 Likes

today I learned not one but two useful things about text:pretty! XD

1 Like

The future is re-writing text with an LLM so it lines up nicely.

1 Like

TIL I learned about ~/.bash_logout, a shell script that runs just before you log out on a MEWNIX system that uses the bash shell.

1 Like

i just learned about the CSS pseudoclass :focus-within !

there’s a dropdown menu on one of my pages that was broken with keyboard navigation, but this fixes it :+1:

3 Likes

the other day i learned about the popover html element! fantastic! gonna use this so much hahaha.

2 Likes

oh NICE, I’m well proud of the code I use (on several of my sites) to do this, but a whole html element for it, that’s so useful.

1 Like

Not as pretty (sorry) but better supported: CSS text-wrap: balance | Can I use... Support tables for HTML5, CSS3, etc

Particularlly useful for headlines.

2 Likes

Something cool I learned today is using filter() to change the color of an SVG. Which is super useful for a project I’m following along with as the icons it was using were white and the ones I was using were black. I’m trying to make things match to learn a little extra. It makes sense that this is possible since an SVG is code making an image, but I thought it was pretty neat when I learned it.

Here’s some resources about this:

How I learned about filter()

A handy website to generate the needed filter() from the hex color you wish to change the SVG to.

https://isotropic.co/tool/hex-color-to-css-filter/

2 Likes

A few days ago I learned that I could shift+tab a highlighted section of code to unindent it a step.

I had been tabbing many lines at once easily, but felt frustrated that I had to backspace the beginning of each line if I wanted to unindent a block of code. Turns out I was just doing it the hard way for no reason other than ignorance :sob:

3 Likes

this is a small thing, but today i learned about <colgroup>! i use tables sparingly, but this has proven to be useful: mdn

2 Likes

in css a next sibling selector like img + p selects a paragraph only if it comes after an image
naturally i wanted to know if there was a previous sibling selector. There isn’t but there is a work around!
p:has(+ img) will select the paragraph before an image!

6 Likes

thing one: css filters! you can apply them to whatever! grayscale has a percentage value so you can desaturate stuff!

this combo gives a nice predawn pale greyish wash to a page if you apply it to everything:

filter: brightness(50%) grayscale(50%); 

and 20/60 is more “nighttime”.

thing two: stole and smashed together some javascript snippets to give my in-progress marigold.town shoppe business hours! it seems to be working, at least in my vscode testing environment.
i am really into the idea of websites being closed or otherwise changing depending on the time of day, so i’m excited about this snippet.

<script type="text/javascript">
var day = new Date();
var hr = day.getHours();

if ((hr == 0) || (hr == 1) || (hr == 2) || (hr == 3) || (hr == 4) || (hr == 5) || (hr == 22) || (hr == 23)) {
 window.location.replace("closed.html");
} 
</script>

i continue to get away with stealing and refusing to learn javascript properly. maybe eventually i will have pilfered so much javascript that i will have accidentally learned how to use it for real hahaha.

4 Likes