DEV Community: Lateef Adetona

How to Display a Loading Spinner while DOM is rendering in ReactJS

Lateef Adetona — Tue, 02 Aug 2022 09:35:48 +0000

Overview

Design is important step when creating any product. User experience is key when capturing and retaining the attention of users. Many users don't understand how large our applications truly are and how long things such as HTTP requests or build times could take. When they visit our website but they are introduced to a blank screen, they think the website could be broken and then travel to another website.

In this tutorial, we'll show you to polish your website's user experience by simply adding a big loading spinner when a user visits your site, to indicate that the other components of the website are still loading.

1. Setup your project

We have to setup our React project. In this tutorial, we're going to use create-react-app. In your terminal/CMD, type the following:

npx create-react-app loading-spinner

2. Edit index.html

First step to open index.html. We're going to add div with the "loader-container" class with a child div with the "loader" class. This will be the entry point for our loading spinner within our HTML. Remember, in ReactJS, your project is rendered within the index.html file, specifically within the root div. Adding our loading spinner class directly in the index.html means we can display the class when we start up our React app.

<!-- Loading Spinner Div -->
    <div class="loader-container">
      <div class="loader"></div>
   </div>

Now that we've set the entry point within the HTML, lets write some CSS to design a loading spinner! In the same index.html, within the header tag, lets add some CSS.

