For many years I used the moment.js library for parsing, manipulating, and formatting JavaScript dates and times. More recently I've started using the date-fns library instead. However, it's interesting to note that native browser capabilities are quite good these days when formatting dates and…

Continue Reading

Add the Weather Module The goal for this lesson is to augment our terminal application with some weather information. To grab the weather, we'll use the weather-js node module from npm . The reason I picked this module is because it doesn't require a special token to use it. The information comes…

Continue Reading

Over the past several years I've been authoring a set of Front-End Web Developer Jokes . Recently I thought it might be fun to take some of the jokes and convert them into comics. So, this is my first attempt at a developer comic. I used the excalidraw.com tool ( GitHub ) to draw the cartoon. It…

Continue Reading

Large Dashboard.js File The following is the current state of the dashboard.js file. Most of the functionality is all in one big file. The problem is that as we continue to build our dashboard this file will become hard to managed. So, in this post we'll focus on moving out each section of our…

Continue Reading

Application Before The beginnings of our Terminal Dashboard is coming along, but it's a tad boring at the moment. It would be nice if we could spice things up by changing the font of the text. Figlet Since our application is in the Terminal and we aren't leveraging ReactDOM , we can't use standard…

Continue Reading

Why ESLint? If we come to the terminal and run npm start , you'll see the app kick-up and display the current date, time, and a counter. This code at this point in the React Terminal Dashboard series is minimal, but as code starts to accumulate it'll be helpful to statically analyze the validity of…

Continue Reading

This is the first post in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib . We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will…

Continue Reading

On a whim, I decided to create a random Coffee Name generator. Althought there isn't a lot of code, I thought there were a few features ( Web Animations API and Intl.ListFormat().format ) that I thought were interesting and wanted to share. Code Sandbox You can browse and experiment with the code…

Continue Reading

In this post we are going to build a teleprompter web application using the Web Speech API . In particular, we'll use the SpeechRecognition interface to build this app. The idea is that we'll be able to recognize the user's voice, match the words to a predefined script, and then automatically…

Continue Reading

In this post we focus on toggling animations on and off using the prefers-reduced-motion media query. We will take a look at addressing 3 types of animations (CSS, SVG SMIL, and JavaScript) and we will toggle these animations using different techniques such as @media, matchMedia, and a custom…

Continue Reading