• Design
  • Shotty
  • Blog
  • Reading
  • Photos
Menu

Jacob Ruiz

Product Designer
  • Design
  • Shotty
  • Blog
  • Reading
  • Photos
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
shotty-dark-mode

Shotty Dark Mode Is Out Today!

April 26, 2019

I made some fun updates to the Shotty website to celebrate the launch of dark mode. Website built with Gatsby.

Read More
In Code, Design Tags Design, code
Comment

React talk: Recomposing your React application by Andrew Clark

January 31, 2019
In Code Tags code, react
hero (1).png

Tutorial: How to use SVGs from Sketch in React

January 30, 2019

It’s easy to create SVGs in Sketch. But how do you get them into React so you can use them? Better yet, how can you use them in a way where you can change their color, shape, and other properties based on user input? It’s surprisingly easy.

Read More
In Code, Design, Javascript Tags react, svg, design, development, code
Comment
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