DEV Community: David Amunga

Fetching Query and Route Parameters in Express.js

David Amunga — Sun, 31 Oct 2021 08:10:51 +0000

Introduction

Express.js is a popular backend web application framework for Node.js. While setting up your routes you might encounter scenarios where you need to fetch the parameters specified in the URL path to retrieve a particular set of data. This article will take you through how to extract values from URL route and query parameters.

We recommend you have some basic experience with Javascript and NodeJS and have setup simple routes using Express.js before you go on with this guide.

Extract Query Parameters

A Query String is the part that comes after the Question mark ? in a URL. Let's take an example URL.

https://example.com/api/users?type=admin&status=active

The URL above fetches a list of users with a type of admin and status is active .To fetch these values in Express you can access them using req.query object in your route handler.

const express = require('express')
const app = express()

app.get('/users', (req, res) => {
  const type = req.query.type;
  const status = req.query.status;
})
app.listen(8080);

Extract Route Parameters

On some routes we might want to fetch parameters that are specified within the URL path. Extracting these parameters is similar to the Query parameters. Let's take an example URL.

https://example.com/api/users/1

This URL fetches a User resource with and id of 1. Using Express we can write a single route handler that can fetch any User with any provided id . Lets take a look at an example.

const express = require('express')
const app = express()

app.get('/users/:id', (req, res) => {
  const id = req.params.id;
})
app.listen(8080);

In this example, you can notice that the route specified is /users/:id , where :id represents the provided user id in the URL. Whenever we navigate to the URL with a value passed in that part of the path gets populated as the id parameter. We can fetch the id within the route in the req.params object.

Conclusion

We can see that we can access both Query and Route parameters from a URL using Express.js. If you need to do some added validation of the parameters you can check out express-validator to get the right data into your web app. I hope this guide will assist in better grasping Express.js as you use it in your projects.

Build a Social Media Link Preview App with Cloudinary and Auth0

David Amunga — Wed, 20 Oct 2021 12:38:00 +0000

Introduction

Authentication and File Storage are common features that developers think about while working on a project. Cloudinary is a service that makes media management easy to integrate for web and mobile developers. Auth0 provides authentication and authorization services that are built into applications.
In this tutorial, we are going to build a real-world application that integrates with Auth0 and Cloudinary.

What We'll Be Building

One of the major reasons for creating content on the internet is to share it with others which often would be via social media. When sharing that URL link depending on the site shared it would most likely use rich previews to show more information about the site in a card view. The Open Graph Protocol was developed to standardize the display of link previews and other metadata within a webpage. You can read more about it in Colby's article here.
In this tutorial, we will build a Site Previewer App that displays link previews for social media sites and displays the page metadata.

You can find the Source Code of the project on Github and Live Environment Setup on CodeSandbox

Prerequisites

Basic understanding of Javascript
Basic knowledge of React and React Hooks
The Latest version of Nodejs installed on your machine
the Latest version of React
A Cloudinary account. Creating an Account is free
An Auth0 Account. Creating an Account is free

Set up the Project

We will be using TailwindCSS as our CSS Framework. Setup a New Create React App Project with TailwindCSS using this guide from the official Tailwind Docs.
Once you've completed setting up Tailwind from the guide above. Replace your App.js code to below to test your setup.

    //App.js
    function App() {
      return (
        <div>
          <h1 className="text-9xl font-bold text-yellow-400">Hello World!</h1>
        </div>
      );
    }

    export default App;

You should be getting this screen once you load http://localhost:3000.

Install @tailwindcss/forms library and add it to your tailwind.config.js file onto your plugins array. This will be helpful in styling form elements through TailwindCSS.

    npm install @tailwindcss/forms

    //tailwind.config.js
    module.exports = {
     ...
      plugins: [require('@tailwindcss/forms')],
    };

Step 2. Setup Authentication with Auth0 and Views

