Nathan Long

Git: Remove Dead Branches

Tue, 10 Mar 2026 20:37:00 GMT

It’s very common near the end of a project to have a hot pile of dead branches: branches that originally tracked something upstream but have since been deleted.

Your original super-awesome-feature branch was merged via PR (pull request) on GitHub and deleted there after review, but you still have it locally, which means the branch is now considered dead. Manually cleaning up these branches can be tedious. I use a small script to clean up my local branches:

git fetch -p && git branch --format '%(refname:short) %(upstream:track)' | awk '$2=="[gone]" {print $1}' | xargs -r git branch -D

To break it down, the script:

Updates your remote references
List local branches and their upstream tracking status
Filter branches whose upstream is [gone]
Force-delete those branches

And in more detail:

Fetch and Prune

git fetch -p

This downloads updates from the remote repository but does not merge them. The -p flag removes stale remote-tracking references.

Chain a command

&&

The double-ampersand is a bash control operator that only moves onto the next part if the previous command succeeds. (If it exits with a status of 0).

List local branches

git branch --format '%(refname:short) %(upstream:track)'

This will return a list of local branches formatted with the short branch name and the upstream tracking status. Something like:

main [ahead 1]
feature-login [behind 2]
feature-api [gone]
old-feature [gone]
super-awesome-feature [gone]

The [gone] here means that at one point, the branch tracked something upstream, but that upstream branch no longer exists.

Filter the branch list

| awk '$2=="[gone]" {print $1}'

This uses the bash pipe operator (|) to feed the branch list into awk, which splits on whitespace and processes the input line by line.

So an item like:

feature-api [gone]

turns into:

$1 = feature-api
$2 = [gone]

However, we have a condition of $2=="[gone]" which makes awk only process lines with the second field of [gone]. It discards the ones that don’t match.

{print $1}

We then only output the first field, in this case, feature-api, to form a new list of just the dead branches.

Delete dead branches

| xargs -r git branch -D

The final part of the script pipes our new dead branch list into xargs, which converts input into command arguments. The -r flag here is a safety measure to not run the command if there’s no input.

So xargs will receive a list like:

feature-api
old-feature

Which gets turned into:

git branch -D feature-api old-feature

And then git force deletes those branches.

Handy!

2026 Techo Kaigi

Tue, 24 Feb 2026 15:41:22 GMT

Do you have a physical note system? Do you write anything down by hand? If not, you’re missing out. Digital notes are convenient, but there is something special about the tactile act of putting pen to paper. Perhaps it’s just the old artist in me, but it feels like an expansive idea space. There are no boundaries, no database or field restrictions, no rules; just you and the paper. It’s the ultimate fidget; it occupies both my hands and my brain. Some days it’s the only way I make it through marathon meetings.

I’ve tried several products and approaches over the years, but in a haphazard way. I recently learned about a Japanese practice called “techo kaigi,” which roughly translates to “Planner Meeting”. It’s a self-guided investigation of your stationary system to see what’s working and plan changes to improve it.

There are a lot of videos of people going through this (check out the videos from the folks at Yoseka Stationary up in NYC), and it’s fascinating to see what people are trying. I was struck by the love and joy embedded in these items—they weren’t just utilitarian objects, they were reflections of their owners who clearly took joy in using them.

So I’m gonna try it. There are only two main requirements:

It needs to be compact. I often work from different spaces, and the available table space can vary wildly (sometimes it’s just my own lap!).
It needs to be enjoyable to use.

The Old

Components

Self-hosted personal wiki (Tiddlywiki) - Work and writing
RETTACY A5 Spiral-bound dotgrid notebook - Notes, thoughts, and everything that doesn’t fit elsewhere
2025-26 Bluesky Academic calendar A5 size - Planning and daily tasks
Random spiral Fivestar notebook - Health and Fitness
Bic Cristal pens - ‘ol reliable.

The Good

Wiki
- The wiki is for work and for writing. It’s loosely based on the zettelkasen concept, snippets with interlinked ideas. II also keep project logs, writing drafts, and side-project ideas there..
RETTACY A5 dotgrid notebook
- Dotgrid is my favorite paper format. It’s perfect for outlining, quick sketches, or simple wireframes. I often use it to map out logic flows or make sense of a problem.
Bluesky Calendar
- The month view is the main benefit for planning my personal life. I don’t use it for work meetings (as it’s futile to duplicate work calendars), but for events, objectives, family logistics, and goals. I also use it as a habit tracker to mark off the days I’ve completed my goals.

The Neutral

Bluesky Calendar
- The week view is useful for planning discrete tasks in a week and creating time-bound todo lists, but once they’re done I never reference them again, meaning most of the pages in the calendar are either not relevant yet, or no longer relevant.
Random spiral Fivestar notebook
- This works fine for planning and logging my workouts. It’s durable and effective. Writing down my progress lets me see what’s working.
BIC Cristal Pens
- These are the most reliable pens I’ve ever used, they take a beating and never clog… BUT the feeling of writing with them isn’t always the smoothest.

The Bad

Wiki
- Inaccessible outside of my laptop, which means it’s context-locked to when I’m sitting down to officially work.
Dotgrid notebook
- All topics are mushed together. When I need to reference something, I have to scan all the entries to find what I’m looking for.
- When I feel overwhelmed, I write out to-do lists, but they get lost in the flow and are hard to reference quickly.
Calendar
- The calendar was too big. I like to work from different locations throughout the week, and sometimes I don’t have a lot of desk space. When I don’t review it, my planning suffers.

The New

Components

Self-hosted personal wiki (Tiddlywiki) - keep largely the same.
Wanderer’s Traveler Notebook, 3 inserts - the biggest change!
Self-printed 2026 calendar insert - Such compact. Much DIY.
Index cards for floating lists - new way to track weekly tasks.
Random spiral Fivestar notebook - keep the same, it’s working fine.
Zebra Sarasa Fineliners, all the colors of the rainbow!

Changes

Wiki
- No major changes. I’m pretty happy with how this one works; it’s been valuable to me as a reference and an idea generator.
Traveler’s Notebook
- This form factor is new to me. The ‘notebook’ is a leather cover with two elastic bands and an elastic closure that keeps everything closed. It comes with 3 inserts that are slid through the elastic bands, forming three mini-notebooks in one!
- The replaceable inserts allow me to work through 3 categories (Work, Study, Journal/Prayer) while keeping everything together. When I finish a category, I can simply replace the insert with a new one and continue. This helps with referencing as I don’t have to flip and scan for entries as much.
- I can still use my dot grid paper, or whatever paper I want (lined, unlined…). There’s a large variety of inserts for this format!
Self-printed 2026 calendar insert
- Because the Traveler’s Notebook is so insert friendly, I made my own 2026 year booklet, which gives me the month view I rely on, but allows me to keep it physically connected to the rest of my notes. No more excuses for not reviewing the calendar!
Index cards
- I’ve always liked the idea of the Ugmonk Analog System, but really, it’s a bunch of overpriced index cards with a fancy stand. Index cards are readily available and fantastic for short lists. We have the power to make our own!
- Each index card serves a specific purpose. I have:
  - Two ‘Week’ cards for the current and upcoming week which I divide into 3 sections on each side (6 sections total) with a daily list on each section (grouping Saturday and Sunday) together
  - A ‘House’ card with all the longer-term projects I have around the house.
- All the cards are clipped into my Travelers Notebook with paper clips where I can easily reference, access, and update them. I usually pull the current week card out as a reference for the day.
- If an item grows to where it needs its own list, I can just reach for another card and create a new one.
Zebra Sarasa Fineliner pens
- As a lefty, pens can be tricky. These pens are very ‘push’ friendly, meaning I don’t have to pull them in a specific way to get the flow of ink working correctly.
- The different colors help make different days easier to scan without drawing dividers everywhere. I pick a new color for each day (in rainbow order, of course, except for the yellow, which is impossible to read).

So there we have it, my first personal techo kaigi. I found a lot of value in reviewing and intentionally redesigning my systems, and I’ve been enjoying the changes so far. Check back in a year, and we’ll see how things are working!

How to Run FreshRSS Locally With Docker

Tue, 20 Jan 2026 22:17:28 GMT

I love RSS.

I love that it gives me a direct line to what people are publishing. No algorithm, no intermediary, just me and the voices I choose—and there are so many interesting voices out there!

Managing the feeds is the real drag. Since they pulled the plug on Google Reader, there hasn’t been one app that I could really get behind. Fortunately, a group of folks who love RSS even more than I do have created an open-source RSS reader, FreshRSS. Which is great! But how do you run it?

If you’re like me, you don’t need to host it publicly; you just want to run the app locally. Turns out the FreshRSS team has helped make this easy by hosting a well-maintained public Docker image of the application. All you will need is a local container service, like Docker Desktop or Orbstack.

Installing FreshRSS locally

Create a folder somewhere you can easily manage and navigate to in the terminal.

Create a new docker-compose.yml in that folder with the contents of:

volumes:
  data:
  extensions:

services:
  freshrss:
    # Grab latest docker image from hub.docker.com
    image: freshrss/freshrss:latest
    container_name: freshrss
    hostname: freshrss
    restart: unless-stopped
    logging:
      options:
        max-size: 10m
    ports:
      - 8080:80
    # set up location for data persistence
    volumes:
      - data:/var/www/FreshRSS/data
      - extensions:/var/www/FreshRSS/extensions
    environment:
      TZ: America/New_York
      # cron syntax for: update every 30 minutes
      CRON_MIN: '*/30'

Let’s break down what’s happening here.

The first three lines define Docker volumes, which are persistent storage that live OUTSIDE the container. This is important as they’ll persist beyond the container starting and stopping (kinda important unless you want to re-index each feed!)

We then define the freshrss service, point it to that fancy Docker Hub image, name it, set some reasonable defaults, attach it to a port, and then point to where the named volumes will be attached.

If you’re in a different timezone than East Coast US, change the environment.TZ field to match your location. If you’re not sure of the specific name, find your timezone here.

Starting your local FreshRSS container

Now navigate to that folder you created and run:

docker compose up

The container will spin up and bring you to the installation screen of FreshRSS. Follow the install instructions and PRESTO! Self-hosted RSS! (To stop the process, hit CTRL-C).

The app should be available at http://localhost:8080/

You can also run it in ‘detached’ mode with docker compose up -d, but you’ll need to remember to stop the container when you’re done. (I like keeping my containers attached in a terminal tab so I can remember what I have running.)

NOTE: If you delete the container, you will also delete the data FreshRSS has been saving for you. Just start/stop, don’t destroy the container unless you also want to wipe your data. FreshRSS has lots of archiving options if you want to set up a backup system.

Time to fill it with some voices!

Now that you have a locally running RSS reader, you need voices to fill it with! I publish a list of web industry voices that I continually update. You can scan the list and pick what you want, or you can download and import my OPML file to get your feeds started!

A few RSS Tips

As you add more and more voices, it can become overwhelming to keep track of them. To keep your feed from being stressful, I have found you have to become OK with the idea that you will not read every post in your feed. Really! It’s OK! I used to struggle with the feeling that I would “miss” something important, but those pieces tend to have a reverb effect across the blogosphere—if something’s important, it will show up in other places as well!

There are a few strategies I use when organizing my feed:

If a person writes under a site name (like Harry Roberts at CSS Wizardry), consider labeling the feed by the author’s name so you start to get a feel for who’s writing what.
Group voices by interest or industry topic (Design, a11y, etc) so that you can get a feel for what topics are emerging in what category.
FreshRSS has an ‘Important Feeds’ visibility category you can set for the people you’re most interested in hearing from to help cut through the noise.

And then a few tips for reading my feed:

Scanning is your friend. Start with the titles and only move into the ones that interest you.
If the unread numbers get really big, pick just one category or voice to start with. Scan the entries, read what’s interesting, and then mark everything else read. Rinse and repeat as time allows.

Responsive Ambient Videos with AV1 and HEVC/H.265 Compression

Tue, 13 Jan 2026 15:04:09 GMT

Ambient videos, or “short looping videos as a background element,” are both common and tricky to get right. They can add a lot of visual texture to a design, but are often large, chunky elements that can slow down your performance.

But this is 2026! We have some new tools to help with video compression! We’re going to utilize some of the techniques Evil Martians demonstrated with AV1 encoding and combine them with responsive video techniques that Scott Jehl explains well over on his blog.

There are a few assumptions I’m making: you will be processing the video manually, and you have ffmpeg installed (I recommend Homebrew on a Mac).

At the end of this, we’ll have:

