Current Application Here we have the beginnings of a React Terminal Dashboard. If we come to the terminal and kick off our app with npm start you'll see a sightly colored version displaying the date, current time and weather information. However, at this point everything is left aligned. So let's…

Continue Reading

Current Application Here we have the beginnings of a React Terminal Dashboard. If we run our application with npm start you'll see a box displaying the date, time, and the current weather. However, at this point things are pretty boring (other than the fancy ASCII art). So, let's do something…

Continue Reading

Fetching Logic Before The following code snippet is part of the React Terminal Dashboard that we are building in this series. So far, it only shows the time, date, and weather information. The point of this post is to extract out the weather fetching logic into it's own custom React hook instead of…

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

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