• Design
  • Shotty
  • Blog
  • Reading
  • Photos
Menu

Jacob Ruiz

Product Designer
  • Design
  • Shotty
  • Blog
  • Reading
  • Photos

How to use Firebase from the browser console

January 27, 2022

A quick and easy way to interact with a Firebase database from your browser console in a basic Javascript application. Written for absolute beginners.

Read More

How to set up a new project in Firebase

January 26, 2022

Step by step guide to setting up a new project in the Firebase console. Includes instructions on how to add a Realtime Database to your project.

Read More

State Machines: The Fundamentals

March 16, 2021

Understanding the basic principles of state machines.

Read More

State Machines: Understanding the Problem

March 16, 2021

Why do we need state machines?

Read More
doublin-hero-2.png

How I Doubled My Blog Traffic By Sucking At Code

March 10, 2021

Struggling for the enjoyment of strangers.

Read More
time.png

How to manage your time as a freelancer

March 4, 2021

Tips for managing your most important asset.

Read More
questrial.png

Focus on fonts: Questrial

February 17, 2021

Looking for a modern typeface that looks great for headlines in UI? Try Questrial. It’s free on Google Fonts.

Read More
curve.png

CSS Easing Functions Cheat Sheet

February 14, 2021

Quickly grab motion curves for your CSS transitions.

Read More
In Code Tags code
Comment
hard mode 2.png

Designing in hard mode

February 14, 2021

Why you shouldn’t rely on prototyping tools.

Read More
In Design, Code Tags design, code
Comment
floating-label-input.gif

How to transition placeholder text into a label in React (Floating label inputs)

February 11, 2021

A tutorial showing how to build a floating label input in React.

Read More
In Code Tags react, code, design
4 Comments
ideas.png

How to Evaluate Startup Ideas

September 1, 2020

A framework from Y Combinator for assessing if a startup idea has potential to grow quickly.

Read More

Today's Design System Component: <Breadcrumb />

April 13, 2020

Today's design system component:

<Breadcrumb />

  • Just add children

  • Separators are added automatically

  • Can customize separator

Inspired by React UI (h/t @siddharthkp)

Read More
graphql-notes@2x.png

GraphQL: Writing Tests for Canceling a Stripe Subscription

July 3, 2019

Testing the case where the user cancels their subscription.

Read More
graphql-notes@2x.png

GraphQL: Writing Tests For Our Stripe Subscription Resolvers

July 2, 2019

Using tests to make sure our upgrade flow is working properly

Read More

Summer - Joe Hisaishi

July 2, 2019

Beautiful.

graphql-notes@2x.png

GraphQL: Canceling A Stripe Subscription

July 2, 2019

How to cancel subscriptions using Stripe in a GraphQL application.

Read More
graphql-notes@2x.png

GraphQL: Adding Subscription Pricing With Stripe

June 30, 2019

💰Secure the bag.

Read More
graphql-notes@2x.png

How to Test Cookie-based Authentication in Mocha with Axios (Node / GraphQL / Apollo)

June 26, 2019

A 🍪 is just a string. 🧶

Read More
graphql-notes@2x.png

GraphQL Pagination: Putting It All Together

June 20, 2019

It’s been a week of happy paginating. In this post I put it all together to allow pagination on Comments belonging to Posts.

Read More
graphql-notes@2x.png

GraphQL Pagination: Opaque Cursors

June 19, 2019

Part 4 of Pagination: Using opaque cursors.

Read More
Older Posts →
shotty-skinny2x.jpg

Shotty - Faster Access To Your Screenshots on Mac

Shotty is an award-winning Mac app I created to give you instant access to all your recent screenshots, right from the menu bar. You can even add annotations on-the-fly. Stop wasting time digging through Finder for your screenshots. I promise it’ll change your workflow forever (just read the App Store reviews!).



Most popular

information-architecture

Information Architecture: The Most Important Part of Design You're Probably Overlooking

Follow @JacobRuizDesign