Tolu's Blog

Improving SEO with Vue-Meta

Tolu Adegboyega — Tue, 10 Oct 2023 10:02:28 GMT

Welcome to the second part of the two-part series, Improving SEO: A Tale of Two Libraries. Search Engine Optimization (SEO) is paramount in getting your website noticed in the competitive landscape of the internet. Optimizing your website for search engines not only increases visibility but also drives organic traffic. However, improving SEO in Single Page Applications (SPAs), like those built with Vue, can be particularly challenging due to their dynamic nature. Vue-Meta is a great tool that can help to overcome these challenges.

What is Vue-Meta?

Vue-Meta is a JavaScript library that enables you to dynamically manage the content of the document head. To put it simply, it gives you the ability to manage the of your HTML document in Vue apps. Because search engines like Google significantly rely on the data in the section to comprehend and rank your web pages, this control is crucial for SEO.

Why Vue-Meta for SEO?

Vue-Meta provides a robust toolkit for optimizing your website's SEO performance. It offers a wide range of features related to SEO, and in this section, we'll focus on the following key aspects:

Title and Meta Tags - The Foundation of SEO: Proper management of title and meta tags is fundamental in SEO. These tags are a vital component of any SEO plan because they serve as the first link between your site and search engines. Vue-Meta gives you the ability to dynamically set and change title tags for each page in your Vue app.
Open Graph and Twitter Cards: When users share content on social media platforms, they expect it to look good. Open Graph and Twitter Card metadata allow you to define the image, name, and description that appears in social media preview formats. With Vue-Meta, you can set up metadata for Open Graph and Twitter Cards for each page in your Vue app.

Setting Up Vue-Meta

Installation

Start by installing vue-meta using npm or yarn.

npm install vue-meta
# or
yarn add vue-meta

Integration with Vue Application

In your main.js or the entry point file for your Vue application:

import Vue from 'vue';
import VueMeta from 'vue-meta';
import App from './App.vue'; 

Vue.use(VueMeta);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Using Vue-Meta Across Different Pages

Now that vue-meta is up and running, let’s take a closer look at how it can be used across different pages of your app.

Updating Tags, Titles, and Descriptions

Within your component, vue-meta can be used to set and update different document head elements. For example, you can set and update the following title and meta description:



<script>
    export default {
      metaInfo: {
        title: 'Home Page Title',
        meta: [
          {
            name: 'description',
            content: 'This is the home page description.',
          },
        ],
      },
    };
  script>

Implementing Open Graph and Twitter Cards

You can add specific metadata tags to create Open Graph and Twitter Cards with Vue-Meta:



<script>
    export default {
      metaInfo: {
        meta: [
          {
            property: 'og:title',
            content: 'About Page Title',
          },
          {
            property: 'og:description',
            content: 'This is the about page description.',
          },
          {
            property: 'og:image',
            content: 'https://example.com/about-page-image.jpg',
          },
          {
            name: 'twitter:card',
            content: 'summary_large_image',
          },
          {
            name: 'twitter:title',
            content: 'About Page Title',
          },
          {
            name: 'twitter:description',
            content: 'This is the about page description.',
          },
          {
            name: 'twitter:image',
            content: 'https://example.com/about-page-image.jpg',
          },
        ],
      },
    };
  script>

It’s important to test and troubleshoot after you’ve implemented vue-meta. You can do this using browser developer tools and SEO testing tools to make sure your metadata is set correctly.

Conclusion

Vue-Meta is an effective solution for managing the document head of your Vue app. You can manage titles, descriptions, Open Graph, and Twitter Cards by effectively utilising it across many pages, which will improve your SEO and social media presence through improved content sharing on social platforms.

Thank you for reading and I hope you found this post helpful. 💫

Improving SEO with React Helmet Async

Tolu Adegboyega — Tue, 03 Oct 2023 10:02:28 GMT

Search Engine Optimization (SEO) is paramount in getting your website noticed in the competitive landscape of the internet. Optimizing your website for search engines not only increases visibility but also drives organic traffic. However, improving SEO in Single Page Applications (SPAs), like those built with React, can be particularly challenging due to their dynamic nature. React Helmet Async is a great tool that can help to overcome these challenges. This article is the first in a two-part series, Improving SEO: A Tale of Two Libraries.

What is React Helmet Async?

React Helmet Async is a JavaScript library that enables you to dynamically manage the content of the document head. To put it simply, it gives you the ability to manage the of your HTML document in React apps. Because search engines like Google significantly rely on the data in the section to comprehend and rank your web pages, this control is crucial for SEO.

Why React Helmet Async for SEO?

React Helmet Async provides a robust toolkit for optimizing your website's SEO performance. It offers a wide range of features related to SEO, and in this section, we'll focus on the following key aspects:

Title and Meta Tags - The Foundation of SEO: Proper management of title and meta tags is fundamental in SEO. These tags are a vital component of any SEO plan because they serve as the first link between your site and search engines. React Helmet Async gives you the ability to dynamically set and change title tags for each page in your React app.
Open Graph and Twitter Cards: When users share content on social media platforms, they expect it to look good. Open Graph and Twitter Card metadata allow you to define the image, name, and description that appears in social media preview formats. With React Helmet Async, you can set up metadata for Open Graph and Twitter Cards for each page in your React app.

Setting Up React Helmet Async

Installation

Start by installing react-helmet-async using npm or yarn.

npm install react-helmet-async
# or
yarn add react-helmet-async

Wrapping Your Application with `HelmetProvider`

In your root component (e.g. App.js), wrap your entire React application with the HelmetProvider.

import React from 'react';
import { HelmetProvider } from 'react-helmet-async';

function App() {
  return (
    <HelmetProvider>
      {/* Your entire React application */}
    HelmetProvider>
  );
}

Using React Helmet Async across Different Pages

Now that react-helmet-async is up and running, let’s take a closer look at how it can be used across different pages of your app.

Importing `Helmet`

In each component where the document head is to be changed, import Helmet

import React from 'react';
import { Helmet } from 'react-helmet-async';

Updating Tags, Titles, and Descriptions

Helmet can be used to set and update different document head elements within your component. For example, you can set and update the following title and meta description:

function HomePage() {
  return (
    <main>
      <Helmet>
        <title>Home Page's Titletitle>
        <meta name="description" content="This is the home page's description." />
      Helmet>
      <h1>This is the home page 🏡 h1>
    main>
  );
}

Implementing Open Graph and Twitter Cards

Specific metadata tags can be added to the Helmet component to create Open Graph and Twitter cards.

function AboutPage() {
  return (
    <main>
      <Helmet>
        // Open Graph Tags
        <meta property="og:title" content="About Page's Title" />
        <meta property="og:description" content="This is my About Page's Title description." />
        <meta property="og:image" content="https://example.com/about-page-image.jpg" />

        // Twitter Card Tags
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="About Page's Title" />
        <meta name="twitter:description" content="This is my About Page's Title description." />
        <meta name="twitter:image" content="https://example.com/about-page-image.jpg" />
      Helmet>
      <h1>This is the about page 🕵🏾‍♀️h1>
    main>
  );
}

It’s important to test and troubleshoot after you’ve implemented react-helmet-async. You can do this using browser developer tools and SEO testing tools to make sure your metadata is set correctly.

Conclusion

React Helmet Async is an effective solution for managing the document head of your React app. You can manage titles, descriptions, Open Graph, and Twitter Cards by effectively utilising it across many pages, which will improve your SEO and social media presence through improved content sharing on social platforms.

Thank you for reading and I hope you found this post helpful. 💫

GreenSock Animation Platform (GSAP) x Vue

Tolu Adegboyega — Wed, 20 Jul 2022 10:07:22 GMT

Animation is one of the most important aspects of modern web design. It is a functional and effective way to improve user experience. While CSS (I wrote about getting started with CSS animation in a previous post) is very useful in creating cool animations, it can get really exhausting and time-consuming to create complex ones. This is where JavaScript comes in.

In this post we'll be focusing on how to get started with animating interfaces using a JavaScript library called GSAP in our Vue app.

What is GSAP?

GreenSock Animation Platform (GSAP) is a powerful, robust, high-speed and lightweight JavaScript library that can be used to create performant and engaging animations. It animates anything JavaScript can touch which includes CSS properties and SVGs while working around browser inconsistencies.

Need I say more? 😏

Setup

The first step to using GSAP in your Vue app is by including it in your project. While there are a number of ways to do this, I prefer to install GSAP using NPM or Yarn. You can check out the other installation methods in the GSAP docs here.

For npm installation, in your terminal, type the following command:

npm install gsap

For yarn installation, type the following command:

yarn add gsap

At the top of the file you want to use GSAP in, import GSAP by adding this:

import { gsap } from 'gsap';

Now you're ready to use GSAP. 🥳

GSAP Concepts

We'll be focusing on a number of concepts that are fundamental to creating animations with GSAP and they are:

Tween
Timeline
Plugins

Tween

A Tween, simply put, is what does all the animation work. It is a single movement in an animation caused by a change in properties. It is similar to keyframes in CSS. It follows this syntax:

gsap.method('element', duration, vars)