A vertically formatted AV1 (for mobile)
A vertically formatted HEVC/H.265 (mobile fallback)
720p AV1 (for tablet/small desktop)
720p HEVC/H.265 (tablet/small desktop fallback)
1080p AV1 (large desktop)
1080p HEVC/H.265 (large desktop fallback)
A poster image generated from the first frame of the video

We’ll tie it all together in an HTML <video> element and implement some accessibility features.

Disclaimer

But first… a disclaimer:

No amount of compression is going to make a 180+ second video performant as an ambient video! Optimization starts at the communication level.

If an ambient video is being considered, consider the following guidelines:

20 seconds or less.
Avoid wide-panning, rotating, or otherwise big movement shots (helps prevent folks from getting motion-sick or just being jarring in general).
Avoid flashes if possible (3 or fewer per second per WCAG SC 2.3.1).
Start with the highest resolution output feasible (as it makes it easier to slice and dice).

Once we have a reasonable starting point, we can work on smooshing these down to a nice size.

AV1

AV1 is our champion video compression codec that does some smart things to reduce filesize. But as with all nice, new things, it’s not fully supported yet.

To make an AV1 from our reasonable starting point, we can run the following:

ffmpeg -i INPUT.mov -map_metadata -1 -an -c:v libsvtav1 -qp 40 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf scale=-1:1080 output.av1.1080.mp4

Here’s a breakdown of what’s happening:

-i INPUT.mov sets the source video file for input. FFmpeg will take video and audio streams from this file, convert them, and pack them into a new container.
-map_metadata -1 will remove video metadata (like the name of a tool that was used initially to create a video). Sometimes metadata is useful, but for web development, this is rarely the case.
-an removes all audio. It will be muted to allow looping anyway.
-c:v libsvtav1 selects the AV1 video codec.
-qp 40 sets your size/quality balance for AV1. Lower numbers mean better quality and bigger size.
-tile-columns 2 -tile-rows 2 is for speed enhancements at the cost of a small loss in compression efficiency.
-pix_fmt yuv420p sets a pixel format that helps reduce filesize by using full resolution for brightness and a smaller resolution for color. Read up on chroma subsampling to learn more. Pretty wild!
-movflags +faststart moves the important information to the beginning of the file. It allows the browser to start playing while the video is still downloading.
-vf scale=-1:1080 Scales down the image to whatever by 1080 pixels. If you want a different size, put in the desired height instead of 1080.
output.av1.1080.mp4 sets the name for the output file. Why an MP4? Aren’t we making AV1’s?! We are! But MP4 is a CONTAINER format, and it’s the most widely supported one. Just like in life, it’s what’s on the inside that matters.

You will likely need to adjust the -qp settings and your output resolutions to get the right mix.

HEVC/H.265

We still need a fallback, but we don’t have to go all the way back to H.264. Safari supports the HEVC/H.265 codec, which is like H.264 but … sleeker. 30-50% smaller than H.264 (with AV1 being 30% smaller than HEVC).

This one is going to take much longer, so grab some coffee and run:

ffmpeg -i INPUT.mov -map_metadata -1 -an -c:v libx265 -crf 28 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf scale=-1:1080 video.hevc.mp4

Many of the same flags appear as before, but there are a few new ones:

-c:v libx265 selects the HEVC/H.265 codec
-preset veryslow forces HEVC/H.265 codec to generate a smaller video file even if it will be much longer.
-crf 28 stands for ‘Constant Rate Factor’ and sets your size/quality balance. Lower numbers mean better quality and bigger size. The CRF scale goes from 0 to 51.

Again, you may need to adjust your -crf rate to get the right amount of compression and quality. The output resolution should match the AV1 file.

Small Desktop / Tablet Versions

To generate smaller videos, reuse the same commands from before, but change your scaling command. Something like:

-vf scale=-1:720

This will output videos that are 720 pixels tall.

If your video is a weird size, you may get errors if the numbers don’t divide cleanly when scaling down. If that happens, choose a new size or run the math on your own to find what numbers are going to work.

Mobile Versions

Most likely, your starting video will be in a wide 16:9 format, but that’s a good amount of pixels you’ll never see on a mobile screen! We’re going to make a vertical crop of the video to minimize our wasted pixels.

ffmpeg -i INPUT.mov -vf "crop=ih*9/16:ih" -c:a copy output.vertical.mp4

-vf "crop=ih*9/16:ih" Calculates the new width based on the input height (ih) to maintain a 9:16 aspect ratio. Since x and y coordinates are not specified, ffmpeg defaults to cropping from the center of the frame (which is what we want). If you want a different ratio, enter your own numbers instead of 9/16, where the first number is the width and the second is the height.
-c:a copy Not strictly necessary, it just copies any audio settings without modifying them.

Now that we have a vertical file, we can make AV1 and HEVC/H.265 videos like the previous steps. Since we have less overall data, you can likely get away with something like -vf scale=-1:1620 to give those high-density pixel displays a nice video while still being small.

Making a poster image

We also need a static poster image that will display if the video is loading over slow connections:

ffmpeg -i INPUT.mov -ss 00:00:00.000 -vframes 1 thumb.png

-ss 00:00:00.000 seeks to a specific timestamp in the video. Here’s it at the very beginning.
-vframes 1 tells ffmpeg output one frame.
thumb.png saves that frame as a PNG.

You’ll want to size and compress that image into a reasonable format (WEBP or AVIF). Smaller is better here.

Rendering the video

Now that we have all the pieces, we can load them into a video element:

<video autoplay playsinline muted loop
  poster="/assets/video/output.poster.avif">
  <source
    src="/assets/video/output.vert.av1.1280.mp4"
    media="(max-width: 769px)" type="video/mp4;
    codecs=av01.0.05M.08,opus"
  />
  <source
    src="/assets/video/output.vert.hevc.1280.mp4"
    media="(max-width: 769px)"
    type="video/mp4; codecs=hvc1"
  />
  <source
    src="/assets/video/output.av1.720.mp4"
    media="(max-width:1441px)"
    type="video/mp4; codecs=av01.0.05M.08,opus"
  />
  <source
    src="/assets/video/output.hevc.720.mp4"
    media="(max-width:1441px)"
    type="video/mp4; codecs=hvc1"
  />
  <source
    src="/assets/video/output.av1.1080.mp4"
    type="video/mp4; codecs=av01.0.05M.08,opus"
  />
  <source
    src="/assets/video/output.hevc.1080.mp4"
    type="video/mp4; codecs=hvc1"
  />
</video>

Ensure these attributes are on your <video> element:

autoplay starts the video as soon as there is enough data to do so.
playsinline tells the browser that the video is to be played in the element’s playback area. Required for ambient videos in Safari.
muted Insures no audio is output. Required by all browsers to autoplay.
loop Restarts the video when it reaches the end.
poster points to the image to load while the video is loading or if no data can be provided.

And in addition to src on our <source> elements, we set:

media which allows media queries, just like the <picture> element. No match-y no load-y.
type="codecs=av01.0.05M.08,opus" tells the browser this is an AV1 video
type="video/mp4; codecs=hvc1" tells the browser this is an HEVC/H.265 video.

Note that I used max-width queries, but you could just as easily build them with min-width queries; just be aware that the browser will use the first item that matches.

We have an ambient video, but there’s still some accessibility we need to ensure. There are two features we need to enable.

The WCAC SC 2.2.2 “Pause, Stop, Hide” criteria states that something longer than 5 seconds (which we likely qualify for) needs some sort of control to stop the motion. The simplest implementation is a play/pause toggle button.

How you enable it will vary on how you’re handling interactivity on your project, but a very simple Vanilla JavaScript implementation could look like:

// the awesome button you made to toggle the video
const videoToggleButton = document.querySelector("your-button-selector-here");

// the video itself
const video = document.querySelector("your-video-selector-here")

// toggle the play state of the video
const handleVideoToggle = () => {
  video?.paused ? video?.play() : video?.pause();
  // also whatever you're doing to toggle the play/pause icons
}

// listen for clicks
videoToggleButton?.addEventListener("click", handleVideoToggle);

This is over-simplified, but you get the idea. Change the selector to whatever you’re using to identify your elements.

Also, unless your video is extremely subtle, we need to prevent it from autoplaying if users have prefers-reduced-motion set. You COULD hide it with a CSS media query, but ‘reduced motion’ does not mean ‘no motion’. I prefer that users have the option to still engage with it as they want.

// Check if the prefers-reduced-motion media query matches 'reduce'
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// grab the video if you haven't already
const video = document.querySelector("your-selector-here")

if (prefersReducedMotion && video) {
  this.video?.pause();
  this.video?.removeAttribute("autoplay");
  // also whatever you're doing to toggle the play/pause icons
}

And there we have it: a responsive, accessible, highly compressed ambient video!

Creating While Adulting

Wed, 10 Sep 2025 14:05:36 GMT

At Viget we have a tradition of weekly rotating LabShares, which are a 10-12 minute presentations on ANYTHING the presenter is passionate about. We’ve talked about coffee, aloha shirts, sunscreen, adult autism, and many many other interesting topics.

Recently, I was privileged to present my recent thinking on the nature of creativity and how we can continue to create even during the busiest seasons of our life.

Images by Nikhil and Luis Villasmil (with modifications)

Hey friends,

Today I want to talk about the curious problem of creating while adulting.

Why we stop creating.
Why we should create.
What EVEN IS creativity.
And some things we can do to nurture it, even while adulting.

But first, a disclaimer. The following content is Rated O for Opinion and contains questionable research mixed with my own experiences and speculation. It’s my opinion and how I’ve come to think about creativity.

That said…

Let me introduce you to ‘Little Nathan’.

Like many of us, when I was young I spent a lot of time creating and playing.

Lego sculptures, play acting — usually as…

BATMAN. (Batman was a big deal to me at the time.)

…but especially drawing. I loved to draw and I drew a LOT. These are some of my early drawings.

Many of us can confirm that children are REALLY PROLIFIC artists.

They fearlessly create from their inner selves.

They’re not concerned with how it looks as much as the process: the smell of those Crayola markers, the feeling of pencil on paper.

They create because they want to, for the joy of it.

As a kid, I created entire worlds (often ripped from the things I loved).

I drew comics, wrote stories, and just kept creating.

Image by Christine Nishiyama

But at some point, we stop creating like this.

We stop creating for the joy of it.

Why?

I think two things happen as we get older:

We encounter ‘The Gap’. And…

Life gets hard.

Chart by Kavya Chaturvedi (with modifications)

“The Gap” is a term defined by Ira Glass and it describes the discrepancy between your creative taste and your creative skill.

Although typically when you first encounter it looks more like:

A chasm.

Through exposure to great work your inner sense of quality—your taste—has developed enough for the skill of your OWN work to become a disappointment to you.

It may not have been one particular revelation but a slow confidence drain from critical review or rejection.

But you’ve come face to face with “The Gap” and find a crossroads.

Image by Sarah J, original gif

Some people stop here. They feel their work will never be as good as their ambitions and they move on.

Some will accept the challenge, double down, and work on closing that gap.

This was my experience when I saw the work of Todd McFarlane, Akira Toriyama, and many others. I was enthralled by their work and knew what I was producing wasn’t the same quality.

So I copied, I traced, I riffed, and I kept going. These are some of my high school drawings.

But creating had changed for me, it was no longer JUST for joy of creating — I had something to prove now, an inner tension.

Which… isn’t necessarily a bad thing, but it can be a consuming thing.

Image uncredited, original source

Our taste tends to improve faster than our skill leading to confidence spirals.

When I look at something I’ve created I can VERY EASILY see everything that’s wrong with it, what I could have/should have done differently.

In fact, in one particular confidence spiral of my own I destroyed a lot of my art.

The only reason I have some of these pieces to show you today is because my Dad found a old copy of slides that I used to apply to the Art Program at Radford University.

Image uncredited, original source

We’ll come back to confidence spirals in a bit.

But for now let’s go on to another reason we stop creating… and that is…

Image by AFV, original gif

Life gets hard.

When I graduated with a BFA and got a real job, things got busy fast.

Housing, bills, budgets, repair and maintenance. Layer in in relationships, family, and kids, and things quickly reach capacity.

I came to realize that I am finite, and my energy is finite.

My life was so FULL that I thought I didn’t have the juice outside of my job and responsibilities to create.

Image by National Gallery Singapore

And I thought that by not creating “capital A” ART — that I wasn’t being creative.

Image by Alexandru Goman

But I was wrong.

And I believe we can recapture the JOY of creating, even during the busiest moments, because…

Image by Alexandru Goman