<head>
    <!-- Loading Spinner Styling -->
    <style>
      .loader {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 130px;
        height: 130px;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0%  { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      </style>

</head>

Here is how our full index.html should be at this point. Copy and paste the following in your index.html file:

<!-- .../public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>

    <!-- Loading Spinner Styling -->
    <style>
      .loader {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 130px;
        height: 130px;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0%  { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      </style>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- Loading Spinner Div -->
    <div class="loader-container">
      <div class="loader"></div>
   </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

3. Edit App.js

Now, lets turn our attention to App.js. We're going to do 4 things:

Define a state variable so we can manage the state of our application
Define a function that simulates a request
Use the useEffect() React Hook to run our simulated request
Render our HTML, based on or state variable
First things first, we have to import useState and useEffect at the top of our App.js file.

//../src/App.js
import React, {useState, useEffect} from 'react';

We can now define our state variable within App() function. Add the following directly after defining our App() function:

//../src/App.js

function App() {
  const [isLoading, setLoading] = useState(true);

We utilize React Hooks useState() so we can keep track of the value (or state) of a variable throughout the lifecycle of our application. In this example, we're using useState() to keep track of a boolean type variable. We're going to switch the boolean from being "true" to "false" throughout our application. Moving on to our fake request, add the following directly under where we defined our state variable:

function someRequest() { //Simulates a request; makes a "promise" that'll run for 2.5 seconds
    return new Promise(resolve => setTimeout(() => resolve(), 2500));
  }

We defined a function, someRequest(), that returns a Promise(). A Promise() is a JavaScript method that takes in two arguments; a success callback and failure callback. We use a Promise() to simulate a resolve, knowingly it will fail, and our code will execute the failure callback, which is setting a timeout of 2.5 seconds (or 2500 milliseconds).

Now we can call the useEffect() React Hook to call our someRequest() function, which will remove our loader spinner div within the index.html and toggle our state variable. Copy and paste the following code after our someRequest() function:

useEffect(() => {
    someRequest().then(() => {
      const loaderElement = document.querySelector(".loader-container");
      if (loaderElement) {
        loaderElement.remove();
        setLoading(!isLoading);
      }
    });
  });

Lastly, for our application to display the loading spinner on render, we have to add an except directly before our render() method. Add the following to your App.js right before the render() method:

if (isLoading) {
    return null;
  }

And thats it go ahead and run your application with the following command in your terminal/CMD:

$ npm start
Now you have a loading spinner that displays as your application (presumedly making some sort of request to a server, as simulated with the use of our someRequest() function) and disappears when our application is finish rendering.

Check out the full article on LateefLab

What is StackBlitz? How to use it in your article

Lateef Adetona — Mon, 23 May 2022 22:45:00 +0000

Overview

A tech blog site (such as this) strives to make learning how to code as simple and seamless as possible. Here at Lateef Lab, we're focused on teaching and practicing web development, both frontend and backend. With the announcement of PyScript, backend development will be coming to web browsers in the near future. This may allow writers/teachers to explain and guide readers on how to use whatever technologies that are covered within an article, all without leaving their browser tab!

For front-end development within the browser, developers have plenty of options. One of my favorite options is StackBlitz!

What is StackBlitz?

StackBlitz is an online developer environment that mimics the look of Visual Studio Code. If you use Visual Studio Code as your primary IDE, you'll feel right at home using StackBlitz. StackBlitz uses "WebContainers" to run Node.js within the browser.

Here are some of the features of StackBlitz:

Debugging Node.js with Chrome Dev Tools
Run your backend (Node.js) within the frontend
Zero latency editor
Work offline, no internet connection is required
GitHub integration

Here at LateefLab, we like to show React tutorials. To make the learning experience better for readers, we want to show readers how to properly structure their React projects. With displaying StackBlitz within our article, we can cut down on the confusion and ensure a great learning experience. We display our projects within our articles using StackBlitz by embedding the StackBlitz project within the Markdown of our article.

What is Markdown?

Markdown is a markup language for creating formatted text within a text editor. Big publications such as Medium and Dev.to use Markdown to edit their articles (LateefLab is open source, check out the GitHub repo and take a look at how we use Markdown within this site). Luckily, we can take the HTML code view of an article from the editor we use here at LateefLab (thanks to Summernote) and paste it in a Markdown editor and it will keep the same format!

To embed StackBlitz within your own Markdown supported articles, embed the StackBlitz URL in the src attribute within an iframe element, here is an example:

<iframe height="300" style="width: 100%;" src="https://stackblitz.com/edit/web-platform-3a6hc3?embed=0"></iframe>

Example

Check out the full example at LateefLab

Virtual Environments in Python with Anaconda

Lateef Adetona — Mon, 23 May 2022 19:12:00 +0000

Writing python code on your local system is fun....Until its time to deploy your project and you find yourself scratching your head wondering why your project contains too many dependancies.

In tutorial, we're going to setup Anaconda, a popular data science toolkit that contains a package manager (conda) and integrates with a lot of popular applications that many python developers use.

What is Anaconda?

Anaconda is a popular, open-source software toolkit that contains many of the tools for the modern day data scientist. Many data scientists consume and analyze data using Python and R programming languages. The purpose of the toolkit is to be the "batteries included" developer environment for data scientists.

Installation

On your PC, go to https://www.anaconda.com/products/individual and download the installer for your system. Go ahead and continue through the installer using the recommended choices.

Basic Usage

Once installed, if you're on Mac, open terminal. If you're Windows, browse to your programs and open "Anaconda Prompt". You'll see the current environment opened in your new terminal session.

(base) MBP:~ lateefa$

Great, our new terminal session is using conda's base environment, lets check out the packages installed in the base environment. In your terminal session, run the following command:

conda list

A lot (almost overwhelming) amount of packages are in the base environment. That is a good thing though! For a lot of python scripting and other projects, you have a lot of the necessary packages needed to get to testing.

Preferred Usage

Using the base environment is fine for testing, but for most python projects (especially Django) you don't need those extra packages. So lets create another environment using the base package manager, conda! For many Python developers, we may just need to start out with Python (and its standard dependancies) for our new environment. Lets use the conda package manager to create new environment that contains the latest version of Python 3.9 and its standard packages.

In your terminal, run the following command:

conda create --name mynewpyenv python=3.9

The following output will appear, showing all the packages you''ll be installing into the new environment:

The following NEW packages will be INSTALLED:
  ca-certificates    pkgs/main/osx-64::ca-certificates-2021.10.26-hecd8cb5_2
  certifi            pkgs/main/osx-64::certifi-2021.10.8-py39hecd8cb5_0
  libcxx             pkgs/main/osx-64::libcxx-12.0.0-h2f01273_0
  libffi             pkgs/main/osx-64::libffi-3.3-hb1e8313_2
  ncurses            pkgs/main/osx-64::ncurses-6.3-hca72f7f_0
  openssl            pkgs/main/osx-64::openssl-1.1.1l-h9ed2024_0
  pip                pkgs/main/osx-64::pip-21.2.4-py39hecd8cb5_0
  python             pkgs/main/osx-64::python-3.9.7-h88f2d9e_1
  readline           pkgs/main/osx-64::readline-8.1-h9ed2024_0
  setuptools         pkgs/main/osx-64::setuptools-58.0.4-py39hecd8cb5_0
  sqlite             pkgs/main/osx-64::sqlite-3.36.0-hce871da_0
  tk                 pkgs/main/osx-64::tk-8.6.11-h7bc2e8c_0
  tzdata             pkgs/main/noarch::tzdata-2021e-hda174b7_0
  wheel              pkgs/main/noarch::wheel-0.37.0-pyhd3eb1b0_1
  xz                 pkgs/main/osx-64::xz-5.2.5-h1de35cc_0
  zlib               pkgs/main/osx-64::zlib-1.2.11-h1de35cc_3

Type "Y" and hit enter to accept and download the packages. Now, lets activate the environment. In the same terminal, enter the following command:

conda activate mynewpyenv

You should see the terminal session activate the new environment like so:

(mynewpyenv) MBP:~ lateefa$

Perfect, now we can use pip to install packages such as django, gunicorn, whitenoise, etc. Also, we can use pip to generate the requirements.txt for our project so we can keep up with the dependancies for our python projects! If you need to change environments, simply enter the following command:

conda deactivate

Lastly, I'd recommend that you download the Conda Cheatsheet. It holds the most useful conda commands in a 2 page document. I personally find myself referring to it every time I want to start/manage a new environment.

So...Conda vs. Pipenv vs. Virtualenv

Honestly, I don't have anything against using Pipenv or Virtualenv, I just began using Conda/Anaconda in my early days of a developer and started to use it whenever I setup new PCs for development/deployment as a huge feature of Anaconda is it installs Python on the computer. Sure that only saves me about 5-10 minutes, but why not use the toolkit that installs it for me?

Overall, use whichever package manager you like, I simply just prefer Anaconda/Conda.

Add Dark Mode to HTML

Lateef Adetona — Thu, 27 Jan 2022 21:06:00 +0000

Adding Dark Mode to HTML

One of the most useful, often taken for granted, features in mobile and web applications is dark mode. Besides making the user interface look better, it could also provide some health benefits for users. So how can you add a dark mode toggle to your HTML page? It is easy with setting some CSS and JavaScript.

1. CSS

Inside your HTML page, add the following CSS code. This defines a CSS class selector where the CSS is looking for a style class that we defined with a name dark. We're going to change the background to (nearly) pure black and text color to (nearly) pure white.

/* Dark mode */


.dark{
    background-color: #222;
    color: #e6e6e6;
}

2. JavaScript

While inside of your HTML page, add the following JavaScript code. This snippet will use a browser API to detect the whether your local system is using light or dark mode. If your local system is using dark mode, the HTML page will activate a function named ToggleDarkMode(). ToggleDarkMode() will add the CSS class selector to the HTML document's body element.

let isDarkMode= window.matchMedia('(prefers-color-scheme: dark)').matches;
        if(isDarkMode){
            console.log('Currently in dark mode');
            ToggleDarkMode();
        }
        else{
            console.log('Currently not in dark mode');
        }
function ToggleDarkMode() {
        var element = document.body;
        element.classList.toggle("dark");
        }

3. Toggle Button

Some users may prefer to see what your website looks like with the opposite setting, so having a toggle would be great. Simply add the following button within your HTML document. The button will use the onclick property to run the ToggleDarkMode() function, which enables dark mode on your HTML's body element.

<button onclick="ToggleDarkMode()">Toggle</button>

Found any other ways to enable dark mode in HTML? Let us know in the comments below, or contact us in our blog