method: This refers to the GSAP method you'd like to Tween with.
element: This is the element that we want to animate. It can be a simple variable or an array if we want to animate multiple elements.
duration: This represents the duration of the animation, it is defined in seconds.
vars: This is an object with key/value pairs of different properties that we want to change over the duration. They can be CSS properties, but it's important to note that they should be written in in camelCase format. That is, padding-bottom as paddingBottom.

Exploring GSAP methods

Methods are used to define the start and final values of an animation.There are numerous methods to create animations using GSAP. We’ll be focusing on some of the common ones such as gsap.to(), gsap.from() and gsap.fromTo().

gsap.to()

This method animates the element from their current/default values to the values specified in the object parameter (vars).

  gsap.to('.block', 3, {
     x: 200,
     borderRadius: '50%',
     backgroundColor: 'orange',  
  });

The above code will move an element with the class name block 200px along its x-axis, using the CSS property translateX which is being represented simply here by x, in three(3) seconds while updating its other CSS properties to have a border-radius of 50% and a background-color of orange.

https://codepen.io/ToluAdegboyega/pen/ZExLoPE

gsap.from()

This method animates the element from the values specified in the object parameter (vars) to the current/default values. It acts as the reverse of the to method.

  gsap.from('.circle', 3, {
     y: 200,
     borderRadius: '50%',
     backgroundColor: 'orange',  
  });

The above code will animate an element with the class name circle along its y-axis from having a border-radius of 50% and a background-color of orange to its default values.

https://codepen.io/ToluAdegboyega/pen/LYdxrLe

gsap.fromTo()

This method allows you to specify both the starting and final values. This is done by using two objects which represent these values respectively. It is a combination of both the from() and to() methods.

  gsap.fromTo('.block-circle', 3, {
      borderRadius: '8px',
      backgroundColor: 'purple',
    },
    {
      borderRadius: '50%',
      backgroundColor: 'orange',  
    }
  );

The above code will animate an element with the class name block-circle from having a border-radius of 8px and a background-color of purple to a border-radius of 50% and a background-color of orange.

https://codepen.io/ToluAdegboyega/pen/VwXPdVE

Exploring GSAP vars properties

It is also important to note that other than CSS properties, there are other properties that can go inside the vars object parameter and some of them are:

delay: The amount of delay in seconds before the animation should begin.
paused: This is a Boolean and if true, the animation will pause itself immediately upon creation.
repeat: The number of times that the animation should repeat after it plays for the first time.
yoyo: This is a Boolean and if true, the tween appears to go back and forth (forward then backward).

https://codepen.io/ToluAdegboyega/pen/wvmgxpo

Timeline

A Timeline is a container for multiple Tweens. Timeline lets you chain Tweens together. With a Timeline, all the Tweens are executed by default one after the other, unless set otherwise, with no need to use delays on the individual Tweens. Making use of Timeline is an easier method as using delays for sequencing could make your animation harder to maintain, especially in more complex animations.

A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would be far more cumbersome because you'd need to use a delay for every animation. - GSAP Timeline Docs

A Timeline can be created using the following format:

const timeline = gsap.timeline();

timeline
.from('element', {})
.to('element', {});

https://codepen.io/ToluAdegboyega/pen/QWmdBzO

Plugins

GSAP makes available plugins that can be used to create complex and exciting animations with a few lines of intuitive code. Some of the most popular GSAP plugins include: ScrollTrigger, DrawSVGPlugin, and MorphSVGPlugin amongst others. For a full list of official GSAP plugins, check out the plugins page.

In order to make use of a GSAP plugin, you will need to register it to the GSAP core by using the format below at the top of the file you want to use the plugin:

import { PluginName } from 'gsap/PluginName';

gsap.registerPlugin(PluginName);

ScrollTrigger

In this post we'll be focusing on a powerful GSAP plugin called ScrollTrigger. ScrollTrigger can be used to create amazing scroll-based animations with minimal code. It can also be used to trigger anything scroll-related.

The below code is used to register the ScrollTrigger plugin:

import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.to('element', {
  x: 200,
  scrollTrigger: 'element',
})

The above code animates an element 200px on the x-axis when the element is in view once.

https://codepen.io/ToluAdegboyega/pen/PoRpyPe

The ScrollTrigger plugin can be used to create a custom scroll bar like the example below amongst other mind-blowing animations.

https://codepen.io/ToluAdegboyega/pen/wvmJYxZ

Conclusion

In this post, we’ve covered how to get started with using GSAP to create stunning animations in your Vue app.

While GSAP has so many useful features, it can be intimidating to get started, but once you’ve the understood the basics, you'll be creating complex animations in no time.

GSAP has quite an extensive and accessible documentation that covers features not mentioned in this post and very active forums that I have personally benefitted from!

Thank you for reading and I hope you found this post helpful. 💫

Decision Making in JavaScript

Tolu Adegboyega — Tue, 16 Nov 2021 10:45:53 GMT

