Perspective is a wild thing. I bet most people think they have some. But then you have some big life experiences and you're like "oh. wow. that's perspective".
Be objective. Don't make decisions based on anger, fear, or pain.
Still getting issues with RSS images, thinking it could be a problem parsing colons in the urls.
I've had Open Props in here for a couple of weeks and it has been fun to simplify and rework what little CSS I had to use it.
My take is that Open Props provides a core set of custom properties mostly based around sets and scales that provide the building blocks to improve consistency of website implementation where it makes sense to have a defined set of available values. It also has some nice and sometimes whimsical presets for animations and gradients that bring a sense of fun (and usefulness) back to the web.
After working with Tailwind professionally for a year, one noticeable difference is that it is not an exhaustive set of properties for all possible attributes and being value based, there is not an entire new dsl on top of CSS to learn to use it.
I'm using the normalize bundle and it is super interesting using the :where() pseudo selector to prevent any specificity on the reset props.
It does mean you need to learn CSS (a good thing). And that all the tools and tricks to author maintainable CSS are still important.
But if there is a scale of values you need to have locked in. Or just have the choice made for you. Then Open Props is a pretty good starting place.
Still intermittent heros in Feedly. I read somewhere 1200 x 630 is a common ratio.
Worth a shot.
The time to generate the glitch hero images took 6.2 seconds after I added in the file stating yesterday.
Small win there.
Meta og images still elude most posts at least in Feedly my RSS viewer, tests in other places work.
When debugging it best practice to change one thing and test. A frustrating thing with Feedly and RSS is the refresh cycle is not consistent.
Anywhoo, I padded out the other og meta properties (probably valuable anyway). And I through in the twiter:image meta.
I try again.
I want to generate the glitch hero sans title overlay.
This will blow out the playwright test time to capture more screenshots as I've been re-capturing 2 screenshots and an svg for each post every build.
This was never going to scale but was fine while it was on localhost.
As a simple step. I've added a file stat to any image artifact generated in the glitch phase.
This post will test if it works for real.
I think I've cracked the basic open graph meta data which was sort one of the first experiments on this site but which needs more documenting.
This thought is the effort to document the generation of the hero/og art and prompt an improvement for the build and efficiency.
The current process is to:
npm run start:glitchnpx playwright test -c _glitchThe first step includes a different eleventy config that skips a bunch of plugins (probably rss) and adds a global theme glitch that modifes the CSS to render the pages glitched.
The second step runs a set of tests that screenshot the glitched thoughts/posts and feeds those into a paper js page/script to generate a unique SVG based on the content screenshot, these are exported as annotated pngs and svgs.
The pngs and svgs are stored back in the website content folder using slugified filenames so they can be resolved by the main website content build.
This works.
It's automattic in the sense of generative art. But from a dev build perspective it still needs an intermediary step to generate the art after the content has been completed.
And as it needs a dev server and a test script, it runs in two terminals often in addition to running a dev server and another terminal for git, etc.
How could I improve this so I had an npm run generate command that did the setup and teardown for the art generation.
Oh another point ... It re-generates all art by default. How might I test and skip content that has existing art and use a --force if I wanted to rebuild it (or just delete the file).
This post isn't the solution. I'm thinking a build script that:
✌️🤠
PS: This content has been written sans content dev server to also try and sequence the order and the dependency.
This is a test
I think I've got <meta property="og:image" ...> tags working.
Lots of false starts trying to figure out how to get Eleventy to to give me the tag with a url that matched the optimised glitch URLs.
I had issues with importing the correct esm Image not { Image }.
I had issues resolving paths as they are different from the ones used in the automatic transform.
I eventually figured out a modified version of eleventy-image Make your own Markup would work when I lined up the other bits I had wrong.
eleventyConfig.addShortcode("metaImage", async function (path, fileName) {
if (!path || !fileName) {
return "";
} else {
try {
const src = `content/${path}/img/banner/${fileName}.png`;
let metadata = await Image(src, {
widths: [1200],
formats: ["png"],
});
let data = metadata.png[metadata.png.length - 1];
return `<meta property="og:image" content="${data.url}" />`;
} catch (e) {
console.log("No image found for ", path, fileName);
}
}
});10 more posts can be found in the archive and thoughts in Thoughts.