Sign Up/Login to Auth0. You can sign up here. Once Logged in, create an Application then navigate on Auth0 to your application section then copy your Domain and Client ID information.

In your project create an .env.local file with the following values. Insert your Copied Client ID & Domain in this file.

    # YOUR_AUTH_DOMAIN is e.g yourauthdomain.eu.auth0.com
    REACT_APP_AUTH_CLIENT_ID=YOUR_CLIENT_ID
    REACT_APP_AUTH_DOMAIN=YOUR_AUTH_DOMAIN

Install the @auth0/auth0-react npm package from Auth0 for React.

    npm install @auth0/auth0-react

In order to manage Authentication State within the Application the Auth0 React SDK uses React Context. We can configure the Auth0Provider Component from the root component in index.js .

    //index.js

    import { Auth0Provider } from "@auth0/auth0-react";

    ....
    ReactDOM.render(
      <Auth0Provider
        domain={process.env.REACT_APP_AUTH_DOMAIN}
        clientId={process.env.REACT_APP_AUTH_CLIENT_ID}
        redirectUri={window.location.origin}
      >
        <App />
      </Auth0Provider>,
      document.getElementById("root")
    );

The redirectUri is set to redirect to window.location.origin

Update your App.js to have a basic authentication setup.

    //App.js
    import { useAuth0 } from '@auth0/auth0-react';
    import './App.css';

    function App() {
      const { loginWithRedirect, logout, isAuthenticated } = useAuth0();

      if (isAuthenticated) {
        return (
          <div>
            <h1 className="text-9xl font-bold text-yellow-400">Logged In !</h1>
            <button onClick={() => logout()}>Log Out</button>
          </div>
        );
      } else {
        return (
          <div>
            <h1 className="text-9xl font-bold text-yellow-400">Hello World!</h1>
            <button onClick={() => loginWithRedirect()}>Log In</button>
          </div>
        );
      }
    }

    export default App;

We can see we are able to pull Authentication State and Login/Logout actions from the useAuth0 hook. We use isAuthenticated to switch between showing Content that is Authenticated and that which isn't. Once you update this you should see the Authentication state changes once we log in and out.

Step 3. Set up Login and Home UI

Add the UI below returned from when isAuthenticated is false.

    // App.js
    if(isAuthenticated){
    ....
    }else{
    return(
    <div className="">
            <main className="mx-auto max-w-5xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
              <div className="flex flex-col items-center space-y-4 text-center">
                <div className="bg-yellow-300 p-4 rounded-lg shadow-md">
                  <svg
                    class="text-yellow-700 w-20 h-20"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    ></path>
                  </svg>
                </div>

                <h1 className="text-4xl tracking-tight font-extrabold text-gray-800 sm:text-5xl md:text-6xl">
                  <span className="block xl:inline">Site Preview</span>{' '}
                </h1>
                <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                  Preview and Generate Open Graph meta tags in seconds
                </p>
                <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
                  <div className="rounded-md shadow">
                    <button
                      onClick={() => loginWithRedirect()}
                      className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 md:py-4 md:text-lg md:px-10"
                    >
                      Log In
                    </button>
                  </div>
                </div>
              </div>
            </main>
          </div>
    );
    }

Create a new file Home.js in the directory src. Setup the Home Component as below.

We are also able to fetch the user object from the useAuth0 Hook. We are able to extract the user name and display it once logged in. Your UI should appear like below once your run. We will be defining 3 fields for the Preview Tags which include : -

Title (Should be less than 60 characters)
Description(Should be less than 120 characters).
Image (URL string)

Let us now work on the PreviewImage and CodeBlock component.

Setting up PreviewImage Component
For the preview image component we will create a folder components inside src directory.

Add Custom Styling for the Preview Image in App.css.

    /* App.css */
    .preview {
      font-size: 12px;
      font-family: tahoma;
      border: 1px solid #ccc;
      color: #555;
      box-sizing: border-box;
      text-decoration: none;
    }