When writing code, we often need to handle different decisions and execute specific actions based on certain conditions. For example, if the time is between 6am and 12noon, display 'Good Morning!'.

Conditional statements help to achieve this. In this post, we'll be exploring the different types of conditional statements and logical operators in JavaScript.

If...else Statements

The if statement executes a block of code if a specified condition is met—that is, the condition in the parentheses evaluates to true.

const time = new Date().getHours();
// the above gets the time in a 24-Hour format

if ( time < 18 ) {
   console.log('Good Day 🙂');
}

The else statement executes a block of code if a specified condition is not met—that is, the condition evaluates to false.

if ( time < 18 ) {
   console.log('Good Day 🙂');
} else {
   console.log('Good Evening 🌚');
}

The else if statement is used to specify some new condition(s) if the first condition evaluates to false. There can be as many else if statements as necessary. A default else statement can be optionally added after the else if statement(s) to run if none of the conditionals evaluate to true.

if ( time <  12 ) {
   console.log('Good Morning! 🌞');
} else if ( time < 18 )  {
   console.log('Good Day 🙂');
} else {
   console.log('Good Evening 🌚');
}

The syntax of an if...else statement is:

if ( conditionOne ) {
  // block of code to be executed if conditionOne is true
} else if (conditionTwo ) {
  // block of code to be executed if conditionOne is false and conditionTwo is true
} else {
  // block of code to be executed if conditionOne is false and conditionTwo is false
}

Switch Statements

A switch statement has an expression which is compared with values of each case clause and if a match is found, the code associated with the case is executed. The break keyword indicates the end of a case. If no case matches but a default clause is included, the code inside the default will be executed.

switch (expression) {
    case value1:
        // code to be executed
        break;
    case value2:
        // code to be executed
        break;
    default:
        // default code to be executed
        break;
}

switch statements can be used as an alternative to if... else statements especially if there are many conditions with a precise value to execute. It is considered a more concise way of writing conditionals.

const season = 'harmattan';

switch (season) {
    case 'rainy':
        console.log('Ready your umbrellas.');
        break;
    case 'harmattan':
        console.log('Dusty 😷');
        break;
    case 'dry':
        console.log('Put on the air conditioner.');
        break;
    default:
        console.log('Climate change is real.');
}

//Output: Dusty 😷

Ternary Operators

The ternary or conditional operator tests a condition and returns one value if it is true, and another if it is false. The ternary operator is usually used as a shortcut for the if statement.

Syntax:

condition ? expressionOne : expressionTwo;

If the condition before the ? evaluates to true, execute the code in expressionOne. If the condition evaluates to false, execute the code in expressionTwo.

const score = 85;

score > 50 ? console.log('Good job 🎉') : console.log('Try again ☹');

// Output: Good job 🎉

Logical Operators

Logical operators are used to compare values and the result of the comparison is either true or false. There are three types of logical operators.

They are—AND &&, OR ||, and NOT !.

The AND && operator returns true if the operands to the left and right evaluate to be true.

2 > 1 && 1 < 2; // true
true && true; // true

1 > 2 && 2 > 1; // false
false && true; // false

The OR || operator will return true if one of the operands is true.

2 > 1 || 1 < 2; // true
true || true; // true

1 > 2 || 2 > 1; // true
false || true; // true

The NOT ! operator reverses the value of a Boolean.

2 > 1 && 1 < 2; // true

!(2 > 1 && 1 < 2); // false
!(true); // false

Logical operators can be used together with if...else statements.

const age = 20;
const emptyAccountBalance = false;

if (age >= 15 && emptyAccountBalance ) {
  console.log('Can buy alcohol.');
} else {
  console.log('Cannot buy alcohol.');
}

// Output: Cannot buy alcohol.

const age = 20;
const emptyAccountBalance = false;

if (age >= 15 || emptyAccountBalance ) {
  console.log('Can buy alcohol.');
} else {
  console.log('Cannot buy alcohol.');
}

// Output: Can buy alcohol.

const age = 20;
const emptyAccountBalance = false;

if (age >= 15 && !emptyAccountBalance ) {
  console.log('Can buy alcohol.');
} else {
  console.log('Cannot buy alcohol.');
}

// Output: Can buy alcohol.

Conclusion

Decision-making in programming is as important as it is in our day-to-day lives. Conditional statements provide us with logic for executing blocks of code based on different conditions in order to obtain the desired output.

Thank you for reading and I hope you found this post helpful. 💫

A Beginner's Guide to Open Source

Tolu Adegboyega — Tue, 19 Oct 2021 10:07:02 GMT

