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: prettywhich 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!
FYI, text-wrap: pretty is not supported in Mozilla Firefox or Apple Safari.
today I learned not one but two useful things about text:pretty! XD
The future is re-writing text with an LLM so it lines up nicely.
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.
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 
the other day i learned about the popover html element! fantastic! gonna use this so much hahaha.
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.
Not as pretty (sorry) but better supported: CSS text-wrap: balance | Can I use... Support tables for HTML5, CSS3, etc
Particularlly useful for headlines.
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.
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 
this is a small thing, but today i learned about <colgroup>! i use tables sparingly, but this has proven to be useful: mdn
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!
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.
differently-styled internal and external links is a site feature i’ve always considered to be too fancy for me, because i assumed you’d have to add a class to every single link. maybe something that a SSG or CMS could do easily, but too tedious to do by hand… but i was wrong!
today i learned about attribute selectors, which allows you to style links based on their destination! if all of your internal links have relative paths, you could use
a[href^="http"] {
property: value;
}
to apply style to all links whose href starts with http, i.e. external links!
Holy shit, I was wondering about this myself.
Yup, using an a[href^="http"] attribute selector is how I style external links on my website by adding an SVG icon, after learning from CSS { In Real Life }'s article, “Styling External Links with Attribute Selectors”.
There’s a bunch of useful selectors out there and this is a good guide on the topic CSS Selectors | CSS-Tricks
This is a great tip! I’ve been doing this using render hooks in Hugo 
This is much easier, thanks for sharing!
whoa!!! thank you for sharing!!!