Creativity is not a talent, it’s a mode of thinking.

It’s not something you’re born with.

It’s about how you approach things — and it bleeds into all areas of our lives.

Image by Viget

It’s a way we can relate to each other. We can show love through creativity and give back to the world and the people we encounter each time we create something new.

It’s about what you have to say:

A thank you note says, “I cared enough to use time-consuming analog materials to convey my appreciation for what you did.”

Image by King Arthur Baking Company

A homemade pie says, “I have created a majestic sensory experience for you of carbs and sugar.”

A garden says “Look at how amazing nature is, these plants are cool and I want to share them with you.”

Image by Barbara Pozzi, original gif

Everything we create says something big or small.

And we all have something to say.

But some people say, “Well, I’m just not creative.”

To which —I— say…

Image by Zan Lazarevic

PHOOEY!

It takes a lot of creativity to keep little ones engaged in soccer practice.

Parents of small children — it takes a lot of creativity to teach and provide experiences for them.

Image by Alexandru Goman

But you have to see that creativity for what it is.

Because creativity is not a talent, it is a mode of thinking.

So let’s think about thinking for a bit

Image by Wikimedia Commons

John Cleese has a famous talk on creativity that’s helpful here. (And I’ve already started referencing it).

In it, Cleese describes two modes of thinking:

Image by Marcel Strauss

The Open mode:

Which is relaxed, expansive, humorous, curious. It’s not under pressure.

Image by Solen Feyissa

And the Closed mode:

Which is a heads down, purposeful, it’s work-mode. It can be either pleasurable or stressful — sometimes both, depending

Image by Alex Padurariu

You need both modes.

If you only stay in the open you never get anything done.

If you only stay in the closed mode means going through life with our heads down.

But we need a few things to help move us into the open mode.

You need space, the ability to seal yourself or you and your collaborators off.

You need time to create boundaries, To reserve that time for yourself, because it TAKES TIME to get into the open mode. It’s not a switch you can turn on and off.

You also need MORE time to stick with the problem, to tolerate the discomfort of an unsolved problem and not always take the first solution.

You need confidence, because a fear of mistakes blocks creativity.

Try to be open to anything in this mode.

And then finally, we need humor. An attitude of humor allows play to happen, to ask “What if”, to explore silly ideas that you’d never normally consider.

Humor is what brings us into the open mode faster than anything else.

However, when you’re also attempting to adult at the same time, I think we need three additional things to help us find this open mode:

We need to prepare before we even try to be creative.

We need perseverance in the struggle, in the doing.

And we need perspective in the after to keep ourselves ready for the next thing.

Image by Better Noise Music, original gif

Let’s talk preparation, specifically energy and community.

We’ve already talked about how our energy is finite.

But some of us have energy tanks that look like this:

Image by Tony Feredo

Full of holes. Mine included.

Image by Tony Feredo

And when you look closely at some of the activities you THINK are FILLING your tank, they’re actually…

Image by Tony Feredo and Rajeshbhai Vaghasiya (vecteezy.com)

Energy parasites. They’re taking energy, not giving it.

Doomscrolling, distractions, vapid entertainment, even negative people.

For me personally, I found almost all social media was eating up a lot of energy just to engage with it. So I cut it out of my life.

It’s going to be different for you, but if our energy is finite, what are we doing to protect it?

Image by Nancy Hann

A lot of our energy also comes from community.

Consider, if you will, the apple tree.

Image by Veronika Diegel

Specifically a branch of an apple tree. On a functioning tree, the branch will produce fruit.

Image by Oregon State University

In periods of my life I’ve tried to be the branch without a tree.

Image by Oregon State University

I wanted to do it on my own, I’m an introvert after all, but the branch can’t produce fruit without the support of the rest of the tree.

The water and nutrients from the sap and leaves. Even the bees that pollinate the flowers.

Without a community we’re just a lone branch.

We need people who encourage us, support us, help us along the way. We’re not designed to live life alone.

So who or what are you connected to? What does your community look like?

Image by Neom

So we’re preparing by hooking into community and guarding our energy, let’s talk about the doing.

Sometimes when you’re working on a creative problem, you hit…

Image by Puglie Pug, original gif

THE SLUMP.

Image by Hannah Jacobs, original gif

THE DOLDRUMS.

This is the struggle section of creative effort. You’ve committed to creating but it’s just a slog. Nothing is coming.

I have found a way to short circuit the slump is if you can find and harness your…

Image by William Warby

FREAK ENERGY!

Image by Olivie Strauss (with modifications)

Freak energy is one part curiosity, one part humor, one part weird (and weirdness is subjective).

Everyone has something you could go on forever about, you can’t read enough of it, you don’t tire of it, you can do it again and again and it remains enjoyable.

And the joy of this can help pull you through a slump.

Original gif

Some of you already know exactly what it is that you get your freak energy from.

But if not, ask, “What would you do for free?”

Because that’s a good indication of the source of your freak energy.

For me it’s games. Specifically game RULES. I can read rulebooks all day and learning a new game is an enticing brain puzzle that I can hardly put down.

Now, that’s not particularly practical in itself. But harnessing freak energy doesn’t mean it has to be the MAIN thing.

Images from 'The Rules of the Red Rubber Ball' by Kevin Carroll

Kevin Carroll, the author of Rules of the Red Rubber Ball, his freak energy was from sports. But when he injured his knee and could no longer play, he pivoted to being an athletic trainer. He harnessed his freak energy to propel him into something else tangential.

So if you find yourself in the slump, find the point of tangency, that point of connection, between your problem and your freak energy, and let it pull you along.

Image by Charles Etoroma

Now lets talk about keeping perspective afterwards.

Image uncredited, original source

Remember those confidence spirals we talked about?

Image by Holler Studios, original gif

There’s a tendency when you look back at your efforts to see the failures. An endless todo list that makes everything else disappear behind the flaws.

Image by Erol Ahmed

But if we let our work ONLY be a catalog of mistakes it will make us feel resentful and guilty.

Image by Anthony Antonellis, original gif

We have to work on reframing to ALSO see our successes. We don’t ignore the failures, but we look PAST them to find the successes too.

Original gif

When we criticize our past MISTAKES, we criticize ourselves for not knowing as much THEN as we do NOW.

It’s FROM the mistakes that we’ve learned what we know now — our mistakes make it OURS.

Image by Jared Norby with modifications, original gif

And we cannot let a fear of mistakes prevent us from doing or trying new things.

As an example, I will confess, I’m terrible at gardening and landscaping.

This is the opposite of my yard.

And when I look at my yard, I see where the grass failed to grow even after all that money I spent.

Where the kudzu is trying to take over.

I see the holes where I’ve killed the plants.

And if I stop there, it’s all failures.

Original gif

But I’ve also:

Learned how to dethatch and properly seed a lawn, revived my gardenia bushes from near death, and already reclaimed a huge section of my yard from the kudzu.

These successes help me each time I go back out there and we need to remember and draw on these successes.

Image by Alexandru Goman

So to wrap this up:

We stop creating from discouragement and demands but…

Image by Alexandru Goman

Creativity is not a talent, it’s a mode of thinking that’s available to us at every stage of life so:

Images by Nikhil and Luis Villasmil (with modifications)

Protect your juice.

Images by Nikhil and Luis Villasmil (with modifications)

Find your freak.

Images by Nikhil and Luis Villasmil (with modifications)

And remember, the world doesn’t need flawless. It needs people brave enough to show up and make something.

Because every time we create, big or small, we’re not just making things, we’re SAYING something. And we need more of that.

Original gif

Thanks everyone for listening!

Happy creating!

What I've Learned From Writing 100 Newsletters

Mon, 11 Aug 2025 21:05:47 GMT

This week marks a big milestone for me: 100 newsletter issues! 🙌🎉 (Go sign up if you haven’t already! Or go check out the archives of the last 100 issues!)

Am I an expert at writing now? 𝔸𝔹𝕊𝕆𝕃𝕌𝕋𝔼𝕃𝕐 ℕ𝕆𝕋. But I have learned a few helpful things along the way:

Writing happens all the time, all around you

When I started trying to write more, I was under the impression that writing was Serious Business™ and happened mostly while looking suitably thoughtful in front of a keyboard. I felt I needed something like Thoreau’s cabin and King’s routine to produce real work.

However, I’ve come to realize that a lot of my writing DOESN’T happen at a desk — it’s in the ideas that bounce around in my head all week and the gentle, intentional pursuit of them. It can be an idea that occurs during a walk, a stray thought in conversation with a friend, or a series of events that sparks something. If I observe where my thoughts go and press into them, THEN when I sit down at a keyboard, I have something to work with.

There are still times I sit to write and there’s absolutely nothing there, but the more I intentionally observe my thoughts and patterns, the more my subconscious helps push ideas to the front.

Writing helps me think

“If you’re thinking without writing, you only think you’re thinking.”

— Leslie Lamport

When I try to capture an idea with words, I begin to see the ‘shape’ of it. Is it full of holes? Is there a special seed, but a lot of cruft? Is it a strange and weird thing that should never see the light of day? (I have a whole drawer full of those…) Writing it out creates a more concrete concept than simply letting it float around—it forces me to be more structured about my thinking.

Consistency really is key

“Write consistently” is probably the #1 recommendation of writing advice, and well … they’re not wrong! The more I write, the easier it becomes. Publishing short thoughts every week creates an accountability contract with myself that forces me to write, even on the weeks it would be much easier not to.

Yet it can still be a struggle to keep coming back, and I’ve had to give myself some grace on busy weeks. I’ve written before about struggling in the gap, but I like this advice from Jeet Mehta about the WHY:

“If you’re in it purely for the promised land of love, praise, followers, and fame from millions of people - it’s impossible to sustain. In every field, it takes years of practice, repetition, and “failed performances” before the first hit.”

— Jeet Mehta

The WHY and FOR WHO of what you’re doing is very important. Approval and admiration of others, while very natural and tempting to fall into, is a horrible metric for… pretty much anything.

Rather, I’ve found that when I write for myself, or perhaps that one person who has the same very specific problem, it’s liberating and much easier to keep pressing through the struggle!

The bar is lower than you think

I was also concerned when I started writing that I wouldn’t have anything unique or worthwhile to say. I was encouraged by this post by Jeremy Keith, who implores us all to remember that the combination of our perspective and experience IS unique to us.

“In other words, while it seems like there’s never a good time to write about something, the truth is that there’s never a bad time to write about something”

— Jeremy Keith

And we need more voices, more perspectives, more experiences, because THAT’S what makes the web weird and wonderful!

And also why I’ll keep on writing! And why you should too!

Git: Fixing Mistakes

Fri, 21 Feb 2025 18:58:30 GMT

Git—love it or hate it, you’ll be using it nearly every day as a developer. When I started using Git, I felt like I was one bad command from blowing up a project history. Now, I still blow things up regularly, but now I know how to fix them. 😎 (Usually.)

Mistakes happen—pretty much all the time. Knowing how to back out of them is like knowing where the brakes are on a car. It lets you try things with confidence, knowing that if it goes sideways you can back out and start over.

Here are some ways to fix your mistakes in Git.

Forgot something small? Amend the commit.

Sometimes you’ve forgotten about that one file, or there’s one small change you forgot to put in. Rather than creating a new commit you can stage the change as if you’re going to make a new commit and then run:

git commit --amend

This will bring up the last commit message and smoosh the change in, making only one commit instead of two.

If you don’t need to rewrite the commit message, just add the file you can use:

git commit --amend --no-edit

In both cases, because we’re rewriting history, you’ll need to run:

git push --force-with-lease

The ‘force’ part tells Git that, yes, you meant to do this, and the ‘lease’ part checks to make sure that there are no additional commits on the branch that your system doesn’t know about.

NOTE: As a general rule, force push on your own stuff with confidence BUT if it’s a shared branch, MAKE SURE to check with your team first.

Tangled or accidentally deleted a single file? Revert it.

Sometimes, you need to reset one file in particular. You can do that with:

git checkout origin/main -- path/to/file

This resets the specified file to the current version on a branch on the remote. If you need to reset it to a different branch, swap out origin/main to origin/whatever-you-need

If rather than a branch, you need the file from a different point in the timeline, you can replace origin/main with a commit hash like:

git checkout 345e8bb2 -- path/to/file

Burn it all down 🔥

Sometimes, things go wrong, and you want to dump your work, find the exit, and start over. There are two levels: the minor nuke and the major nuke.

Minor Nuke

git reset --hard HEAD