Create the Component

    // src/components/PreviewImage.js

    import React from 'react';

    const PreviewImage = ({ form }) => {
      return (
        <div class="preview flex flex-col">
          <img
            className="w-full object-cover h-32"
            src={form.image}
            alt="some description"
          />
          <div className="px-2 py-2 bg-white">
            <h3 className="text-gray-800 font-bold">
              {form.title.length === 0 ? `Enter A Title` : form.title}
            </h3>
            <p class="">
              {form.description.length === 0
                ? `Enter A Description`
                : `${form.description}`}
            </p>
          </div>
        </div>
      );
    };

    export default PreviewImage;

Import the Component to Home.js

    //Home.js
    import PreviewImage from './components/PreviewImage';

    const Home = ()=>{
    ...
    return (
    ...
    <div className="grid grid-cols-2 gap-6">
        <form>...
        <div>
                {/* Add Preview Image Component Here */}
                <PreviewImage form={form} />
        <div>
    </div>
    )
    }

Set up CodeBlock Component with Syntax Highlighting
The Last Part of the Home UI setup involves adding a CodeBlock section which displays the tags displayed by completing the form fields entered on the same page. We will display the Metadata Code using Prism which is an elegant syntax highlighter tool.

Install prismjs package

    npm install prismjs

Download you syntax highlighter css from here. For this example we are going to use Okaidia .Remember the download css option is near the bottom of the prismjs download page. Once downloaded place it at the root of the src directory.

    import React from 'react';
    import Prism from 'prismjs';
    import '../prism.css';

    const Codeblock = ({ form }) => {
      const { title, description, image } = form;
      React.useEffect(() => {
        Prism.highlightAll();
      }, [form]);

      return (
        <div className="flex flex-col mt-4">
          <div className="flex justify-between items-center bg-gray-200 p-4 rounded-sm">
            <h3 className="text-md text-gray-800 font-semibold">Code</h3>
          </div>
          <pre>
            <code className="language-html">
              {`
    <!-- Replace YOUR_SITE_NAME with the Page/Website URL e.g https://example.com -->
    <!-- HTML Meta Tags -->
    <title>${title}</title>
    <meta name="description" content="${description}">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="YOUR_SITE_NAME">
    <meta property="og:type" content="website">
    <meta property="og:title" content="${title}">
    <meta property="og:description" content="${description}">
    <meta property="og:image" content="${image}">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="YOUR_SITE_NAME">
    <meta property="twitter:url" content="YOUR_SITE_NAME">
    <meta name="twitter:title" content="${title}">
    <meta name="twitter:description" content="${description}">
    <meta name="twitter:image" content="${image}">
      `}
            </code>
          </pre>
        </div>
      );
    };

    export default Codeblock;

Import the Codeblock Component to Home.js

    //Home.js
    import Codeblock from './components/Codeblock';

    const Home = ()=>{
    ...
    return (
    ...
    <div className="grid grid-cols-2 gap-6">
    ...
    </div>
    {/* Add Code Block Component Here */}
    <Codeblock form={form} />
    )
    }

Once you are done you should have both the PreviewImage and Codeblock rendered properly as below.

Step 4. Setup Image Uploads with Cloudinary

The application is nearly complete. All we are missing now is adding an Image Upload feature so that it can populate the final image url to the Codeblock and PreviewImage component.

Next head over to Cloudinary and create an account or login. Once logged in you can check from your Dashboard to see a summary of Account Details,Resources. Copy the Cloud name value you see in the Account Details.

Head over to the Settings section by clicking on your profile. Select the Upload Tab. Scroll down until you see the Upload Presets section and click on the **Enable unsigned uploading** button which allows Unauthenticated uploads which will work for this demo. Copy the Name you get in the Unsigned Mode.

Head over back to the project and add Cloudinary's widget script in your index.html file in the public folder.

    <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

