The Geolocation API, which we will look at today, is a simple solution. You can use it to determine your users' location, local currency, language, and other useful information. You can then use this to provide them with the most relevant content based on their location.

In this article, we'll go over what the Geolocation API is, why it's useful, and how to use it in your apps.

What Is the Geolocation API?

The JavaScript Geolocation API provides access to geographical location data associated with a user's device. This can be determined using GPS, WIFI, IP Geolocation and so on.

To protect the user's privacy, it requests permission to locate the device. If the user grants permission, you will gain access to location data such as latitude, longitude, altitude, and speed. You'll also get the accuracy of the acquired location data and the approximate time when the position was acquired.

Here are a few uses for geolocation:

• Show user's position on a map

• Get up-to-date local information

• Show local Points-of-interest (POI) near the user

• Enable Turn-by-turn navigation (GPS)

• Track a fleet or delivery vehicle

• Tag photographs with a location

How to Use the Geolocation API

You can access the Geolocation API by calling the navigator.geolocation object. It grants the app access to the device's location.

This object provides the methods listed below for working with the device's position:

1. getCurrentPosition: Returns the current location of the device.

2. watchPosition: A handler function that is automatically invoked when the device's location changes.

There are three possible arguments with these methods:

• A success callback (required)

• An error callback (optional)

• An options object (optional)

How to Get User Location with getCurrentPosition()

You can use the getCurrentPosition method to get the user's current location. It sends an asynchronous request to the browser, asking for consent to share their location.

Here is the syntax for getting a user's location:

const successCallback = (position) => {
  console.log(position);
};

const errorCallback = (error) => {
  console.log(error);
};

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

When you run this, you'll get a popup in the browser requesting permission:

Click Allow, and open up the developer console. You'll see that the successful call returns two things:

1. GeolocationPosition.coords object: represents the position, altitude and the accuracy at which the device calculates these properties.

2. timestamp: represents the time at which the location was gotten.

You should see something like this in your console:

GeolocationPosition {coords: GeolocationCoordinates, timestamp: 1662499816712}
    coords: GeolocationCoordinates
        accuracy: 7173.528443511279
        altitude: null
        altitudeAccuracy: null
        heading: null
        latitude: 6.5568768
        longitude: 3.3488896
        speed: null
        [[Prototype]]: GeolocationCoordinates
timestamp: 1662499816712

With this simple request, we've successfully gotten the location. But that's not all. We can also track the user by watching their location.

How to Track User Location with watchPosition()

The watchPosition() method allows the app to continually track the user, and get updated as their position changes. It does this by installing a handler function that will be called automatically whenever the user's device position changes.

Here is the syntax below, where id is basically used to manage or reference the method:

const id = navigator.geolocation.watchPosition(successCallback, errorCallback);

How to Stop Tracking Position with clearWatch()

We use the clearWatch() method to cancel the handler functions that were previously installed using the watchPosition.

navigator.geolocation.clearWatch(id);

How to Use the options Object

Although the options object is optional, it provides parameters that can help you get more accurate results, for example:

const options = {
  enableHighAccuracy: true,
  timeout: 10000,
};

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  options
);

In the code above, we specified in out options object that:

• The response should provide a more accurate position, by setting enableHighAccuracy to true.

• The maximum length of time (in milliseconds) the device is allowed to take in order to return a position. In this case, 10 seconds.

Wrapping Up

In this article, we learned about the JavaScript Geolocation API, how to use it to get a user's location and also track the user using the watchPosition() method.

You can go further to explore this API by building a Weather app, Search App or Map app. Thanks for reading!

In this article, I will share with you the different ways of importing SVGs in React, as well as how the process works under the hood.

Let's get started.

What Is an SVG?

SVG, short for Scalable Vector Graphic, is an image format used for rendering two-dimensional (2D) graphics on the internet.

The SVG format stores images as vectors which are graphics made up of points, lines, and curves based on geometry and mathematical formulas.

Because they are based on numbers and values rather than a grid of pixels like raster images(.png and.jpg), they do not lose quality when zoomed or resized.

They're also great for creating responsive websites that need to look good and function well across a variety of screen sizes.

Overall, SVGs are great as they are scalable, lightweight, customizable, and can be animated using CSS when used inline.

How to Import SVGs in React Apps