This is your minor nuke. It resets your current branch to the last commit (the HEAD) and discards every change made since then. This is useful if there’s been a lot of accidental churn or something got updated that you didn’t mean to.

Major Nuke

# while on the branch to reset, pull the lastest from the remote
git fetch origin
# hard reset branch to remote branch
git reset --hard origin/<branch>
# remove untracked files
git clean -df

This is your major nuke, where <branch> is the name of your current branch. This discards any changes you have locally that aren’t on the remote. It also force cleans any untracked directories. If you have things go very poorly

If you choose a different branch to reset to, your current branch will become an exact match of what you’re pulling from. This can be what you want if you need to start over or reset something like an environment branch.

Rewind Time

If you’ve committed to a branch you didn’t mean to or need to move backward in time:

# find the commit you need
git log
# reset to that commit
git revert <commit-hash>

Timeline Surgery!

It doesn’t happen often, but if you ever need to delete a commit with a surgical judo chop that happened BEFORE or IN-BETWEEN commits, you can do some interactive rebasing:

git rebase -i HEAD~4

This will bring up a dialog of the last 4 commits. Delete (or comment out) the lines corresponding to the commits you wish to delete, like so:

pick 2f05aba ... #will be preserved
#pick 3371cec ... #will be deleted
#pick daed25c ... #will be deleted
pick e2b2a84 ... #will be preserved

Once you’ve finished, the commits you’ve selected to be deleted will be wiped from the repository’s history. Because we’re modifying history again, you will need to force push (but remember our general rule of force pushing!)

Testing AI Value

Fri, 24 Jan 2025 22:36:19 GMT

I was disappointed when AlphaGo beat Lee Sedol in 2016, but intrigued when it influenced opening strategies that had been set for decades (or even centuries). I was alarmed in 2022 by how confidently ChatGPT spouted hallucinations with no factual basis but amused that it enabled me to create a haiku about my love of cheese effortlessly.

I’ve been an AI skeptic, but it’s frickin’ everywhere. The Pragmatic Engineer newsletter tracked the decline of StackOverflow with the rise of ChatGPT. Anthropic is raising capital at a valuation of $60B. AI even recently popped up as a way to help my kid learn Spanish… AI is everywhere, seemingly in everyTHING, and it does not look like it’s going away soon.

I like Cal Newport’s concept of digital minimalism when dealing with disruptive technology: aggressively clearing away digital clutter and keeping only the tools that bring value to your life. I think of it as digital KonMari. (Literally why I slid out of most social media, minimal value there for me, folks.)

So what value does AI bring a web developer? Addy Osmani has a few opinions on that. Addy defines two effective patterns of AI usage he’s seen engineers use:

Bootstrappers - Use AI to rapidly develop the initial codebase for a working prototype of a rough concept — good enough for initial user feedback.
Iterators - Daily use for code completion, refactoring, generating tests and documentation, and as a virtual ‘pair programmer’.

It’s the second pattern that speaks to me.

I’m not OK with AI doing serious writing FOR me, but I am OK with having it help check my grammar and sentence structure: Clippy is reborn (but maybe… more useful this time).

I’m not OK with AI coding FOR me, but I am OK with AI helping me fix flaws in my code and find efficiency gains: my coding robot buddy and me.

Addy notes that for effective use, engineers need to identify when the model is making errors, making it more valuable to senior-level engineers who can validate, strengthen, and handle edge cases. AI becomes an accelerator, a proof-checker, a sounding board.

This feels like enough value to test, but I still have some reservations:

Working as a remote employee is isolating enough. Replacing human collaboration with AI collaboration could silently diminish connection in a space where it’s already at a premium.
Obfuscating the actual workings with ‘magic’ feels dangerous. If we don’t know WHY it works, we will not be able to fix it when it breaks.
Fear is a bad reason to adopt something: either to prevent being ‘left behind’ or to stay relevant in today’s job market. Some things are just OK to skip. (Remember how WEB3 was going to change the world?)

The Test

So we test it. But we set some boundaries:

I do the work. The AI must function as an assistant to counteract the temptation to rely on it too heavily.
It remains opt-in. No inline recommendations. This interface must only come when called.
I must understand everything I commit. If I don’t understand it, or can’t reach an understanding, the recommendation gets nuked.
Data must remain reasonably protected and not be used for training data. This one comes from my peers at Viget and I wholeheartedly agree. This code is my work product and must be legally protected within the bounds of our contracts.

And then we review:

Does it improve my work product like catching errors or improving clarity?
Does it make me more efficient?
Does it introduce errors?
How expensive is it?
Does the result justify the cost?

The Implementation

After reviewing several options I’ve settled on the CodeCompanion plugin for NeoVim. In particular, its chat interface will let me send the contents of a buffer to the LLM, and I can control the level of access it has. This fits the pattern I’m looking for.

This will also allow me to test different LLMs. I plan to start with Claude 3.5 Sonnet as it’s aimed at the type of work I do and Anthropic honors my #4 boundary of not using my data for training purposes for commercial products.

So, we’ll see. If it proves valuable, I’ll keep it around. If not, well then…

My Personal tmux Mystery

Thu, 22 Aug 2024 15:23:23 GMT

Roll in enough Vim circles and you’ll hear people sing the praises of tmux, the terminal multiplexer. And to be honest… I’ve never really quite gotten it.

I tried it and didn’t get why it was great. Recently, Adam Stacoviak from the Changelog mirrored my thoughts in this short clip:

The selling points that Nick and Jared make for tmux actually made me realize why it’s never quite fit for me. Their two main points:

tmux sessions are a great way to manage projects and window arrangements.
tmux allows persistent processes over an SSH connection.

It made me realize that my normal workflow differs from what they describe. Which made me start to wonder, “Am I the outlier here?”

So here’s a quick overview of how my workflow differs.

I don’t use complex window arrangements and have other ways to manage projects.
(The big one) Most of my development is local-only.

Projects and Window Arrangement

To open up a project I:

Open up WezTerm
Type the shortcut saved from my bashmarks script
Open nvim
Use the amazing Telescope plugin to pull up any files I need.
Start coding.

Once I’m in the project I typically work with a single full-screen window. I use lots of window splits to compare files, put them side by side, keep one open as a reference, or whatever … but that’s all internal to NeoVim. I manage my git history through the Fugitive plugin. If I need to run a quick command I have a floating terminal bound to a function key that I can quickly bring up and dismiss without leaving NeoVim. Once I’m IN NeoVim, I don’t need to leave it.

Adam jokingly (seriously?) says halfway through the video, “What’s wrong with multiple tabs?” And … 😳 … that’s EXACTLY what I do when I need to run a separate process in the background, I kick open a new tab on WezTerm and then leave it running. Need to fire off a container that’s not detached? Open a new tab. Need to run my local node-based wiki in the background? Open a new tab and fire off the process.

The tabs act as my expander and window management. Because I start fresh each time with a simple arrangement, I don’t need to save the session and the project. I just need to get there in the command line and open NeoVim.

I realize many people don’t work in this one-window-at-a-time-in-fullscreen mode like I do. If there was a lot of setup or tear down between projects I could see sessions being useful, I just don’t think it will help me much.

Local Only Development

This is the main reason of that makes tmux not a real boost for me — I simply don’t often work through an SSH connection.

Most of my development work happens on a local checkout of a project, running on local containers. Occasionally I’ll need to SSH into something and run a few commands, but typically they’re relatively minor and quick — I’ve never had a command disconnect on me.

IF I did more work on remote boxes I could see this being a critical part, but it’s simply not a large part of my workflow.

So I’m not crazy, I’m just not who tmux is for.

Console Cowboys In Cyberspace

Fri, 28 Jun 2024 20:55:09 GMT

In a blast of nostalgia I came across this old clip from the PBS show Ghostwriter:

In addition to this encapsulation of a part of my early childhood, there’s some immediate takeaways:

Sick Neuromancer reference.
We should all petition to change our titles to Console Cowboys in Cyberspace. 🤠
The idealistic representation of 90’s hacker culture…

I think after decades of internet culture it’s much easier to be pessimistic about the future, but the things we talk about that made the beginning of the internet great are still there, just covered up by so much other noise. ‘Curiosity’ and ‘Imagination’ haven’t gone away, we just need to be more active in bringing them to the forefront!

Colorschemes for the Discerning Developer

Tue, 11 Jun 2024 19:50:21 GMT

That colorscheme in your editor…

…how long have you been looking at it? When did you change it last?

Years? Yeah, me too. 😅

I recently took a spin to see what was new out there, and boy, are there some cool colorschemes!

I eventually settled on a lovely theme called Catppuccin (specifically the Mocha variant, the darkest one). But here are some of the others I came across. Maybe there’s something here to give your editor a nice new coat of paint as well!

Multi-Editor Colorschemes

These colorschemes have multiple ports, making them a nice way to extend it across all your tooling.

Catppuccin
- Beautifully balanced pastels pop off a dark blue background. It also has one of the nicest light variants I’ve seen.
Rosé Pine
- Another balanced theme with multiple variations… This palette trends towards warmer natural colors.
Tokyo Night
- This was my pick before Catppuccin. I liked it so much that I used some of the colors here on my site! It celebrates the neon of Tokyo nights.
Dracula
- A nice dark scheme with an amazing amount of ports and implementations. Slightly darker than Catppuccin and Rosé Pine. The purple and orange feel especially thematic.
Nord
- The power of BLUE! It’s bold and STRONG.
Solarized
- This was the OG theme that felt like real consideration had been put into the colors. I consider this the predecessor of most of these themes and it’s STILL a pretty solid choice.
Oceanic Next
- A slightly desaturated palette, this sits somewhere in between Solarized and Tomorrow Night.
Tomorrow Night
- Bold color choices, and nice if you don’t want a blue background.
Iceberg
- High contrast, bluish theme. Feels like if you turned down the lights on Nord a bit.
One Half
- Based on Atom’s ‘One’ colorscheme, a practical mix of colors on a gray (or light gray!) background.

NeoVim Only

These colorschemes are mostly for Vim/NeoVim, but many have other ports.

Kanagawa
- Based on the Katsushika Hokusai painting of the same name, this theme has some unique colors giving it a different feel.
OneDark
- Another Atom One Dark successor, with TreeSitter support.
Gruvbox
- One of the few themes that feels like distinctly its own thing. It has retro vibes that make me nostalgic for the green and amber-colored displays of the past.

Decorating your ‘Personalized Development Environment’

I have always liked TJ DeVrie’s concept of the PDE, of creating an ENVIRONMENT that’s JUST YOURS and a joy to use. One of the best ways I know of to personalize a space is with color. So what does YOUR colorscheme say about you? If it’s not speaking to YOU, maybe it’s time to change it up!

ffmpeg Basics and Recipes

Wed, 27 Mar 2024 16:44:55 GMT

Recently I wrote about ffmpeg, a Swiss-army knife command-line utility for media. While I find it incredibly handy NOW, it took time to build up a working knowledge of the tool to handle certain tasks with confidence. The downside of having a versatile tool is that it can do an awful lot of things!

So let’s break down how it works and I’ll share some of my most common recipes for converting media.

Installing

The easiest way to install (on a Mac) is with homebrew:

brew install ffmpeg

You can also download directly from their site, but that’s a tad more involved. Homebrew drops it into your path, ready to go.

Basics

An ffmpeg command will take:

An input file,
several sets of options,
and an output file to spit everything out into.

A basic command will look something like:

ffmpeg -i input-file {lots of options here} output-file

Compression

One of the handiest things ffmpeg can do is give you fine-grained control over video compression. Not only can you pick the method of compression, you can choose what codec to use.

There are several methods of compression, but two of the main ones you’ll see are:

-b:v Sets a fixed bitrate of the output, measured in kb (ex. 1200kb) or megabytes (ex. 2M). You’ll typically see values between 1200-6000kb. The lower the number, the less ‘bits’ will be used.
-crf Sets a Constant Rate Factor (available for x264, x265 and libvpx). This is a smart value between 0 and 51 that attempts to vary the bitrate per frame for better-looking results (less artifacts). For x264, sane values are between 18 (better quality, larger file) and 28 (lower quality, larger file). The default is 23, so you can use this as a starting point.

Bitrates can get quite complicated but give you a lot of control. They’re useful in situations for streaming videos or where you need to specify a minimum, maximum, or ensure a constant bitrate. Because I use ffmpeg to operate on smaller videos I gravitate towards -crf values.

Convert to h264 mp4

If you need to share a video, you can’t go wrong with an mp4. It’s widely supported and everything except ancient devices should be able to play it. Here’s a good default compression recipe:

