Goal We want to see the pointer cursor when hovering over a Material UI component. Examples <Typography sx={{ "&:hover": { cursor: "pointer" } }}> This is some text </Typography> <Box p={2} border="1px solid #ccc" sx={{ "&:hover": { cursor: "pointer" } }}> ...

Overview A super quick guide on how to use PNG images as custom bullet points in tailwindcss. This feature is available as of Tailwind v3.3. A demo is available at here. Setting up First, get a small PNG image somewhere accessible. I have a 16 x 16 image in the /public folder. Next, specify the URL...

Overview react-leaflet is a popular front-end framework for displaying map data. They have a bunch of great examples on their site for creating maps from openstreetmap data. I haven't seen an example which displays radar data on top of those maps, so I thought I'd create a simple example which uses...

Overview This article provides a guide on how to create a dark mode toggle button in react with tailwindcss. This goes beyond how just basic dark mode works in tailwindcss, and we can actually build our own toggle and allow the user to select between dark and light mode. The strategy I'm taking in...

Import aliases can make code much more readable. Instead of having a line like import Grid from "./../../../../components/Grid"; you can instead have that line look like import Grid from "@/components/Grid";. This is much more readable and produces code that doesn't break if this file is moved...

There are three setting changes to make in order to enable cursive font and font ligatures in VSCode Telling VSCode which parts of your code you want cursive Changing editor.fontLigatures to true Using a font which has cursive italics All of these changes can be done in the settings panel, which...

A quick snippet on how to create a container with a frosted glass background as shown in the screenshot below. A live demo is also available here. Code snippet: <div className="bg-beach-background bg-cover h-screen flex justify-center items-center" > <div className="bg-white...

Overview Note: this post is valid as of Next 13 (not beta). Next.js provides two methods to fetch data which is intended to be passed as props to a page: getStaticProps and getServerSideProps. In this blog post, we will explain the differences between these two methods and when to use each...

Overview Note: this post is valid as of Next 13 (not beta). Two of the most important files in a Next.js project are _app.js and _document.js. Both of these files can play and important role in the server side rendering process, but they serve different purposes. In this blog post, we will explore...

Problem Note: this post is valid as of Next 13 (not beta). A FOUC is a Flash of Unstyled Content. This happens when the content is loaded before the stylesheets, which results in a brief period of plain unstyled content. This can happen when using styled-components inside of nextjs. Fix To fix this...