Exploring JavaScript Libraries
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
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
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
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
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: https://youtu.be/YO5jGf3_-gc Flexbox, Bootstrap, and CSS Grid have proven … Read more
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
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
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
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
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