ffmpeg -i input.mov -c:v libx264 -crf 28 -preset very slow output.mp4

Option descriptions:

-c:v selects the compression format to libx264
-crf 28 sets a decent constant rate factor.
-preset sets a series of options that will provide a certain encoding speed to compression ratio, slower speeds mean more compression.

One benefit of H264 compression is it’s FAST and pretty efficient. I can usually get a .mov file down to about 10% of its size with this recipe.

Convert to webm

webm is now fully supported in modern browsers but is a little more finicky to encode, it’s quite easy to set some options and wind up with large webm files. I find webm’s to be slightly larger than well-compressed mp4s.

ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 output.webm

-c:v selects the compression format to libvpx-vp9 which is the latest webm codec.
-b:v is set to 0 (required) to allow constant quality settings with:
-crf 30 which follows the CRF numbers outlined above

They recommend that you use a two-pass method on webm for the best results, but it is QUITE slow, so grab a coffee while you wait:

ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -pass 1 -an -f null /dev/null && \
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -pass 2 -c:a libopus output.webm

-pass {number} lets it know that we’re doing some multipass business here.
-f forces output, in this case null to prevent the first pass from outputting anything
&& is a normal bash/zsh command to run the second command if the first command is successful.

Common Recipes

Now we’ve talked about compression, what are some other things you can do? Here are a few of the tasks I find myself running.

Scale Video by Height

One of the easiest ways to shrink file size is to reduce the size of the video, especially if you’ve got a mondo-sized source file. To produce a 1080p video:

ffmpeg -i input.mp4 -vf scale=-1:1080 output.mp4

-vf is an alias for -filter:v (video filter)
scale=-1:1080resizes the video to ’‘whatever’’ (the -1) by 1080 pixels high. If the video is 16:9, the width would then be 1920. If you ran -1:720 the output would be 1280x720 for a 16:9 video.

Note: Common resolutions for 16:9 video are: 1024×576, 1152×648, 1280×720, 1366×768, 1600×900, 1920×1080, 2560×1440 and 3840×2160. You can use these as some numbers to start with.

Trim Video by Timecode

Sometimes you only need a slice of a video, or you need to just shave off the first few seconds of something. Here’s how you trim by timecode:

ffmpeg -i input.mp4 -ss 00:01:02.500 -t 00:01:03.250 -c copy output.mp4

-ss indicates start time in seconds (with decimals for sub-second times)
-to is the end time in hh:mm:ss format
-c copies existing formats

ffmpeg -i input.mp4 -ss 00:00:03 output.mp4

Not providing a -to means it runs to the end of the file. This example will trim off the first 3 seconds of the file.

Remove Audio

ffmpeg -i example.mp4 -c copy -an example-nosound.mp4

-an removes audio
-c copies existing formats

Boost Volume

Note that this can work on audio files, not just videos.

ffmpeg -i input.wav -af "volume=1.5" output.wav

-af set audio filters
volume=1.5 and boost the volume to 150% of the original. This can be proportional or in decibels: volume=-5dB

Create a Poster Image

Embedding an HTML video and don’t have a poster image? Rather than trying to awkwardly screengrab something, you can use this to create an image at a specific timestamp.

ffmpeg -i example.mp4 -ss 00:00:00.000 -vframes 1 'thumb.png'

-ss seeks to where we’re pulling a frame (in this case, the start of the video)
-vframes sets the number of frames to output
*.png (in output file extension) converts it to a PNG image

Advanced Recipes

Here are some of the more complicated recipes I use that string together some of the operations I’ve already covered.

Create Ambient Video MP4

Need to load up a looping ambient video, but you’re given a 200+MB file?

ffmpeg -i input.mp4 -c:v libx264 -crf 28 -preset veryslow -vf scale=-1:720 -movflags +faststart -an output.mp4

Uses H264 compression
Uses a Constant Rate of 28
Uses the veryslow preset for better compression
Reduces to 1080x720 dimensions
-movflags +faststart moves the metadata to the front of the video allowing immediate streaming (rather than waiting for the whole file to load)
Removes audio channels since it will be playing muted.

GIF to MP4

Want a GIF, but not with the filesize overhead?

ffmpeg -i animated.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.mp4

-movflags +faststart to move metadata to the front for streaming
-pix_fmt yuv420p use the pixel format of yuv420p which is a chroma subsampling scheme.
-vf starts a filter. The formula in the string will upscale the resolution by 2x.

MP4 to GIF

Going the other way is a bit more involved because we need to take a full-color video and restrict it to 256 colors for a GIF. First, we’ll need to generate a color palette from the video:

ffmpeg -i input.mp4 -y -ss 10 -vf fps=10,scale=320:-1:flags=lanczos,palettegen palette.png

Generates a PNG color palette
-ss seeks to timecode for what frame to sample the palette from

Then, using that palette, we’ll convert the video into the best-fit gif.

ffmpeg -i input.mp4 -i palette.png -filter_complex "fps=10,scale=-1:480:flags=lanczos[x];[x][1:v]paletteuse" output.gif

Notice the two inputs, we grab the video and the palette
-filter-complex Sets up a filter that: sets the fps to 10, scales it to 480 pixels high, and uses the palette we specified earlier.

Max Compatibility

I hardly use this recipe anymore since MOST devices can handle mp4’s just fine. But just in case you need to get something running on an older device:

ffmpeg -i input.mp4 -c:v libx264 -crf 23 -profile:v baseline -level 3.0 -pix_fmt yuv420p -c:a aac -ac 2 -b:a 128k -movflags +faststart output.mp4

H.264 video and AAC audio is the best combination for broad support. Ancient browsers that do not have H.264 decoders however will need a VP8/Vorbis video.
The -profile:v baseline and -level 3.0 options are only needed for old mobile devices that cannot handle CPU-intensive features of H.264.
Uses a constant rate of 23.
-movflags +faststart moves the metadata to the front of the video allowing immediate streaming

If you’ve come across other recipes, or you see a way how these could be improved, shoot me a note! I’m constantly improving and adding to this list.

These Are a Few of My Favorite CLI Things...

Thu, 21 Mar 2024 16:00:00 GMT

I’ve recently been perusing the setups at uses.tech. It’s interesting to see where people have landed on hardware and software options, but I started thinking about some of the miscellaneous CLI utilities I’ve tried and picked up along the way. My work LIVES inside the terminal (as a Vim user) and here are some of the small things I’ve found to make it easier on myself (in no particular order):

tig

Site: https://jonas.github.io/tig/

Git can be weird sometimes. While I don’t use tig to perform any git operations, I find the explorer view helpful to see what’s going on in there. Have you rebased correctly? What did your teammates just commit, and what files did it affect? I run this constantly on active projects to keep a mental picture of what’s going on.

(So what DO I do most of my git actions with? I use Tim Pope’s excellent Fugitive Vim plugin, but that’s more Vim-based, so it doesn’t qualify for this article…)

exa

Site: https://the.exa.website/

exa is a more colorful way to list files and directories. It may seem simple, but when you’re navigating around, having color-coded items, as well as other pertinent information right at hand, is a nice quality-of-life improvement. This has completely replaced ls -laF for me. I’ve aliased the two modes I use the most to:

alias ll='exa --long --header --git --all' # long form, everything
alias lt='exa --tree --level=2 --long --all' # tree view

bashmarks

Github: https://github.com/huyng/bashmarks

I found this bash script about 12 years ago and I’ve used it every day since then. It’s a very simple bookmarking system for navigating directories with tab completion and very short commands. s saves the current directory with the name you give it, and g + name takes you right back to that path.

I’ve tried fuzzy completion and other fancier bookmarking options, but this one is so simple and does just what I need that I’ve wound up back at bashmarks several times. I’ll save the fancy fuzzy searching for INSIDE projects, I’d rather just teleport to where I need to go. I highly recommend this script if you need a simple navigation option.

ffmpeg

Site: https://ffmpeg.org/

This is an absolute monster of a video and audio tool. Need to compress a looping ambient hero video? Run it through ffmpeg. Need to strip the audio from something? Run it through ffmpeg. Need to quickly trim down a video? You guessed it, ffmpeg. I have shaved innumerable megabytes of video data with this tool while processing assets for client projects.

The only beef I have with it is that writing out the arguments for proper compression is like trying to write an arcane spell. You need special knowledge of ffmpeg’s vast options and some knowledge of video codecs to make your way. Yet despite that, it remains an indispensable tool for front-end development.

The video screencaps in this article were captured with a normal Quicktime screen recording, but I have a special quickfire mov-to-mp4 command that uses the absolute basic mp4 defaults and still manages to make them 5-10% of the original .mov size:

# Quicktime mov files are so big!
function movtomp4() {
	for i in *.mov; do
		ffmpeg -i "$i" "${i}.mp4";
	done
}

At some point, I’ll have to write up my cheatsheet for ffmpeg…

degit

Github: https://github.com/Rich-Harris/degit

I learned about degit from the Vite docs, and it’s become my go-to way for initializing a prototype kit. When I have an idea I want to try, I turn to degit and let it grab all the configuration files for me. Need Tailwind? Grab a starter kit for that. Testing out something in React? There’s a starter kit you can pull for that too.

In fact, I made a few starter kits of my own.

just

Github: https://github.com/casey/just

Do you have a project that needs lots of arbitrary commands? Things you have to continually look up and paste back into your console? just helps provide a unified layer on top of whatever system you’re using. Unlike a Rakefile or Makefile, it’s not bound to any specific language, you can just feed it whatever commands you’d like and it’ll run them for you.

It even pairs nicely with the previous utility, degit to help form a rapid-start prototyping area with project templates

asdf

Site: https://asdf-vm.com/

It can be tough to make sure that your environments are in sync across projects, versions, and even programming languages. For a while, I was using language-specific version managers (nvm, rvm, with all the shims that come with it) but Viget introduced me to asdf as an all-in-one way to manage all these different languages in a way that didn’t have me pulling my hair out.

btop

Github: https://github.com/aristocratos/btop

Think Activity Monitor, but way cooler looking and accessible without clicking a bunch of things. btop is a pleasing way to see just what is making your computer slow down to a crawl (shakes fist at Docker).

Talking about Motion for the Web

Wed, 06 Mar 2024 17:00:00 GMT

I mentioned last year that I was working on a series on building motion for the web. Well, that series turned into a talk, and we recorded it.

In it, I talk about:

Ways to Classify motion to help build shared language when talking about types of motion for the web.
Building a ‘Complexity tier list’ for motion to help assist in planning.
Some recommended Collaboration methods for designing and implementing motion.

(You see the 3 C’s in there? Alliteration FTW 😎)

You can check the full thing out below.

Keeping a Project Log

Mon, 04 Mar 2024 17:00:00 GMT

Captain’s Log, Stardate 41503.7. We have entered the Neutral Zone where a Talarian freighter has been severely damaged in a battle. I have sent an away team to investigate.

— Captain Jean Luc Picard (S1E20: Heart of Glory)

I grew up watching Star Trek (specifically reruns of The Next Generation) and listening to Captain Jean Luc Picard (the BEST captain, fight me…) record the events of their explorations and adventures.

I used to wonder: who would listen to these logs? Were they for the captain’s benefit? Was some poor schmoe’s job at Starfleet to listen to long expositions on events? The internet tells me that the ship’s logs were (are?) used to document speed, location, who was onboard, significant events, or anything else regarding the ship’s operation. If something goes wrong, the log can help piece together the events leading up to the event.

But captains aren’t the only folks to keep logs.

Scientists keep highly detailed logs in their lab notebooks, documenting their hypotheses and experiment results so they can be repeated and breakthroughs can be proven (and protected in the case of intellectual property). Researchers in descriptive sciences keep field notes to record observations and evidence to help create an understanding of a phenomenon.

As developers, should we keep logs? Short answer: Yes. (And it’s not a new idea…) We should keep ‘project logs’.

Great. Fantastic. I’m sure you’ll all get right on that and do fine. But if you’re like me, perhaps a little more structure into WHAT EXACTLY to log would be helpful.

What should a web developer’s log look like?

We’re not scientists, nor are we space explorers, but as developers, we navigate through series of problems and solutions in projects. We plot a course at the beginning of a project and then observe how that approach fails or succeeds.

If you’re like me, this is all very timely information. Ask me again in 3 months and I will struggle to recall all but the key details of what happened.

A web developer project log should:

Be private, not publicly accessible.
Be organized by project.
Record goals and possible solutions upfront.
Record any supporting links and materials (designs, workspaces, external notes, etc.)
Contain a chronological log of quick updates on:
- Decisions made, and the reasons for them.
- Events, either internal or external that affect the build process.
- Stray thoughts about future optimizations.
Record final results and contrast them against the original goals and solutions.

