UI

A section for components, interfaces and thoughts about building user interfaces.
The do's and dont's of Skeleton Loading in React thumbnail
Leonardo Petrucci
October 13, 2022

The do's and dont's of Skeleton Loading in React

Skeleton Loading is the practice of displaying a mockup of a a part of your interface while data that is supposed to fill that interface is loaded. In theory this is no different than showing the user a spinning icon or telling them that you're loading something, but there is research that suggests skeleton loading tricks users into thinking your app loads faster than it does. Beyond that, it's an excellent way to avoid parts of your

How to: create an alert popup with jQuery thumbnail
Leonardo Petrucci
April 10, 2020

How to: create an alert popup with jQuery

Alert popups are a great way to notify your visitors. Since I recently had to implement an alert popup with jQuery on an older site, I thought it could be interesting to share its code. I wanted my alert popup to achieve a couple of things: It should be highly reusable If dismissed by a user it should stay dismissed It should be easy to implement and expand The following example is made to work with jQu

What are variable fonts? And why should you be using them? thumbnail
Leonardo Petrucci
April 6, 2020

What are variable fonts? And why should you be using them?

Variable fonts have been officially supported by most browsers for quite a while. However usage of them didn't start to pickup until very recently. Here's a run down of how they work, and why you should start using them now. What are Variable Fonts? While a standard typeface comes with different files for weights, italics and other styles, a variable font is a single file that allows you to control its weight and other properties through variables. In short, variable fonts are highly customisab

Infinite Carousel with React Spring: How to? thumbnail
Leonardo Petrucci
January 26, 2020

Infinite Carousel with React Spring: How to?

React Spring is a fantastic animation tool, but it's not the most straight forward. In this article we'll go through how to build an infinite React Spring carousel. Edit 8/9/2020: I've made some significant improvements to the carousel script in this article. These include: Autofitting the carousel to its container Back and Forward buttons More clear options Better logic Before we go any further let me show you what the final product of an infinite react spring carousel loo