Let's go through some of the most used methods when importing SVGs into React Apps.

1. How to Import SVGs Using the Image Tag

Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat.

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    </div>
  );
};
export default App;

But if you are not using CRA, you have to set up a file loader system in the bundler you're using (Webpack, Parcel, Rollup, and so on).

Webpack, for instance, has a loader for handling SVGs called file-loader.

To install the file-loader, add the following command:

npm install file-loader --save-dev

Next, add the loader to the webpack.config.js file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

Now, you can import your SVG files and use them:

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    </div>
  );
};
export default App;

NOTE: While this approach is straightforward, it does have one disadvantage: unlike the other methods for importing, you cannot style the SVG imported in a img element. As a result, it will be suitable for an SVG that does not need customization, like logos.

2. How to Import SVGs by Adding them Directly as JSX

JSX supports the svg tag, so we can copy-paste the SVG directly into our React components. This method is straightforward as it helps you take full advantage of SVGs without using a bundler.

The approach is possible because SVGs are in XML format, just like HTML. So, we can convert it to JSX syntax. You can also use a compiler instead of manually converting.

const App = () => {
  return (
    <div className="App">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="ionicon"
        viewBox="0 0 512 512"
      >
        <path
          d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={32}
        />
      </svg>
    </div>
  );
};
export default App;

The advantage of including SVGs inline is that we have access to their different properties, which allows us to style and customize them as we see fit.

One thing to keep in mind is that if your SVG file size is large, your code may become complex, reducing readability and productivity. If this is the case, use a png or jpeg file..

3. How to Import SVGs as React Components

If you use CRA, there's a chance you have imported and used SVGs directly as a React component at one point in time.

This method, which is possible with the help of a file loader, works by loading the image alongside the HTML rather than as a separate file.

import { ReactComponent as Logo } from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
};

export default App;

4. How to Convert SVGs to React Components

This approach is similar to the one previously mentioned. Here, we can convert an SVG to a React component by returning it from inside a class or functional component.

To do this, open up the SVG file in a text editor, and copy-paste the code into a new component:

export const ArrowUndo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="ionicon"
      viewBox="0 0 512 512"
    >
      <path d="M245.09 327.74v-37.32c57.07 0 84.51 13.47 108.58 38.68 5.4 5.65 15 1.32 14.29-6.43-5.45-61.45-34.14-117.09-122.87-117.09v-37.32a8.32 8.32 0 00-14.05-6L146.58 242a8.2 8.2 0 000 11.94L231 333.71a8.32 8.32 0 0014.09-5.97z" />
      <path
        d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z"
        fill="none"
        stroke="currentColor"
        strokeMiterlimit={10}
        strokeWidth={32}
      />
    </svg>
  );
};

Now, you can import and render the SVG component in another component like this:

import { ArrowUndo } from "./path/to/ArrowUndo.jsx";

export const Button = () => {
  return (
    <button>
      <ArrowUndo />
    </button>
  );
};

Again, this approach is only possible if your React app has a loader like SVGR's Webpack loader included.

5. How to Import SVGs Using SVGR

SVGR is a tool that takes raw SVG files and transforms them into React components. It also has a large ecosystem with support for Create React App, Gatsby, Parcel, Rollup, and other technologies.

So, how do we set it up?

First, install the package by running the code below:

# with npm
npm install --save-dev @svgr/webpack

# with yarn
yarn add --dev @svgr/webpack

Next, update your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
};

Now, you can import an SVG file as a React component:

import Logo from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
};

export default App;

6. How to Import SVGs Using the Vite Plugin for SVGR

vite-plugin-svgr is a plugin for Vite that uses svgr under the hood to transform SVGs into React components.

You can install it by running the following command:

# with npm
npm i vite-plugin-svgr

# with yarn
yarn add vite-plugin-svgr

Next, add the plugin inside your app's vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()],
});

Now, you can import the SVG files as React components:

import { ReactComponent as Logo } from "./logo.svg";

Conclusion

And it's a wrap! In this article, we've covered how to import SVGs in a React App using custom configuration from specific packages, how importing React components works, and how to use them in a Vite setup.

When working with Vite, I use the vite svgr plugin, which works flawlessly. You can also experiment with the other ways discussed in this article.