In your .env.local file add your Copied Cloud Name and Upload Preset value in this file.

    REACT_APP_CLOUDINARY_UPLOAD_PRESET=
    REACT_APP_CLOUDINARY_CLOUD_NAME=

In your Home.js you can add the following function in the Component together with the onClickHandler to the Upload File button that should fires the same function.


    //Home.js

    ....
    const uploadWidget = () => {
        window.cloudinary.openUploadWidget(
          {
            cloud_name: process.env.REACT_APP_CLOUDINARY_CLOUD_NAME,
            upload_preset: process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET,
            tags: ['site-preview'],
            sources: ['local', 'url'],
          },
          function (error, result) {
            if (error) {
              return;
            }
            console.log('Upload Result is', result);
            setForm({ ...form, image: result[0].url });
          },
        );
      };

    ....
    return(
    ...
    <label className="block text-sm font-medium text-gray-700">
        Image
    </label>
    <button
       type="button"
       onClick={() => uploadWidget()}
         className="...">
    </button>
    )

This function opens the Cloudinary Widget with the specified cloud name and upload preset. It also adds options for local file upload or url upload. Once successful we update the form with the returned image from the result.

Conclusion

Once done the solution is completed. You now have built a powerful social media link previews generator with Authentication and File Storage. There are more features that can probably be added to the app which include

Customising Image Feature Options through the powerful Cloudinary Transformation API . Might need to let the user choose the file format of image, crop, background overlays or even blur.
View list of Images Selected depending on Auth0 Account Logged In.

Have any other ideas ? Feel free to clone the project and expand on the capabilities of the app using Cloudinary and Auth0.

Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary

How to create a Text Typing Animation Effect in React

David Amunga — Fri, 17 Sep 2021 14:25:10 +0000

Today i want to share how to add a Typing Text animation to your React project using NextJS. When used well this adds interest and personality to your site. We are going to build a fictional home page for a Pastry Twitter Bot like below.

You can find a working example in this sandbox.

Tools we are going to use

Next.js
TailwindCSS
HeroIcons
React-Typical

Setting up your Project

Start by creating a new Next.js project using create-next-app .

npx create-next-app -e with-tailwindcss next-type-animate
cd next-type-animate

This will automatically configure your Tailwind setup based on the Official Next.js example from the Tailwind Guide.

Once done ensure you import TailwindCSS Default Colors as below in your tailwind.config.js file.

//tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
    ...
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      yellow: colors.amber,
      blue:colors.blue
    }
  }
 ...
}

Setup Home UI

Install the awesome HeroIcons icon library.

yarn add @heroicons/react

From the index.js file add the following code. We import the CakeIcon from the HeroIcons library to give some text. If you need to to get a Tailwind refresher you can check out their documentation.

// index.js
import { CakeIcon } from '@heroicons/react/solid';
...
<div className="flex flex-col items-start justify-center min-h-screen py-2 bg-gray-100">
      <Head>
        <title>Pastros</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="px-8">
        {/* Header */}
        <div className="flex flex-col space-y-8 items-start justify-start">
          <CakeIcon className="w-28 text-yellow-500" />
          <h1 className="font-mono text-7xl font-bold text-yellow-500 tracking-wide">
            Pastros!
          </h1>
          <h3 className="font-mono text-back text-5xl">
            A Bot that{' '}
            <strong className="bg-blue-400 text-white">tweets</strong> about
            your favorite <strong className="bg-yellow-400">pastry</strong>{' '}
            recipes
          </h3>
          <div className="font-mono text-5xl flex space-x-3 ">
            <h4> Posts about </h4>
            {/* Text to Animate */}
            <strong className="bg-yellow-400 px-1">
              Cakes
            </strong>
          </div>
        </div>
      </main>
    </div>

When you run you should achieve this layout.

Adding React-Typical.

React-Typical is a React library built by Catalin Miron that makes displaying typing animation in React easier. It is also lightweight consisting of ~400 bytes of Javascript.

