Revisiting the UX for client notes

Continuing work on the new Clients section, I revisit client notes, but with a few UX improvements.

Overflow shadows using the Intersection Observer API

Improving a upon the overflow shadows in Cushion, I replace scroll events with the Intersection Observer API.

Addressing beta feedback for the new Clients section

After rolling out the new Client section to a few dozen beta users, I start applying their feedback.

Upgrading to Vue 3

While making forward progress with the new Clients section, I take a break to upgrade the new codebase to Vue 3.

A Safari performance issue and other stresses

An already stressful time is made even more stressful by a Safari performance issue with nested grids.

Time period filter and totals for the Clients section

With the Clients section beta up and running, I launch my first incremental update.

A video call with a friend about marking projects as paid

A video call with a friend provides some interesting insight into a potential direction for restructuring the app.

The new Clients section is now in private beta

After a heads-down week, I managed to reach the first milestone in releasing the new Clients section—private beta.

Stabilizing PostgreSQL memory issues with pgbouncer

In an update of the database memory saga, I discover pgbouncer, which puts a stop to the constantly climbing memory woes.

A top-level “Clients” section

With the sidebar navigation ready to deploy this weekend, I get an early start on the top-level “Clients” section.

Improving the sidebar nav

After regretting, but living with, the skinny sidebar nav of obscure icons, I finally set a course to improve its UX.

Sending blog posts as emails - Part 2

Following up on the initial proof of concept, I build the complete system to send journal posts as emails.

Sending blog posts as emails

In an effort to grow readership, while also prototyping an idea, I start building a system to email my posts.

Sticky line item totals

Putting the final touches on the invoice form, I apply a sticky behavior to the line item totals.

Little details: Overflow shadows

I spend extra time getting a little detail right by tying shadows to whether the underlying content has overflow.

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.

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.

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.

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.

Designing a breadcrumbs component

Chopping away at the new invoice form, I designed and built a new component for breadcrumbs.

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.

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.

Migrating CI to GitHub Actions

Frustrated with Heroku, I start migrating away from it, beginning with continuous integration.

Troubleshooting the database upgrade

Upgrading Cushion’s database leads to a week of troubleshooting performance issues.

Upgrading the production database

After receiving an email from Heroku to upgrade Cushion’s database, I upgrade Cushion’s database.

7 years old

With Cushion reaching the 7-year mark, I reflect on its life and plot a course for its future.

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.

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.

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.

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.

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.

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.

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.

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.

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.

A dev’s troubleshooting journey

An innocent bug report unfolds into a roller coaster ride of a troubleshooting journey.

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.

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.

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.

Redesigning the blog

After redesigning Cushion’s homepage, I take the next step in migrating to Contentful by rethinking the blog.

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.

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.

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.

Migrating the changelog to the Contentful CMS

In my initial step towards migrating Cushion’s marketing site to Contentful, I start with the changelog.

Promoting invoicing to the main nav

I reworked the main nav to include invoicing, which was met with a wave of thanks from users.

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.

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.

Composable onboarding

To provide a more pleasant codebase for Future Jonnie to inherit, I restructure the onboarding to be composable and easily testable.

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.

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.

A reminder to write

Determined to launch thew onboarding flow, I forgot to write for a week and it shows.

The date picker component

Continuing my work on Cushion’s onboarding flow, I build a new and improved date picker component.

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.

Investigating inflection points

Stepping back to look at Cushion’s growth over its entire lifetime reveals a crystal clear moment when everything went south.

Recalibrating my estimates

I start working on the new onboarding flow, but quickly realize it won’t be a weekend project.

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.

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.

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.

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.

Well, this is embarrassing

Browsing through Cushion, I realize something strange. As I troubleshoot the anomaly, I discover an embarrassing truth.

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.

Validating assumptions

Before diving into analytics, I decide to spend time writing database queries that could validate some of my assumptions using existing data.

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.

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.

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.

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?

Shaping Vuex through testing

Excluding a folder from VSCode’s search (and disabling Jest’s generated coverage reports)

Retaining state with the router in a single page application

Custom focus rings using :focus-within

Testing v-on="$listeners" in Vue.js

Vue + ESLint + Prettier conflicts

Speeding up Jest tests with --runInBand

Moving the Cushion Journal to my blog

Updating Sentry

Updating Skylight and dealing with ActiveSupport

Reducing Heroku CI time by 35% for an extra penny

The build failed, but I swear it wasn’t me

A hiccup with subdomain routing

Upgrading to Ruby 2.7.1

QA’ing pull requests using Heroku Review Apps

Subdomain routing in Sinatra

Redirecting the Heroku “Open app” button to a custom domain

Reloading Ruby with Sinatra::Reloader

Exploring a modern Cushion

Migrating the Cushion website to S3 to avoid dealing with SSL

The “Update Available” alert

Improving readability with bigger fonts and higher contrast

My design workflow

Simplifying our build process and SSL with Cloudfront

Restructuring an evolving app

My typical week as a founder

Building components in a sandbox

Reactive time with Vue.js

Visualizing daylight saving time

Recording screencast GIFs

Writing a job listing

Using feature flags to run betas

Our first company lunch

How to embed Vue.js & Vuex inside an AngularJS app... wait what?

Funding Cushion

Hiring a team of freelancers

Taking a real break from work

Slack as a notification center

Document your features

300

Vacations

Offering discounts

Waves of traffic

Less blogging, more journaling

Retention through useful features

The onboarding checklist

Spreading the word

From beta to launch - the subdomain

From beta to launch - sign up

From beta to launch - messaging

Launch

Authenticating with 3rd party services

Intro to integrations

Inspiration vs imitation

The emotional rollercoaster

Designing project blocks

Everything in increments

Deleting your account

Designing the subscription page

Rewriting the timeline

Restructuring the individual project page

Project blocks

Redesigning the homepage

Multiple timelines

Archiving and estimate differences

Multiple financial goals

Zooming in on the timeline

Currency

Preferences, accounts, and typeface change

Sending out the first email

Currency inputs, notifications, and invoice nets

Dots and lines

Calculating in the database and revealing tendencies

Improved form UX

Cushion is online

Schedule timeline patterns

A slimmer schedule timeline

The schedule timeline

Plugging in real data for the first time

Transitions and project lists

Death to modals

The individual project page

Estimated incomes and talks with other freelancers

Statuses to lists and the paid beta

The timeline

Invoice terminology

Modal forms

Wiring the backend to the frontend

Balancing design and dev

Timecop, Monocle, and Vagrant

Going with Ruby and Sinatra

Ditching local-first and trying out Node.js

Switching to AngularJS

Building the Table with Vue.js

Clients, Projects, and Invoices

Introduction (to the Cushion journal)

Cushion