How to Customize Material-UI Table Cell Width and Styling

Material-UI Table Cell Width

Customizing Material-UI Table Cell width is a common requirement. Precisely styling the TableCell component is also often requested by users. In this demo, I will show how to create a table sized with fixed width or a dynamic width that fits to the contents of the table cells. I will also set TableCell hover color, … Read more

The Ultimate Guide To Material-UI Table Row Height

Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging. This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below … Read more

The Definitive Guide to React-Spring useTransition

Deconstructing useTransition examples from the documentation and creating an original example useTransition is a powerful tool for animating a list of text, images, or components with react-spring. However, I found the documentation and examples listed on the official site to be challenging for a new react-spring user to understand. Since I wanted a detailed explanation, I created … Read more

React-Spring vs Framer Motion: Comparing Examples in Two Animation Libraries

Framer Motion and react-spring both solve unique animation challenges and execute with high performance. Framer Motion uses the more traditional duration-and-location approach. Most developers likely have experience with this animation strategy and it will feel familiar. React-Spring approaches animations using spring-physics. This is a well-executed attempt to make animations feel and behave like real-life movement. … Read more

The Complete Guide to MUI Grid Item Alignment (v4 and v5)

This guide focuses on aligning items in every conceivable way in Material-UI Grid: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components. You will learn how to align items in any vertical or … Read more

Material-UI’s Grid Component vs Flexbox, Bootstrap, and CSS Grid

The Material-UI Grid Component is MUI’s grid system solution. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives? YouTube video version of this article here: Flexbox, Bootstrap, and CSS Grid have proven … Read more

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