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!
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
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.