Contributing to open source can be daunting for a lot of people, at least I know it was for me. Although I wanted to contribute to open source, I was not sure how to go about it. I finally took the plunge during Hacktoberfest 2021 and made my first open source contribution, and you can too.

What even is Open Source? 🤔

Open Source Software(OSS) is software with source code that anyone can inspect, modify, enhance and distribute under a license. A lot of the technologies that we use today, such as Android, Firefox, Git, Linux, TypeScript and VLC media player are built on OSS.

Open source code is usually developed and maintained collaboratively by a community of its users. Although the primary goal of open source projects is to create valuable and accessible open source software, it is also beneficial to its contributors. Benefits of contributing to open source include:

Honing one's technical skills by getting the opportunity to work on real-world projects.
Improving soft skills such as communication and giving/receiving feedback.
Meeting new people and expanding your network.

…and Hacktoberfest? 🧐

Chances are that you've seen the word 'Hacktoberfest' come up a lot especially in the month of October. While contributions to open source can be made any time, Hacktoberfest is a month-long celebration of open source hosted by DigitalOcean. Hacktoberfest aims to promote, celebrate and encourage people to contribute to open source. It is a great time to get started with open source contributions.

To participate, sign up on the official Hacktoberfest website between October 1st and October 31st. This ensures that your contributions count. A participant has to make four(4) valid pull requests in participating GitHub or GitLab repositories. Participating repositories are labelled hacktoberfest, alternatively, merged pull requests can also be labelled hacktoberfest-accepted to participate. Once these 4 pull requests are merged into the repositories and pass the fourteen(14) day review period, a participant is eligible to win swags which include, a T-shirt and limited edition stickers or could choose to plant a tree!

Finding Projects to Contribute To

This is where it might get a little intimidating at first as a lot of projects can seem complex. Do not fret, there are a number of ways to find projects that are of interest to you and are on your skill level to ease you in.

Developer Communities

Developer communities provide a platform for developers to learn, interact, share ideas, support each other, stay up-to-date and grow. These communities can be very beneficial to starting your open source journey.

Women Who Code Frontend started a dedicated study group project to learn about front end technologies as well as how to collaborate on an open source project.

This was my first open source contribution. The community has been super open(pun fully intended 😏), helpful and supportive. In addition to creating the study group project, a blog has also been created and webinars organized weekly through out the month of October to discuss open source! I honestly couldn't have asked for a better first contribution as it helped boost my confidence to further participate.

Social Media and Online Resources

For my second contribution, while browsing through the hacktoberfest hashtag on Twitter, I saw several tweets calling for contributors to open source repositories. I soon found one that aligned with my interest.

Subsequent contributions have come from goodfirstissues.com, this is a website that aggregates beginner-friendly, open source repositories looking for help. You can filter according to language, label and repository, making it even easier to find issues to work on.

Other websites to find repositories to contribute to include:

codetriage.com
goodfirstissue.dev
up-for-grabs.net
GitHub

GitHub is a great way to find open source projects to work on. You can take advantage of GitHub's advanced search feature and prefixes to improve your search.

Search can be filtered based on many factors such as issue label, language, number of forks and so on. Labels to search for as a beginner include help-wanted , first-timers-only or good-first-bug.

Contributing to Your First Project

Contributing to open source is not limited to writing code. You can contribute by improving the documentation, opening issues, or labeling pull requests.

Most projects will have guidelines specific to the project. These can usually be found in the README.md or CONTRIBUTING.md file. Make sure to read the whole document thoroughly and be sure that you're following guidelines that project maintainers have specified.

After choosing an open source project to work on, there are a few ways you can decide on what you would like to contribute to the project. You can work on pre-existing issues which can be found under the Issues tab on GitHub.

If you find an issue that you're interested in, it is best to comment on the issue outlining how you'd go about implementing a solution. In some cases, you can ask to be assigned the issue. It is important to be polite in your communication.

You can also create a new issue based on a bug you've noticed or a feature you think needs to be implemented or improved upon. Keep in mind that the decision to approve your new issue is ultimately at the discretion of the project maintainer.

Now that you've decided on an issue to work one, you can start the process of contributing.

Fork the Repository

This will make a copy of the original repository. That means you can make any changes you want to the forked repository, without affecting the original one.

Once you click the Fork button, GitHub will redirect you to your copy of the original repo.

Clone your Forked Repository

Click the Code button and copy the URL that's provided.

On your local machine, run the following Git command:

git clone https://github.com/<your_profile_name>/<repo_name>.git

This clones the repository on your machine so you can work on it. You can then open the repository in your code editor.

Create a Branch

Before you start working, create a separate branch that will hold all the code that you add or edit.

You can create a branch by running the following Git command:

git checkout -b <branch_name>

Make Changes

Now you can make code changes, update the documentation, organize the files, or anything else! All contributions are important and valuable.

