Jekyll Hello world, I’m Jekyll
Random Use Photoshop’s checkered canvas for loading images
Jekyll An introduction to Jekyll
Adobe Letterpressed InDesign icons
2011
Life The tech behind our wedding
Work Working on TeuxDeux
Work Today is my first day at Destroy Today LLC
Adobe Today is my last day at Adobe
Random Depth of Field drawing in Instagram
Random Double tap to unlike in Instagram
2012
Work Back on my own
Work Building the Pencil Page with FiftyThree
A chance encounter with a former co-worker leads to a quick freelance gig that would define my style of work for years to come.
Life Brooklyn Beta is people
Random Washing the Dishes and Other Moments of Thought
A rock in my parents’ backyard, eight months of acupuncture, and a household chore share a common thread of being the catalyst for thought.
Random The perfect GIF workflow using Dropbox and Alfred
Life Q&&A
Work Joining Oak
Redesign Redesigning with rules
Work Lessons learned in a year on my own
Life 2012 – A Year in Review
2013
Cushion Restructuring the individual project page
Cushion Project blocks
Cushion Redesigning the homepage
Cushion Multiple timelines
Cushion Archiving and estimate differences
Cushion Multiple financial goals
Cushion Zooming in on the timeline
Cushion Currency
Cushion Preferences, accounts, and typeface change
Cushion Sending out the first email
Cushion Currency inputs, notifications, and invoice nets
Cushion Dots and lines
Cushion Calculating in the database and revealing tendencies
Work Lessons learned on a 3-month sabbatical
Cushion Improved form UX
Cushion Cushion is online
Cushion Schedule timeline patterns
Cushion A slimmer schedule timeline
Cushion The schedule timeline
Cushion Plugging in real data for the first time
Cushion Transitions and project lists
Cushion Death to modals
Cushion The individual project page
Cushion Estimated incomes and talks with other freelancers
Cushion Statuses to lists and the paid beta
Cushion The timeline
Cushion Invoice terminology
Cushion Modal forms
Cushion Wiring the backend to the frontend
Cushion Balancing design and dev
Cushion Timecop, Monocle, and Vagrant
Cushion Going with Ruby and Sinatra
Cushion Ditching local-first and trying out Node.js
Cushion Switching to AngularJS
Cushion Building the Table with Vue.js
Cushion Clients, Projects, and Invoices
Work Building the Carousel website with Dropbox
I detail my experience working with Dropbox to build an adaptive website that provides a unique experience across mobile, tablet, and desktop.
Life On sabbatical
Cushion Introduction (to the Cushion journal)
Cushion Cushion
Work Building the Mailbox website with Dropbox
Not one to turn down a challenge, I accept a freelance gig with an identical deadline to another job with the same client. Feel the burn-out.
Talk Book Covers, Model Airplanes, and My Dad
An extended transcription of my CreativeMornings talk about my dad, his work, and how he turned me into the maker I am today.
2014
Cushion Retention through useful features
Cushion The onboarding checklist
Cushion Spreading the word
Cushion From beta to launch - the subdomain
Cushion From beta to launch - sign up
Cushion From beta to launch - messaging
Cushion Launch
Cushion Authenticating with 3rd party services
Cushion Intro to integrations
Cushion Inspiration vs imitation
Cushion The emotional rollercoaster
Cushion Designing project blocks
Cushion Everything in increments
Cushion Deleting your account
Cushion Designing the subscription page
Cushion Rewriting the timeline
2015
Cushion Funding Cushion
Cushion Hiring a team of freelancers
Cushion Taking a real break from work
Cushion Slack as a notification center
Cushion Document your features
Cushion 300
Cushion Vacations
Cushion Offering discounts
Cushion Waves of traffic
Cushion Less blogging, more journaling
Work Building the Casper homepage
I collaborated with Casper to build the animations for their new homepage. In this post, I share the story from initial call to launch.
2016
Cushion My typical week as a founder
Cushion Building components in a sandbox
Cushion Reactive time with Vue.js
Cushion Visualizing daylight saving time
Cushion Recording screencast GIFs
Cushion Writing a job listing
Cushion Using feature flags to run betas
Cushion Our first company lunch
Cushion How to embed Vue.js & Vuex inside an AngularJS app... wait what?
2017
Cushion The “Update Available” alert
Cushion Improving readability with bigger fonts and higher contrast
Cushion My design workflow
Cushion Simplifying our build process and SSL with Cloudfront
Cushion Restructuring an evolving app
2018
Redesign Logo
Realizing that a redesign doesn’t mean I need to start from scratch with everything, I reclaim the logo from the previous design to use on the new site.
Redesign Intro
Eager to build more than the blog, I write about bringing a new content model to the site in the form of an intro on the homepage.
Redesign Favicon
Similar to the post itself, there’s not much to this description besides indicating that I replace the default favicon with my own.
Redesign RSS feed location
In this post, I second-guess the path to the site’s RSS feed and refactor it to support multiple feeds, which will most likely be overkill in the end.
Redesign TypeScript
Taking a break from visible progress, I implement TypeScript on the site as a way for me to finally learn what the big deal is all about.
Redesign Sideways progress
Rather than moving the needle further, I spend a night going down a rabbit hole that does leave me without much to show, but I still consider it progress.
Redesign Pagination
A dozen posts into writing for the new site, I recognize a need for pagination and write about implementing it in Contentful.
Redesign Links
After referencing another post in the form of a link, I find myself needing to build a custom renderer in Contentful.
Redesign Footnotes
A friend pointed out a mistake in an earlier post I wrote, so I implemented footnotes to allow for corrections while still maintaining the original writing.
Redesign Line-height
In a move to improve readability, I adjust the leading on the site to provide more breathing room between lines of text.
Redesign Max-width
With the discovery of the ch unit type in CSS and guidance on the ideal character-based line width, I set out to enforce a max-width on the site’s body copy.
Redesign Syntax highlighting
With an increasing number of code snippets in my posts, I introduce Prism.js to the site for much improved syntax highlighting.
Redesign WebP fallback on Safari
After fetching WebP formatted images from Contentful’s image API, I realize that Safari doesn’t support WebP and requires a fallback PNG.
Redesign Responsive images
A forgotten CSS style prevents the images on the site from resizing for mobile, but a new discovery of Contentful’s image API leads to the perfect max-width.
Redesign Dates
In order to maintain a chronologically aware blog, I add dates to posts and the RSS feed using the date-fns library.
Redesign Images
After realizing that Contentful’s rich text renderer doesn’t include a renderer for assets, I create my own using Contentful’s image API.
Redesign Lighthouse, Now build env vars, and Nuxt manifest
To keep myself in check, I install a Lighthouse integration to score the site’s performance and accessibility.
Redesign Title and article links
With a description as short as the post itself, I write about adding a site title and links to the article titles.
Redesign RSS feed
After being nudged by the elders of the web, I implement an RSS feed for those who are still sour about the demise of Google Reader—myself included.
Redesign Contentful preview API hiccup
Neglecting to read the manual, I hit a snag and blame Contentful’s API before inevitably realizing that the problem exists between the keyboard and chair.
Redesign Hello World
In this inaugural post, I set out on an adventure to redesign my site while documenting its process along the way.
Life Burning Out and Finding Stability
After five years of running my own startup, I experience my first panic attack, which leads me to course correct my life in favor of good health and stability.
Life Focusing on self improvement
2019
Cushion The new invoice page is live
With only days before the SCA deadline, I launch the new invoice page with to be SCA-ready while also paving the way for more improvements.
Cushion Integration testing the invoice page with Cypress
Wrapping up my work on the invoice page, I set up integration testing using Cypress to make sure that everything continues to work end-to-end.
Cushion Tidying up as you go
Continuing to make progress on the invoice page, I talk about some of the ways I’m improving the codebase along the way.
Cushion A subsidized plan for 2021
A chat with a user leads me to consider a subsidized plan for the New Year to help folks through the pandemic.
Cushion Redesigning the invoice page for SCA with Stripe Elements
I pause work on the account page to make sure Cushion’s invoice payment integration is ready for the SCA deadline.
Cushion Rethinking the pricing page
In needing to redesign the pricing page for the new account section, I decide to rethink the structure of Cushion’s existing plans.
Cushion A dev’s troubleshooting journey
An innocent bug report unfolds into a roller coaster ride of a troubleshooting journey.
Cushion Scaffolding the account page
As I begin building Cushion’s new account page, I start by scaffolding a static version of it and building the components it requires.
Cushion Redesigning the account section for SCA with Stripe Billing customer portal
With SCA regulation going into effect at the end of the year, I prioritize migrating to the Stripe customer portal, which means redesigning the account section.
Cushion Designing a new layout system
After years and years of incrementally tweaking the design of Cushion, I take a holistic look at the layout system.
Cushion Redesigning the blog
After redesigning Cushion’s homepage, I take the next step in migrating to Contentful by rethinking the blog.
Cushion Animating the new homepage hero
To keep my mind busy while dealing with a tough time, I distract myself with Cushion’s new homepage animation.
Cushion Responsive images for different layouts
While building Cushion’s new homepage, I go the extra mile to swap out better-fitting images for different breakpoints.
Cushion A flexible way of using Nuxt.js with Contentful CMS
After migrating Cushion’s changelog to Contentful, I move onto the homepage, where I narrow in on an approach to compose pages entirely in the CMS.
Cushion Migrating the changelog to the Contentful CMS
In my initial step towards migrating Cushion’s marketing site to Contentful, I start with the changelog.
Cushion Promoting invoicing to the main nav
I reworked the main nav to include invoicing, which was met with a wave of thanks from users.
Cushion The next big rocks
After launching Cushion’s new onboarding, I detail the next few items on my to-do list, which for once are not new features.
Cushion Onboarding is live
A weekend turned into a month, but Cushion’s new onboarding is finally live. Instead of focusing on the launch itself, I talk through my favorite part.
Cushion Composable onboarding
To provide a more pleasant codebase for Future Jonnie to inherit, I restructure the onboarding to be composable and easily testable.
Cushion Writing my own utility methods
I decide to write a few utility methods myself, rather than relying on 3rd party library, and I’m glad I do.
Cushion Using a utility library vs building my own
Torn between adding a dependency for a utility method or writing it myself, I talk through the pros and cons of both approaches.
Cushion A reminder to write
Determined to launch thew onboarding flow, I forgot to write for a week and it shows.
Cushion The date picker component
Continuing my work on Cushion’s onboarding flow, I build a new and improved date picker component.
Life My eye
Cushion Building components for the long run
With my recent work on Cushion’s new onboarding flow, I take a meandering walk through the new components I built for it that are all typed and tested.
Cushion Investigating inflection points
Stepping back to look at Cushion’s growth over its entire lifetime reveals a crystal clear moment when everything went south.
Cushion Recalibrating my estimates
I start working on the new onboarding flow, but quickly realize it won’t be a weekend project.
Cushion A friendly onboarding flow
As a first stab at onboarding, I design a flow that includes myself asking questions, which hopefully provides a friendly intro to the app.
Cushion Bringing back onboarding
In an attempt to ease people into the app rather than pushing them out of the airplane, I decide to bring back a proper onboarding flow.
Cushion Rough sketches
After feeling reluctant to reveal any design progress, I decide to bite the bullet and share a few rough sketches—no matter how uncomfortable it feels.
Cushion Flattening the nav
Continuing the idea of the single click, I talk through a potential path to flattening the nav from multiple layers down to one.
Cushion Well, this is embarrassing
Browsing through Cushion, I realize something strange. As I troubleshoot the anomaly, I discover an embarrassing truth.
Cushion Sending newsletters again
I sent my first Cushion newsletter in over a year and a half, which sounds crazy, but nonetheless, it feels great to send them again.
Cushion Validating assumptions
Before diving into analytics, I decide to spend time writing database queries that could validate some of my assumptions using existing data.
Cushion Intentional analytics
After building Cushion so far based purely on assumptions and intuition, I finally start to think about using analytics to help guide me.
Cushion This app has good bones
A thought-provoking conversation leads me to realize that Cushion is still solid and worth iterating on, instead of restarting from scratch.
Cushion Keeping API requests simple
After establishing a new guiding principle to keep API requests simple, I describe how I could refactor a complex view that relies on a heavy API request.
Redesign Continue reading / Stay in the loop
While thinking through adding the ability for people to receive posts as emails, I took a detour and reworked the footer area for posts.
Life My week off
Nearing the end of my week off after the Stripe redesign launch, I reflect on what I ended up doing. Long story short, not much, and it was great.
Cushion A single click
I discuss a pain point in the current Cushion involving the number of clicks it takes to get to where you need to go. What if it only took one?
Cushion Shaping Vuex through testing
Cushion Excluding a folder from VSCode’s search (and disabling Jest’s generated coverage reports)
Random 100vw and the horizontal overflow you probably didn’t know about
If you use 100vw and don’t check what your website looks like with scrollbars always visible, it most likely has a horizontal overflow issue.
Redesign Prefetch and better fetching
Cushion Retaining state with the router in a single page application
Cushion Custom focus rings using :focus-within
Cushion Testing v-on="$listeners" in Vue.js
Redesign Reply link in RSS feed posts
Cushion Vue + ESLint + Prettier conflicts
Stripe The new Stripe.com
Cushion Speeding up Jest tests with --runInBand
Cushion Moving the Cushion Journal to my blog
Redesign Filter by category
Cushion Updating Sentry
Redesign Should I email my posts, too?
Cushion Updating Skylight and dealing with ActiveSupport
Cushion Reducing Heroku CI time by 35% for an extra penny
Cushion The build failed, but I swear it wasn’t me
Cushion A hiccup with subdomain routing
Cushion Upgrading to Ruby 2.7.1
Cushion QA’ing pull requests using Heroku Review Apps
Cushion Subdomain routing in Sinatra
Cushion Redirecting the Heroku “Open app” button to a custom domain
Cushion Reloading Ruby with Sinatra::Reloader
Cushion Exploring a modern Cushion
Random Learning Go
Cushion Migrating the Cushion website to S3 to avoid dealing with SSL
Redesign Contentful asset URLs
Life The Ace Hotel & Swim Club date shake
Life Recurring dream
Life Learning not to speedrun
Life Produce for days
Life Chef Collective
Life A new game
Random Checkered pattern for loading images, revisited
Almost a decade after my post about using Photoshop’s checkered pattern for loading images, I revisit the code to refactor it for the modern web.
Stripe One year at Stripe
Redesign Blog index sticky nav
Redesign Contentful mishaps
Redesign Short-form vs long-form posts
Life Red Hook cat lot
Life The missed vacation
Life The virus’s ripples
Life Learning Figma with a full stomach
Life Depression, chili, and the bathroom sink
Life Half-gallon margaritas
Life Laundry in the eleventh hour
Life The mirrorless webcam
Life Cooking from memory
Life Working from home for good
Life Dystopian grocery shopping
Life A long walk through Red Hook
Life One week without Twitter and Instagram
After one week without Twitter and Instagram, I wrote about my experience so far, which has been so beneficial that I wonder if I’ll ever reinstall them.
Life Deleting Twitter and Instagram from my phone
I feel unhealthy about how I use Twitter and Instagram, scrolling through them only to feel caught up, so I’m deleting both off my phone and taking a break.
Redesign Casper homepage section
While embedding the fixed-size Casper animation on the homepage, I face the technical challenge of gracefully scaling the animation on smaller viewports.
Redesign Blog index
With the goal of improving the UX of the blog’s index, I redesign the layout for easier skimming over the entirety of the blog and better organizing of posts.
Redesign Stripe homepage section
Initially about the Stripe section of the homepage, this post quickly diverges into a tirade about frameworks and how vanilla JS is much more future-proof.
Redesign Article pagination
After realizing that my articles lead to a dead end after reading, I describe how I added pagination in the form of links to adjacent articles.
Redesign Context-aware logo
This post describes the technical workings of the anchored DT logo, which changes color based on the homepage section being scrolled through.
Redesign Homepage concept
Once I had enough time to come down after launching the homepage, I write about the concept of embedding all of my scroll-based animations onto one page.
Redesign Homepage
Instead of accompanying the launch of the new homepage with a lengthy process post, I preferred to simply announce the page and enjoy it being out there.
Redesign Migrating
In preparation for the launch of the new redesign, I walk through migrating blog posts from the previous site and flipping the switch to the root domain.
Redesign Centered layout
This is a quick post about giving into the centered layout after months of enjoying the classic left-aligned layout.
Redesign Contact links
After realizing the site didn’t include any way of reaching me, I add Twitter and mailto links to the header.
2020
Cushion Little details: Overflow shadows
I spend extra time getting a little detail right by tying shadows to whether the underlying content has overflow.
Cushion Redesigning the flow for importing tracked time into invoices
With the last remaining to-do on my list for the new invoice form, I tackle the flow for importing tracked time.
Design Town Turning my IKEA desk into a motorized standing desk
After realizing standing desks are actually affordable now, I assemble my own using an IKEA countertop.
Cushion A week of cleanup
With the inline forms behind me, I spend a week cleaning up the codebase with a focus on Cushion’s form states.
Cushion Building the inline form system
After detailing how I planned to build inline forms in Cushion, I went ahead and built the first one for creating clients inline.
Cushion Inline forms and the weight of the next big task
In between big tasks, I distract myself with smaller tasks until I’m ready to finally face it—inline forms.
Cushion Designing a breadcrumbs component
Chopping away at the new invoice form, I designed and built a new component for breadcrumbs.
Cushion Thinking about a “test mode”
Aggravated by people signing up with no real intention to use Cushion leads me to consider a “test mode” where they can try the app without signing up.
Cushion Redesigning the invoice line item footer
While redesigning the invoice form, I share the decision-making behind the design of the new line item footer.
Cushion Migrating CI to GitHub Actions
Frustrated with Heroku, I start migrating away from it, beginning with continuous integration.
Cushion Troubleshooting the database upgrade
Upgrading Cushion’s database leads to a week of troubleshooting performance issues.
Cushion Upgrading the production database
After receiving an email from Heroku to upgrade Cushion’s database, I upgrade Cushion’s database.
Cushion 7 years old
With Cushion reaching the 7-year mark, I reflect on its life and plot a course for its future.
Cushion Thinking through a new invoice form
At the fork in the road, I choose the invoice form as the next step in renovating Cushion, including a long-awaited list of improvements.
Cushion The calm after the sprint
With a couple big launches behind me, I think about what to tackle next or whether I need to pick a direction just yet.
Cushion The new account page is live
After launching Cushion’s new invoice page last week, I launch the new account page this week with a ton of other goodies.
2021