The Essential Guide to Framer Motion (With Examples)

A critical look at the docs plus animate, transition, and gesture examples. Framer Motion is an animation and gesture library that has had an incredible growth in popularity in the last year. Take a look at these downloads — one year ago and today: Given these numbers, familiarity with the library is a smart move. We’ll take a … Read more

50 Difficult TypeScript Interview Questions

These questions will expand your knowledge and grow your understanding of TypeScript. I meticulously studied the TypeScript docs to come up with this list. Let me know in the comments if you enjoyed it! If you enjoy this list of questions, check out my list of 50 difficult JavaScript interview questions. 1. What does the … Read more

The Complete Guide to JSS Syntax and Selector Rules

JSS Selectors and Syntax

JSS is a JavaScript library that allows you to create objects that follow a CSS-like syntax for styling components. More technically, from the JSS docs, JSS lets you “use JavaScript to describe styles in a declarative, conflict-free and reusable way”. Many JavaScript libraries make use of JSS (also known as CSS-In-JS). As a React developer, I … Read more

50 Difficult JavaScript Questions to Test Your JS Knowledge

I meticulously searched the JavaScript docs to create these questions. I hope they push the limits of your JS knowledge. Let me know in the comments if you enjoyed this list! Related: Test your TypeScript knowledge against these 50 difficult TypeScript questions. 1. What will the code below output to the console and why? It … Read more

Set a Minimum Display Time for Material-UI Skeleton Loader

The Material-UI Skeleton gives a great visual treat to users of your website or app. It’s strength is that it makes the user feel as though the app is useful and useable before critical loading is completed. Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API … Read more

Wave Box: An SVG Sine Wave Animation Built With React

I simply enjoy animations. I also really like the power of SVGs for creating images. In this demo we’ll use a bit of trigonometry math to create a slick SVG wave animation. See the sine wave in action in this YouTube video. Sometimes we build cool stuff that has no practical purpose. This wave box … Read more

How to Change MUI TextField’s Border Color (Hover, Focus, Overrides, and More)

I spent quite a few hours recently on a seemingly simple task: customizing the border color of a Material-UI TextField when outlined variant and disabled state were applied. The TextField is a complex component to style and I hope others will benefit from the examples presented here. This post includes MUI v4 and and v5 … Read more

Material-Table for React: A Step-By-Step Tutorial

material-table react examples

Material-Table is a relatively new addition to the suite of libraries providing data table functionality in React. The particular claims to fame for material-table is that it is quick to get running and built on Material-UI. It is a Table component that augments the existing Material-UI Table. In this intro to material-table I’ll implement a … Read more

Animate React Component on Render with Framer Motion

Animations in React that depend on component life cycle can be difficult to get right. Without a user event to drive our animation, you have to have a deep understanding of component life cycle and effects in order to properly trigger animations….or do you? Framer Motion handles the relationship between animation and life cycle events for … Read more

Material-Table AutoFocus on Row Add

material-table autofocus

Material-Table is a react data table based on Material-UI. It is quick to implement and will feel familiar to any developer experienced with React and MUI. It is also relatively easy to customize, such as adding autoFocus to the first input when adding a new row to a table. I recently was using an editable … Read more