Commit and Push your Changes

Once you are satisfied with your code, you can commit and push your changes to GitHub.

git add .
git commit -m 'commit message'
git push -u origin

Create a Pull Request

Click on the New pull request button under the Pull requests tab in your forked repository on the GitHub. GitHub will automatically compare your changes to the original repository. You will also be shown a text editor. Fill this in with the relevant information needed to understand the work you've just done. Click the Create pull request button.

Voila! You have made changes and just created a pull request. 👏🏾

What Next?

Wait for the project maintainer(s) to review your changes. Upon review, you may be requested to make changes to the work you've done. If all goes well, your pull request will be approved and the project maintainer(s) will merge your contributions into the codebase. You'll officially become an open source contributor! 🎉

Conclusion

Open source contribution for me has been an amazing and rewarding learning experience. I hope this post helps to give a better understanding of open source and inspires you to get involved. It might take a few tries to fully put your skills to use, but there is a place for everyone willing to contribute to open source.

Looking forward to making more contributions!

Getting Started with CSS Animation

Tolu Adegboyega — Wed, 15 Sep 2021 11:05:16 GMT

Animation adds personality and flair to interfaces, it is an effective and fun way to draw the attention of users and captivate them. The CSS animation property allows us to animate an element from one style to another style. It is flexible and dynamic.

CSS animation is made up of two parts:

Keyframes.
Animation properties.

Keyframes

Keyframes is used to define how an animation will work. It executes the animation in a sequential manner. Interfaces with multiple animations may have multiple keyframes.

@keyframes movingBall {
  0% { 
    left: 0px;
  } 
  25% { 
    background: orange;
    border-radius: 0;
  } 
  75% { 
    background: maroon;
  } 
  100% { 
    background: pink;
    left: 300px;
  } 
}

In the code example above, movingBall is the name of the animation. Each stage of the animation is represented as a percentage. Where 0% is the start and 100% is the final stage with intermediate stages in between. Also included are the style properties for the various stages.

Animation Properties

After defining @keyframes, the animation properties must be added in order for the animation to work. This binds movingBall to an element. The two basic properties we use are the animation-name and animation-duration properties.

The animation-name is the name of the animation created in keyframes and animation-duration specifies the duration of the animation, it is defined in seconds.

https://codepen.io/ToluAdegboyega/pen/KKqqVzz

Apart from the animation-name and animation-duration properties, there are other important properties as well. They include:

animation-timing-function : This property defines the pace of the animation. The animation-timing-function property can have the following values:

ease - The animation starts slowly, then fast, then ends slowly again. This is the default value.
linear- The animation maintains the same speed from start to end.
ease-in - The animation has a slow start.
ease-out - The animation has a slow end.
ease-in-out - The animation has a slow start and end.

https://codepen.io/ToluAdegboyega/pen/LYLLNjY

animation-iteration-count : This property defines the number of times an animation should run. It takes in a number value. The default value is 1. A value of infinite repeats the animation infinitely which means the animation keeps on running forever.

https://codepen.io/ToluAdegboyega/pen/WNOOwZd

animation-direction : This property defines the direction of the animation. The animation-direction property can take any one of these values:

normal - The animation is played forward. This is the default value.
reverse - The animation is played in the reverse direction, that is, backwards.
alternate - The animation is first played in the forward direction and then in the backward direction.
alternate-reverse - The animation is first played in the backward direction and then in the forward direction.

https://codepen.io/ToluAdegboyega/pen/YzQQqYq

animation-delay : This property specifies the delay before starting the animation. It is defined in seconds.

https://codepen.io/ToluAdegboyega/pen/jOwwqYx

animation-fill-mode : This property specifies what values are applied by the animation before and after executing. The animation-fill-mode property can have the following values:

none - No style is applied to the animation before or after it executes. This is the default value.
forwards - The element will retain the same animation properties of the last keyframe after the animation completes.
backwards - The element will retain the same animation properties of the first keyframe after the animation completes.
both - The animation will follow the rules for both forwards and backwards.

animation-play-state : This property allows you to play or pause the animation.

Animation Shorthand

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];

https://codepen.io/ToluAdegboyega/pen/QWggNQm

Wrapping Up

CSS animation can go a very long way in creating a more enjoyable experience for users, and the possibilities of animations that can be created are endless.

It is important to note that while there are a lot of animatable CSS properties, not all CSS properties can be animated as at writing this post. Here is a comprehensive list of CSS properties that can be animated.

Thank you for reading and I hope you found this post helpful. 💫

Beyond Divs: Semantic HTML

Tolu Adegboyega — Mon, 16 Aug 2021 11:01:38 GMT