I hope you found this article insightful. If you do have any questions, feel free to send a message on Twitter or LinkedIn.

Thanks for reading, and happy coding!

Before you go, check out these resources:

• Why You Should Ditch Create-React-App for Vite

• Working with SVGs in React

• Twitter Community for Devs

Many companies, such as Linkedin, Facebook, Youtube and Slack, use this effect in their apps and websites, as you may have noticed.

As much as we developers want our websites to load as quickly as possible, there are times when a lot of data needs to be rendered on the page, so Skeleton screens are a great option.

In this article, we'll cover:

• What Skeleton Screens are

• Different types of Skeleton screens

• Why use Skeleton Screens

• When to use them

• Things to keep in mind

• Building A Daily Dev Skeleton Loading UI

  • Set up the project

  • Design the Skeleton elements

  • Clone the card template

  • Create JSON file

  • Populate HTML elements

Prerequisites

This article assumes that you have:

• Knowledge of HTML and CSS (SASS)

• Knowledge of JavaScript (ES6)

We will use HTML and SASS for this project. If you would like to get started with SASS, check out this Beginner's Guide.

What is a Skeleton Screen?

A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded.

They let the user know that some content is loading and, more importantly, provide an indication of what is loading, whether it's an image, text, card, and so on.

This gives the user the impression that the website is faster because they already know what type of content is loading before it appears. This is referred to as perceived performance.

Here are some examples of skeleton screens from Facebook and LinkedIn:

LinkedIn home feed loading state

Facebook home feed loading state

Different types of Skeleton Screens

There are 2 main types of skeleton screens:

• Content Placeholders

• Color Placeholders

Content Placeholders are typically light grey boxes and circles that simulate the appearance of the page, as shown in the images above for Facebook and LinkedIn.

Color Placeholders are more difficult to create because they simulate not only the UI layout but also the dominant color. It is most commonly found on image-focused websites such as Pinterest and Unsplash.

Color Placeholder example from Pinterest

Why Use Skeleton Screens?

• They appear to be faster and are more user friendly. Improved perceived performance provides both good UX and helps in increasing conversion rate.

• The issue with spinners/loaders is that we have no idea what is loading or how long it will take.

• The use of spinners/loaders creates a period of uncertainty for the user since the load time is unknown.

• Skeleton screens draw the user's attention to progress rather than waiting time.

• It creates an illusion of speed and short load time

When to use them

• Use to notify the user that something is loading when more than one element is loading at the same time.

• Use when loading data takes more than 3 seconds.

• Use on websites with a lot of traffic.

• Use for a background or long-running process.

Things to keep in mind

While implementing skeleton screens, we should keep in mind the goal we are trying achieve with the website or app, and prioritize loading the content.

Use of skeleton loading screens is no excuse to skip actual performance optimization, and if you can cache meaningful content and display that, that'll be good.

Building A Daily Dev Skeleton Loading UI

In this section, we will dive into the implementation of the skeleton loading screen following a step-by-step process so it's easier to understand.

We'll build one like daily.dev's feed section.

Step 1: Set up the project

First, to code along with me, clone or download the starter code for the layout here. You can download the files by using DownGit.

The code contains the card layout, so we will continue from here in the next steps.

To begin, start the development server in the IDE and open up your browser.

Starter Card Layout

Step 2: Design the Skeleton elements

There are 5 elements that we want to build for the skeleton loading: the logo image, title, details, cover image and footer section.

Daily Dev's Skeleton Elements

Now, we will add skeleton classes to the locations of the above elements.

For the logo,

<img class="card__header header__img skeleton" />

For the title, there will be 2 divs to represent the two lines that we have in the picture above.

<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>

For the details, add the following code inside the div of class body__text:

<div class="skeleton skeleton-text skeleton-text__body"></div>

Inside the body__img div, add the following code:

<img class="skeleton" alt="" id="cover-img" />

For the footer, add this code:

<div class="skeleton skeleton-text skeleton-footer"></div>

Now, the complete HTML code for the card:

<a class="card" id="card-link" target="_blank">
  <div class="card__header">
    <div>
      <img class="card__header header__img skeleton" id="logo-img" alt="" />
    </div>
    <h3 class="card__header header__title" id="card-title">
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text"></div>
    </h3>
  </div>

  <div class="card__body">
    <div class="card__body body__text" id="card-details">
      <div class="skeleton skeleton-text skeleton-text__body"></div>
    </div>

    <div class="card__body body__img">
      <img class="skeleton" alt="" id="cover-img" />
    </div>
  </div>

  <div class="card__footer" id="card-footer">
    <div class="skeleton skeleton-text skeleton-footer"></div>
  </div>
</a>

Now, let's add some styling to make the skeleton components:

.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.skeleton-text {
  width: 100%;
  height: 0.7rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.skeleton-text__body {
  width: 75%;
}

.skeleton-footer {
  width: 30%;
}

This is the resulting layout:

Card component loading

Step 3: Clone the card template

Insert a template tag between the container and the card element in the index.html file.

In the image above there's a template tag that I commented out, and yes, its a valid HTML element ;). It is used to declare fragments of HTML that can be cloned and inserted in the document by script.

<template id="card-template">

As a result, make sure to add the closing tag </template> after the closing tag of the card div.

Now let's look at the JavasScript code that we'll use to clone the card template.

Create a script tag just before the end of the body tag, and add the following code:

const container = document.querySelector(".container");
const cardTemplate = document.getElementById("card-template");
for (let i = 0; i < 10; i++) {
  container.append(cardTemplate.content.cloneNode(true));
}

The code above grabs the page container and the card template, and then creates 9 clones/copies of the card (making 10 in total). Then it appends/inserts the cards into the container.

Cloned card skeleton UI

Step 4: Create JSON file

We need some data before we can add content to the page. Normally, you would need to get data with an external website, but we'll be using one that I've set up specifically for this project.

To begin, create a file called data.json in the project folder.

Add the following code to the JSON file.

[
  {
    "id": 1,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
    "title": "Writing Cleaner CSS Using BEM ",
    "details": "Mar 12, 2022 · 4m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/dd19e7a56475f39ab1c38167c02c7b58",
    "link": "https://israelmitolu.hashnode.dev/writing-cleaner-css-using-bem-methodology"
  },
  {
    "id": 2,
    "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp",
    "title": "The Beginner's Guide to Sass",
    "details": "Apr 05, 2022 · 8m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/bec6719be210973098293a32dc732d1e",
    "link": "https://www.freecodecamp.org/news/the-beginners-guide-to-sass/"
  },
  {
    "id": 3,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/devto",
    "title": "I made Squid Game with Javascript",
    "details": "Oct 25, 2021 · 3m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1f947033365381cbe322ddf294ad7169",
    "link": "https://dev.to/0shuvo0/i-made-squid-game-with-javascript-10j9"
  },
  {
    "id": 4,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
    "title": "Using Custom Cursors with Javascript for a Better User Experience",
    "details": "Feb 12, 2022 · 9m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3d056b99c95b37cd35ae5cfc6a8b38be",
    "link": "https://israelmitolu.hashnode.dev/using-custom-cursors-with-javascript-for-a-better-user-experience"
  },
  {
    "id": 5,
    "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp",
    "title": "React Best Practices - Tips for Writing Better React Code in 2022",
    "details": "Feb 03, 2022 · 31m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/5a629fff5583f9ab5f0931d14736b299",
    "link": "https://www.freecodecamp.org/news/best-practices-for-react/"
  },
  {
    "id": 6,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/tnw",
    "title": "You suck at Googling: 5 tips to improve your search skills",
    "details": "Mar 31, 2022 · 4m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e318150ae67c2083ff3585a96f366f7b",
    "link": "https://thenextweb.com/news/5-tips-to-improve-your-google-search-skills"
  },
  {
    "id": 7,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/logrocket",
    "title": "A better way of solving prop drilling in React apps",
    "details": "Jan 14, 2022 · 13m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/6fe4c4060bca638b419d8b2c63d8eaf7",
    "link": "https://blog.logrocket.com/solving-prop-drilling-react-apps/"
  },
  {
    "id": 8,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/dz",
    "title": "Golang and Event-Driven Architecture",
    "details": "Apr 18, 2022 · 6m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/d06eddd82c62288df6e2600bcda61579",
    "link": "https://dzone.com/articles/golang-and-event-driven-architecture"
  },
  {
    "id": 9,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
    "title": "Introduction to Git In 16 Minutes",
    "details": "Mar 18, 2021 · 8m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3c02111a8f242f607551500432e17a78",
    "link": "https://vickyikechukwu.hashnode.dev/introduction-to-git-in-16-minutes"
  },
  {
    "id": 10,
    "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
    "title": "How to Create a Sleek Preloader Animation Using GSAP Timeline",
    "details": "Jan 25, 2022 · 7m read time",
    "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e238c35cb9d41dd9a5475602aef00119",
    "link": "https://israelmitolu.hashnode.dev/how-to-create-a-sleek-preloader-animation-using-gsap-timeline"
  }
]

To replicate Daily Dev's feed section, we have created some data that has an array of objects with properties such as id, logo image, title, details and cover image.

Step 5: Populate HTML Elements with appropriate content

Add the following code to the script tag that houses your JavaScript:

fetch("data.json")
  .then((response) => response.json())
  .then((posts) => {
    container.innerHTML = "";
    posts.forEach((post) => {
      const div = cardTemplate.content.cloneNode(true);
      div.getElementById("card-link").href = post.link;
      div.getElementById("logo-img").src = post.logoImage;
      div.getElementById("card-title").textContent = post.title;
      div.getElementById("card-details").textContent = post.details;
      div.getElementById("cover-img").src = post.coverImage;
      div.getElementById(
        "card-footer"
      ).innerHTML = ` <ion-icon name="arrow-up"></ion-icon>
          <ion-icon name="chatbox-ellipses"></ion-icon>
          <ion-icon name="bookmark"></ion-icon>`;
      container.append(div);
    });
  });

The code above is what we will use to add content to the cards once they are done loading.

Now, let me explain the code bit by bit:

fetch("data.json")
  .then((response) => response.json())

Here, we have a basic fetch request, where we set the path to the resource. In this case, the data.json file. If it were an external API, you would use the endpoint URL as the argument:

The fetch() method does not directly return the JSON response body but instead returns a promise that resolves with a Response object.

To learn more, check out the MDN docs.

.then((posts) => {
    container.innerHTML = "";
    posts.forEach((post) => {
      const div = cardTemplate.content.cloneNode(true);
      div.getElementById("logo-img").src = post.logoImage;
      div.getElementById("card-title").textContent = post.title;
      div.getElementById("card-details").textContent = post.details;
      div.getElementById("cover-img").src = post.coverImage;
      div.getElementById(
        "card-footer"
      ).innerHTML = `<ion-icon name="arrow-up"></ion-icon>
          <ion-icon name="chatbox-ellipses"></ion-icon>
          <ion-icon name="bookmark"></ion-icon>`;
      container.append(div);
    });
  });

Here, we define what should happen after fetching the data.

The code first clears the page, and then runs a forEach() method which extracts the properties from the JSON file, and then inputs it into the card elements (logo image, card title,...) using .textContent property.

Finally, for the footer, we used .innerHTML to insert the icons as HTML content.

If you added everything correctly, there shouldn't be any errors, and this is our fully functional skeleton loading UI.

Our finished Daily Dev skeleton UI

Check out the live demo and the source code repository on Github.

Network Throttling in Chrome DevTools

It's important to note that we didn't set a timeout because this skeleton screen is dependent on the user's network speed.

If you want to simulate it at different network speeds, go into the network tab in your browser Devtools.

Here's how to do it in Chrome v100:

Throttle Network in Chrome DevTools

1. Open DevTools (Ctrl+Shift+i).

2. Navigate to the "Network" tab.

3. Select the type of connection you want

4. Reload the page to see assets downloading at the specified connection speed.

If the default options don't suit you, you can create a custom Network Throttling Profile by selecting the option at the very top of the dropdown menu.

Conclusion

You made it all the way to the end! You've learned about skeleton loading, and how it contributes to user experience by creating the illusion of speed when loading data, and you've implemented your own.

I hope you found this tutorial useful and that it serves as a good starting point for creating various skeleton loading screens.

If you found this article insightful, do share it with your friends and network. Also, feel free to connect with me on Twitter and my blog where I share resources and articles to make you a better dev.

Thanks for reading, and happy coding!

Before you go, here are some skeleton loading packages for React, Angular and Vue.

Whether you're learning about it for the first time, or want to brush up on your knowledge of the subject, this is the article for you.

In this post, you'll learn the fundamentals of Sass, what it is, and how to use Sass's awesome features to speed up the process of writing styles.

Prerequisites

This article assumes that you have:

• Basic understanding of HTML & CSS

• A code editor (VS Code recommended). If you don't have it installed, download it here.

• And a browser (Chrome or Firefox recommended)

What exactly is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that gives your CSS superpowers.

Let's face it: writing CSS can be difficult at times, especially in today's world of increasingly complex user interfaces.

And many times, you'll find that you're repeating yourself often.

Sass comes to the rescue in this situation. It helps you stick to the DRY (Do Not Repeat Yourself) philosophy when writing CSS.

Sass provides a compiler that allows us to write stylesheets in two different syntaxes, indented and SCSS. Let's look at each now.

Indented syntax

This is the older syntax that is indented, and gets rid of the curly braces and semi-colons. It has a file extension of .sass.

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    text-decoration: none

SCSS syntax

This is the newer and more popular syntax. It is essentially a subset of the CSS3 syntax. This means that you can write regular CSS with some additional functionalities.

Due to its advanced features it is often termed as Sassy CSS. It has a file extension of .scss.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

Quick Disclaimer: This article uses the SCSS syntax because it's more widely used.

How Does Sass Work?

Sass works in such a way that when you write your styles in a .scss file, it gets compiled into a regular CSS file. The CSS code is then loaded into the browser.

That is why it's called a Preprocessor.

Why should you use Sass?

• Easy to learn: If you are familiar with CSS already, then you'll be glad to know that Sass actually has a similar syntax, and so you can start using it, even after this tutorial ;)

• Compatibility: It is compatible with all versions of CSS. So, you can use any available CSS libraries.

• Saves time: It helps reduce the repetition of CSS, because of its powerful features.

• Reusable code: Sass allows for variables and chunks of code (mixins) that can be reused over and over again. This helps you save time and makes you able to code faster.

• Organized Code: Sass helps keep your code organized by using partials.

• Cross Browser Compatibility: Sass gets compiled into CSS and adds all the necessary vendor prefixes so you don't have to worry about manually writing them out.

Features of Sass

Here are some of the features that make Sass truly CSS with Superpowers:

Variables in Sass

You can declare variables in Sass. This is one of Sass's strengths since we can define variables for various properties and use them in any file.

The benefit here is that if that value changes, you simply need to update a single line of code.

This is done by naming a variable with a dollar symbol $ and then referencing it elsewhere in your code.

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

Nesting in Sass

Most of the time, while writing CSS, classes are often duplicated. We can avoid this duplication by nesting styles inside the parent element.

In CSS,

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

With Sass, the above code can be written like this:

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

Parent Selector

In the Sass code above, you might notice the ampersand symbol & used with the hover pseudo-class. This is called a Parent Selector.

The parent selector, &, is a special selector invented by Sass that's used in nested selectors to refer to the outer selector. Source – Sass Documentation

So, in the case of the code above, & will refer to the parent which is the anchor tag a.

You can check out my article on how to implement Sass using BEM methodology.

Partials in Sass

This is one of the many awesome features of Sass that gives you an advantage.

As stylesheets grow large over time, it gets difficult to maintain them. Because of this, it just makes sense to break your stylesheets into smaller chunks. In other words, Partials help you organize and structure your code.

To declare a partial, we will start the file name with an underscore _, and add it in another Sass file using the @import directive.

For example, if we have a _globals.scss, _variables.scss, and _buttons.scss, we could import them into the main SCSS file main.scss.

@import "globals";
@import "variables";
@import "buttons";

You'll notice that the underscore and the .scss are not added. That is because Sass automatically assumes that you are referring to the .sass or .scss file.

Mixins in Sass

Another major issue with CSS is that you'll often use a similar group of styles. Mixins allow you to encapsulate a group of styles, and apply those styles anywhere in your code using the @include keyword.

An example of when you'd use mixins is when using Flexbox.

@mixin flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  background: #ccc;
}

