Any instrument + a cat can equal a Lyra-8
Any instrument + a cat can equal a Lyra-8
Something I do at work every day: switching production and development URLs with a single keystroke. For over a decade, Keyboard Maestro has been the perfect app for automating these small workflows.
johndjameson.com/posts/switch...
"Wiggly Text with SVG Filter Effects" by John D. Jameson
codepen.io/johndjameson...
css value debugging
New in ChromeDevTools: Debug complex CSS values more easily! π
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
Such a fun and beautiful UI for color generation kigen.design/color
i like that there was some #f06d06 on fogdog
Iβm adding more whimsical effects to my blog an getting a lot of milage out of this feTurbulence + feDisplacementMap combo
Hereβs the CodePen link codepen.io/johndjameson...
Wiggly text with SVG filter effects and ::first-line
The CodePen link for this one codepen.io/johndjameson...
You can copy the inline SVG and apply the effect with `filter: url("#wiggle")`
Animated sketch hover with SVG filter effects
Letter k with teeth and a swoopy bottom/side that looks like a guard on a sword
Kingdom Key keyblade with the Jokerman teeth
Three Wishes keyblade with the swoopy handle
You telling me Nomura wasnβt inspired?
The wont Jokerman with a bunch of weird letters with teeth and swirly bits
The font Jokerman. All characters with a bunch of weird letters with teeth and swirly bits
Just me or does every letter in Jokerman look like a keyblade?
Forget all about SVG filters: thereβs only 1 thing I care about and thatβs QUICKSORT
johndjameson.com/posts/quicks...
Screenshot of an editor for <feColorMatrix>. There is rainbow preview area, 20 range controls, and SVG output code.
Wrote up a new post all about the <feColorMatrix> SVG filter effect: johndjameson.com/posts/unders...
<feColorMatrix> is very powerful but hard to learn, so I made a bunch interactive demos to help visualize how the matrix works.
SVG filters are fun to dive back into. Iβve been seeing chromatic aberration as a graphical setting trend in video games and figured Iβd try it out on the web.
Markup is easy to copy if you just want to play around, and thereβs a React component at the end of that post.
The words βTry it outβ in all caps with distorted blue and red spreading in different directions. There are controls for the red and blue distortions.
Pushing some updates to my personal site. First up is a post all about how to get the chromatic aberration effect on web using SVG filters.
johndjameson.com/posts/chroma...
The State of Devs survey results have been released!
2025.stateofdevs.com/en-US/
Thereβs some really interesting stuff in here. Iβll be sending a newsletter in the next couple of days that shares my highlights and what I think it tells us about the state of the industry.
The question βWhat is the unicode symbol for a return arrow?β and Claude responding with 4 different results
New AI use case: finding the unicode symbol Iβm looking for in a single try. Itβs β in this case
One of my favorite desktop apps: Numi. I use this everyday for napkin math and unit conversions numi.app
in Chrome 135 - Tomorrow Mar 26, 2025
customize all the parts of a <select> with #CSS!
β€· nerdy.dev/customize-a-...
is ur child texting state secrets in a Signal chat?
ily - I Leaked Yemen (attack details)
smh - Secret Message Hahahaha
tbh - Talkin 'Bout Houthis
idk - I Doubt Korea (is in this signal chat)
gtg - Gonna Text Goldberg
The thing I love most about Perplexity is that, other than it saving time, there are no ads to scroll past, no modals to close out of, no cookie banners to dismiss. Just the most up-to-date information Iβm looking for with as much detail as I ask for. No frustration.
I love that now owning a Cybertruck is a recognized sign of bad decision-making. Like you paid $80,000 to get bangs
An edited screenshot of Final Fantasy VII. Cloud and the party stands before a giant impaled snake creature with the textbox reading "Did DEI...do this?"
Box art of the Barbie Fashion Designer PC game. Barbie is standing next to a computer and printer thatβs printing a wearable outfit designed in the software
Just reminded about Barbie Fashion Designer in the 90s and fml this game was fun
Hey, look who's here! Time to follow @shoptalkshow.com.
font-size: min(2em, 2rem); padding: clamp(10px, 5vw, 30px); margin: max(2lh, 2em); 2em is crossed out 10px, 5vw is crossed out 2em is crossed out
You can now see which value is the active value in min(), max() and clamp()
- in Canary DevTools today
- coming to Chrome stable soon!