A good number of websites are built with code written like the snippet below—and while this might 'get the job done', it is much more beneficial to write well structured, semantic HTML.

    <div id="header">
        <div class="header-main">Welcome to my website!div>
        <div class="header-text">Introductiondiv>
    div>

    <div id="nav">
         <a href="/">Homea>
        <a href="/about">Abouta>
        <a href="/contact">Contacta>
    div>

    <div id="article">
        <div class="article-header">
            <div class="article-header-title">Titlediv>
            <div class="article-header-subtitle">Subtitlediv>
        div>

        <div class="article-section">
            <div class="article-section-text">Theorydiv>
        div>

        <div class="article-footer">
            <div class="article-footer-text">Author Informationdiv>
        div>
    div>

    <div id="main-side">
        <div class="main-side-heading">Get To Know Us Betterdiv>

        <div class="main-side-section">
            <div class="main-side-section-text">Partnersdiv>
        div>
    div>

    <div id="main-footer">
        ...
    div>

What is Semantic HTML?

Semantic simply refers to the correct meaning of words.

Semantic HTML, also referred to as semantic markup, therefore is HTML code that uses tags whose names convey their meaning and describe the content inside them. Its description is clear to the browser, developer and anyone else reading it.

Non-semantic tags such as the

and tags are generic and do not bear in their names the purpose they are meant to serve. While fine to use in some cases, if a semantic tag is available for a specific use, it is best to use it before resorting to a non-semantic tag.

Importance of Semantic HTML

The benefits of writing semantic markup include:

Accessibility

If you want your website to be accessible to all, semantic HTML is a must. Visually impaired users rely on screen readers to verbally describe what is on a page, proper use of semantic HTML elements allow these screen readers to communicate your content more accurately.

Codebase Maintenance

Semantic HTML provides a standardized markup convention. This helps to make code readable when more than one developer might have to work on a codebase. The code is easier to understand and as a result, there is improvement in the work flow.

Search Engine Optimization (SEO)

Writing semantic code provides a competitive advantage in SEO. SEO is the technique of optimizing web pages and their content to be easily discoverable by users searching for relevant terms. With the ever-growing number of websites, this is very important.

Search engines consider the content of a semantic tag as important keywords to influence the search rankings of a webpage.

Semantic Tags in HTML5

Semantic tags such as

 and  have always existed in HTML. However, HTML5 introduced even more useful semantic tags. Some of the tags are: 

 
According to the  HTML5 specification : The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. 
That is, the content inside of an 
 tag should be able to stand alone or be reused outside of your webpage and still make sense. 



The 
 tag is used for information that is not a part of the primary content of the page, but indirectly related. For example, related links, definitions, author information, or pull quotes. 
Note: Although, the tag does not automatically render as a sidebar, it is frequently styled as one. 



The 
 tag is used to identify the footer—bottom part of a page, document, article, or section. 
It typically contains information about the author of the section, copyright data or links to related documents. 



The 
 tag contains introductory information of the related content. 
The 
 tag can be used as a header for the entire page, but can also be used as the header for an article, section or any other piece of content. The  tag however cannot be used in the ,  or another  element. 



The 
 tag represents the primary content of the document body. Its content should be unique and expand on the topic of the page. 
There cannot be more than one visible 
 element in a single document—others, if present, must be hidden with the  hidden attribute . Also, the  element must not be placed in the , , ,  or  tags. 



The 
 tag contains the major block of navigation links and details such as table of contents and menu for the current or another page. 
It is not necessary to place all the page's links within this tag. For a secondary menu, a 
 tag can be used. 

 

The 
 tag is used to group related content together. It helps to split the page into sections and subsections. 
The 
 tag should only be used if there is no other, more specific semantic tag available. It must almost always contain a heading. 
Conclusion
A well structured, semantic HTML code should like this: 
    <header>
        <h1>Welcome to my website!h1>
        <p>Introductionp>
    header>

    <nav>
         <a href="/">Homea>
        <a href="/about">Abouta>
        <a href="/contact">Contacta>
    nav>

    <article>
        <header>
            <h1>Titleh1>
            <h2>Subtitleh2>
        header>

        <section>
            <h4>Theoryh4>
            <p>Paragraph 1p>

            <h5>Subheadingh5>
            <p>Paragraph 2p>
        section>

        <footer>
            <h5>Author Informationh5>
            <p>Paragraphp>
        footer>
    article>

    <aside>
        <h2>Get To Know Us Betterh2>

        <section>
            <h4>Partnersh4>
        section>

        <section>
            <h4>Testimonialsh4>
        section>
    aside>

    <footer>
        ...
    footer>
I think that you'd agree with me that this is much more readable than the previous code. 
Semantics is a great feature of HTML that all developers should adopt for best practices. 