I’ll expand on each of these.

Keep it Private

Some developers, especially game developers, keep a public devlog. They can range from things like patch notes, to something with more behind-the-scenes thinking, to lavishly produced videos.

But game developers face different problems than we do as web developers. They have a game to sell in a saturated market. If they’re a small team or indie dev, they may not have folks devoted to evangelizing their game to their audiences. A public devlog increases accountability and gets existing users excited about upcoming updates. It can expose balance notes that might change the game meta. It can serve as a marketing tool. Because of these uses, a game devlog exists more for the USERS than for the DEVELOPER.

As web developers, we often sell our services by contract — we don’t need the same type of audience-building efforts. In fact, we might even breach contract if we share technical details publicly. So if you keep a log, it will be for YOUR benefit.

Organized by Project

I want to make a distinction between a log and a journal. A journal is incredibly useful for stream-of-consciousness observations organized by day. However, using this approach for a project spreads information across a series of time-bound entries. If you’re working on multiple projects simultaneously it can be difficult to gather that information back up in a usable way. You can tag it, sort it, segment it, or whatever, but when you go looking for you’ll also be perusing entries that will cover a variety of topics in addition to the one you’re looking for.

For maximum benefit, we’ll be using these logs both during and after the build. For that reason, we’ll make it easier for our future selves to organize these logs by project.

Record Goals and Approach

This is one of the most important parts of a developer project log; it’s the equivalent of our hypotheses. At the beginning of any project, the problem is explored and an approach is planned to solve it. But projects are not static, goals can change, and wrinkles are introduced by hidden requirements or obstacles that weren’t known at the outset. It’s much harder to see how far things have drifted if you don’t record them first.

A project manager may record parts of this in shared documentation, but this also includes YOUR goals for the project – things only you can know. This project log exists for your improvement so it’s up to you to record these things yourself. PMs will move on, and you may not be paired again on the next project, so this is for you to develop a consistent practice in your approach.

Record supporting links and materials

If you put something out of sight, you won’t use it. Part of increasing the use of this project log is to make it a handy dashboard. Stuff it full of the things you constantly have to look up: design files, meeting notes, links to specific tickets. Whatever you need. If you’ve recorded it, it’s all right there.

Chronologically record process

Every so often, at a cadence that makes sense to you, record progress on the build. What’s happening? Did the client request something different? Was a problem found in the approach? Document decisions and events. Anything that influences the build should find its way in here. Give it a dated entry so you can piece together what happened when.

Contrast results and goals

We built up our initial approach, we logged the changes and the path we wound up taking, and now, in the end, we can look back and see the difference between our start and end.

We can use this to figure out what worked and what didn’t. Was there a particular event that helped or hindered the work? Did your collaboration with a teammate cause a new solution to present itself?

By logging and recognizing these things, we can work to reinforce the good and avoid repeating the bad. If your team runs retrospectives, your log will give you the ammunition to propose changes, highlight difficulties, or give genuine praise to your teammates.

It can also give you a moment to be proud of what you’ve accomplished. Did you come up with a new technique? Did the project unlock a mental model of something? Use these things to fill out your Brag Sheet.

Format

This is the least important part of the log, and the easiest one to get trapped in. The tool must facilitate the work, not dominate your time. Several tools fit the bill:

TiddlyWiki
Obsidian
Notion
… heck, even just some scripts and plaintext.

It just needs to be easy to call up and edit. I personally use TiddlyWiki as part of a larger personal wiki. I love being able to easily extend and format it with HTML/CSS/JS and all the data is stored in plaintext files (either as .tid with WikiText syntax or as .md with Markdown syntax).

But pick something that works for you.

Warp Factor Two… Engage!

There. A little structure, a little advice, and now we have a tool to help meaningfully progress our technical chops one project at a time.

Custom Class Regex for Tailwind IntelliSense in Neovim

Wed, 29 Nov 2023 17:00:00 GMT

Sometimes while using Tailwind, you need to place classes into things that aren’t structured like HTML elements. Take a look at this Twig snippet from a Craft site:

{% raw %}

{{ entry.primaryDescription ? tag('div', {
  class: 'text-body-lg text-rich',
  html: entry.primaryDescription,
}) }}

{% endraw %}

This checks for the existence of a field and wraps it in a <div> tag… But that little bit there as class:… If you’re running Tailwind in Neovim like me, it doesn’t recognize that as a trigger for autocomplete because it wants that sweet, sweet HTML class= attribute.

And without IntelliSense/autocomplete you’re missing a critical piece of the Tailwind authoring experience. You NEED autocomplete when working with Tailwind.

The fine folks working on Tailwind realized this problem and have exposed some settings to allow custom triggers for whatever wacky format your templating language wants. In fact, they’ve exposed two methods for us:

The class attribute setting.
The experimental class regex setting

We’re looking at the second one. Most guides will tell you to plop some JSON in your VSCode settings and it’s not immediately clear where the equivalent of this is for Neovim. But hey, you’re here now, so I’ll show you. You stuff it into your LSP initialization settings for Tailwind, like this:

local lspconfig = require('lspconfig')
local capabilities = require('cmp_nvim_lsp').default_capabilities()
local on_attach = --this is a custom function that sets several options

-- The initialization of TailwindCSS LSP
lspconfig.tailwindcss.setup {
  on_attach = on_attach,
  capabilities = capabilities,
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          "(?:class: ?)(?:'|\"|`)([^\"'`]*)(?:'|\"|`)", -- Twig, looks for string preceded by 'class:'
        }
      }
    }
  }
}

This setup assumes a few things:

You’re using nvim-lspconfig to connect to your LSPs.
You’re using nvim-cmp for autocomplete.

You can check out my earlier post on setting up LSP’s or look at my init.lua to see how I’ve set it up.

The regex itself is looking for anything inside a string (either "" or '') preceded by class: and 0 to 1 spaces. Tailwind will now helpfully suggest classes once you kick open that string. If you need something different than what’s listed here you can check out this repository of sample regexes you can use for different patterns.

Happy autocompleting!

Nathan Uses This: 2023 Edition

Wed, 20 Sep 2023 16:00:00 GMT

There’s been a lot of folks talking recently about the tools that they use so I thought this would be a good time pull a Marie Kondo on everything that’s rolling around in this machine to see if it still holds up to inspection. While several of these things won’t spark joy, they should at least spark VALUE.

Paper Planner: Task/Life Management

Alright, stay with me. My first tool choice has nothing to do with computers, but everything to do with planning. I’ve tried so many different planning tools (Todoist, Wunderlist, Trello, Workflowy, Things, Habitica, Remember the Milk, and even building my own system) and none of them have worked for me.

There’s too much input sprawl: emails, Slack, GitHub issues, JIRA issues, the one client that still insists on using BitBucket… And that’s just work. We also have school events, play dates, practices, trips — things that exist outside of the computer that ALSO need to be tracked.

Maybe I’ll expand on this in the future, but my principle has become to manage the task at the source, but keep my goals, high-level items, and events in the planner.

TiddlyWiki: Notes, Writing, Journal, Build Logs

Things that need to stick around longer than a week go in my personal wiki powered by TiddlyWiki. Everything gets stored as flat files for backup, version control, and storage and I run the node module in the background to stitch it all together in an interactive interface for me. It’s part zettelkessen, part journal, part work dashboard. Because it’s web-based, it’s also easy to extend and style just how I want it. It’s become my second brain, I’m not sure I could function without it anymore…

WezTerm: Terminal

Earlier this year I switched from iTerm2 to WezTerm, which says a lot because I spend ALLLLL day in the terminal. It’s fast, can be scripted with Lua (which is continuing the pattern of Lua-fication in my life), has an external config file I can take with me, and has a host of nice-to-haves like: baked-in support for my favorite code theme (TokyoNight Storm) and my favorite code font (JetBrains Mono) without the need of font-patching for those sweet, sweet icons.

NeoVim: Code Editor

I switched from Vim to NeoVim a few years ago and haven’t looked back. I was leery of Lua at first, but NeoVim introduced some killer features that made the learning curve worthwhile. LSP support topped the charts for me, and there are some fantastic plugins like Telescope, Treesitter, and others.

One of the main things that bother me in Neovim right now is that some languages (I’m looking at YOU, Twig) have terrible indent support. The rise of Prettier has helped in certain cases, but embedded languages continue to be a problem.

OBS: Visual filters for remote meetings

Remember SnapCamera? Well, it’s not around anymore. The funny filters helped inject some humor into the suddenly 100% remote meetings during the pandemic. Now I run OBS and can use overlays, gifs—basically whatever I want as a video source for meetings. Is this overkill? Yes. Is it fun? Also yes.

Figma and the Affinity Suite: Design

When I first joined Viget in 2022 it was the first time I’d been without Adobe products since I was 15. It was equal parts shocking and liberating. Figma is one of the best interface design tools I’ve used. I fear for its future having been gobbled up by Adobe, but I’ll continue to use it until there’s a better option.

Having started my career as a designer, I was used to being able to manipulate photos, documents, and layouts to do whatever I wanted. I have no desire to maintain a personal Adobe subscription so I turned to Affinity and their extremely reasonably priced suite of design tools. I’ve been happy with them and regularly reach for Designer for SVG work (Figma can be painful with complicated SVGs…)

Buttondown: Email newsletters

There’s a lot of choice when it comes to writing emails and maintaining a mailing list. I’ve used Mailchimp frequently for clients but I wasn’t keen on maintaining a personal subscription. I found Buttondown through Cassidy Williams’s newsletter and really liked the interface and features. It was the Goldilocks fit for what I wanted in maintaining an email newsletter.

Feedly: RSS reader

This is one I feel okay about but might change in the future. Feedly is the best of the free readers and does what I need it to right now which is following the 341 sites I’ve loaded in there. I have no real complaints about it other than it just doesn’t feel like it’s MINE. Some features I DO like are the bits of social proof that are scattered across the interface, such as loose counts of just how many people are following a source and what’s trending in different categories.

Just: Universal command runner

I was introduced to this utility about a year ago and it quickly replaced the gnarled file of zsh aliases I kept on my local machine. I use it to simplify long project commands (without having to constantly look them up) and doing some basic command automation.

But its most important feature is its ability to serve as a universal interface between different projects. I can create the same recipes to start up local dev from a Rails project that I can to a React, Elixir, SSG-flavor-of-the-day, or whatever. So rather than trying to remember how to start up the server, I can hit my custom just run command, and BOOM—we’re up and running.

Welp, that’s a few of my most used tools. It’ll be interesting to check back in a year or so and see how these choices have played out.

Building Motion for the Web

Fri, 14 Jul 2023 16:00:00 GMT

I’ve recently been noodling on motion and its use in web interfaces. I’ve been frustrated that most examples and material you find about motion fall into a few common categories:

Another rehash of Disney’s motion principles
Explanations of easing and CSS transitions
Imaginary app interactions built entirely in prototyping tools
Wild and technically complex demos that can be inscrutable. (Have fun reading that 3D shader algorithm…)

It all seems to be very low-level, limited-scope implementations, or so high level you might as well be reading a Wikipedia article. Very rarely do you find material on how a team considered motion as part of their design ideation, how the designer and developers collaborated on bringing it to life, and how they convinced the stakeholders that the time spent was worth the effort…

So I thought we should try to bridge that gap.

What I’m most interested in is:

Creating shared language around motion
- (Have you tried having a conversation on how something should move?)
Empowering designers to be creative without blowing the entire development budget.
- (“Yes, all the things can move, but like THIS rather than like THAT…”)
Create frameworks for talking to clients about motion and setting expectations around timing and cost.
- (It never works if it’s just tacked on at the end of a project or has no money allocated to it.)
Testing collaboration methods and deliverables around motion to widen our process toolkit
- (Spoiler: I don’t think high-fidelity motion prototypes are helpful to anyone but the client.)

I feel like THESE are the social, financial, and collaboration barriers that have to be overcome for any successful technology integration, but we seem to currently lack these tools for motion on the web.

We’ve started a series over at Viget that I’m excited about as we work to explore these topics. The first post is here: Building Motion for the Web: In the ‘Zone’. We explore classifications of motion characteristics in interfaces to start categorizing types of motion.

Check it out, it’s only getting started…

Vite Rapid Prototyping Starter Kits

Fri, 16 Jun 2023 16:00:00 GMT

