Kevin's blog — not his first, probably not his last.
I'm obsessed with QR codes. I don't know why I'm like this. I just love the fact that they can be printed on paper to encode information in a way that doesn't require any power and can be read by any phone. I was talking to a co-worker today about them, and had the idea of using a tel: link in a QR code for someone to be able to call you, and it turns out that works! <script type="module"…
How did we decide otherwise?
How many features could there possibly be for a water bottle?
The most pragmatic way to start a blog I've ever seen
Extending Shoelace's QR Code component to show a QR Code for the current URL.
A high-level look at creating Open Graph images on-the-fly using Cloudflare Browser Rendering and R2.
A step-by-step guide to adding a back-end to your Astro project using Cloudflare D1 and Drizzle ORM
A new page & RSS feed where I'll be sharing interesting links
I recently gave a talk at the Austin JavaScript Meetup and a good chunk of the talk was about the Feedbin Extension for Raycast I built using Feedbin's API . After someone asked about the feeds I subscribe to, I thought I could easily build a page for it pulling the data from the API. So here it is — my /follows page!
There's been a lot of well deserved criticism going around lately of algorithm driven endless feeds of content, and my co-worker Ryan Schachte's "Simplifying my life with more devices" blog post had me seriously considering getting a Light Phone . I almost did it. But… I just don't think I can give up the amount of functionality available in a modern smart phone. Instead, I resolved to reduce my…
A curated wishlist of gifts for Kevin
An adaptation of Sarah Drasner's Night Owl theme based on Steph Ango's Flexoki color scheme
A new technique that requires no JavaScript
If you're using FormData from a form, you can stop listening for submit events!
How to generate images for an Astro blog using Puppeteer
Maybe in the vein of Chris Coyier's post on A /random Route on a WordPress Site , I found myself kinda interested in being able to just go to a random page on MDN. I didn't find an obvious existing feature for this, so I hacked one together. It's pretty simple — it fetches MDN's sitemap, parses the XML, and grabs a random URL then redirects to it. https://mdn-random.kkipp.workers.dev I love…
More visual web component fun — this <snow-fall> web component from Zach Leatherman (originally from alphardex ) is so festive and easy. I had to add it for a few months. <snow-fall></snow-fall> <script src="https://unpkg.com/@zachleat/snow-fall@1.0.1/snow-fall.js"></script>
How I finally started posting to my blog more regularly
I came across this article by Ryan Davis that explained how to position elements in a mobile browser when it is either zoomed in or has the virtual keyboard open. Turns out there's another viewport inside the main viewport — window.visualViewport is the API to use! From the article: // events window.visualViewport.addEventListener("resize", listener);…
Spice up your markdown blog posts with google-font
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. — MDN See the Pen{" "} box-decoration-break {" "} by Kevin Kipp ( @third774 ) on{" "} CodePen .
No, I mean like... literally
A while ago (I guess 6 years now?) I adapted a jQuery plugin called FocusPoint to be dependency free . Today I was messing around trying to maybe adapt this to be a web component, and learned that object-position already does exactly this, and has really great browser support . See the Pen{" "} Object Position by Kevin Kipp ( @third774 ) on{" "} CodePen . So, I guess it's time to archive that…
Wouldn't it be nice to not have to move your entire hand to reach the arrow keys?
Came across Zell's blog post and it looks like em units are the way to go for breakpoints that: are consistent across browsers respect user setting their default font size respect user zoom
The importance of carefully considering your URL structure
How to hack together a QR code doorbell with Discord, Remix, and Cloudflare Workers
Using Meh and Hyper modifiers on a normal keyboard is difficult, but it doesn't have to be.
Sometimes you just want to translate an element by a percentage of its parent's width.
In the previous post, we talked about the type signature for reduce and how it essentially iterates over a list and combines all of the elements together using a reducer function. You may have heard reducer before within the context of Redux, but how do the two concepts relate? Let's start with a very basic reducer type State = number; const DEFAULT_STATE: State = 0; type IncrementAction = { type:…
I feel like I didn't fully understand Array.prototype.reduce until I started getting into functional programming and learning about types and function type signatures. Once I understood the types, I feel like it unlocked a powerful tool that I naturally reach for any time I need to turn an array of things into something of a different type. Starting with map 's type signature Before we dig into…