.card {
  @include flex-container;
}

.aside {
  @include flex-container;
}

Sass Functions and Operators

Sass provides a suite of tools to help write more programmatic code.

Sass offers built-in functions that enable us to do calculations and operations that return a specific value.

They range from color calculations to math operations like getting random numbers and calculation of sizes, and even conditionals.

It also provides support for mathematical operators like +, -, \, *, /, and %, which we can use with the calc function.

Here is an example using a pixel to rem conversion function:

@function pxToRem($pxValue) {
  $remValue: ($pxValue / 16) + rem;
  @return $remValue;
}

div {
  width: pxToRem(480);
}

However, it's important to note that the / operator for division is deprecated, and will be removed in Dart Sass 2.0.0. You can read about it in the Docs.

So, this is how it should be written:

@use "sass:math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // gives 30rem
}

Here is an example of conditional logic in a mixin:

@mixin body-theme($theme) {
  @if $theme == "light" {
    background-color: $light-bg;
  } @else {
    background-color: $dark-bg;
  }
}

Sass also provides the lighten and darken functions to adjust a color by a certain percentage.

For example:

$red: #ff0000;

a:visited {
  color: darken($red, 25%);
}

How to Set Up Sass for Local Development

Great! Now that we have learned about the "theoretical" aspects of Sass, let's get into the code to better understand how it works.