One of the things I love about Vite is how FAST it is to spin up. When I had the idea for my Sandclock toy app (which I’ll write about once I get a little further with it) I used the Vite React starter to quickly spin up a basic project. No configuration, no hunting for packages, just drop and go.

This got me thinking about prototypes.

Prototypes

Sometimes when building a user interface a concept comes up that’s a bit tricky to nail down. Our design tools are great at communicating static design but once you add motion or more complex functionality it can become harder to get collaborate.

This is where I feel prototypes become valuable—getting buy-in on a difficult to explain concept. Splitting the concept from the codebase gives some freedom to get messy and iterate without causing a PR nesting tangle or a bunch of churn commits.

I LOVE code playgrounds like CodePen. They excel at sharing ideas, illustrating concepts, and exposing techniques — but as a rapid prototyping tool there’s some friction between the playground and your final code. Especially if you’re looking to port your code afterwards into a specific stack.

Vite helps here in quickly spinning up a local dev environment with little to no config. You get your normal code editor and can plug in any stack you need. If you use one of their starter kits, it’s just a one line script to get a full local playground up and running. Vite has the bases covered pretty well in terms of JS frameworks (Vue, React, Svelte, and more) — BUT there are a few patterns we use at Viget that aren’t as widely covered like Tailwind + Stimulus and Vanilla JS with Viget Modules.

Degit-ize your Starter Kit

In the Vite docs, they surface degit (by Rich Harris) as a way to expand beyond the official Vite starters. It’s a command-line utility that nabs clean copies of git repos but leaves all the history behind. We’re looking forward, not backwards! It’s a nice little utility that opens up the field for one-line installs for UNOFFICIAL starter kits… like these next two.

Tailwind and Stimulus

At Viget, we’re big fans of Tailwind and Stimulus.

Tailwind

Maybe one day I’ll write an apologetics-style post about the reasons Tailwind is great, but for now I’ll keep it short. Tailwind is massively composable, completely sidesteps any need for naming methodologies, and flattens out the selector specificity so it’ll scale long-term on a project without gathering cruft. It’s also portable in that you can write Tailwind in React, Vue, Svelte, but also Craft, Wordpress, custom Ruby apps, or any other system you’d like to use. That means as a team it’s a common language that can we can spread on top of any stack we’ll need to use.

Tailwind is also well suited for prototypes. You can lift the HTML markup and classes and just port it into whatever you’re working on — and it ought to just work. Even if you have custom classes and patterns, those are portable enough between projects, and if you need to RELY on project-specific setup you can just grab the project’s tailwind.config.js into your prototype from the beginning!

Stimulus

Sometimes you don’t need that much JavaScript. Rather than attempting to render the interface, Stimulus allows you to ‘sprinkle’ your interface with interactivity that loads only when needed. Like Tailwind, it augments HTML markup as the source of truth and when the two are paired together you can really jam on something without much file switching!

A new Tailwind/Stimulus starter

Given these team staples, I set about writing a Vite starter only to find my coworker, Jeremy Frank, had already created one!

Check it out on Github here.

And with degit, you can one-line it with:

degit jeremyfrank/vite-tailwind-stimulus-starter my-new-project

Vanilla All the Things

OK, so this isn’t really a tech stack as it is buy-in into the platform itself. CSS and JS have come a long way in the last several years.

CSS

In CSS we have variables, grid, powerful selectors like has() (ALMOST here) and not(), and amazing features like clamp() that remove many of the original reasons we used a pre-processor like SASS. And just look at these new things for CSS in 2023 like this popover demo from Una Kravets. How can you not be excited about all this?!

JavaScript

A few years ago the Viget team developed a pattern called Viget Modules that tap into dynamic imports to load only the modules needed on a page. Don’t need it? Don’t load it!

Originally, Webpack worked it’s magic to chunk and bundle everything, but now with native ESM support in browsers we can ship these independent modules WITHOUT a bundler. Which means this approach could work without a build system at all!

While we’ve largely replaced Viget Modules with Stimulus controllers in production sites, I have found that when learning new API’s or techniques it is easier to clear away all the magic to better understand what’s actually going on in the browser.

This also ensures that whatever you’re writing isn’t going to be subject to a third-party’s opinions of how things ought to be. It’s just you and the browser.

You can check out my vanilla starter kit here.

And with degit, you can one-line it with:

degit nathanlong/vite-vanilla my-new-project

Extra Credit: Prototype Junk Drawer

We’ve now got several options on how we want to roll our quick prototype kits, but what if we took it one step further?

We could transform all these one-line starter commands with degit into aliases, OR… we could use just to pull together a prototype directory where we can make those one lines EVEN SHORTER.

Check out this justfile:

{% raw %}

# react prototype from the official vite docs
react target:
  @echo 'Creating React prototype in {{target}}…'
  npm create vite@latest {{target}} -- --template react
  cd {{target}} && npm install
  @echo 'Start dev with: npm run dev'

# stimulus prototype (custom starter)
stimulus target:
  @echo 'Creating Stimulus prototype in {{target}}…'
  degit jeremyfrank/vite-tailwind-stimulus-starter {{target}}
  cd {{target}} && npm install
  @echo 'Start dev with: npm run dev'

# vanilla prototype (custom starter)
vanilla target:
  @echo 'Creating Vanilla prototype in {{target}}…'
  degit nathanlong/vite-vanilla {{target}}
  cd {{target}} && npm install
  @echo 'Start dev with: npm run dev'

{% endraw %}

Now instead of even having to remember the repo paths you can plop into your ~~junk drawer~~ prototyping directory and start a prototype with something like:

just stimulus my-awesome-prototype

Happy prototyping!

Setting up LSPs for Modern JavaScript Tooling in Neovim

Thu, 23 Feb 2023 17:00:00 GMT

It’s no secret that I love Vim. I’ve been using it since I started in the industry, but rather than talking about WHY I love it so much (that feels like a separate post) let’s talk about adding some key modern features of a code editor for writing JavaScript.

Note: These features are going to require us to run with Neovim, a relatively recent retooling of Vim, the modal editor that’s been in active development since the 90’s! (Such sleek, much wow, very powerful… 🐕)

We’re going to nab:

Intellisense-style code-completion and hinting for:
- JavaScript, HTML, CSS, ESLint, and JSON
Powerful language actions and methods for displaying info and jumping around in your code.
Linters that will ~~tell you how wrong you are~~ help you write better code.
Auto code-formatting with Prettier.

What you’ll need:

Neovim (for LSP support).
A little bit of Lua code (don’t worry, if I can parse it you can too).
Some familiarity with installing utilities via the command line.

LSP’s, you magical beasties…

A lot of the features we’re interested in come from the Language Server Protocol or LSP developed by Microsoft. They act as language-specific ‘brains’ that an editor (like Visual Studio Code) can communicate with for all sorts of handy language features.

This is the tech behind Intellisense completion, and it’s also supported in Neovim. We’re going to be nabbing these brains for ourselves with the help of NPM.

There are 4 LSP’s that we’re interested in today:

TypeScript - Why TypeScript? Well, it has inside of it many language features that work for vanilla JavaScript, not JUST TypeScript.
typescript-language-server - works with TypeScript to provide those language features for JavaScript
vscode-langservers-extracted - This is a combo bundle. The fine folks at Microsoft wrote LSPs for HTML, CSS, JSON, and added ESLint support while they were at it.
@tailwindcss/language-server - (optional) We use Tailwind quite a bit at Viget, and this gives us powerful autocompletion which is a MUST with Tailwind, but if this isn’t your cup of tea you can leave this one off.

We’re going to install everything globally with this command:

npm install -g typescript-language-server typescript vscode-langservers-extracted @tailwindcss/language-server

(I’m using npm to install modules in this example, but you can use whatever package manager you prefer. The point is you just need these globally installed so you can access them from Neovim. These LSP’s are just a small sampling of what’s available, see the docs at nvim-lspconfig for ways to install and configure more LSPs)

Now that we have these magical language 🧠’s available globally we need to connect them to Neovim.

Connecting Neovim

We’ll be installing Neovim plugins to help attach everything. The plugin manager I’m using here is Packer, but these will work with any other plugin manager as well.

We’re also going to be writing the setup and configurations of these plugins in Lua because most of them are written in Lua themselves. However, there’s no need to swap out your init.vim (vimscript-based config equivalent of .vimrc for Neovim) for init.lua just yet. Neovim gives you the option to write Lua blocks inside of Vimscript like:

lua << EOF
  -- all your lua config here
end

So if you’re rocking Vimscript, make sure to wrap the following setup in the Lua markers.

Install the plugins