Install React Typical from your project folder.

yarn add react-typical

Import React Typical into your index.js file.

//index.js
import Typical from 'react-typical'

Add the Typical component and replace the 'Cakes' text.

//index.js
<strong className="bg-yellow-400 px-1">
        <Typical
             steps={[
                     'Cakes',
                  1000,
                  'Pies',
                  1000,
                  'Biscuits',
                  1000,
                  'Scones',
                  1000,
                ]}
                wrapper="p"
                loop={Infinity}
        />
  </strong>

React-Typical requires the steps prop which includes an array of items to be animated in pairs where the first element is Text to be animated and the next is the duration of animation. You can add several sets of data but for decent visual appeal keep the duration to be more than 300ms (so it doesn't appear like the Flash is typing ⚡️🙂). The wrapper prop defines what element the text should with then the loop prop defines how many times the text should entire animation should loop. In our case we've defined it as Infinity which is a non-number global scope variable that keeps the animation looping.

Conclusion

Take a look at the project repo and hit the ⭐️ if you liked it :) https://github.com/DavidAmunga/next-type-animate

If you have any issues or reviews on this project I will be glad if you could open issue on the repo or just message me.

Photo by Luca Bravo on Unsplash

Free space in your Mac for Mobile Development

David Amunga — Tue, 06 Jul 2021 10:48:11 +0000

Once every few months i perform the much needed relieving task of freeing disk space out of my 256GB Mac. I often use CleanMyMac is an ideal software for periodically cleaning out your disk space with some added performance and security optimisations. However when you wan't to clean out your dev environment it takes a few manual commands to get the job done since disk cleaner software won't know what to clear. You'd be surprised how much space you recover after clearing out unused dev resources. This article describes how to free storage space for Mobile Developement in a Mac laptop.

Android

1. Clean up Gradle

Your Gradle Home directory contains wrapper ,caches and daemons files. The more projects with diffferent gradle versions the more subdirectories within those three folders. You can delete all three directories. This saved me a cool ~12GB of space.

You could run the command as below to achieve the desired result.



cd ~/.gradle

rm -rf caches daemon wrapper

Android SDK Cleaning

Android System images are only used by emulators. If you use a real Android device during development for debugging, you no longer need them, so you can remove them all. This could easily save you 5GB doing this.

Android Studio SDK Manager

iOS

Its easy to run out of space while doing iOS Development since Xcode loves to cache things everywhere around your Mac. It gets even complicated once Xcode has an update(~11GB) but realistically its around ~40GB free space required to download and install the update. Sadly i've had to delete Xcode and install it again to make it work again.

Xcode Update Space Error🙃

1. Remove Old Simulators

As with Android the major culprit will be old simulators that take alot of space. The simulator files are by default located in ~/Library/Developer/Xcode/iOS/Device Support folder. You can delete old simulators using the following command.



xcrun simctl delete unavailable

Remove Cocoapod Caches

If you use Cocoapods in your projects you can clear them using this command. Don't worry you can rebuild them later again.



rm -rf "${HOME}/Library/Caches/CocoaPods"

Clean up Archives,Logs and DerivedData folders

Folders like DerivedData can take up a significant amount of space too. DerivedData is generated during each build process. This contains intermediate build results,indexes that speed up time on each build. You can use the command below to clear all that data.



rm -rf ~/Library/Developer/Xcode/Archives

rm -rf ~/Library/Developer/Xcode/DerivedData

rm -rf ~~/Library/Developer/Xcode/iOS Device Logs/

DevCleaner for Mac

If you're not to keen in heading to this article again to clean up your iOS Development workspace, you can download this DevCleaner by One Minute Games that handles it superbly.

Conclusion

Don't forget to empty your trash to check out how much space you have available. I was able to clear around ~15GB after doing this. I hope this also works for you. You can recommend other tools or ways you've found that has freed space for mobile development. It would be cool to add it to the article.