In this section, you will learn how to set up a local development environment, and also go through a simple landing page I have prepared.

Check out the demo on Codesandbox and code repository on GitHub.

Ways to compile Sass

There are different ways of compiling Sass files which are:

• VS Code Extension

• Install using NPM globally

• Install using open source apps such as Compass.app, Live Reload, and Koala.

• Install using Homebrew (for MacOS)

In this tutorial, we will be using the VS code Extension option because it is the easiest to get started with.

How to Set Up Sass for VS Code

Step 1: Install Live Sass Compiler

First, launch Visual Studio Code. Once it's loaded, go to the side panel on the left and select the extensions tab.

Extensions tab in VS Code

In the search bar, search for "Live Sass Compiler" and install it. This extension helps us to compile the Sass files — .scss (or .sass) – into .css files.

Step 2: Set the Save Location

Now change the file path so that Sass gets compiled into the styles folder.

To do this, you will make changes to the settings.json file.

In VS Code, go to File > Preferences > Settings. Now search for live sass compile to change the global settings.

Click on Edit settings.json.

Now, on the first few lines, where you see this code:

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/"
    }
  ],

Change "savePath": "/" to "savePath": "/styles", so it now looks like this:

{
  "liveSassCompile.settings.formats":[
    {
      "format": "expanded",
      "extensionName":".css",
      "savePath":"/styles",
    },

    // You can also use this minified extension for production, as it reduces the file size

    {
      "format": "compressed",
      "extensionName":".min.css",
      "savePath":"/styles",
    }
  ],

Step 3: Compile Sass

Now, after saving the settings, go back to the Sass file, and click on the button that says "Watch Sass" at the very bottom of the window.

Click on "Watch Sass"

After you click the button, two files get created: .css and a .css.map in the styles folder.

You should not, however, change any of them. Because it already helps you compile the Sass into CSS every time you save new stylings.

Step 4: Link the CSS file

Then, link the CSS file in your index.html. In our case:

    <link rel="stylesheet" href="/styles/main.css" />

Now run the file in your browser. This should be the resulting layout in CodeSandbox below:

Walking through the code

Here's an explanation of the code from the previous section:

• We have a basic markup in the index.html file which contains a header and home/hero section.

  • It contains a link to the CSS file which the extension compiled for us.

  • And some JavaScript for the responsive menu toggle.

• The main.scss gets compiled, and the resulting CSS file main.css is what is imported in the index.html:

    <link rel="stylesheet" href="/styles/main.css" />
  

• The Main Scss file main.scss imports all of the partials: _base.scss, _components.scss, _home.scss, _layout.scss _responsive.scss, _variables.scss.

    @import "variables";
    @import "base";
    @import "layout";
    @import "components";
    @import "home";
    @import "responsive";
  

• The base partial contains the mixins of flex and grid which are included in the places where we need them.

Conclusion

Congrats! If you made it to the end, that means you have learned about how Sass works, its cool features, and hopefully you start using it soon.

If you want to learn more about Sass, I recommend checking out freeCodeCamp's course.

If you found this article useful (which I'm sure you did 😉), do share it with your friends and network, and feel free to connect with me on Twitter and my blog where I share resources and articles to make you a better dev.

Thanks for reading, and happy coding!