Posts tagged: dev
All posts with the tag "dev"
markata-go now has web awesome integration for image compare. It renders a
nice web component with a slider to compare two images.


It’s done with a class wrapper around the image components.
::: wa-comparison


:::
Without markata-go’s web awesome integration, the above would look like:
<script type="module">
import 'https://ka-f.webawesome.com/[email protected]/components/comparison/comparison.js';
</script>
<wa-comparison>
<img
slot="before"
src="https://dropper.wayl.one/file/d628ffba-de18-4fff-91a8-700f037df119.webp"
alt="Grayscale version of kittens in a basket looking around."
/>
<img
slot="after"
src="https://dropper.waylonwalker.com/file/ca30665f-1a15-453e-aab8-221901c7df99.webp"
alt="Color version of kittens in a basket looking around."
/>
</wa-comparison>
You Can Just Build Things
Is Ai Faster Yet
I keep forgetting about the double gutter problem with nested containers. When you put padding on a parent and the child also has padding, you get twice the spacing you wanted.
The Problem #
.container {
padding: 2rem;
}
.child {
padding: 2rem;
}
Now your content is 4rem from the edge. Not what I meant at all.
The Fix #
Either remove padding from the parent or use box-sizing: border-box and plan
for it. I usually just drop the parent padding when I realize what I have done.
What Your Coding Tool Says About You
Yesterday I wrote about a way to do light mode screen recording to convert to light mode from dark mode with ffmpeg. I was wondering if it could be done entirely on the front end for web applications. Turns out you can. I’m sure there are limited wikis and site builders that don’t allow adding style like this, but it works if you can.
<video
src="https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800"
controls
style="filter: invert(1) hue-rotate(180deg) contrast(1.2) saturate(1.1);"
>
<!--markata-attribution-->
</video>
0 deg hue rotate
90 deg hue rotate
180 deg hue rotate
270 deg hue rotate