Thank you for reading and I hope you found this post helpful. 💫

*Cover image credit: https://seekbrevity.com/semantic-markup-important-web-design/



Techniversary
Tolu Adegboyega — Tue, 20 Jul 2021 08:00:40 GMT

You can, you should, and if you are brave enough to start, you will. - Stephen King.

On this day a year ago, I started my first job as a Frontend Developer. 
Le Début
August 2019, I was redeployed to Ibadan, Nigeria for my mandatory service year. I reconnected with a former classmate there and while catching up, she mentioned her new interest in tech as a career path—there has been quite a lot of talk about opportunities in tech in recent times and although I've always been interested in the internet and technology in general, I hadn't really considered it as a path for me.
This time though, I was curious. I decided to delve into what these career opportunities were actually about.  After numerous articles, videos and other resources, I had a better understanding. Also, something had caught my eye—Frontend Development. I was quite hesitant because I had a not-so-pleasant experience with a programming course while I was at university, but I liked that this involved bringing amazing designs to life and creating interfaces that people would actually interact with.
Self-Learning
I began to research frontend development pathways and courses, and decided to go for the free ones first. If I ended up not liking it, I really didn't have anything to lose. Also, I was a corps member so I couldn't afford most of the paid courses anyway.
  
I started with  Codecademy and freeCodeCamp. I took courses on coding fundamentals, HTML and CSS. I soon completed my Responsive Web Design Certification.
The next step was to learn JavaScript; which I was quite excited to take on as I had heard a lot about how it wasn't a walk in the park.  This was towards the end of 2019, but things didn't go as planned. Juggling learning and my job at the time wasn't easy, I had to take a break.
Then the pandemic hit. Along with the rest of the world, I was forced to remain at home. I picked up from where I stopped with my JavaScript Algorithm and Data Structures Certification. I also started working on creating my portfolio and other side projects to further hone my skills.
Getting My First Job
I set up my portfolio, put together a résumé and I was ready to begin applying. I soon discovered that there weren't a lot of entry-level positions or internships for someone who didn't already have a lot of experience. 😔
It was dreary. The end of my service year was also drawing close and I needed to have a plan.
I decided to start applying for the jobs requiring a bajillion years of experience and skills that I wasn't 'qualified' for.  What's the worst that could happen?
About three weeks before the official end of my service year, I applied for a Frontend Developer role I saw on one of the numerous job sites I frequently visited.
I got called for an interview some days later.
Then they wanted to proceed with a technical interview.  This was followed by a coding challenge.
Four days to my passing out ceremony, I was made an offer.
 
The Road Ahead
Although not without its challenges, my journey has been enlightening. I've met and worked with some of the most brilliant and helpful people in the short time I've been here. I'm genuinely grateful for the opportunity.
I still have a long way to my goals and a major key to achieving them is to keep learning. Either by building, reading, watching or any other way.
And it's one of the reasons I've also started this blog. I hope that by documenting my journey, I can share knowledge and also reinforce mine. 🧡

Tolu's Blog

Improving SEO with Vue-Meta

What is Vue-Meta?

Why Vue-Meta for SEO?

Setting Up Vue-Meta

Installation

Integration with Vue Application

Using Vue-Meta Across Different Pages

Updating Tags, Titles, and Descriptions

Implementing Open Graph and Twitter Cards

Conclusion

Improving SEO with React Helmet Async

What is React Helmet Async?

Why React Helmet Async for SEO?

Setting Up React Helmet Async

Installation

Wrapping Your Application with HelmetProvider

Using React Helmet Async across Different Pages

Importing Helmet

Updating Tags, Titles, and Descriptions

Implementing Open Graph and Twitter Cards

Conclusion

GreenSock Animation Platform (GSAP) x Vue

What is GSAP?

Setup

GSAP Concepts

Tween

Exploring GSAP methods

Exploring GSAP vars properties

Timeline

Plugins

ScrollTrigger

Conclusion

Decision Making in JavaScript

If...else Statements

Switch Statements

Ternary Operators

Logical Operators

Conclusion

A Beginner's Guide to Open Source

What even is Open Source? 🤔

…and Hacktoberfest? 🧐

Finding Projects to Contribute To

Developer Communities

Social Media and Online Resources

GitHub

Contributing to Your First Project

Fork the Repository

Clone your Forked Repository

Create a Branch

Make Changes

Commit and Push your Changes

Create a Pull Request

What Next?

Conclusion

Getting Started with CSS Animation

Keyframes

Animation Properties

Animation Shorthand

Wrapping Up

Beyond Divs: Semantic HTML

What is Semantic HTML?

Importance of Semantic HTML

Semantic Tags in HTML5

Wrapping Your Application with `HelmetProvider`

Importing `Helmet`