require('packer').startup({function(use)
  -- ...other plugins before and after...
  --
  -- LSP integration and autocomplete
  use 'neovim/nvim-lspconfig'
  use 'hrsh7th/nvim-cmp'
  use 'hrsh7th/cmp-nvim-lsp'
  use 'hrsh7th/cmp-nvim-lsp-signature-help'
  use 'hrsh7th/cmp-buffer'
  use 'hrsh7th/cmp-path'
  -- Prettier
  use {
    'prettier/vim-prettier',
    run = 'yarn install --frozen-lockfile --production',
    ft = {'javascript', 'typescript', 'css', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'}
  }
end})

Plugin	Description
nvim-lspconfig	Officially supported LSP quickstart configs
nvim-cmp	The completion engine we’ll be using for everything
cmp-nvim-lsp	This is a ‘source’ plugin for our complete engine, `nvim-cmp`. This allows it to use the LSPs (required)
cmp-nvim-lsp-signature-help	A helper source that will auto-hint at function arguments for us (optional)
cmp-buffer	While we’re at it, another source plugin that allows autocompletion from the buffer itself (optional)
cmp-path	Another source plugin to help complete file system paths (optional)
Prettier	Officially maintained auto-formatting utility for a variety of languages, what we’re doing here is actually only activating it for certain filetypes

One note about Prettier: You may have noticed we did not install Prettier globally. TYPICALLY you’ll be running Prettier from a local project installation, and this setup will hook into a project that has Prettier installed. But if you want to use Prettier outside of a project config, you can also install a version globally that you can use without modifying project dependencies. We’ll come back to Prettier a little later on.

Activate the plugins

If you haven’t worked with Lua plugins before they differ from traditional Vim plugins in the fact that they’re not active by default, you have to call them (and optionally pass configuration options) before they’ll attach themselves to your session. This allows for you to selectively load plugins per filetype or any other fancy options you might need.

Inside of your init.vim or init.lua add the following:

LSP Config

-- LSP Mappings + Settings -----------------------------------------------------
-- modified from: https://github.com/neovim/nvim-lspconfig#suggested-configuration
local opts = { noremap=true, silent=true }
-- Basic diagnostic mappings, these will navigate to or display diagnostics
vim.keymap.set('n', '<space>d', vim.diagnostic.open_float, opts)
vim.keymap.set('n', '[d', vim.diagnostic.goto_prev, opts)
vim.keymap.set('n', ']d', vim.diagnostic.goto_next, opts)
vim.keymap.set('n', '<space>q', vim.diagnostic.setloclist, opts)

-- Use an on_attach function to only map the following keys
-- after the language server attaches to the current buffer
local on_attach = function(client, bufnr)
  -- Enable completion triggered by <c-x><c-o>
  vim.api.nvim_buf_set_option(bufnr, 'omnifunc', 'v:lua.vim.lsp.omnifunc')

  -- Mappings to magical LSP functions!
  local bufopts = { noremap=true, silent=true, buffer=bufnr }
  vim.keymap.set('n', 'gD', vim.lsp.buf.declaration, bufopts)
  vim.keymap.set('n', 'gd', vim.lsp.buf.definition, bufopts)
  vim.keymap.set('n', 'gk', vim.lsp.buf.hover, bufopts)
  vim.keymap.set('n', 'gi', vim.lsp.buf.implementation, bufopts)
  vim.keymap.set('n', 'gK', vim.lsp.buf.signature_help, bufopts)
  vim.keymap.set('n', '<space>D', vim.lsp.buf.type_definition, bufopts)
  vim.keymap.set('n', '<space>rn', vim.lsp.buf.rename, bufopts)
  vim.keymap.set('n', '<space>ca', vim.lsp.buf.code_action, bufopts)
  vim.keymap.set('n', 'gr', vim.lsp.buf.references, bufopts)
  vim.keymap.set('n', '<space>f', function() vim.lsp.buf.format { async = true } end, bufopts)
end

-- The nvim-cmp almost supports LSP's capabilities so You should advertise it to LSP servers..
local capabilities = require('cmp_nvim_lsp').default_capabilities()

-- Capabilities required for the visualstudio lsps (css, html, etc)
capabilities.textDocument.completion.completionItem.snippetSupport = true

-- Activate LSPs
-- All LSPs in this list need to be manually installed via NPM/PNPM/whatevs
local lspconfig = require('lspconfig')
local servers = { 'tailwindcss', 'tsserver', 'jsonls', 'eslint' }
for _, lsp in pairs(servers) do
  lspconfig[lsp].setup {
    on_attach = on_attach,
    capabilites = capabilities,
  }
end

-- This is an interesting one, for some reason these two LSPs (CSS/HTML) need to
-- be activated separately outside of the above loop. If someone can tell me why,
-- send me a note...
lspconfig.cssls.setup {
  on_attach = on_attach,
  capabilities = capabilities
}

lspconfig.html.setup {
  on_attach = on_attach,
  capabilities = capabilities
}

Awesome, that’s the LSP setup. We now have LSP’s activated and attached – but they’re not going to autocompleting yet. We need to set up nvim-cmp. But to do that we also need to specify a snippet engine.

Snippet Setup

Now, you don’t NEED LuaSnip specifically for nvim-cmp, but you do need A snippet engine (nvim-cmp requires one 🤷). I’ve chosen LuaSnip for it’s ease of use and power, which I may cover in a future article. For now let’s set it up:

-- Luasnip ---------------------------------------------------------------------
-- Load as needed by filetype by the luasnippets folder in the config dir
local luasnip = require("luasnip")
require("luasnip.loaders.from_lua").lazy_load()
-- set keybinds for both INSERT and VISUAL.
vim.api.nvim_set_keymap("i", "<C-n>", "<Plug>luasnip-next-choice", {})
vim.api.nvim_set_keymap("s", "<C-n>", "<Plug>luasnip-next-choice", {})
vim.api.nvim_set_keymap("i", "<C-p>", "<Plug>luasnip-prev-choice", {})
vim.api.nvim_set_keymap("s", "<C-p>", "<Plug>luasnip-prev-choice", {})
-- Set this check up for nvim-cmp tab mapping
local has_words_before = function()
  local line, col = unpack(vim.api.nvim_win_get_cursor(0))
  return col ~= 0 and vim.api.nvim_buf_get_lines(0, line - 1, line, true)[1]:sub(col, col):match("%s") == nil
end

Autocomplete Setup

Almost done! Now we just need to activate nvim-cmp and feed it both our LSP and other sources, and create some keymappings:

-- CMP - Autocompletion --------------------------------------------------------
local cmp = require 'cmp'
cmp.setup {
  snippet = {
    expand = function(args)
       require('luasnip').lsp_expand(args.body) -- For `luasnip` users.
    end,
  },
  mapping = {
    ['<C-p>'] = cmp.mapping.select_prev_item(),
    ['<C-n>'] = cmp.mapping.select_next_item(),
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ['<CR>'] = cmp.mapping.confirm {
      behavior = cmp.ConfirmBehavior.Replace,
      select = true,
    },
    ["<Tab>"] = cmp.mapping(function(fallback)
      if cmp.visible() then
        cmp.select_next_item()
      elseif luasnip.expand_or_jumpable() then
        luasnip.expand_or_jump()
      elseif has_words_before() then
        cmp.complete()
      else
        fallback()
      end
    end, { "i", "s" }),

    ["<S-Tab>"] = cmp.mapping(function(fallback)
      if cmp.visible() then
        cmp.select_prev_item()
      elseif luasnip.jumpable(-1) then
        luasnip.jump(-1)
      else
        fallback()
      end
    end, { "i", "s" }),
  },
  sources = {
    { name = 'nvim_lsp' },
    { name = 'nvim_lsp_signature_help' },
    { name = 'luasnip' },
    { name = 'buffer' },
    { name = 'path' }
  },
}

Aaaaay, now we have LSP-assisted autocomplete working! 😎 We’ve set up some smart mappings specifically around <Tab> and <S-Tab> to allow nvim-cmp to quickly cycle through options, and we’ve fed all of our sources into the completion engine.

Prettier Setup

And lastly, lets activate and make some keybindings for Prettier:

-- Prettier
keymap("n", "<leader>re", "<Plug>(Prettier)", opts)
keymap("v", "<leader>re", ":PrettierFragment<cr>", opts)

If it’s more helpful to see everything all together, you can take a peek at my personal Neovim config, just know that it may deviate slightly from these instructions as I’m always tinkering.

That’s great, but what can I DO with these things?

Each one of these things we just installed and connected will allow to some truly magical actions.

Language-Powered Extensible autocompletion (nvim-cmp + LSP)

If you’ve seen someone use VSCode, you have seen this in action. Language keywords are automatically provided for you as you type, and more than that: it KNOWS your code base. If you’ve correctly formatted your code, the autocomplete popups will be able to tell you what types of arguments the function requires, grab methods and functions from imported code, and just overall better autocomplete.

But YOU get to pick what goes in there. If you need something like Elixir and Erlang support, there are LSP’s for that. This system will allow you to grab whatever completion brains you want and plug them into your new system.

Super Language Powers

There are a lot of powerful features hidden in the LSPs that are not obvious at first. We bound a lot of these commands to key mappings in our config files, here are a few of them explained:

Buffer Hover = Display a tooltip for what your cursor is on. Helpful for things like seeing the expanded Tailwind CSS definitions or a bit of info about a piece of code. Very handy.
Buffer Implementation = Open a quickfix window of everywhere in the current file what your cursor is over has been implemented (not the same as referenced, there’s a different command for that 😆).
Buffer Definition = Jumps to the definition of what your cursor is currently over. You can jump back to a variable or function definition.
Buffer Type Definition = Jumps to the definition of the type you’re on.
Buffer Rename = Rename what’s under your cursor everywhere. Incredibly handy!
Signature Help = Displays function signatures with the current parameter emphasized. Can’t remember what arguments a function takes? Activate signature help and it’ll tell you!
Code Action = This one is interesting. It’s context sensitive command that will give you a list of things that can be done for a diagnostic error and can actually fix an issue for you or provide recommendations!
Buffer Reference = Create a quickfix window for all references for what your cursor is on.
Buffer Format = This one can also be pretty magical. This command can do some basic clean up and formatting for you. Think of it as Prettier-Lite™️

Linting In Context

We didn’t address it directly, but part of the vscode-langservers-extracted package included eslint. Through the LSP integration, diagnostics will output directly alongside your JavaScript so you can see ~~when you’ve made a terrible mistake~~ when your code could be improved. This setup also gives you an easy way to navigate through diagnostic errors (We bound them to [d and ]d in the config files) and even have some quick LSP-assisted resolution through Code Actions.

Auto-formatting (Prettier)

Alright, this is more subjective than the other benefits, but stick with me here for a 🔥 hot take 🔥.

While Prettier isn’t perfect, it does have a valuable function: it completely removes arbitrary and subjective formatting differences when working on a team.

Tabs/Spaces? (Foh-get a-bout eet) Spaces around argument options? (Naht to woo-ray, hun). Entire PR’s littered with whitespace adjustments? (Ne-vah agaihns). Write the code how you want to while you’re hacking away, then, when you’re done, have the formatter clean it up and snap it into alignment with team standards (collected in the .pretterrc). It’s like a robot butler for your code, and while it may not put everything back where YOU would put it you can also know that it’s doing the same thing for everyone else. And that’s a lot harder to get stuck on.

Conclusion

The support of LSP’s is one of the main reasons I hopped onboard the Neovim train. After seeing how nice the JavaScript experience is in Visual Studio Code and the power of what LSP’s allow you to do with your code I was sold. When you’re styling a user interface in TailwindCSS or working in a Next.js app, having the lightning fast autocomplete along with quick hopping, output previews, and contextual linting… It turns Neovim into a rocket ship for writing modern JavaScript!

Owning My Voice

Tue, 31 Jan 2023 17:00:00 GMT

Take a quick nostalgia trip with me…

Back when I started my career in this industry, the web was my starry-eyed, fairy-winged teacher:

Molly Holzschlag helped me take my first baby-steps with HTML and CSS.
I learned responsive web design from Ethan Marcotte’s articles.
Jeremy Keith taught me the new things in HTML5.
Luke Wroblewski taught me how to build ‘mobile first’.
Rachel Nabors’s continued efforts in animation inspired me to also see what could be done in the browser.
Chris Coyier schooled me on the deeper parts of CSS with CSS Tricks.

At some point (perhaps when Google Reader was shut down in 2013?) everything started to shift to social media. Particularly Twitter. In many ways it felt like an evolution—the barrier to communication was dropping. I could @mention Paul Irish or Sarah Soueidan and they might ACTUALLY RESPOND. 😵‍💫

Waking up in the Dark Forest

But things slowly changed while I wasn’t looking. If the web was once this weird and magical garden it slowly turned into what Maggie Appleton (and others) now describe as the Dark Forest. It’s not safe there. The tech giants prey on you and your personal data. Engaging in open debate is meaningless at BEST. Trolls are lurking in the comment sections. Being yourself out THERE can be like inviting the worst of the internet onto your back porch.

At some point I was no longer reading updates from people I knew or cared about but getting lost endless amounts of shallow-yet-mildly-amusing content or doomscrolling through emotionally incendiary material.

Are we human? Or are we `robot?`

I was no longer in control what I was ingesting. The robots were feeding me what they were trained to surface. And I liked it. Well, at first anyways.

Unfortunately it seems like it’s going to get worse. The Dark Forest is about to be overrun with bots through the brilliant yet terrifying engines of ChatGPT, Midjourney, DALL-E, Stable Diffusion and others. It’s going to be hard to tell what is made by real humans, and what is bot-generated in a flood of unoriginal content.

Combine that with the trust thermocline in our industry giants and it’s not looking so nice out there right now.

Owning My Voice

They say that 2023 is the year of personal website. There is a call for individuals to start owning their spaces and owning their voices again.

To me that was part of the magic of the web when I first entered the industry: unique voices with unique ideas in highly personalized spaces. That’s why I’m dusting off this website and being more intentional about using it to own my voice on the web and create connections.

“Don’t do it like me. Do it like you.”

Matthias Ott - User Experience Designer

This blog is hosted on Github Pages and built with 11ty but there are so many other ways to create your space, even if you’re not a developer:

Ghost CMS - slick, content focused interface
Webflow - a no-code solution with a free starter plan
Hotglue.me - charmingly wild no-code platform
mmm.page - drag and drop website builder
Wordpress - in either self-hosted or ready-to-go form

I plan to use this space to experiment, get weird, actually work on my improving my meme-damaged writing skills, and highlight unique ideas from other folks who are also working to own their voices.

I hope to see more doing the same, because THAT’S the web I fell in love with. Who knows, maybe they’ll even bring Google Reader back… :troll:

Nathan Long

Git: Remove Dead Branches

Fetch and Prune

Chain a command

List local branches

Filter the branch list

Delete dead branches

2026 Techo Kaigi

The Old

Components

The Good

The Neutral

The Bad

The New

Components

Changes

How to Run FreshRSS Locally With Docker

Installing FreshRSS locally

Starting your local FreshRSS container

Time to fill it with some voices!

A few RSS Tips

Responsive Ambient Videos with AV1 and HEVC/H.265 Compression

Disclaimer

AV1

HEVC/H.265

Small Desktop / Tablet Versions

Mobile Versions

Making a poster image

Rendering the video

A11Y Considerations

Creating While Adulting

What I've Learned From Writing 100 Newsletters

Writing happens all the time, all around you

Writing helps me think

Consistency really is key

The bar is lower than you think

Git: Fixing Mistakes

Forgot something small? Amend the commit.

Tangled or accidentally deleted a single file? Revert it.

Burn it all down 🔥

Minor Nuke

Major Nuke

Rewind Time

Timeline Surgery!

Testing AI Value

The Test

The Implementation

My Personal tmux Mystery

Projects and Window Arrangement

Local Only Development

Console Cowboys In Cyberspace

Colorschemes for the Discerning Developer

Multi-Editor Colorschemes

NeoVim Only

Decorating your ‘Personalized Development Environment’

ffmpeg Basics and Recipes

Installing

Basics

Compression

Convert to h264 mp4

Convert to webm

Common Recipes

Scale Video by Height

Trim Video by Timecode

Remove Audio

Boost Volume

Create a Poster Image

Advanced Recipes

Create Ambient Video MP4

GIF to MP4

MP4 to GIF

Max Compatibility

These Are a Few of My Favorite CLI Things...

tig

exa

bashmarks

ffmpeg

degit

just

asdf

Are we human? Or are we `robot?`