Exploring JavaScript Libraries
The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled? There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other … Read more
The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic. The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the … Read more
Material-UI’s DataGrid can be customized to meet a variety of use cases. A particularly useful feature is the renderCell prop, which is a prop of the columns object in the DataGrid. The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells. This post will explore the code for … Read more
It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState. For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically … Read more
In April 2020 I started this site. The world had been thrown into disarray by coronavirus and the U.S. job market suddenly looked gloomy. I figured having a portfolio of code that I could demonstrate in an interview was my best protection. Coding in the evening also made me better at my current job. Write … Read more
Properly formatted code is a widely agreed-upon virtue in the craft of programming. There are sometimes differences of opinions on exactly what the right format is, but generally it is formatting that contributes to the readability of code and understanding of the intent of the code. Perhaps the most common rules list for ESLint is … Read more
Material-UI-Chip-Input is an excellent package created by TeamWertarbyte. It’s core functionality is that it allows a user to quickly create chips from text. Material-UI-Chip-Input has tons of functionality (and props to support it). However, one thing that is missing (actually, broken it seems) at the time of writing this article is autocomplete. The History Behind … Read more
The ESLint docs have a short section that gives the fundamentals of configuring global variables in a .eslintrc file. However, the docs do not answer the following questions: When and why would I want to define global variables in ESLint? What errors occur when I try to use global vars differently than they are configured? … Read more
There are 12 top-level fields within the Theme object that can be customized to give your app the exact look-and-feel that you desire (see the entire default theme object here). Palette may be the most commonly customized field, but in this guide, I will demo less commonly configured fields: breakpoints, overrides, shadows, and typography. I … Read more
The Typography component is critical for a consistent UI. This article explores how to customize the Typography component through extending the theme.typography object, creating a Typography Styled Component, and overriding the MuiTypography base class. Specifically, I will add strikethrough (textDecoration: “line-through”), font style, letter spacing, and font size to the Typography component and using the … Read more
