John D. Jameson

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!

Color Generator – Kigen Generate beautiful color palettes for your design system.

Such a fun and beautiful UI for color generation kigen.design/color

i like that there was some #f06d06 on fogdog

Wiggly Text with SVG Filter Effects ...

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

Animated Sketch Hover with SVG Filter Effects SVG hover effects for links on my personal blog...

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

State of Devs 2025

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

Beautiful calculator for Mac Numi is a beautiful text calculator for Mac.

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

BOB THE DRAG QUEEN [DJ SET] — DFT The alter ego of non-binary comic/actor Caldwell Tidicue, “Bob The Drag Queen” describes herself as “hilarious, beautiful, talented and...humble.” Bob’s unabashed confidence won her the title of “Amer...

Free in SF: www.dftsf.com/special-gues...

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!