Happy New Year! 🎉🎆

If I’m being honest, I didn’t journal as much in 2024, so this is me trusting my memory to do its thing. Hopefully, it doesn’t fail me. 😂

Let’s get into it!

I ended my previous Year in Review, by quoting Bo Peabody:

“The best way to ensure that lucky things happen is to make sure a lot of things happen.”

Well, I took that to heart and did a lot — some of it intentional, some of it just trying to survive my final year of university.

Trying Times

After the storms of 2023 — losing my job, getting scammed, and everything that followed — I picked up the lessons, shared my experiences, and moved forward, believing firmly in Romans 8:28:

“…all things work together for good to those who love God, to those who are called according to His purpose.”

But I wasn’t prepared for everything that came in the first quarter. I don’t think I’d ever felt as exhausted or helpless as I did then.

I was broke — so broke that I went days without a proper meal. Just three months earlier, I had invested everything into a new laptop, and whatever little I had left went into buying data and aggressively applying for jobs.

I sent out applications daily — on LinkedIn, WhatsApp groups, Twitter — anywhere I could find an opportunity. I revamped my resume, optimized my portfolio, and landed a few interviews, but I kept falling short of the final stages. At some point, I considered selling my laptop and giving up on tech altogether. That’s how bad it got.

Meanwhile, my first-semester exams were ongoing, but I was barely prepared. Survival was my priority.

Desperate for income, I started taking on guitar recording sessions and small graphics design gigs within the university — designing FYB (Final Year Brethren) banners, dinner invitations, and other event materials. The pay wasn’t great (₦5K jobs weren’t exactly life-changing), but they helped me stay afloat.

By March, my partner pointed out that I was having frequent mood swings 😂. Not having money hits hard, bruh. In April, a few people even commented that I was losing weight — I knew exactly why.

To Focus on School or Tech?

Then, in May, things took a turn. Gigs started rolling in, one after another, as if God had strategically placed me in people’s minds. Or maybe it was some form of divine strategic positioning — a concept I’ll revisit later.

After months of rejection and struggle, I finally started getting well-paying gigs! But just as things were looking up, a new challenge arose: balancing tech with school.

I had neglected my final-year project for too long, and my supervisor wasn’t having it. In my mind, I thought, I’ll just rush everything and be fine. Oh, how wrong I was!

By June, mid-semester tests were here, and I was barely prepared. My grades reflected that. Honestly, I didn’t even spend much time in my department throughout the year. Sure, I attended most classes, but I’d leave immediately afterward to focus on work.

Lock in Season

From June to September, I worked like a machine running on sheer willpower. I was juggling three contract jobs at once, and it was a lot. Cherie called it “Extreme Sports” 😆

Then, in the first week of June, something incredible happened. I got a DM on LinkedIn from a recruiter at Gitroll. An employer was interested in my profile!

The interview went great — one of my favourite parts was explaining my thought process behind animations and micro-interactions in my projects (something I’m passionate about). A week later, I received an offer letter. Two weeks later, I officially started the job.

God did! 🙌

It’s been quite interesting, it feels like the job was curated for me, and am thankful for that. I get to provide great value while enjoying my work. But in the first few months, impostor syndrome hit hard. After months of struggling to land opportunities, it felt unreal to finally be in a position I hadn’t even applied for. “Do I really deserve this?” I often wondered.

Looking back, though, I realize it wasn’t just luck. The quality of my projects spoke for me, and my involvement in open-source projects helped position me as a strong candidate. But beyond strategy and effort, the way things aligned felt undeniably divine. God was really intentional.

Meanwhile, school became an unbearable weight. My final-year project hit setbacks, and at one point, it seemed like I wouldn’t graduate. But people stood by me — especially my parents 🤍. With their support, I overcame the challenges and resolved everything just in time.

Life After School

Fast forward to October — after my exams and final sign-out — I moved into my own apartment and started building my dream workspace!

I had always wanted to live alone, and now I finally could. 😄 But I quickly realized that post-university life can feel a little isolating. Thankfully, I enjoy my own company and loved ones visit often, so it’s not too bad.

Convocation and Baecation 🌹

Finally, in December, I graduated! 🥳 After eight years, the journey had finally come to an end.

This chapter of my life was filled with incredible friends, unforgettable experiences, challenges, and pivotal decisions — like switching departments, joining tech communities, and getting involved in church and music.

The last quarter of the year was the best. Plans I had envisioned for years finally became reality, and it all felt surreal.

I had promised myself last year that I would travel more, but I only left my state once — right at the end of 2024. But that one trip? Absolutely worth it. I spent an amazing time with my Cherie, and I look forward to more adventures ahead.

2024 in Highlights

Wins 🎉

• Landed a full-time job

• Graduated from university

• Moved into my own apartment

• Worked on exciting projects that went live

• Got myself a couple of gadgets and things that had been on my “To Buy” list for years

• Joined an amazing team and worked with incredible people

• Started building my dream workspace

• Achieved a 10x increase from my previous annual income

• Supported family & friends when they needed me most

• Explored a new city

• Expanded my library with new books

• Proved to myself that I could thrive with the resources I had at any given time

• Almost had a carryover in my final year but got it resolved.

• Finally got swag from Hashnode! 😄

Setbacks 🚧

• Didn’t upskill as much as planned (API Documentation, React Native, Tech Writing.

• Had to withdraw from a few gigs, disappointing some clients

• Faced multiple rejections from job applications which caused doubt in my abilities for a little while.

• Didn’t invest as much as I wanted to

• Didn’t read as many books as I had hoped

• Spent too much money eating out after moving — could’ve cooked more

Conclusion

2024 was a year of resilience, breakthroughs, and divine alignment. The struggles tested me, but the victories reassured me.

I’ve laid the foundation for 2025, and I believe it will be a year of massive growth — personally, professionally, and spiritually.

Here’s to a new year of building, thriving, and becoming! 🚀

However, I approached writing this year's review with a sense of hesitation and scepticism, given the challenges I faced in 2023, which is why it's arriving later than anticipated. Nevertheless, I'm committed to being transparent and accountable, both for my growth and for the opportunity to reflect on my journey in the future. So, here it goes.

While last year was marked by a mindset of a straight upward trajectory, as inferred from the title "To the Moon". Life, as I discovered, rarely follows a straightforward path to success.

This past year was a very "special" one because it was essentially a crazy rollercoaster ride, which is a metaphor that means it had its ups and downs. Mostly scary but yet exciting. 2023 taught me a lot of lessons about myself and people in general, and I will share some of those lessons and my experiences in this post. I do hope that you learn some valuable lessons.

A Promising Start

This year started with exams. I started writing exams on the 28th of December, and they ran all through January, so I was more focused on school and making sure that I got good grades. I had not studied for most of the semester (I like to crashread🤫)

I also quit a job I was working at in February because I wasn't growing and felt like I was wasting time there. Also, I was actively writing articles which sorted the bills, so I wasn't bothered.

Overall, the first quarter of 2023 was amazing. I was super energized and enthusiastic about what I'd accomplish. My work, finances, academics, and social life were all good.

Then it came...

The First Dip

My primary goal for the year was to buy a MacBook, specifically the 2020 M1 MacBook Pro, so I started working hard and saving towards it. By May, I had saved up $1k (~₦700k at the time) for it - a sum that filled me with pride and excitement as I anticipated treating myself. It was a significant amount, one that I had never had at my disposal before, and I relished the sense of accomplishment.

However, my excitement was short-lived. Shortly after, I fell victim to an elaborate scam, losing all the money I had painstakingly saved. The setback was sudden and devastating.

"Progress happens too slowly to notice, but setbacks happen too quickly to ignore." — Morgan Housel

Initially, I found it difficult to accept the reality of the situation and chose to ignore it, focusing instead on my mid-semester tests and approaching exams in June. Despite applying for writing gigs to supplement my income during this period, I encountered a notable lull in opportunities. It was the first time in my writing career that I went an entire month without securing any gigs. Fortunately, I had some savings stored elsewhere, providing a temporary buffer.

July came, and I still hadn't gotten any gigs, so I decided to learn MongoDB and work on some projects. I had been too focused on writing for months and didn't code as much as I wanted.

Shege is a native Yoruba term used to describe hardships, and damn, I saw shege this year.

I was in denial for a long time, thinking "People can't be that heartless. Right?". At some point in July, I started to get low on cash and came to the fact that I'd been scammed hard, I opened up my goal tracker in Notion and added only one thing: "Survive".

This was very different from the preceding months where the monthly goals and achievements were filled up. At this point, I had little motivation and was trying to pick myself back up. I was tired and didn't want to do anything anymore.

More Shege

During this challenging time, I confided in a few close friends about how the last quarter went, and their support and encouragement helped me get through my "Anger" phase. They also helped by sending relevant job opportunities.

Towards the end of July, I landed a contract job that initially seemed promising. Not just because I needed a job urgently, but because of how I got it. The client stumbled upon my portfolio and said she wanted features in one of my projects implemented on her project, so I accepted the offer and got on board.

What followed was a whirlwind of intense labour over the next four months. My schedule was consumed by work, leaving little to no time for socializing, engaging on social media, or taking care of my health. Why you ask? The workload was too much, and it didn't help that my laptop was slow. I was also trying to make up for the money I lost, so I kept on pushing and grinding.

It got to a point in August, I would just cry for no particular reason, which is extremely rare for me. I would keep saying "I am just trying my best". I'd be honest with you. Tech is hard, and harder for a Nigerian student without financial support, data resources or a good laptop, trying to hustle way through tech. In the end, the pay wasn't quite worth the stress and time spent.

Healing

So, I decided to quit and terminate the contract because I was losing my mind. After that, I travelled to Ogun for the RCCG International Youth Conference in October to clear my mind, see my friends, and fellowship with other young believers. The four days spent there were a balm to my soul. In those moments, I felt the reassuring presence of God, affirming that brighter days were indeed on the horizon.

Upon my return, I decided to take some days off to relax and wind off. Went through my goals for the year and decided to take on some of them. So, I bought a new laptop, started reading books more frequently, started weight training and became more intentional about prayer.

I also joined a couple of friends in building Concealed, and it's been cool so far. You can check it out, as it has a lot of cool features you can explore.

In all aspects of my life, I have been the recipient of God's grace and provision. Towards the end of the year, I received a few gigs through referrals that allowed me not to end the year completely broke 😂. I also received offers to work at two startups, however, the offered salaries didn't align with my values and worth. Recognizing the importance of maintaining my motivation and well-being, I chose to decline those offers. It was a decision rooted in self-respect and a commitment to prioritize my mental and emotional health over monetary gain.

Lessons Learned

• Just because you can purchase it doesn't mean you can afford it. While I was recovering from the loss, I was able to secure some other gigs, which paid a decent amount of money, that could allow me to buy some items on my wishlist for the year. But I learned that's just a way back to the trenches 😬 I learned this from Morgan Housel's Psychology of Money.

• Speak up for yourself. If you are highly agreeable or a people-pleaser, people will take advantage of you and do it over and over again with no remorse. So, please learn how to communicate your wants, and put yourself first, rather than making people treat you anyhow.

• Save for the rainy days. This is something everyone says, but you really should take it seriously. Sometimes, your savings might just be the one to save you, to be honest. One solid piece of advice I learned is to have at least 6 months' worth of savings such that even if you were to lose your job, you'd still be fine.

• "Getting money requires taking risks, being optimistic, and putting yourself out there. But keeping money requires the opposite of taking risks. It requires humility, and fear that what you’ve made can be taken away from you just as fast." — Morgan Housel

• If a deal sounds too good to be true, it probably is. Of course, if you get a good job offer, I'm not saying it's untrue, but be very smart and rational before you agree to do any business. Always, peruse contracts well before signing.

• As a freelancer, collect some payment upfront before starting any project. Some folks are just out there to waste your time.

• Invest in self-improvement by reading books, honing your existing skills, and acquiring new ones. Save and invest wisely, making decisions that will benefit your future self. Engage in activities that bring you joy and fulfilment, ensuring that your actions today contribute to a brighter tomorrow.

The Bright Side: Wins

• I grew as a Frontend Engineer. Had more experiential knowledge of integrating APIs, learning the intricacies of business logic and improving my efficiency in crafting pixel-perfect designs. Worked almost exclusively with React, NextJS and TypeScript.

• I spent a lot of quality time with my loved ones and had a lot of fun too.

• Started learning React Native, and it's interesting so far. Can't wait to build cool apps soon.

• Wrote 18 paid articles and 5 articles on my blog.

• I finally started building my library! I bought 10 books on Christian faith, Psychology, and Finance.

• Although I planned to read at least one book in a month, I ended up reading just 5 in total 😅. Yes, it's a win for me 😌

• I bought a sleek laptop with all the specs I need...for now 🙃

• I had a set of dumbbells made for me, which helped me work out more. I'll confess, I'm tempted to work out my arms more.

• I got myself a brand new guitar and posted a video on IG(after so long 😂)

• The experience of the year helped to build my resilience.

• Lastly, I'm grateful that I am still alive. When there's life, there's hope.

Setbacks

• I let laziness and procrastination get the best of me.

• Aside from all the shege I mentioned earlier, I also made a loss of ~1k CAD from a client who just wanted to get work done without paying 🤦🏾‍♂️, but that's a story for another day.

• I didn't build some of the cool project ideas I wanted to.

• Even though I had so many article ideas, I didn't write as much on my blog and Freecodecamp. Those ideas are still in my drafts, so I'd find time to work on them.

• I applied to a lot of jobs, and consequently received tons of rejection emails.

Plans for 2024

In 2024, I'll approach my goals with a sense of flexibility rather than rigid absolutes, acknowledging that not every goal from the previous year was achieved. With that in mind, here are some aspirations for the new year:

• Securing a full-time job in either Frontend roles or Technical writing, and I welcome any referrals! 😃

• Explore new places and travel more.

• Collaborate with amazing people, devs and writers.

• Delve into API documentation to enhance my technical skills.

• Explore more on mobile development.

• Try my hands on some Backend technologies(Rust, Go)

• Advocate for my achievements and skills more assertively.

• Work on being consistent, despite the demands of my final year in uni and other responsibilities.

Conclusion

I extend my deepest gratitude to the following individuals who stood by me during the toughest of times: my girlfriend, my parents, Vee, Peace, Promise, Anu, Israel, Cess, and Vicky. Your unwavering support and love mean the world to me 💖

To those who have spoken on my behalf and offered encouragement throughout my tech journey, I am sincerely grateful for your guidance and belief in me.

I am sincerely hopeful for the future. I believe that 2024 will be amazing. I'd leave this quote with you, which I aim to imbibe this year.

"The best way to ensure that lucky things happen is to make sure a lot of things happen." — Bo Peabody

Here's to a year filled with abundance and success. Cheers to making great things happen! 🥂

Thank you for reading! If you find this post insightful, kindly like, drop a comment and share it with someone who might need it.

Happy New Year! 🎉🎉

Web scraping has emerged as a powerful solution. With its ability to extract data from websites, web scraping has become an indispensable skill for data-driven decision-making.

Among the myriad of web-scraping tools available, Playwright, an automation library, shines as an exceptional choice. Its versatility and ease of use have made it a favorite among developers looking to harness the potential of web scraping efficiently.

In this post, I'll walk you through the process of getting started with web scraping using Playwright. We'll cover setting up the environment, learn the basics of Playwright, and demonstrate how to perform common web-scraping tasks with practical examples.

What Is Playwright?

Playwright is an open-source Node.js library designed to automate and interact with web browsers. It was created by Microsoft's web platform team and is particularly well-suited for headless browser automation and web-scraping tasks. It provides a high-level API that makes it easier for developers to navigate, interact, and extract data from web pages.

Key Features of Playwright

• Cross-browser support—Playwright supports all modern browsers, including Google Chrome, Firefox, Microsoft Edge, and Safari with WebKit.

• Headless and headed modes—Playwright can operate in headless mode (without a visible browser window) or headed mode (with a visible browser window). This flexibility enables debugging and monitoring when necessary.

• Powerful element selection—Playwright's advanced selectors make it easy to locate and interact with elements on a webpage using various strategies like accessibility attributes, CSS selectors, and text matching.

• Auto-wait APIs—Playwright offers intelligent waiting mechanisms that ensure the webpage has loaded completely before proceeding with interactions.

• Device emulation—With Playwright, you can emulate various devices, such as smartphones or tablets, to scrape mobile-specific data or test website responsiveness.

• Scalability—Playwright can handle multiple browser instances concurrently, making it a scalable solution for large-scale scraping tasks.

• Cross-language—Playwright is available in multiple languages such as JavaScript, Typescript, Python, and .NET, making it accessible to a wide range of developers.

• Cross-platform—With Playwright, you can test and automate web applications on Windows, macOS, and Linux operating systems locally or on CI.

Prerequisites

To get started with Playwright, you need to have the following installed on your local machine:

• Node.js—Playwright is a Node.js library, so you'll need Node.js and npm (Node Package Manager) installed. You can download the latest version of Node.js from the official website and follow the installation instructions for your operating system.

• Code editor—You'll need a text editor to write your JavaScript code. Popular options include Visual Studio Code, Sublime Text, or Atom. I recommend using Visual Studio Code.

Setting Up the Environment

Once you have the prerequisites installed, open your terminal and run the following command to create a new directory for your project. Navigate to this directory using the cd command:

mkdir playwright-web-scraping

cd playwright-web-scraping

Next, initialize a new Node.js project by running

npm init -y

This will create a new package.json file in your project directory.

Installing Playwright

Now you can install the Playwright package by running the following command:

npm install playwright

With Playwright and the required dependencies installed, we're ready to start scraping the web!

Basic Web Scraping with Playwright

To start off, let's briefly see how to use Playwright for browser automation. This will help you understand the basics of interacting with web pages programmatically.

Create a new JavaScript file, index.js, in your project directory. Add the following code to the file:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.waitForTimeout(5000);
  await page.screenshot({ path: 'google-home.png' });
  await browser.close();
})();

In this example, we import the chromium object from Playwright, which allows us to control the Chromium browser. We then use an asynchronous IIFE (immediately invoked function expression) to define our scraping script.

To run the script, execute the following command in your terminal:

node index.js

If everything goes well, you'll see that the script performs the following actions:

1. It'll open a new Chromium browser window. Since we set the headless option to false, a new browser window will pop up when the script is executed. Setting it to the default value of true will run the script in headless mode, i.e., without a visible browser window.

2. The browser will navigate to the Google homepage.

3. It'll wait for five seconds using the waitForTimeout() method. This gives the website some time to load and display content before taking a screenshot.

4. After waiting, it'll take a screenshot of the current page and save it as google-home.png in the project directory.

5. Finally, it closes the browser.

You should see a new browser window briefly appear. Navigate to https://google.com, take a screenshot, and then close the window. The screenshot google-home.png will be saved in your project directory

This simple example demonstrates the basic workflow of using Playwright to automate browser actions.

Now, let's move on to web-scraping tasks!

Scraping Text From a Webpage

Let's start with a simple example of extracting text from a webpage. For this example, we'll extract the main heading on Proxyrack's homepage.

Add the following code to your index.js file:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.proxyrack.com');
  const headingText = await page.$eval('h1', (el) => el.textContent);
  console.log(headingText);
  await browser.close();
})();

Playwright provides a number of locators to find elements on a webpage. In this example, we used the page.$eval() method to locate and extract the text content of the first h1 element on the page. The method takes two arguments: a selector identifier and a function. The function receives the element as an argument and returns the result of the function—in this case, the text content of the element.

Upon running the script, you should see the following output in your terminal:

Playwright also lets us use CSS selectors to locate elements. Let's see how to do so using the element's class.

Navigate to the page in your browser and right-click on the heading. Select "Inspect" from the context menu to open the browser's developer tools.

Alternatively, you can use the keyboard shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).

You'll notice that the heading has three classes: c-PJLV, c-PJLV-dWIXpI-variant-huge, and c-PJLV-hyvuql-weight-bold.

Let's go with the second one, as it's more specific. It's important to choose a selector that is unique to the element you want to scrape. If you use the first class, you'd be selecting other elements on the page, as it's a shared class.

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.proxyrack.com');
  const headingText = await page.$eval('h1', (el) => el.textContent);
  console.log(headingText);
  await browser.close();
})();

Scraping Text from Multiple Elements

When scraping websites, it's common that you'd want to get multiple elements. For example, you might want to extract the titles of all the articles on a blog or the names of all the products on an e-commerce website.

In this example, we'll scrape the details of the repositories on the NodeJS topic on GitHub.

Navigate to the NodeJS topic page and open the browser's developer tools. Inspect the first repository on the page.

Here, you'll notice that each repository is contained in an article element with the five classes. We'll use one of them, the border, to locate all the repositories on the page.

To find the selector for the repository owner and the other data we want to extract, we need to move down the DOM tree. The repo owner is located within the h3 a. Follow the same process to find the selectors for the other data.

Using the selectors, let's extract the data from the page and store it in an array.

Create a new file called github.js and initialize it with the following code:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.proxyrack.com');
  const headingText = await page.$eval(
    '.c-PJLV-dWIXpI-variant-huge',
    (el) => el.innerText
  );
  console.log(headingText);
  await browser.close();
})();

To extract the data from the page, we'll use the page.$$eval() method, which enables us to collect data from multiple elements that share a selector.

Copy the following code into the github.js file to extract the data from the page:

const repositoryList = await page.$$eval('article.border', (repoCards) => {
  const data = [];
  repoCards.map((card) => {
    const [user, repo] = card.querySelectorAll('h3 a');
    const stars = card
      .querySelector('#repo-stars-counter-star')
      .getAttribute('title');
    const description = card.querySelector('.px-3 > p');
    const topics = card.querySelectorAll('a.topic-tag');
    const toText = (element) => element && element.innerText.trim();
    const parseNumber = (text) => Number(text.replace(/,/g, ''));
    data.push({
      user: toText(user),
      repo: toText(repo),
      url: repo.href,
      stars: parseNumber(stars),
      description: toText(description),
    });
  });
  return data;
});

The code block above selects all the repositories on the page using the article.border selector.

Next, it iterates over the repositories and selects the user and repo name, the number of stars, the description, and the topics. It then pushes the data into an array and returns it.

We also defined two helper functions to format the elements. The toText() function returns the text content of an element and removes any whitespace. The parseNumber() function removes the commas from the number of stars and converts it to a number.

Finally, we log the array to the console.

console.log(repositoryList)

The full code should look like this:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://github.com/topics/nodejs');
  const repositoryList = await page.$$eval('article.border', (repoCards) => {
    const data = [];
    repoCards.map((card) => {
      const [user, repo] = card.querySelectorAll('h3 a');
      const stars = card
        .querySelector('#repo-stars-counter-star')
        .getAttribute('title');
      const description = card.querySelector('.px-3 > p');
      const topics = card.querySelectorAll('a.topic-tag');
      const toText = (element) => element && element.innerText.trim();
      const parseNumber = (text) => Number(text.replace(/,/g, ''));
      data.push({
        user: toText(user),
        repo: toText(repo),
        url: repo.href,
        stars: parseNumber(stars),
        description: toText(description),
        topics: Array.from(topics).map((t) => toText(t)),
      });
    });
    return data;
  });
  console.log(repositoryList);
  await browser.close();
})();

Run the script by using the following command:

node github.js

Then, you should see this output in your terminal:

Interacting With Web Elements

Clicking Buttons and Links

Web scraping often involves interacting with elements like buttons and links to access more data or navigate to other pages. Playwright allows you to simulate clicks on such elements:

await page.click("button#submit-button");

Filling Forms

Sometimes when scraping, you might need to fill in a form, especially when accessing restricted content or interacting with search functionalities. Playwright offers simple yet effective methods to populate form fields and submit data.

To fill in a text input field, you can use the page.fill() method:

await page.fill('input#username', 'your_username');
await page.fill('input#password', 'your_password');
// Submit the form
await page.click('button#submit-button');

Hovering and Right-Clicking

Playwright enables you to simulate mouse actions, such as hovering over an element or right-clicking on it. These interactions can be useful when scraping websites with interactive elements:

const targetElement = await page.$('#target-element');
await targetElement.hover();
await targetElement.click({ button: 'right' });

Taking Screenshots

Playwright provides the page.screenshot() method to take screenshots of webpages, as we saw in an earlier example. You can use this method to take screenshots of the entire page or a specific element.

// Fullpage screenshot
await page.screenshot({ path: 'screenshot.png' });
// Screenshot a single element
await page.locator('h1').screenshot({ path: 'header.png' });

Conclusion

Web scraping with Playwright provides a powerful and flexible way to extract data from websites. In this post, we've covered the basics of getting started with Playwright and demonstrated how to perform common web-scraping tasks using practical examples.

Remember that when scraping websites, it's important to be respectful of the website's terms of service and robots.txt file. Some websites may have restrictions on web-scraping activities, so make sure to review and adhere to their policies.

Implementing rate limiting and using rotating proxies can help you maintain a low profile while scraping and avoiding potential IP blocks.

For enhanced anonymity and IP rotation, consider trying ProxyRack, a reliable proxy service that offers a vast pool of residential proxies to mask your real IP address effectively. ProxyRack provides an additional layer of protection and ensures that your web-scraping activities remain discreet and undetectable.

Happy scraping!

This post was originally published on Proxyrack's blog

Prerequisites

This article assumes you have a basic knowledge of HTML, CSS and JavaScript. You'll also need a code editor and a web browser. I'll be using VS Code and Chrome, but you can use whatever you like.

To follow along, clone or download the starter files here

Getting Started

First, create the HTML markup for the container and background image. The container is where the background image will be revealed on hover.

<div class="container">
  <h1>Thanks for <u>15 billion designs!</u></h1>
  <input type="text" placeholder="Search your content or Canva's" />
  <div class="hover"></div>
</div>

The container is where all the content will be. The hover div is empty for now, but we will add the background image using CSS.

Styling the Container

Next, copy the following CSS into the styles.css file. This will style the container and the other elements in the app.

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  width: 100%;
  height: 25rem;
  background: linear-gradient(
    119.42deg,
    #cc00c4 8.94%,
    #7d2ae8 54.02%,
    #00c4cc 95.49%
  );
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-size: 3rem;
  position: relative;
  z-index: 10;
  margin-top: 1rem;
}

input {
  position: relative;
  margin-top: 2rem;
  padding: 9px 4px 9px 40px;
  border: 1px solid #2b3b4a4d;
  outline: none;
  color: #0d1216;
  padding: 0 12px;
  font-size: 1rem;
  border-radius: 4px;
  height: 2.5rem;
  width: 40rem;
  max-width: 100%;
  z-index: 10;
}

In the CSS above, we set the container to position: relative so that we can position the background image inside it. We also set the overflow property to hidden so that the background image doesn't overflow the container.

We also set the z-index property of the h1 and input elements to 10 so that they appear above or on top of the background image.

Here is what we have so far:

Adding the Background Image

Next, we'll target the .hover class and add the background image. We'll also set the position property to absolute so that we can position the image inside the container.

Copy the following CSS into the styles.css file:

.hover {
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  width: 10rem;
  height: 10rem;
  background: url(img/giphy.gif) 50% 50% fixed;
  border-radius: 50%;
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.15);
  filter: blur(1px);
  z-index: 5;
}

The opacity property is set to 0 so that the image is hidden by default. We'll use JavaScript to change the opacity to 1 when the user hovers over the container.

Additionally, for the background property, we used the shorthand syntax to set the background image, position, size and repeat. We also set the fixed value for the background-attachment property so that the image stays in place when the mouse moves around.

If you prefer, you can use the longhand syntax to set the background image, position, size and repeat:

background-image: url(img/giphy.gif);
background-position: 50% 50%;
background-attachment: fixed;

Revealing the Background Image

To reveal the background image, we'll use JavaScript to track the movement of the user's mouse cursor and change the opacity of the background image.

Create a new file called app.js and add the following code:

const hover = document.querySelector(".hover");
const hoverWHalf = hover.offsetWidth / 1.5;
const container = document.querySelector(".container");

container.addEventListener("mousemove", (e) => {
  hover.style.left = e.pageX - hoverWHalf + "px";
  hover.style.top = e.pageY - hoverWHalf + "px";
  hover.style.opacity = "1";
});

In the code above, we first select the .hover and .container elements using the querySelector method.

Then, we add an event listener to the container element. The event listener listens for the mousemove event, so that whenever the user moves their mouse over the container, the code will calculate the position of the .hover element and update its position and opacity dynamically.

Specifically, it calculates the horizontal and vertical midpoint of the .hover element using the offsetWidth property and then subtracts half of this value from the pageX and pageY properties of the mousemove event to determine the position of the .hover element relative to the mouse cursor.

Don't forget to link the app.js file inside the index.html file ;)

<script src="app.js"></script>

With this, we have successfully created the mousemove hover effect. Here is the final result:

Check out the live demo and source code on Github.

Conclusion

And there you have it! You've made it to the end of this article on creating visual interest using the MouseMove hover effect with HTML, CSS, and JavaScript. By now, you should have a good understanding of how to use this technique to add some excitement and creativity to your website.

Remember, there are countless ways to customize this effect and make it your own. Don't be afraid to experiment with different images, colours, and animations to create a look that perfectly matches your brand or personal style.

As you continue to develop your web design skills, be sure to keep an eye out for new and exciting trends in the industry. Who knows, you might just discover the next big thing :)

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

Resources

• Using Custom Cursors with JavaScript for a Better UX

• How to Center an HTML Element Using JavaScript

• MDN Web Docs - mousemove

As a frontend developer, having the right extensions installed can greatly improve your workflow, making it more efficient and effective. In this article, I will introduce you to my top VS Code extensions that every frontend developer should consider adding to their toolkit.

1. Live Server

Live Server is a valuable tool for frontend developers that allows you to launch a local development server with live reload capability. This extension creates a local development server and opens your project in a browser. It automatically refreshes the page every time you save changes to your code, providing a seamless and efficient development experience.

2. Visual Studio IntelliCode

Visual Studio IntelliCode is an AI-powered extension that provides intelligent code completion suggestions based on your code context. This extension can save you time and effort by eliminating the need to manually type out every line of code. With Visual Studio IntelliCode, you can write code more efficiently and with fewer errors.

3. Prettier - Code Formatter

Prettier is a code formatter that helps you format your code according to a set of rules. It is very useful when you are working on a project that requires you to follow a specific coding style. It also helps you avoid common mistakes such as missing semicolons and trailing commas.

4. Path IntelliSense

Path Intellisense is an extension that provides auto-completion for file paths in your project. This can be especially useful when working with large codebases that have many nested directories. With Path Intellisense, you can quickly and easily navigate to the file you need without having to remember its exact location.

5. GitLens — Git supercharged

GitLens is a powerful extension that provides a visual representation of your Git repository. It allows you to see the history of your commits, branches, and tags. This can be especially useful when working on a project with multiple developers. With GitLens, you can easily track changes, view blame annotations, code authorship, commit history, and much more.

5. Auto Rename Tag

When you're working with HTML or XML, it is essential to ensure that your tags are properly named and closed. Auto Rename Tag is an extension that automatically renames your opening or closing HTML tags when you rename one of them. This extension can save you a significant amount of time and prevent errors that may arise from mismatched tag names.

6. CSS Peek

CSS Peek is an extension that allows you to quickly navigate from an HTML file to the corresponding CSS definition. This can be extremely helpful when working with large codebases that have many CSS files. With CSS Peek, you can easily locate and modify the CSS rules that affect specific HTML elements.

7. ESLint

ESLint is a powerful linter that can analyze your code and identify potential errors or coding style issues. This extension integrates with VS Code to provide real-time feedback on your JavaScript and TypeScript code as you write it. With ES Lint, you can ensure that your code is free of errors and follows best coding practices.

8. Live Share

Live Share is an extension that allows you to collaborate with other developers on the same project. This extension allows you to share your code with other developers and work on it together in real-time. With Live Share, you can easily collaborate with other developers on the same project.

9. Intellisense for CSS class names in HTML

IntelliSense for CSS class names is an extension that provides autocompletion for CSS class names. This extension can save you time and effort by eliminating the need to manually type out every CSS class name. With IntelliSense for CSS class names, you can write CSS code more efficiently and with fewer errors.

10. Tailwind CSS IntelliSense

Tailwind CSS is a popular utility-first CSS framework that can help you write clean and responsive code. With the Tailwind CSS IntelliSense extension, you can enjoy autocompletion and syntax highlighting for Tailwind CSS classes in VS Code. This extension can save you time and effort by allowing you to quickly and easily apply Tailwind CSS classes to your HTML and CSS code.

11. VS Code ES7+ React/Redux/React-Native/JS snippets

VS Code ES7+ React/Redux/React-Native/JS snippets is an extension that provides auto-completion for React and React Native code. This extension can save you time and effort by allowing you to quickly and easily write React and React Native code. With VS Code ES7+ React/Redux/React-Native/JS snippets, you can write React and React Native code more efficiently and with fewer errors.

12. Better Comments

Better Comments is an extension that allows you to add color to your comments. This extension can help you organize your code and make it easier to read. With Better Comments, you can easily distinguish between different types of comments and identify important information at a glance.

13. Github Copilot

GitHub Copilot is a revolutionary AI-powered code completion tool that uses machine learning to help developers write code faster and more accurately. It suggests code snippets and even entire functions based on the context of the code you are writing. With Copilot, you can save time and focus on the logic of your code.

14. REST Client

REST Client allows you to send HTTP requests and view the responses directly in VS Code. It supports many HTTP methods, including GET, POST, PUT, DELETE, and more. This extension is perfect when you who want to test APIs and web services quickly and easily.

15. Live Sass Compiler

If like me, you love using Sass, then you will love this extension. It allows you to compile your Sass and Scss code to CSS in real-time. The extension also offers other useful features, such as live browser reloading and customizations for the output CSS.

Conclusion

Having the right VS Code extensions can greatly improve your workflow as a frontend developer, increasing productivity, reducing errors, and improving readability.

While there are many other useful VS Code extensions beyond the 15 mentioned in this article, these are the ones that I use on a regular basis. I hope you find them useful as well!

I would love to hear your thoughts on this article. Which VS Code extensions do you use to improve your frontend development workflow? Do you have any favorite extensions not mentioned in this article? Let me know in the comments below!

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

What are Portals?

React portals provide a way to render content outside of the normal DOM hierarchy of a component. This means that you can render a child component at a different place in the DOM tree than its parent component.

In technical terms, portals in React work by creating a new DOM node and rendering a component into it. This new node is appended to the body element of the HTML document, which is outside of the normal React component tree. The rendered content can then be positioned and styled independently of the parent component.

Advantages of Using Portals

There are several advantages to using portals in React:

• Flexibility: Portals allow you to render a component outside of its parent container, which can be useful in situations where you need to display content in a different part of the page.

• Improved performance: By rendering a component outside of its parent container, you can reduce the amount of DOM manipulation needed to update the component, which can improve performance.

Common Use Cases for Portals

Portals can be used for a variety of UI elements. Here are some common use cases of portals in React:

• Modals

• Dialog boxes

• Tooltips

• Hover cards

• Popovers

• Dropdown Menus

• Loaders

How to Create a Portal in React

To create a portal in React, we make use of the createPortal() API. This method takes two arguments:

1. children: Any valid React element that can be rendered.

2. domNode: DOM container where the children should be rendered

Here is the syntax:

createPortal(children, domNode);

Example:

import { createPortal } from "react-dom";

const Modal = () => {
  return (
    <div className="modal">
      <h1>Modal Content</h1>
    </div>
  );
};

const Portal = () => {
  return createPortal(<Modal />, document.getElementById("modal-root"));
};

In the example above, we define a Modal component that we want to render using a portal. We then define a Portal component that uses the createPortal() method to render the Modal component in a container with the ID of modal-root.

How to Use Portals

To see how portals work, let's create a simple React app that uses portals to render a modal component. If you're working on an existing project, you can skip the first step. The complete code for this example is available on GitHub.

Step 1: Initialise your React app

First, create a new React app using Vite:

npm create vite@latest my-react-app --template react

Navigate to the project directory and install the dependencies:

cd my-react-app
npm install
npm run dev

Step 2: Create a portal container

Next, create a container element in the index.html file that will host the portal. This element should be located outside the root node of the React app, which is typically a div with an ID of root.

For this example, we'll create a div with an ID of portal and add it to the body of the HTML file:

<body>
  <div id="root"></div>
  <div id="portal"></div>
</body>

Step 3: Create the Overlay component

We will use the Overlay component as a backdrop effect when the modal opens, and also create the portal inside it.

Create a new file Overlay.jsx, in the src directory and paste the following code:

import React from "react";
import { createPortal } from "react-dom";
import "./App.css";

const Overlay = ({ closeModal, children }) => {
  return createPortal(
    <div className="overlay" onClick={closeModal}>
      {children}
    </div>,
    document.getElementById("portal")
  );
};

export default Overlay;

The Overlay component returns a JSX fragment that uses the createPortal() method from the react-dom package to render a div with children elements inside a portal.

We then set the onClick event for the div to call the closeModal function that is passed as a prop.

Step 4: Create the Modal component

Next, create a new file Modal.jsx in the src directory, and add the following code.

import React from "react";
import Overlay from "./Overlay";
import "./App.css";

const Modal = ({ closeModal }) => {
  return (
    <Overlay closeModal={closeModal}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Modal</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, libero.
          Exercitationem quod quam perspiciatis quasi voluptate sint facilis
          quia praesentium pariatur veniam quidem nam, ullam porro eveniet
          molestiae minima eligendi.
        </p>
        <button onClick={closeModal}>Close</button>
      </div>
    </Overlay>
  );
};

export default Modal;

In the code above, the onClick event for the div is set to stop event propagation so that clicking inside the modal doesn't close it.

Additionally, the onClick event for the button element will call the closeModal function that was passed as a prop.

Step 5: Edit the App component

Copy and paste the following code into the App.jsx file.

import { useState } from "react";
import Modal from "./Modal";
import "./App.css";

function App() {
  // State to manage whether the modal is open or closed
  const [modalOpen, setModalOpen] = useState(false);

  // Function to toggle the state between open and closed
  const handleModal = () => {
    setModalOpen(!modalOpen);
  };

  return (
    <div className="App">
      <h1>React Modal Demo</h1>
      <p>
        This is a demo of how to use portals to create a modal component in
        React.
      </p>
      <button onClick={handleModal}>Open Modal</button>

      {modalOpen && <Modal closeModal={() => setModalOpen(false)} />}
    </div>
  );
}

export default App;

Here we define a state to manage whether the modal is open or closed, and a function to toggle the state. When the "Open Modal" button is clicked, the handleModal function is called and the modalOpen state is updated accordingly.

If the state is true, the Modal component is rendered, which includes a "Close" button that sets the modalOpen state to false.

Step 6: Style the App

Finally, let's style the app. Add the following code inside the App.css file:

.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 450px;
  min-height: 250px;
  padding: 2rem;
  top: 20%;
  background-color: white;
  border-radius: 15px;
}

button {
  padding: 0.7rem 1.4rem;
  color: white;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
}

Here's what the final app looks like:

Now, let's take a closer look at how this works. Open the Developer Tools in your browser and inspect the page. You'll notice that while the modal is closed, the portal div is empty.

When you click the button to open the modal, the modal is rendered inside the portal div, just as we specified.

The new DOM nodes are now mounted inside the portal node instead of the App node specified in the source code. This demonstrates the functionality of portals in action.

Event Bubbling and Portals

Event bubbling refers to the way events propagate from child components to parent components in the component tree. In the case of React portals, this means that even if we render a portal outside of the parent DOM element, it still behaves like a standard React component, with access to props and state, as it remains within the DOM tree hierarchy.

Since portals only affect the HTML DOM structure and not the React component tree, features such as Context API and Event Bubbling continue to work as they did before.

To prevent event bubbling, as demonstrated in the example, you can use the stopPropagation() method to ensure that only the event listener on the portal's container is triggered.

Wrapping Up

Portals in React are a powerful feature that allows developers to render content outside of the normal component hierarchy. This can be useful for creating modals, popovers, and other UI elements that need to be positioned relative to a specific element or displayed on top of the main application interface.

When using portals, it's important to keep in mind some best practices.

• First, always make sure to clean up the portal node when the component unmounts. This can be done using the useEffect hook and the removeChild method.

• Second, be careful not to use portals excessively, as they can add unnecessary complexity to your code.

• Finally, always test your portals thoroughly for accessibility issues, as they can sometimes cause unexpected behaviour in certain browsers or screen readers. Ensure to follow the WAI-ARIA Modal Authoring Practices when working with modals.

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

Happy coding!

Resources

• React Official Docs

• Web Dev Simplified: Learn React Portal in 12 Minutes By Building a Modal

• Event Bubbling and Capturing in React

In this article, we’ll explore what augmented analytics is and how it can help organizations make better decisions, improve their operations, and stay ahead of the curve in their industry. From identifying patterns and trends in data to providing accurate predictions, augmented analytics is a powerful tool that every organization should consider.

What Is Augmented Analytics?

Augmented analytics is a technology that uses artificial intelligence (AI) and machine learning (ML) to analyze large amounts of data and produce valuable insights. It automates the process of data preparation, analysis, and visualization, making it easier for organizations to gain a better understanding of their data and identify areas for improvement.

Benefits of Augmented Analytics

There are several benefits of using augmented analytics, including the following:

More effective decision-making

Augmented analytics allows organizations to analyze large and complex data sets more quickly and efficiently than traditional methods. With the ability to automatically identify patterns and trends in data, organizations can identify valuable insights that would otherwise be difficult or impossible to uncover manually. This can lead to more accurate predictions, improved decision-making, and a greater understanding of the underlying drivers of business performance.

Faster data preparation

You can make data preparation for building, testing, and training machine learning models more efficient with augmented data preparation techniques. This approach allows users to select and merge data sets; perform cleaning, formatting, and enrichment; and even discover new data sets that can help improve the performance of their models. The process is guided by suggestions tailored to the specific needs of the project.

Data democratization

Augmented analytics can help organizations democratize data analysis by making it more accessible to a wider range of users. By providing an intuitive and user-friendly interface, these tools can enable nontechnical users to access and analyze data easily. This can help organizations foster a data-driven culture and empower employees at all levels to make more informed decisions.

Improved predictions

Augmented analytics analyzes data using AI and ML algorithms, which can precisely discover patterns and trends in the data, allowing for better data prediction. It’s used for a variety of purposes, including predictive maintenance, fraud detection, consumer segmentation, and others.

How Augmented Analytics Works and How It Can Help

To understand how augmented analytics works, it’s important to know its three key components:

1. Machine learning

ML is a subset of AI that enables machines to learn from data and provide predictive insights without human input. These models are highly dependent on large amounts of data, and as they process more information, they become increasingly efficient and precise in their interpretations.

2. Natural language technologies

Natural language technologies enable humans and computers to communicate seamlessly through the use of natural language processing (NLP) and natural language generation (NLG). NLP interprets human language for computers, while NLG translates computer code into human language, allowing business professionals to interact with machines through familiar domain and industry terms in a conversational manner.

3. Automation

By automating repetitive manual tasks throughout the data analytics process, ML-driven tools significantly reduce the time needed to build, train, and deploy ML models. This allows organizations to reduce reliance on their IT departments and free up analysts to focus on more important tasks.

Essentially, augmented analytics utilizes machine learning to make data analytics and related technologies more accessible to everyone, even those without technical expertise. This allows for the discovery of valuable insights from raw and unstructured data, resulting in faster data preparation and analytics processes.

When it comes to DevOps metrics, augmented analytics can be particularly useful in identifying patterns and trends in the performance of systems, applications, and user experience. This can help organizations identify areas of improvement, optimize their processes, and ultimately deliver better software to their customers.

Some of the features available with augmented analytics for DevOps metrics include the following:

• Automated data collection and analysis. This can save time and reduce the need for manual data entry.

• Self-service. Users can access the analytics tools and data without needing specialized training or assistance from IT or data scientists.

• Real-time monitoring. This provides up-to-date information on the performance of software and infrastructure.

• Dashboards and visualizations. These can help users easily understand and interpret the data.

• Natural language querying. This can make it easier for users to interact with the data and ask questions in a more human-like way.

Augmented Analytics Examples and Use Cases

Augmented analytics can be applied in a wide range of industries and help organizations gain a better understanding of their data and identify areas for improvement.

Here are a few examples of industries that have embraced augmented analytics:

• Healthcare. Patient data analysis can help identify vital sign patterns that can lead to better treatment decisions.

• Finance. Financial data analysis can help identify fraud or other financial risks.

• Supply chain. Augmented analytics can optimize logistics and inventory and transportation management.

• Retail. Sales data analysis of customer behavior and preferences can help improve sales and customer satisfaction.

• Manufacturing. Augmented analytics can help optimize production processes and identify areas for efficiency improvements.

• Human resources. Employee data analysis can help identify trends and patterns that can lead to better recruitment, retention, and performance management.

Challenges of Augmented Analytics

The implementation of augmented analytics comes with its own set of challenges that organizations need to be prepared to address.

Data Literacy and Analytics Proficiency

Organizations face the challenge of ensuring that their employees have the necessary data literacy and analytics proficiency to effectively use augmented analytics. This includes making sure that employees understand the basics of data analysis and that they can use the tools and techniques required to effectively analyze data.

Ethical Use of AI

To maintain ethical and legal standards, organizations must implement AI analytics while adhering to all relevant regulations. This entails protecting individuals’ privacy and ensuring unbiased decision-making when utilizing the data.

Augmented Analytics Limitations

While augmented analytics provides many benefits, it also has its limitations. Organizations need to be aware of these limitations and understand that insights provided by augmented analytics are not always perfect. They may require additional validation and verification.

Misconceptions of AI and ML

Organizations may have misconceptions about what AI and ML can do or the level of accuracy they can achieve. They must understand that AI and ML are not a panacea for all problems. They require a significant investment in data and personnel to be effective.

Data governance and management

Ensuring that the data used in the analysis is accurate and reliable is crucial for achieving meaningful insights. This requires proper data governance and management practices, including regular data backups, encryption, and access controls.

Scalability

Organizations need to ensure that the augmented analytics solutions they implement can handle large amounts of data and can be scaled to meet the changing needs of the organization. This can be a challenge as the organization’s data needs may change over time and as the solution adapts.

Best Practices for Augmented Analytics

For organizations to fully utilize augmented analytics, they need to implement them effectively and efficiently. Below are some of the key best practices.

Collaborate to build trust

Collaborate with different departments and stakeholders to build trust and buy-in. This includes involving key stakeholders in the planning and implementation. Make sure they understand how the solution will benefit the organization.

By building trust and buy-in, organizations can ensure that the solution is being used to its full potential and that it’s driving business value.

Create a data-driven culture

Create a data-driven culture. This includes should include training and development programs. The programs must ensure that employees have the necessary data literacy and analytics proficiency to effectively use the solution.

Furthermore, organizations must invest in solutions that guarantee the quality of their data and conform to legal and regulatory standards.

Automate your workflows

By automating workflows, organizations can improve efficiency and reduce the risk of errors. This includes automating data integration and management as well as automating the generation of insights and reports.

Start small and align KPIs

Start small and align key performance indicators (KPIs) with the organization’s goals. This includes identifying specific use cases and goals as well as outlining the data and personnel resources required. By starting small and aligning KPIs, organizations can see to it that the solution is meeting its goals and driving business value.

Plutora’s Augmented Analytics Tool and How It Can Help

Plutora’s augmented analytics tool is designed to empower agile business users such as product managers and business analysts with DevOps metrics. It’s a simple and user-friendly platform that offers a variety of features. These features help users perform ETL, create visualizations, and conduct data analysis.

With Plutora’s augmented analytics tool, your application delivery teams can address issues and track outcomes. By utilizing machine learning and artificial intelligence, it can reveal valuable data insights. These insights can help users make better decisions and improve their overall business performance.

Conclusion

Augmented analytics is a powerful tool that can help organizations make sense of their data and make better decisions. Furthermore, as organizations generate more data, augmented analytics will become increasingly important for staying competitive and extracting valuable insights. Investing in an augmented analytics solution can be a step in the right direction for organizations looking to improve their decision-making processes, boost efficiency and productivity, and drive business growth. If you want to learn more about how augmented analytics can help, we’re hosting a webinar on the topic.

This post was originally published on Plutora's blog

In this article, I'll share my experience with Markdown and how it has improved my technical documentation. I'll also provide some tips, tricks, and best practices that I've learned along the way. Whether you're an experienced technical writer or just starting out, this article will equip you with the knowledge you need to begin using Markdown and enhance your technical writing skills.

What is Markdown?

Markdown is a lightweight markup language that allows users to format text in a simple and intuitive way. It was developed in 2004 by John Gruber and Aaron Swartz, with the goal of creating a text-to-HTML conversion tool for writers who wanted an easy way to write for the web. Since then, Markdown has grown in popularity and is now used by a wide range of people, including programmers, writers, and bloggers.

The beauty of Markdown lies in its simplicity. Unlike other markup languages such as HTML, Markdown uses plain text with simple syntax to format text. This means that anyone can learn Markdown with ease, even if they have no programming experience.

Markdown and HTML

Markdown and HTML are two markup languages that are commonly used for formatting text on the web. While they share some similarities, they are fundamentally different in terms of syntax and purpose.

Markdown is designed to be easy to read and write, using simple syntax that is intuitive for anyone to use. On the other hand, HTML uses more complex syntax and is designed to provide more advanced formatting capabilities.

Benefits of Using Markdown for Technical Writing

There are many benefits to using Markdown for technical writing. Here are some of the benefits:

• Easy to learn: Markdown's syntax is simple and intuitive, which makes it easy to learn even for non-technical writers. The syntax is intuitive and uses symbols like asterisks and hash symbols to indicate formatting elements like headings, lists, and emphasis.

• Faster Writing: With Markdown, you can focus on writing content, rather than formatting it. This speeds up the writing process and allows you to produce more content in less time.

• Portable: Markdown is a plain text format, which means that you can use it on any platform. Whether you’re working on a Windows, Mac, or Linux machine, you can use Markdown to format your files.

• Compatible with a range of tools and platforms: Markdown can be easily converted into HTML or other formats using conversion tools, and it is supported by most blogging and content management systems. This makes it highly compatible with a range of tools and platforms, including GitHub, Jekyll, and WordPress.

• Efficient and streamlined workflow: Markdown can speed up the writing process by allowing writers to focus on content rather than formatting. Since Markdown is a plain text format, it can be easily edited, revised, and collaborated on without the need for complex formatting tools.

Getting Started with Markdown

To get started with Markdown, all you need is a plain text editor and some basic knowledge of Markdown syntax. Most text editors, such as Sublime Text, Atom, or Visual Studio Code, have built-in support for Markdown syntax highlighting.

Basic Markdown Syntax

Headings

To create a heading, start the line with one or more hash (#) symbols followed by a space and the heading text. The number of hash symbols indicates the level of the heading, with one hash symbol for the largest heading and six for the smallest.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Formatting Text

You can format text using the following syntax:

Italic: surround the text with a single asterisk (*).

Bold: surround the text with two asterisks (**).

Bold and Italic: surround the text with three asterisks (***).

Code: surround the text with a backtick (`).

*Italic*
**Bold**
***Bold and Italic***
`Code`

Lists

Markdown supports ordered and unordered lists. To create an unordered list, prefix each item with an asterisk (*) or a dash (-) followed by a space, and then the list item. To create an ordered list, use a number followed by a period (.) and a space, and then the list item.

Unordered List:
- Item 1
- Item 2
- Item 3

Ordered List:
1. Item 1
2. Item 2
3. Item 3

To create a nested list, indent each item by four spaces or one tab. For example:

- Item 1
  - Item 1.1
  - Item 1.2
- Item 2
  - Item 2.1

• Item 1

  • Item 1.1

  • Item 1.2

• Item 2

  • Item 2.1

Links and Images

To create a link, surround the link text with square brackets [] followed by the URL in parentheses ().

To insert an image, use the same syntax as for links but with an exclamation mark (!) at the beginning.

Link:
[Link text](https://www.example.com)

Image:
![Alt text](image-url)

Link text

Blockquotes

Blockquotes are used to quote text from another source. To create a blockquote, add a greater than symbol (>) before the text you want to quote.

> This is a blockquote

The more control you have over your attention, the more control you have over your future. - James Clear

For a blockquote with multiple paragraphs, add a > before each paragraph.

> Don’t postpone joy until you have learned all of your lessons. Joy is your lesson.
>
> ~ Alan Cohen

Don’t postpone joy until you have learned all of your lessons. Joy is your lesson.

~ Alan Cohen

Extended Markdown Syntax

Tables

To create tables in Markdown, you can use the pipe (|) character to separate columns and the dash (-) character to separate the header row from the body. However, creating tables manually can be a bit tricky since the pipes must align vertically. So, I recommend using a table generator tool to simplify the process.

| Column 1   | Column 2   | Column 3   |
| ---------- | ---------- | ---------- |
| R1, C1     | R1, C2     | R1, C3     |
| R2, C1     | R2, C2     | R2, C3     |

Code Blocks

To create a code block, use three backticks (```) followed by the programming language in which the code is written. Then, insert your code in between the backticks.

```javascript
console.log('example log')
```

The rendered output looks like this:

console.log("example log");

Horizontal Rules

To insert a horizontal rule, use three or more hyphens (---), asterisks (***) or underscores (___) on a separate line.

---

Footnotes

Markdown also supports footnotes, which are useful for adding additional information or clarifications to your text without disrupting the flow of your content. To add a footnote, use the following syntax:

1. Place a caret (^) where you want to add the footnote reference.

2. Add the footnote text in square brackets [], immediately followed by a colon (:).

3. Add the footnote content on a separate line, indented by one tab or four spaces.

The Mediterranean diet is a healthy eating pattern rich in fruits, vegetables, whole grains, and healthy fats like olive oil[^1]. This diet has been shown to improve heart health and reduce inflammation[^2]. To learn more about the Mediterranean diet, check out resources like Oldways[^3].

[^1]: Keys A, Anderson JT, Grande F. "Serum cholesterol response to changes in the diet. IV. Particular saturated fatty acids in the diet." Metabolism. 1965;14:776-87.
[^2]: Estruch R, Ros E, Salas-Salvadó J, et al. "Primary prevention of cardiovascular disease with a Mediterranean diet supplemented with extra-vir

When you render your Markdown document, the footnote reference will be replaced with a superscript number that links to the footnote content at the bottom of the page.

Task Lists

Markdown also allows you to create task lists, which are useful for keeping track of items that need to be completed. To create a task list, use a hyphen (-), a space, and square brackets [] to create a checkbox. To mark an item as complete, add an x inside the brackets.

- [ ] Task 1
- [x] Task 2
- [ ] Task 3

Here's what the rendered output looks like:

Embedding HTML

Markdown also allows you to embed HTML code directly into your document. This can be useful when you need to include more advanced formatting that is not available in Markdown. To embed HTML code, simply include the HTML tags in your Markdown document. For example:

<button style="color:red; background: #f9f9f9; border-radius: 10px"
  >Click Me</button
>

Click Me

How to Remember Markdown Syntax

Although this looks like a lot of information, you don't need to memorize all of the Markdown syntaxes. You can always refer to this guide or use a Markdown cheat sheet. Additionally, after you've written a few Markdown articles, you'll start to remember the syntax.

Platforms like Hashnode, Dev.to and Ghost have provided cheat sheets for their Markdown editors. They also have a preview feature, allowing you to see your Markdown document's rendered output as you type.

How to speed up your workflow

Keyboard Shortcuts

The easiest way to speed up your workflow is through keyboard shortcuts. Keyboard shortcuts allow you to perform common tasks without using your mouse. Many text editors have keyboard shortcuts for working with Markdown syntax. The more universal are include:

• Ctrl + B: Bold

• Ctrl + I: Italic

• Ctrl + K: Add a link

However, these shortcuts are only available in some text editors and IDEs. You can also use extensions to add keyboard shortcuts to your text editor.

Tools to speed up your workflow

There are also many tools available that are designed specifically for working with Markdown. Here are a few popular ones:

• Typora: A cross-platform Markdown editor with a WYSIWYG interface.

• MarkdownPad: A Windows-only Markdown editor with a live preview feature.

• iA Writer: A macOS app that provides live previews and syntax highlighting.

• Pandoc: A command-line tool for converting Markdown to other formats, such as HTML, PDF, or LaTeX.

Extensions to use

There are many extensions that you can use to enhance the functionality of Markdown. Here are some of the popular extensions:

• Markdown All in One: This extension adds many useful features to Markdown, such as a table of contents, a live preview, and auto-completion.

• Code Spell Check: Enhances accuracy by detecting and highlighting grammatical errors and misspellings.

• markdownlint: This extension checks your Markdown content for syntax errors and formatting issues, helping you to write better Markdown by highlighting common errors.

• Word Count: It counts the number of words, characters, and lines in your Markdown content. Word Count is a useful tool for tracking your progress and ensuring that your content meets your word count goals.

• Markdown Emoji: It provides a library of emoji that you can easily add to your Markdown content. Markdown Emoji is a fun and easy way to add some personality to your writing and engage with your readers.

How I Use Markdown to Write Articles

To boost my productivity, I incorporate various tools along with the aforementioned extensions. These tools aid me in my writing and publishing tasks, as well as in note-taking and project management. I use specific tools for each task, including:

• VS Code: for writing my articles.

• Hashnode (and Dev.to): to publish personal articles

• GitHub: For safekeeping and easy access, I back up my articles on GitHub. This ensures that my work is secure, and I can always refer to it in the future if needed.

• Notion: Lastly, I use Notion as my project management tool and note-taking app. This versatile platform enables me to organize my tasks and ideas in one place, making it easier to stay on top of my work and manage my time more effectively.

By using these tools, I can quickly write Markdown articles in VS Code and easily publish and back them up.

Markdown Best Practices

Here are some best practices that you can follow when using Markdown for technical writing:

• Don't use too many levels of heading: Use headings to break down your content into sections, but don't use too many headings. Too many headings can make your document look cluttered. Stick to using two or three levels of headings.

• Use lists: Use lists to break down complex information into smaller, more manageable pieces.

• Make links descriptive: When creating links, use descriptive anchor text instead of generic phrases like "click here" or "read more". This helps search engines understand the context of the link.

• Link to external resources: When linking to external resources, use the full URL instead of a relative link. This helps search engines understand the context of the link. It also helps boost your SEO.

• Add a table of contents: Add a table of contents to your document to make it easier for readers to navigate your content.

• Use alt text for images: Use alt text to describe images, which helps search engines and screen readers understand what the image is about.

Wrapping Up

Markdown is a versatile and efficient tool for technical writers to create high-quality content. By utilizing the basic and advanced syntax of Markdown, along with keyboard shortcuts and extensions, technical writers can streamline their workflow and save time.

Now that you have learned the benefits and best practices of using Markdown for technical writing, it's time to start incorporating it into your writing process. With a little practice and experimentation, you'll be amazed at how quickly you can create polished and professional-looking documents.

Thanks for reading. Happy writing!

I'd love to connect with you on Twitter | LinkedIn | GitHub | Portfolio

Resources and Further Reading

• Markdown Guide

• Microsoft Docs: Markdown Best Practices

• The Ins and Outs of Using Markdown for Technical Writing

• Writing in Markdown: An Introduction

• How to Turn VSCode Into the Ultimate Markdown Editor

So, you might be wondering why I named this post To the Moon. Well, it's a phrase that's popular among crypto traders and folks in the tech community. It means experiencing astronomical growth, you know like a rocket shooting off to the moon.

That was my mindset for the whole year, aiming high, shooting for the stars. But, did I make it to the moon? No, not quite. But I did take off, and that's what is important :)

You don't have to be great to start, but you have to start to be great. — Zig Ziglar

With that said, let's dive into how the journey began and how it's going. My goal in sharing my story is to not only give you an inside look into my journey but to also serve as a source of inspiration for you to have faith in God and pursue your passions.

Timeline

Q1: January to March

At the start of 2022, I found myself struggling with a lack of direction and motivation. However, that changed when I came across the Year in Review articles of some amazing developers, like Kadet, Yinka Adedire, Victor IK and Ruth Ikegah. Their stories stood out to me and served as an inspiration to set my own goals for the year.

Among these goals include spending time to hone my skills, being active on Social media(Tech Twitter and Linkedin), and building quality relationships with friends and family.

Here are the highlights for the first quarter:

• Got AWS certified! I set a personal challenge to earn a Cloud certification, even though I don't plan to pursue a career in Cloud Engineering. Reading through all the AWS whitepapers was quite boring and draining, but it was a rewarding way to start the new year.

• Took my first step into content creation by writing my first technical article 🎉

• Tried my luck applying to about 10 technical writing jobs after writing my third technical article, but I didn't get any callback.

• Joined freeCodeCamp as a Contributing Writer.

• Completed The Creative HTML5 and CSS3 Course by Dev Ed.

• Relearned Javascript concepts and methods.

• Finally started learning React using Youtube videos and playlists.

• At this point, I was struggling financially and had to seek ways to pay for my data subscription. I even had to borrow money from a couple of friends, it was that bad.

Q2: April to June

Things started to get interesting during this period:

• I received a congratulatory mail on April 1st from ContentLab, inviting me to join their team as a Technical Author and Specialist.

• Started making $$ from writing.

• Started getting more engagements on my Twitter because of the published articles.

• Got my first stars on a project on Github.

• Received a couple of rejection emails that were difficult to take, but we move!

• My productivity increased when I started using Vite for React projects. Even wrote an article on Vite that currently has 11k+ views on Hashnode.

• Joined HitSubscribe as a freelance writer in May.

• 2 of my articles got featured on Google's homepage.

• Started contributing to Open Source.

• Got accepted as a writer in the guest author program at Smashing magazine.

• I made a horrible mistake at work which affected my credibility 😢

• One of my articles made it to the Honorable Mentions category in Hashnode's Writeathon.

• I was generally happier and more confident in myself as an individual because I was more self-aware of the value I was providing.

• Became a community moderator for a Twitter community, Level Up Coding which currently has 7k+ members.

Q3: July to September

This period was a rollercoaster, because of the many bad experiences I had, but I also had my fair share of good moments.

• My mental health was pretty much down the drain at some point, but I made a conscious effort to not let my thoughts spiral out of control. And you know what helped? My Spotify playlist. It was like my own personal therapy session. Music has a way of soothing the soul, you know?

• I got really into playing Garena Free Fire, which ended up being an addiction.

• Worked on a very cool app, but I can't say much about it since it's confidential.

• Treated myself to a brand new phone and I started financially supporting my family by helping to fund some projects at home.

• Landed my first professional Frontend Engineer role at a startup and I started working with Typescript and Next.js, which is a very sweet combination if you ask me.

• I lost a couple of gigs because frankly, I was lazy, and didn't want to stress myself anymore.

• The rate at which I published articles reduced significantly.

• Tried to revive my workouts, but the motivation went back to zero just after a few days.

Q4: October to December

• Completed my first Hacktoberfest by making contributions to various projects through technical documentation.

• Became a maintainer for an open-source project, Portfolio Ideas.

• I had the opportunity to speak at a Twitter Space in December, where I shared my insights on how to scale a technical writing career. It was a great experience and I'm looking forward to more opportunities to share my knowledge in the future 🤩

Highlights

Here's a quick summary of everything that happened last year.

Good

• Discovered a new passion(Technical Writing)

• Grew my online presence.

• I was accepted as a technical writer for several publications, although I didn't write for all of them. However, I was able to write for a variety of B2B, B2C, and SaaS organizations, including TomTom, StackHawk, SolarWinds, and others. I enjoyed the diverse range of topics and the opportunity to continue learning.

• Connected with, and made friends with some wonderful people on tech twitter.

• Improved my relationship with my family and friends.

• Travelled to Lagos with my friends on two different occasions. It was pretty fun.

• I was able to be a better friend.

• Decided to start writing technical articles as a means to share and solidify my knowledge, and also build a reputation for myself. I wrote a total of 20 articles, including paid articles (we go again next year 🚀✨ )

• Overall, I think I did well at managing to balance school responsibilities with my pursuits in coding, technical writing, and maintaining a social life.

• Played the guitar at a couple of interesting events.

• I was surprised to be recognized for my articles, both offline and online, by people I didn't know. It was amusing and I must admit, it was quite flattering 😂

• I was able to read and understand way faster than before, which really helped my academics.

• Got 4 of my articles featured on daily.dev with over 300 upvotes.

• Became freeCodeCamp's 2022 top contributor. I hope to do more in 2023!

Bad

• During the ASUU strike, I, unfortunately, gained weight due to my unhealthy habits of eating junk food and spending all day sitting in front of my laptop.

• I wasn't able to put as much time and effort into my personal projects as I had hoped, which included crafting a new portfolio.

• I couldn't read as many books as I would have loved to.

• My relationship with God had its struggles, I experienced some deep existential crises that caused my faith (being Christian) to waver. But, I am glad to say that I am recovering. I am grateful to know that God remains faithful and continues to show that He's intentional about me.

• I came up with a lot of ideas for apps to develop and articles to write, but unfortunately, I wasn't able to get to work on them.

• Procrastinated a whole lot.

• Made mistakes that cost me a lot of money.

• I wasn't opportune to attend any tech events.

• Didn't get any merch or swag 😩

• Didn't apply to as many jobs as I should have

Goals for 2023 🚀

As we reflect on the past year, it's also important to think about what we want to achieve in the future. One key aspect of this is setting goals for the upcoming year. In this section, I'll share my goals for 2023 and what I hope to accomplish in the coming months.

From professional aspirations to personal development, I'll be sharing my thoughts on what I want to accomplish in the new year. The purpose of this is not only to reflect on the past but also to set an intention and roadmap for the future. I invite you to join me as we explore the aspirations I have for 2023 and hopefully, this section will inspire you to think about your own goals for the year.

My primary objective for the new year is to deepen my personal relationship with God. I would also like to:

• Launch at least 2 new products.

• Get accepted into more guest author programs, and write more articles.

• Make more contributions to open-source projects.

• Dive into mobile development by exploring frameworks like React Native and Flutter.

• Attend and speak at more tech events, twitter spaces, and meetups.

• Read more books and expand my knowledge base.

• Get new equipment for my music hobby, specifically a guitar (or two) and an effect pedal.

• Get a new Macbook.

• Pay more attention to my health by working out and eating healthily.

• Help more people break into tech.

• Win a hackathon.

• Improve my skillset and achieve mastery in software engineering and technical writing.

• Increase my visibility and reputation in my career field.

• Save more money and start building passive income streams.

• Aim to earn my first million(NGN).

• Hopefully, move out and rent an apartment.

Wrapping Up

In conclusion, as we reflect on the past, it's important to remember that amidst the challenges we faced, there were also things to be grateful for. Whether it was the support of loved ones, moments of triumph, or valuable lessons learned, these moments helped to guide us through difficult times.

As we look ahead to 2023, let's carry that gratitude with us and use it to set our goals and intentions for the coming year. Let's aim to be better, achieve more, and make a positive impact on the world. Let's remember to be thankful for all that we have and for the new opportunities that come our way.

I would like to extend my deepest gratitude to all those who helped make this year a truly amazing one. This includes my family, friends, church community, bosses in the tech industry, and many others whose names I may not have mentioned. I would like to specifically thank Daveyhert, Victor IK, Victor Eke(Chief of Open Source), B.Stella, Cess, Peace, Promise, Victory, Sheifunmi, Favourite Jome, Boluwatife the Vue Knight, Kenny, Israel Odejobi, Idris, Taofiq, Timi Lawani, Harry and Blessing(Bibi) for their support and engagement with my posts. Your help and contributions have not gone unnoticed and I am deeply grateful.

Every year is a chance for a fresh start, let's make the most of it. Thank you for being a part of this journey and let's look forward to an even more amazing 2023. Together, let's strive for the stars and beyond. WAGMI! To The Moon! 🚀✨

In this Google Sheets API tutorial for beginners, you’ll learn how to use the Google Sheets API to perform basic CRUD operations.

Prerequisites for Google Sheets API Tutorial

This tutorial assumes that you have

• a basic understanding of JavaScript and Node.js,
• Node.js and npm installed on your computer,
• a code editor (such as VS Code), and
• a Google account.

Project Setup

To use the Google Sheets API, you need a Google Cloud Platform Project with the API enabled, as well as authorization credentials. To get those, follow the steps below.

Step 1: Create a New Project

First, open the Google Cloud Console, and then create a new project.

Step 2: Enable API and Services

At the top left, click Menu ☰ > APIs and Services > Enabled APIs and Services.

Then click on the + Enable APIs and Services button.

Step 3: Create a Service Account

Now that the API is enabled, it will direct you to a page where you can configure the settings for the API.

In the left sidebar, click on the Credentials tab, and then click the Create Credentials button at the top.

Next, select Service Account in the drop-down menu.

In the next screen, provide the service account details required; then, click Create and Continue.

Click Continue and Done respectively on the next two dialogs.

Now, your newly created service account will be on the credentials page.

Copy the email address of the service account to the clipboard, as we'll need it later to share the spreadsheet with this account.

You'll be directed to the next screen, where we'll create a new key. To do so, click on the Keys tab, and then click on the Add Key button.

Select the Create New Key option, and then the key type of JSON.

Lastly, rename the downloaded JSON file, and move it into your project folder. This keyfile contains the credentials of the service account that we need in our Node.js script to access the spreadsheet from Google Sheets.

How to Use the Google Sheets API

Now that we're done setting up the project and its credentials in the Google cloud console, let's explore how to use the basic API functions in Google Sheets.

Create a Spreadsheet

Before diving into the code, head over to Google Sheets and make a new spreadsheet. Enter in some dummy data so that we have something to fetch while testing the API.

Now, let’s add the service account email address and assign it the Editor role, which gives it permission to read, write, update, and delete data.

Click on the Share button in the top-right corner. This will open a modal where we'll share the spreadsheet with the service account. Make sure to uncheck the Notify people checkbox.

Click the Share button to share the spreadsheet with the service account.

Application Setup

Now that we're done with the configuration, let's get into the code. Open up your code editor and create a new project folder. I'll be using VS Code.

Copy and paste the downloaded keyfile into the root of the directory. Rename the file to a simpler one, like keys.json.

Next, navigate to the root of the project, open up the integrated terminal in VS Code, and run this command:

npm init -y

This command will initialize the directory and create an empty package.json file, which defines important information about the project such as dependencies and project version.

Next, let's install a couple of dependencies:

• Google APIs, to access the Google Sheets API
• Express, to manage the server and routing
• nodemon, for local development so that the server will restart when we save the file

npm install googleapis express

When that is finished installing, run the following code to install nodemon as a dev dependency:

npm install nodemon --save-dev

After running the commands, you'll get a package-lock.json file and the node_modules folder.

++Now, to configure nodemon to restart the server on every file save, open up the package.json file and add the following code:

"scripts": {
    "dev": "nodemon ."
  },

This will enable us to run the dev server using the command npm run dev.

Now, your package.json file should look like this:

{
  "dependencies": {
    "express": "^4.18.1",
    "googleapis": "^101.0.0",
  },
  "scripts": {
    "dev": "nodemon ."
  },
  "name": "quickstart",
  "version": "1.0.0",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "nodemon": "^2.0.19"
  }
}

Note that the dependency versions may be different.

Integrating the Google Sheets API

Next, create a file named index.js in the project folder. Open the index.js file and import the dependencies we just installed.

const express = require("express");

const { google } = require("googleapis");

Initialize Express and listen for the server. I'm using port 8080, but you can choose any port.

const app = express();
const port = 8080;

//This allows us to parse the incoming request body as JSON
app.use(express.json());

// With this, we'll listen for the server on port 8080
app.listen(port, () => console.log(`Listening on port ${port}`));

Next, add the following code:

async function authSheets() {
  //Function for authentication object
  const auth = new google.auth.GoogleAuth({
    keyFile: "keys.json",
    scopes: ["https://www.googleapis.com/auth/spreadsheets"],
  });

  //Create client instance for auth
  const authClient = await auth.getClient();

  //Instance of the Sheets API
  const sheets = google.sheets({ version: "v4", auth: authClient });

  return {
    auth,
    authClient,
    sheets,
  };
}

Let's break the above code into bits:

First, we created a new Google auth object so that we can authorize the API request. This works by passing in the keyFile, which is the keys.json (assuming the file is stored at the root level of the project), and scopes property, which specifies the Google API we're using.

Second, the authClient variable stores the service account details (client instance) from the getClient() method once the details have been verified in the auth object.

Third, we create an instance of the Google Sheets API. It takes an object with two properties: version (the current version, in our case v4) and auth, the authClient that we created.

Lastly, we return the variables so that we can access the spreadsheet values in any routes of the app.

Reading Data From a Spreadsheet

Now, to get the data from the spreadsheet, we'll use the sheets.spreadsheets.values.get method, which takes in two required path parameters—spreadsheetId and range—and stores them in a response variable.

app.get("/", async (req, res) => {
  const { sheets } = await authSheets();

  // Read rows from spreadsheet
  const getRows = await sheets.spreadsheets.values.get({
    spreadsheetId: id,
    range: "Sheet1",
  });

  res.send(getRows.data);
});

We extract the spreadsheetId from the URL of the spreadsheet and store it in a global variable, id:

The text underlined in red is the spreadsheet ID.

const id = "12fSSjNTpDtTJ8vF4T3LRYe36WjPEfn1_sr_lSSpZJUo";

While the range defines the range of cells to read from, here we use the spreadsheet name. Every spreadsheet file has at least one sheet, which is identified by the sheet name. In our example, we're using the sheet name Sheet 1, which you can find at the bottom left of the spreadsheet.

You can also limit the range of the sheet by adding the sheet name, an exclamation symbol, and then the column range (e.g., Sheet1!A1:C5).

The sheets.spreadsheets.values.get method has three other optional query parameters:

• majorDimension defines the major dimension of the values, either rows or columns. The default is ROWS.
• valueRenderOption defines how values should be rendered in the output. The default is FORMATTED_VALUE.
• dateTimeRenderOption defines how dates, times and duration should be rendered in the output. The default is SERIAL_NUMBER.

Now, run the following command in the terminal to start the server:

npm run dev

Then, head over to your browser, and type in http://localhost:8080/. The result should be something like this:

If it doesn't look aligned like this, install JSONVue to format your JSON files in the browser. With this, we've successfully read the data from our spreadsheet.

Writing and Updating Data into the Spreadsheet

To append data after a table of data in a sheet, use the sheets.spreadsheets.values.append method, which takes in the spreadsheet ID, the range of cells to write into, the value entered by the user, and the resource object containing the information to insert into the rows.

// Write rows to spreadsheet
await sheets.spreadsheets.values.append({
  spreadsheetId: id,
  range: "Sheet1",
  valueInputOption: "USER_ENTERED",
  resource: {
    values: [["Gabriella", "Female", "4. Senior"]],
  },
});

The valueInputOption property defines how the input data should be interpreted. The values will be parsed according to how the user typed them into the UI.

The resource object has a child, values, which is an array of the data to be added to the sheets. Here, we're adding a new row with the values for the student name, gender, and class level.

Save the code and head over to Google Sheets, where you'll find that the new entry has been added. If not, refresh the local server and then go back to Google Sheets.

There's also the option of using the spreadsheets.values.update request. This enables us to write data to a specified range. For example, the following code will update the class level of Alexandra to "2. Sophomore":

await sheets.spreadsheets.values.update({
  spreadsheetId: id,
  range: "Sheet1!C2",
  valueInputOption: "USER_ENTERED",
  resource: {
    values: [["2. Sophomore"]],
  },
});

Deleting Data From Google Sheets

Using the spreadsheets.values.clear method, we can clear values from a spreadsheet. To do that, specify the spreadsheet ID and range. The code below will clear all the values from row A6 to C6:

await sheets.spreadsheets.values.clear({
  spreadsheetId: id,
  range: "Sheet1!A6:C6",
});

Updating Spreadsheet Formatting

With the Google Sheets API, we can update the formatting of cells and ranges within spreadsheets.

The following code defines the style for each cell for the range defined. Here, we add a dashed border line with a red color:

await sheets.spreadsheets.batchUpdate({
  spreadsheetId: id,
  resource: {
    requests: [
      {
        updateBorders: {
          range: {
            sheetId: 0,
            startRowIndex: 0,
            endRowIndex: 6,
            startColumnIndex: 0,
            endColumnIndex: 3,
          },
          top: {
            style: "DASHED",
            width: 1,
            color: {
              red: 1.0,
            },
          },
          bottom: {
            style: "DASHED",
            width: 1,
            color: {
              red: 1.0,
            },
          },
          innerHorizontal: {
            style: "DASHED",
            width: 1,
            color: {
              red: 1.0,
            },
          },
        },
      },
    ],
  },
});

This is the resulting layout:

Google Sheets API FAQs

Here are some frequently asked questions about the Google Sheets API.

Can I Use Google Sheets API for Free?

Using the Google Sheets API is free, but each user has usage limits. The Google Sheets API usage limits are quotas and limitations imposed by Google to make sure their API is used fairly and to protect their systems.

However, you may not exhaust this limit unless your app has a lot of users. If you do exceed the limits, you’ll get a 429: Too many requests error. If this happens, try using the exponential backoff algorithm.

How Do I Use APIs in Google Sheets?

Just as you can use the Google Sheets API to read and write Google Sheets, you can also take advantage of its connectivity to use other APIs.

Take, for example, the Fusebit add-on for Google Sheets. Fusebit enables you to use Node.js, npm, and Fusebit Connectors to quickly connect to any API or data source with low friction and the flexibility of code. This gives you a lot of superpowers, including getting contacts from Salesforce, query data in MongoDB, importing companies from HubSpot, importing records from MySQL, downloading unpaid invoices from QuickBooks, and more. Check out the Fusebit blog to see what else you can achieve with the Fusebit Google Sheets Add-On.

Conclusion

In this tutorial, we've explored some basic functions of the Google Sheets API, and you've seen how easy it is to set up. But that's not all. From here, you can make anything simple from a Google Forms clone to a video requests app, or you can use it for something more complex like using it as a database from where an app fetches data and renders it on the front end.

I hope you found this post helpful and insightful. If you want to explore the other functions, check out the documentation. Also, check out the complete code for this tutorial on Github.

Happy coding!

This post was originally published on Fusebit blog

Then Hashnode's Writeathon came up, and I thought, this is the perfect opportunity to write this article that will both help me improve my React knowledge and also help other developers who are learning about it for the first time or want to brush up on their knowledge of the subject. Win-win situation!

In this article, you'll learn about the React Context API, how it solves prop drilling, and how I built this simple shopping app with the following features:

• Store current items
• Update the context when the user clicks on the "Add to Cart" button
• Display the cart count in the Navigation bar
• Add and remove items from the Cart
• Save cart items to local storage

Below is a screenshot of what we'll be building:

If that looks good, let's get started!

Prerequisites

This article assumes that you have :

• A basic knowledge of HTML, CSS, JavaScript, and React.
• Node and npm installed on your local development machine.
• Code Editor(VS Code)

Overview of React Context

What is React Context?

React Context is a method used to pass data(and functions) from parent to child component(s), by storing the data in a store (similar to Redux), from where you can easily access and import the data into whatever components you choose.

This is a better alternative to prop drilling, which is the term used to describe the passing of data through several layers of components, even if those components have no actual need for the data.

When to use Context?

Context is designed to share data that can be considered "global" to the whole app. An example would be the currently authenticated user, a theme, or user preferences(for example, language or locale).

"Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult."

Source: Official Docs

Building the eCommerce Web app

Illustrations

Before we get into the code, let’s look at the component hierarchy to better understand the relationship between the components of the app.

The illustration below shows how data will be passed down from the root component level (App) to the component rendering what is to be displayed(items).

However, what we'll be using in our app is what Context solves:

As you can see, the Context is like a store in your application. And once it is set up, you can simply import it into whatever component needs that data.

Now that we have gone through a basic overview of React Context, let's jump right into the project.

Here is the live demo of what we'll be building, and if you also want to see the code, it's available on Github.

Project Set up

Let's start by creating a new React project. I will be using Vite in this tutorial. If you haven't heard about it, do well to check out my previous article on it.

Of course, feel free to use your bundler of choice: Vite or CRA.

# vite
npm init vite@latest react-shopping-cart --template react

# create react app
npx create-react-app react-shopping-cart

Once it is finished, run:

cd react-shopping-cart
npm install

Dependencies we'll be using:

• React Router

npm install react-router-dom@6

• Styled components

npm install --save styled-components

Note: We won’t be covering the styling to keep our code minimal; this is just to explain how the app works.

Also, I have included some comments in the code so that you understand their purpose.

Context Setup

In complex applications where the need for context is usually necessary, there can be multiple contexts, with each having its data and functions relating to the set of components that requires those data and functions.

For example, there can be a ProductContext for handling the components which use product-related data, and another ProfileContext for handling data related to authentication and user data.

However, for the sake of keeping things as simple as possible, we’ll use just one context instance.

In the src directory, create three folders: Context, components and pages.

Inside the Context folder create another folder, Cart.

Navigate to the Cart folder and add the following to a new file, CartTypes.js.

// /src/Context/Cart/CartTypes.js`:

export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_ITEM = "REMOVE_ITEM";
export const INCREASE = "INCREASE";
export const DECREASE = "DECREASE";
export const CHECKOUT = "CHECKOUT";
export const CLEAR = "CLEAR";

Here, we are defining the action types that our Context should have, and exporting them to be used within the Context.

Next, add the following to a new file, CartContext.jsx in the same directory to create the context:

import { createContext } from "react";

const CartContext = createContext();

export default CartContext;

Next, create a new file CartState.jsx inside the Cart folder. Add the following code:

import { useReducer } from "react";
import CartContext from "./CartContext";
import CartReducer from "./CartReducer";
import { sumItems } from "./CartReducer";

const CartState = ({ children }) => {
  //   Initial State of the cart
  const initialState = {
    cartItems: [],
    checkout: false,
  };

  //Set up the reducer
  const [state, dispatch] = useReducer(CartReducer, initialState);

  //Function to handle when an item is added from the store into the Cart
  const addToCart = (payload) => {
    dispatch({ type: "ADD_TO_CART", payload });
  };

  //Function to handle when an item that is in the cart is added again
  const increase = (payload) => {
    dispatch({ type: "INCREASE", payload });
  };

  //Function to handle when an item is removed from the cart
  const decrease = (payload) => {
    dispatch({ type: "DECREASE", payload });
  };

  //Function to remove an item from the cart
  const removeFromCart = (payload) => {
    dispatch({ type: "REMOVE_ITEM", payload });
  };

  //Function to clear the cart
  const clearCart = () => {
    dispatch({ type: "CLEAR" });
  };

  //Function to handle when the user clicks the checkout button
  const handleCheckout = () => {
    dispatch({ type: "CHECKOUT" });
  };

  return (
    //Add the functions that have been defined above into the Context provider, and pass on to the children
    <CartContext.Provider
      value={{
        showCart: state.showCart,
        cartItems: state.cartItems,
        addToCart,
        removeFromCart,
        increase,
        decrease,
        handleCheckout,
        clearCart,
        ...state,
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

export default CartState;

Let's break the above code into bits.

First, the useReducer hook that is imported, accepts a reducer of type (state, dispatch) => newState, which then returns the current state. We also import the context files: CartContext and CartReducer.

Second, the initialItems is an array that defines the initial state of the cart when the page is loaded.

Third, in the CartContext.Provider, will render all of the props passed into it and will pass it through its children.

How the provider works is that the current context value is determined by the value prop of the nearest <CartContext.Provider>, and when it updates, the useContext hook will trigger a rerender with the latest context value passed to the CartContext provider.

Next, create a new file CartReducer.jsx, and add the following code:

// /src/Context/Cart/CartReducer.jsx

//Import the Action types
import {
  REMOVE_ITEM,
  ADD_TO_CART,
  INCREASE,
  DECREASE,
  CHECKOUT,
  CLEAR,
} from "./CartTypes.js";

// Export function to calculate the total price of the cart and the total quantity of the cart
export const sumItems = (cartItems) => {
  Storage(cartItems);
  let itemCount = cartItems.reduce(
    (total, product) => total + product.quantity,
    0
  );
  let total = cartItems
    .reduce((total, product) => total + product.price * product.quantity, 0)
    .toFixed(2);
  return { itemCount, total };
};

// The reducer is listening for an action, which is the type that we defined in the CartTypes.js file
const CartReducer = (state, action) => {
  // The switch statement is checking the type of action that is being passed in
  switch (action.type) {
    // If the action type is ADD_TO_CART, we want to add the item to the cartItems array
    case ADD_TO_CART:
      if (!state.cartItems.find((item) => item.id === action.payload.id)) {
        state.cartItems.push({
          ...action.payload,
          quantity: 1,
        });
      }

      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is REMOVE_ITEM, we want to remove the item from the cartItems array
    case REMOVE_ITEM:
      return {
        ...state,
        ...sumItems(
          state.cartItems.filter((item) => item.id !== action.payload.id)
        ),
        cartItems: [
          ...state.cartItems.filter((item) => item.id !== action.payload.id),
        ],
      };

    // If the action type is INCREASE, we want to increase the quantity of the particular item in the cartItems array
    case INCREASE:
      state.cartItems[
        state.cartItems.findIndex((item) => item.id === action.payload.id)
      ].quantity++;
      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is DECREASE, we want to decrease the quantity of the particular item in the cartItems array
    case DECREASE:
      state.cartItems[
        state.cartItems.findIndex((item) => item.id === action.payload.id)
      ].quantity--;
      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is CHECKOUT, we want to clear the cartItems array and set the checkout to true
    case CHECKOUT:
      return {
        cartItems: [],
        checkout: true,
        ...sumItems([]),
      };

    //If the action type is CLEAR, we want to clear the cartItems array
    case CLEAR:
      return {
        cartItems: [],
        ...sumItems([]),
      };

    //Return the state if the action type is not found
    default:
      return state;
  }
};

export default CartReducer;

Now that we're done setting up the context, the next thing will be to wrap the App inside the Context.

To do that, navigate to the main.jsx(Vite) or index.js(CRA) in the root directory. Add the following code:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import CartState from "./Context/Cart/CartState";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <CartState>
      <App />
    </CartState>
  </React.StrictMode>
);

So, now our entire app has access to the Context.

Building out the Components

For the App.jsx, we'll add the code that handles the application’s navigation.

import Navbar from "./components/Navbar";
import Store from "./pages/Store";
import About from "./pages/About";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Cart from "./pages/Cart";

function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Store />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/cart" element={<Cart />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Now, let's create the components we'll need for our app's basic navigation to function properly.

Create a new file Navbar.jsx inside the components folder, and add the following:

// General
import { useState, useEffect } from "react";
import { Link, NavLink } from "react-router-dom";
import CartIcon from "/assets/icons/cart.svg";
import styled from "styled-components";
import CartContext from "../Context/Cart/CartContext";
import { useContext } from "react";

const Navbar = () => {
  const [toggle, setToggle] = useState(false);
  const [innerWidth, setInnerWidth] = useState(window.innerWidth);

  // Get Screen Size
  useEffect(() => {
    const changeWidth = () => {
      setInnerWidth(window.innerWidth);
    };

    window.addEventListener("resize", changeWidth);

    return () => {
      window.removeEventListener("resize", changeWidth);
    };
  }, []);

  // Extract itemscount from CartContext
  const { cartItems } = useContext(CartContext);

  return (
    <Nav>
      <NavContainer>
        <Left>
          <Link to={"/"}>FASHION.</Link>
        </Left>

        <Right>
          <NavRightContainer
            style={{
              transform:
                innerWidth <= 500
                  ? toggle && "translateY(100vh)"
                  : "translateY(0%)",
            }}
          >
            <NavList>
              <NavItem>
                <NavLink to="/" onClick={() => setToggle(!toggle)}>
                  Store
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink to="/about" onClick={() => setToggle(!toggle)}>
                  About
                </NavLink>
              </NavItem>
              <NavItem>
                <a href="https://twitter.com/israelmitolu" target="_blank">
                  Contact
                </a>
              </NavItem>
              <NavItem>
                <Link to="/cart" onClick={() => setToggle(!toggle)}>
                  <p>Cart</p>
                  <NavCartItem>
                    <img src={CartIcon} alt="Shopping cart" />
                    {/* If the number of cartItems is greater than 0, display the
                    number of items in the cart */}
                    {cartItems.length > 0 && (
                      <CartCircle>{cartItems.length}</CartCircle>
                    )}
                  </NavCartItem>
                </Link>
              </NavItem>
            </NavList>
          </NavRightContainer>

          <MenuBtn onClick={() => setToggle(!toggle)}>
            <span></span>
            <span></span>
            <span></span>
          </MenuBtn>
        </Right>
      </NavContainer>
    </Nav>
  );
};

The above code sets up the Navigation bar, which will look like this:

In the pages folder, which is in the src directory, create Store.jsx, Cart.jsx and About.jsx.

For the Store.jsx,

import { products } from "../data";
import styled from "styled-components";
import ProductCard from "../components/ProductCard";

const Store = () => {
  return (
    <>
      <Heading>
        <h1>Browse the Store!</h1>
        <p>New Arrivals for you! Check out our selection of products.</p>
      </Heading>
      <ProductsContainer>
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </ProductsContainer>
    </>
  );
};

export default Store;

The Store contains the Product Cards, which are generated dynamically by mapping through the available products array which is exported from the data.js file:

export const products = [
  {
    id: 1,
    name: "Cerveza Modelo",
    price: 919.11,
    image: "/assets/img/1.png",
  },
  {
    id: 2,
    name: "Diesel Life",
    price: 1257.92,
    image: "/assets/img/2.png",
  },
  {
    id: 3,
    name: "Indian Cricket Team jersey",
    price: 1500.85,
    image: "/assets/img/3.png",
  },
  {
    id: 4,
    name: "One Punch man - OK",
    price: 1250.9,
    image: "/assets/img/4.png",
  },
  {
    id: 5,
    name: "Hiking jacket",
    price: 1750.85,
    image: "/assets/img/5.png",
  },
  {
    id: 6,
    name: "Real Heart",
    price: 3100.61,
    image: "/assets/img/6.png",
  },
  {
    id: 7,
    name: "Fredd - Black and White",
    price: 1801.1,
    image: "/assets/img/7.png",
  },
  {
    id: 8,
    name: "Star Wars - The Last",
    price: 1199.99,
    image: "/assets/img/8.png",
  },
  {
    id: 9,
    name: "Yellow Blouse",
    price: 2395.16,
    image: "/assets/img/9.png",
  },
  {
    id: 10,
    name: "Rick and Morty - Supreme",
    price: 1243.82,
    image: "/assets/img/10.png",
  },
];

The ProductCard component shows the product details for each product.

Note that we would import useContext and CartContext in all the components where we need the data that is stored in the context.

The onClick events in the buttons handle the addToCart and increase functions which we have extracted from the CartContext:

import styled from "styled-components";
import { Link } from "react-router-dom";
import { formatCurrency } from "../utils";
import CartContext from "../Context/Cart/CartContext";
import { useContext } from "react";

const ProductCard = ({ product }) => {
  // Extract these functions from the CartContext
  const { addToCart, increase, cartItems, sumItems, itemCount } =
    useContext(CartContext);

  //Check whether the product is in the cart or not
  const isInCart = (product) => {
    return !!cartItems.find((item) => item.id === product.id);
  };

  return (
    <CardWrapper>
      <ProductImage
        src={product.image + "?v=" + product.id}
        alt={product.name}
      />
      <ProductName>{product.name}</ProductName>
      <ProductCardPrice>{formatCurrency(product.price)}</ProductCardPrice>
      <ProductCardButtons>
        {isInCart(product) && (
          <ButtonAddMore
            onClick={() => {
              increase(product);
            }}
            className="btn"
          >
            Add More
          </ButtonAddMore>
        )}

        {!isInCart(product) && (
          <Button onClick={() => addToCart(product)}>Add to Cart</Button>
        )}
      </ProductCardButtons>
    </CardWrapper>
  );
};

For the code below, we will extract the state and functions that we need for the Cart component, which are: cartItems, checkout and clearCart.

Then, if there are any items in the cartItems array, render the items as CartItem components to the page:

import CartItem from "../components/CartItem";
import { useContext } from "react";
import CartContext from "../Context/Cart/CartContext";
import styled from "styled-components";
import Checkout from "../components/Checkout";
import { Link } from "react-router-dom";

const Cart = () => {
  // Extract the functions from the Context
  const { cartItems, checkout, clearCart } = useContext(CartContext);

  return (
    <>
      <Heading>
        <h1>
          Shopping Cart
          <span>({cartItems.length})</span>
        </h1>
      </Heading>

      {/* Show the checkout message when the Checkout Button has been clicked */}
      {checkout && (
        <CheckoutMsg>
          <h4>Thank you for your purchase!</h4>
          <p>
            Your order has been placed and will be delivered to you within 24
            hours.
          </p>
          <Link to="/">
            <ShopBtn onClick={clearCart}>Continue Shopping</ShopBtn>
          </Link>
        </CheckoutMsg>
      )}

      <Layout>
        <div>
          {
            <CartItemWrapper>
              {/* If cart is empty, display message, and if not, display each cart
            Item in cart: {cartItems.length} */}
              {cartItems.length === 0 ? (
                <h4 style={{}}>Cart is empty</h4>
              ) : (
                <ul>
                  {cartItems.map((product) => (
                    <CartItem key={product.id} product={product} />
                  ))}
                </ul>
              )}
            </CartItemWrapper>
          }
        </div>

        <div>
          {/* Checkout component  */}
          {cartItems.length > 0 && <Checkout />}
        </div>
      </Layout>
    </>
  );
};

The CartItem component contains the items that are present in the current state. And, we'll extract some functions from the CartContext, namely: removeFromCart, increase and decrease:

import { useContext } from "react";
import CartContext from "../Context/Cart/CartContext";
import styled from "styled-components";
import { formatCurrency } from "../utils";
import TrashIcon from "/assets/icons/trash-outline.svg";
import Plus from "/assets/icons/add-circle-outline.svg";
import Minus from "/assets/icons/remove-circle-outline.svg";

const CartItem = ({ product }) => {
  const { removeFromCart, increase, decrease } = useContext(CartContext);

  return (
    <SingleCartItem>
      <CartImage src={product.image} alt={product.name} />
      <div>
        <h5>{product.name}</h5>
        <p>{formatCurrency(product.price)}</p>
      </div>

      {/* Buttons */}
      <BtnContainer>
        <button
          onClick={() => increase(product)}
          className="btn btn-primary btn-sm mr-2 mb-1"
        >
          <Icon src={Plus} alt="" />
        </button>

        <div>
          <p>Qty: {product.quantity}</p>
        </div>

        {/* Display a minus icon or trash/delete icon based on the quantity of a particular product is in the cart */}
        {product.quantity > 1 && (
          <button onClick={() => decrease(product)} className="btn">
            <Icon src={Minus} alt="" />
          </button>
        )}

        {product.quantity === 1 && (
          <button onClick={() => removeFromCart(product)} className="btn">
            <Icon src={TrashIcon} alt="" />
          </button>
        )}
      </BtnContainer>
    </SingleCartItem>
  );
};

Adding Cart Management

Now that we can add, remove, and display products, the final thing to do is implement our cart management. We have already initialised the cart as an empty array in CartState.jsx, meaning that once we restart the app, it will revert to being empty.

Now, what we will do is make sure that we load the existing cart from the local storage on component load.

Update the initialState method in CartState.jsx as follows:

const initialState = {
  cartItems: storage,
  ...sumItems(storage),
  checkout: false,
};

Next, we need to define the storage, also in the CartContext.jsx:

//Local Storage
const storage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];

Finally, in the CartReducer.jsx, we will define Storage:

const Storage = (cartItems) => {
  localStorage.setItem(
    "cartItems",
    JSON.stringify(cartItems.length > 0 ? cartItems : [])
  );
};

And export the function to calculate the total price of the cart and the total quantity of the cart

export const sumItems = (cartItems) => {
  Storage(cartItems);
  let itemCount = cartItems.reduce(
    (total, product) => total + product.quantity,
    0
  );
  let total = cartItems
    .reduce((total, product) => total + product.price * product.quantity, 0)
    .toFixed(2);
  return { itemCount, total };
};

With this, we've successfully completed the implementation of the Shopping App.

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

Conclusion

And we're done!

In the course of this article, we discussed Context and its use and used React to scaffold the interface of a minimal shopping app. We also used context to move data and methods between multiple components and added its functionality using useReducer and dispatch.

If you found this post useful (and I'm sure you did), do well to share this resource with your friends and co-workers, and follow me for more content. If you have a question or find an error or typo, kindly leave your feedback in the comments section.

Thanks for reading, and happy coding!

Depending on the complexity of your animation, some techniques would be fine as they are, and others that are optimized to handle more complex animations.

Here are the several methods we will discuss in this article.

1. Straight up CSS
2. React Transition Group
3. React Motion
4. React Spring
5. Greensock Animation Platform(GSAP)
6. Framer Motion

Let's get right into it!

1. Straight up CSS

When building a simple web animation, this is a great option. Using CSS enhances your site performance by requiring only a small amount of resources from your browser and machine’s RAM, giving your app a decent feel when using transitions.

You also get some control by using the animation property and its sub-properties such as animation-delay and animation-iteration-count.

CSS is best when you have simple transitions like toggling the states of UI elements or doing a fadeIn or fadeOut animation.

However, suppose you want to chain more than three animations in a row. In that case, you should use a JavaScript (JS) library instead of CSS because CSS sequencing becomes complicated with delays, and you'll end up with a lot of recalculations if you miss the timing.

Now, let's look into the JS/ React libraries for animation.

2. React Transition Group

React Transition Group offers a straightforward approach to animations and transitions by providing its in-built components such as TransitionGroup for defining animations.

It also exposes transition stages, manages classes, grouping elements, and manipulates the DOM in useful ways making animating very convenient.

Another exciting feature is that it's relatively small and won't add to the size of your bundle, and you can also use the CDN.

Here are some stats on React Transition Group:

• Popularity: 9.2k stars on Github, and more than 8.4 million weekly downloads on NPM.
• Documentation: Its docs are beginner-friendly; include Codesandbox examples to better illustrate.
• Support for Typescript: React transition group comes with the backing for TypeScript out of the box, and it can be installed using the command below:

npm install @types/react-transition-group

• Bundle size(minified): 13.5kB

Overall, it's a good animation library to consider for your next React project.

3. React Motion

React Motion is an animation library for React applications that makes realistic animations easier to build and implement.

It makes use of physics to create animations that feel natural. All you have to do is provide values for stiffness and damping within one of its components.

• stiffness refers to the speed with which the destination value is reached.
• damping is the friction encountered by the animated component during the transition.

Sequencing animations using React Motion, however, is not as easy and readable as some of the alternatives due to its complex nature.

Now, let's see some stats:

• Popularity: 20.8k stars on Github, and more than 611k weekly downloads on NPM
• Documentation: They have well-documented examples of their features, and you can copy the source code of a given component.
• Support for Typescript: You can use Typescript with React Motion by using the type definitions.
• Bundle size(minified): 19.8kB

4. React Spring

React Spring is a spring-physics based animation library that follows a modern approach to animation.

It’s highly flexible and covers most animations needed for your User interface.

React spring inherits some properties from React Motion, such as ease of use, interpolation, and performance.

One really cool special about React Spring is the ability to apply animations without relying on React to render updates frame by frame.

Now, let’s see how React spring stacks up against other React animation libraries:

• Popularity: 23.1k stars on Github, and more than 727k weekly downloads on NPM
• Documentation: Well-written and beginner-friendly documentation. You can copy a code snippet from the documentation and test or preview CodeSandbox.
• Support for Typescript: You can install the package for NPM or Yarn
• Bundle size(minified): 172kB!

5. GSAP

The Greensock Animation Platform (GSAP) is a great animation library for the web because it enables you to animate just about anything that can be accessed with JavaScript, including DOM Elements, SVGs, generic objects, canvases, and more.

GSAP is a great tool to build simple to very complex physics-based animations. It allows developers to sequence motion and controls the animation dynamically.

GSAP is also a great choice because it is:

• flexible
• lightweight
• fast (estimated to be 20x faster than jQuery),
• has a large and supportive community via the forums.

Now, for the report card,

• Popularity: 14.1k stars on Github, and more than 270k weekly downloads on NPM
• Documentation: Has well detailed docs with Codepen examples. If you need any help, ask on the GreenSock [forums]
• Support for Typescript: Use the Typescript definitions on Github
• Bundle size(minified): 62.1kB

While you're here, check out this article to learn how to build a sleek preloader animation :)

6. Framer Motion

Framer Motion is a popular React animation library. Like GSAP, Framer Motion allows us to apply both simple and complex animations and transitions to DOM elements defined in React components. Its syntax is easy to understand which helps you make animations faster and also improves the code readability.

Overall, Framer Motion is a very strong, highly customizable, and powerful library:

• Popularity: 14.5k stars on Github, and more than 1.1 million weekly downloads on NPM
• Documentation: Easy to understand and beginner-friendly; you can find the source code of a given component in the docs and also view it in CodeSandbox.
• Support for Typescript: Framer motion supports Typescript off the bat. Even if the files are in TypeScript, you can write regular ES6/JavaScript and they will still work.
• Bundle size(minified): 140.7kB

Although it could get bulky as your animation elements grow, and also has a much larger bundle size when compared to some other libraries, its widely used nowadays, and merits consideration for your next React project.

Conclusion

There are a lot of options when it comes to creating user-friendly animations and transitions in your React applications. Many of which are easy to get started with and customize.

In this article, you have been introduced to some of these libraries, and hopefully, with the comparisons, you can choose the option that best suits your animation needs for your next React project.

Also, if you have used any other animation libraries, kindly share them in the comments section!

Thanks for reading, and have fun animating ;)

Before you go, check out this list of other library animations:

• React-animations — the library is built on all animations with animate.css. It is easy to use and has a lot of animation collections.
• animated — Declarative Animations Library for React and React Native
• Anime.js — Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
• wow — Reveal Animations When You Scroll. Very Animate.css Friend.
• react-move — Beautiful, data-driven animations for React.
• velocity — Velocity is an animation engine with the same API as jQuery’s $.animate().

It is well known that CRA can be somewhat slow while building a project and setting up a development server, requiring around 5-10 minutes (depending on factors like hard disks, and internet connectivity issues). Time typically adds up, which is why I'm going to introduce you to a tool called Vite. Vite is a build tool similar to Webpack (CRA uses Webpack beneath the hood). More information is available here).)

In this article, I'll walk you through the process of building a React App with Vite. You will learn the differences between CRA and Vite, as well as some of its features and benefits, and also how to create a React App with Vite.

What is Vite?

Vite, pronounced /vit/, like "veet" is the next generation in frontend tooling. It focuses on speed and performance by improving the development experience for modern web projects.

Vite is created by Evan You, who is the creator of Vue.js, but it's not a Vue-only tool. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements.

It consists of two major parts:

• A dev server which provides support for Hot Module Replacement (HMR) for updating modules during the execution of the application. When changes are made to the source code of an application, only the changes are updated, rather than the entire application. This feature helps speed up development time.
• A build command that bundles your code with Rollup, pre-configured to output highly optimised static assets for production.

How does Vite work?

At its core, Vite does 2 things

1. Serve your code locally during development.
2. Bundle your Javascript, CSS and other assets together for production.

There are other tools(bundlers) that do the same thing, such as webpack, Parcel and Rollup, so what makes Vite different?

The problem with the tools mentioned above is that they have to build everything on every save, and if you have a very large application, that could take several minutes every time you save, even with Hot reloading in some frameworks, the update speed gets significantly slower as you add more code and dependencies to the app.

Vite has taken a different approach to this, kind of a reverse approach. Vite starts the server right away, takes the dependencies that don't change often, and pre-bundles them using esbuild.

Esbuild is a Javascript build tool written in Go, which pre-bundles dependencies 10-100 times faster than Javascript-based bundlers.

Let's take a look at the illustrations below to get a better understanding of how it works.

The above diagram represents a traditional bundle based development server, where we have an entry point, the possible routes and all the modules, which are then bundled together, and then the development server is ready.

Vite, on the other hand, uses route-based code-splitting to figure out what parts of the code actually need to be loaded, and doesn't have to pre-bundle everything.

Vite serves the source code using native ES Module support in modern browsers. This lets the browser take the job of bundling in development, which consequently makes your code to load instantly, no matter how large the app is.

It also supports Hot Module Replacement for an extremely fast feedback loop during development.

When building for production, Vite uses Rollup under the hood, so you don't have to worry about configuring it.

Why use Vite over CRA?

You may be asking why you should use Vite now that we've covered what it is and how it works.

We've gone through a few benefits in the previous section, so I will just highlight them here.

Performance

Pre-bundling with ESbuild makes it 10 to 100 times faster than using any other JS bundler. This is because it helps improve page speed and convert CommonJS / UMD modules to ESM.

Hot Module Replacement(HMR)

Vite uses HMR capabilities to keep track of changes in your application without reloading the full page. With the HMR API, the browser will only load the modified section of the page and still retain the application's state.

You don't need to manually set these up - when you create an app via create-vite, the selected templates would have these pre-configured for you already.

Native ECMAscript module support

Vite supports ES modules natively. It allows you to develop for the browser with bare imports like Typescript and it converts them into properly versioned imports on build.

Rich Features

Out-of-the-box support for TypeScript, JSX, CSS and more.

Check out other Features here.

Prerequisites

Before using Vite, you'll need a couple of prerequisites:

• Node.js version 14.18 or higher
• Package manager - Npm or Yarn
• Compatible browser for development

The third requirement is a browser that supports dynamic imports. You can check to see if your browser is supported by visiting: https://caniuse.com/es6-module-dynamic-import.

Most modern browsers are supported, with the exceptions being Internet Explorer, Opera Mini, and the Baidu browsers. But if you're on a somewhat recent version of Chrome, Edge, Safari, or Firefox, you should be all set.

Creating a Project with Vite

To create a Vite application, open your terminal and navigate to the folder where you want to save the Vite program. Then run this command:

npm create vite@latest

You'll be prompted to select a framework and a variant(template). In our case, we'll be using React, so select React.

You can also directly specify the template you want to use and the project name in one single line:

npm create vite@latest my-react-app --template react

Note: my-react-app is the name of the Vite application that we want to create. You can change it to whatever name you prefer.

Next, run the following commands in the terminal

cd my-react-app
npm install
npm run dev

Moving on... Running the above command will start the development server. Then open your browser and enter http://localhost:3000.

You should see a React logo with a counter and a button, as shown below:

Conclusion

There we go! We've looked at what Vite is, how it works, and some of its features. We also learned how to set up applications using Vite.

For this project, the create vite app command was set up in 10 seconds. After which I ran npm install to install dependencies, which took 35 seconds. So, all in all, the project was set up in 45 seconds. Which I'm sure you'll agree is way faster than CRA ;-)

I would love to hear your thoughts in the comments section, and if you enjoyed this post or found it insightful, kindly share it with your friends and colleagues. Also, consider subscribing to my blog.

Till next time, thanks for reading, and happy coding!

Before you go, here are some community-maintained templates to check out.

what__is--this

That's what we'll look at in this article, where you'll learn about BEM, its advantages, and whether or not you should use it in your next project.

What is BEM?

The Block Element Modifier methodology (abbreviated BEM) is a popular naming convention for HTML and CSS classes that helps to keep your code organized and maintainable.

What is a "Maintainable code"? Maintainable code is code that is simple to modify or extend, which implies it takes less time to make changes without affecting other things.

How does BEM Work?

A BEM class name consists of 3 entities:

1. Block: A standalone entity that is meaningful on its own e.g Navbar, button, image, footer, section, container.
2. Element: A part of a block that has no standalone meaning and is semantically tied to its block. E.g title, item, list, checkbox.
3. Modifier: Is used to change the appearance, behaviour or state of a Block or Element. e.g background, focus, hover, checked.

When all three are combined in a class name, it is written as:

[block]__[element]--[modifier]

Let's take a look at the illustration below to get a better understanding of how BEM works.

From the illustration,

• The card is the Block, which can also be seen as a parent container.
• The card__image, card__description, card__button are all Elements, which are semantically connected to the card Block. They can also be seen as child items, and are denoted by two underscores following the name of the block.
• The card__button--hovered is a Modifier that manipulates the card__button so that we can style it without inflicting changes on any completely unrelated module. This is done by appending two hyphens to the name of the element.

Why Use BEM?

• BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
• It communicates the purpose of your selectors
• BEM helps you think systematically about CSS organization. This enables you to work efficiently both alone and in teams.
• BEM has a unique style to create CSS class names, we won't run into conflicts with other class names.

When to use BEM

BEM is mostly used when you have a project that has multiple pages, HTML selectors and a large code structure, which tends to be difficult to maintain the code and may even lead to issues of specificity and inheritance.

BEM is not required in cases when you can already scope your components, such as styled-components or CSS modules.

Profile Card example

Here's a profile card I created to show how BEM is utilized. This is the card's final preview.

Before we go any further, I'd like you to try to figure out which of the components on this card is a Block, Element, or Modifier.

Awesome! You got it right.

Now, on to the code.

After seeing those classes pile up in the HTML file, you might think that's a lot of classes for a simple card, and you'd be right.

Recall that we learned earlier that we won't conflict with other class names since "BEM has a unique style for producing CSS class names". Because the fact is that the more CSS you have in a project, the more things build up, and the more specificity and complexity issues you face.

Also, note that you should not leave a modifier isolated. Always keep modifiers together with the element class as seen on line 80 in the HTML, card__button comes before the card__button--hovered.

View Compiled CSS

I use SASS in this case since it allows me to easily nest my classes without having to type .card every time. But don't worry if you don't understand SASS; you can view the compiled CSS by following the arrows in the screenshots below.

1. Click Dropdown

2. Click "View Compiled CSS"

Check out my article on freeCodeCamp to help you get started with SASS.

Summary

The goal of a methodology like BEM is to have a set of guidelines that help with understanding and keeping CSS maintainable, so even if you don't strictly follow it, it's a great way to guide the way you write your code.

Regardless of approach, it must be readable and maintainable. Consider using BEM for an easy way to keep your code clean and clear.

Conclusion

Thanks for reading as always. If you found this post insightful (and I'm sure you did 😉), do well to share this article with your friends and co-workers, and follow me for more content. If you have a question or find an error or typo, kindly leave your feedback in the comments section.

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

Further Reading

• BEM Methodology Docs
• BEM Cheatsheet
• BEM for Beginners

And you'd like to spread the word about the website you've built. It runs well on your computer, and you think it's ready for the rest of the world to see.

However, you are unsure of where to begin. This is where Netlify enters the picture.

Netlify is a hosting platform that allows you to easily launch websites and web apps without having to manually configure and manage them.

It includes plenty of features that make it a favourite among today's web developers:

• Deploy in seconds
• Continuous integration and Continuous Deployment(CI/CD)
• Instant Forms: You can collect data from users without having to build a backend
• Prevent spam submissions on Forms
• Easily deploy websites from Github, Gitlab or Bitbucket
• Host using a custom domain, or Netlify’s own customizable domains.
• Analytics for your sites
• Server-less Functions
• Netlify CMS to manage your blog posts

Other features can be found here.

In this article, you'll learn how to deploy a static site on Netlify, as well as some of Netlify's features.

Prerequisites

You'll need a Github account to follow along with this tutorial(or, Gitlab or Bitbucket). To create one, head over to Github to sign up. This is important since that is where you will store your source code.

Step 1: Sign up on Netlify

Head over to the Netlify homepage, click on Sign up.

Select your preferred signup method.

Step 2: Add a new site

After signing up, you’ll be redirected to a dashboard where you can add your site.

Now, to add a site, click on the Add new site button. The dropdown will display 3 options to add a new site.

• Import an existing project
• Start from a template
• Deploy manually.

We'll choose the first option, which is to import an existing project. The other two methods will be discussed briefly later in this article.

Step 3: Connect to a Git provider

Choose the Git provider for your website's source code. Github in this case.

Step 4: Choose the Repository

Select the repository and branch you want to deploy from

Step 5: Configure the site’s settings

The options for deploying the website can be configured here. Set the Deployment Branch option to main (or whichever branch you intend to deploy).

You can go ahead and click Deploy Site if it's a simple static page.

But, if you're using a build tool or want to add some other options, you'll need to configure the build settings.

Step 6: Deploy your website

You will now be directed to the Site overview page of the newly created webpage. The automated build process takes place here. With Netlify, the deployment process takes around a minute or less.

Your website has now been launched and is accessible via the internet. To check it out, click on the green link.

Additional Points

Custom Domain

Awesome! You have launched your website 🎉. But before you share it with the world, you should change the domain name to something more in line with what the project is showcasing, and not just a random domain name.

Luckily for us, Netlify allows us to change the site name from the randomly generated one, to do that, click on Domain Settings

Toggle the Options dropdown and select Edit site name from the list. After that, type in the name you want to use, and save it.

If you want to use a custom domain, check out the docs on how to do so.

Netlify Drop

Remember how we said in Step 2 of the first method that there are three ways to add a new site to Netlify? The "Deploy manually" approach, also known as Netlify Drop, is used here.

You can create a new site by simply dragging a project folder on your computer to the deploy dropzone in your browser.

Check out the docs for more information.

Netlify Templates

The other way of adding a new site is by using Netlify Templates. This is mainly used to create Jamstack sites, or when you want to add Netlify CMS to an existing site.

Make changes to your deploy

Anytime you link Netlify to your Git provider, such as Github, it immediately updates when it detects a new change to the branch/repo that is connected.

After you have made a change to the code in your text editor, all you have to do is drag and drop the folder again into the deploy dropzone.

Your sites are secured

Another interesting thing about Neltify is that your sites are HTTPS enabled(Hypertext Transfer Protocol Secure) with its Transport Layer Security (TLS) protocol option with a Let's Encrypt certificate.

All of this ensures that your Netlify-hosted sites are:

• Secure: Protects users' information from being stolen, particularly when forms or data are being submitted.
• SEO optimised: Would rank higher than sites that are not secured.

Conclusion

Congratulations! Your website is live, up and running. And you can now share with anyone using the customised URL.

That's it. Setting up your website on Netlify is as simple as that. I hope you found this post to be helpful. If you liked it, please leave a like and a comment.

Now go off and create amazing things, and share what you've created with the rest of the world!

That's something I've had a lot of experience with, starting when I visited the website for the creative and expressive Studio Job. I was really sucked in. It was unlike anything I'd ever seen before!

And in this article, I'll show you how to make your own custom cursors and discuss when you should use one for your next project. But, before we get started making custom cursors, let's define what they are.

Why use a Custom Cursor?

• Custom cursors are used in web design to add more personality to your website and also to give the users an awesome experience. This simple addition makes your website stand out.

Consider the following scenario:

You've been given the task of creating a modern website, such as a portfolio site with animations, parallax effects, and moving items.

Using a standard cursor on the design will most likely seem out of place.

This is a great example of how a custom cursor may improve the user experience.

• You can also use them to direct visitors to where they should go and what they should do, providing a more engaging experience.

With that in mind, we will create a custom cursor on a landing page to learn how we can maximise this feature for better UX(User Experience).

The image below shows a preview of the final design:

Prerequisites

This article assumes that you have:

• Knowledge of HTML
• Knowledge of CSS (SCSS)
• Knowledge of Javascript (ES6)
• A code editor and browser

How do custom cursors work?

We use a custom cursor by changing the default cursor to the image that we want. Like so:

body {
 cursor: url('image-path.png'), auto;
}

The next value of the property is a fallback, auto which sets the cursor to the default, just in case the image hasn’t loaded or if it can’t be found. Adding this fallback is important so your website won’t be cursor-less.

The cursor property can also be added to different elements and is not restricted to just the body.

For example, check out the codepen below:

Creating the Custom cursor

This section has been broken down into different steps to make it easier to understand.

Step 1: Set up the Project

To code along with me, you can clone or download the landing page design which is located in the starter folder.

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

This is the resulting layout, where the custom cursor will be placed.

Step 2: Add the cursor divs

In the index.html, add the following code immediately after the <body> tag

<div class="cursor-ball"></div>
<div class="cursor-outline"></div>

The first div represents the ball cursor, while the second represents the larger cursor.

Next, we would style these empty divs in CSS

Step 3: Style the cursor divs

In the scss/cursor folder, inside _cursor.scss, we will add the styling for the cursor.

First, we style the two cursors.

.cursor-ball {
  width: 8px;
  height: 8px;
  background-color: #000;
}

.cursor-outline {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  transition: all 0.5s ease;
}

As we progress, you'll see the effect of the transition.

The output 👇

Isn't that going to make a terrible cursor? It's all square-shaped and boxy.

As a result, we'll add some styles that are shared by both cursors:

.cursor-ball,
.cursor-outline {
  border-radius: 50%;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%)
}

The code block above contains a border-radius which makes the divs into circles.

We add a position of absolute so that we can alter the mouse cursors' top and left locations in Javascript.

The z-index of 100 makes the two cursors to be on top of any other element on the web page.

Note: Make sure the mouse has the highest z-index in any project you implement a custom cursor so that the cursor won’t be hidden at any point in time.

The pointer-events of none disables any pointer events on the divs, in this case, so that we can select other elements behind the cursor divs. To understand better, see the documentation

The transform property moves the element to the centre.

Now you should see a bit of the cursor at the top-left corner of the screen.

Step 4: Move the cursor around the screen

Now, let's get this cursor moving!

In the app.js file, we will start by grabbing the elements we need:

let cursorBall = document.querySelector(".cursor-ball");
let cursorOutline = document.querySelector(".cursor-outline");

Now, let’s add an event listener to get the exact coordinates of the mouse — when the mouse moves:

document.addEventListener("mousemove", (e) => {
  cursorBall.style.top = e.pageY + "px";
  cursorBall.style.left = e.pageX + "px";

  cursorOutline.style.top = e.pageY + "px";
  cursorOutline.style.left = e.pageX + "px";
});

Because we styled the cursors with a position of absolute, we can now modify the top and left properties of both the cursorBall and cursorOutline dynamically using Javascript.

e.pageY returns the coordinates on the Y-axis (vertical) for every event e of a mouse moving on the screen.

While e.pageX returns the coordinates on the X-axis (horizontal) for every event e of a mouse move.

Here’s the result 👇

You’d notice that there is a delay in how the bigger cursor, cursorOutline catches up to the smaller cursor. And that is because of the transition of all 0.5s ease that we added when styling the .cursor-outline.

Side note: You can experiment with different values for the animation-duration. Here, we used 0.5s, and you can even try without any transition property.

Furthermore, to completely remove the default pointer cursor, we would add the following code into the body tag found in the stylesheet cursor: none;

This will make sure that only our custom cursor shows.

We can afford to do this because we're working with pure CSS, which loads and renders quickly.

However, if we choose an image that may not load up in time due to a network fault, the User Experience would be poor.

In such scenarios, add the image location url and the fallback of auto, as we discussed in an earlier section.

Great job so far! 😃

This is how our web page should look now 👇

Now, what we've done so far is fine, but I'd like to see us take it a step further by adding more functionality depending on mouse events.

More Event Listeners

To make the webpage more interesting, let’s add more functionality to the cursor:

Mouseup and Mousedown

In the app.js file, we will utilise the mousedown and mouseup event types which will listen for when the mouse button is being pushed.

document.addEventListener("mousedown", (e) => {
  if (e.button === 0) {
    cursorOutline.classList.add("cursor-mousedown");
  }
});

document.addEventListener("mouseup", () => {
  cursorOutline.classList.remove("cursor-mousedown");
});

For the mousedown effect to work on only the left mouse is clicked, we use the button property to select what part of the mouse will be used. Check the documentation for more info on the button property.

The code then translates to: “If the left mouse is being clicked, add the class of cursor-mousedown to the cursorOutline.

And on the event of mouseup, when the mouse is released from being pushed, remove the cursor-mousedown class.

Then, head over to the scss/cursor/_cursor.scss to add the styling for this new effect:

.cursor-mousedown {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #000;
  background-color: #8454f4;
}

This is the resulting effect 👇

Mouseover and Mouseleave

In the app.js file, to get all the social media links from the DOM, use a querySelectorAll on the parent element of the links:

let links = document.querySelectorAll(".social-links a");

Now, using the ES6 syntax, the forEach method to listen for events on each social-link link:

links.forEach((link) => {
  link.addEventListener("mouseover", () => {
    cursorOutline.classList.add("scale-link");
    link.classList.add("hovered-link");
  });

In the code above,

• We’re listening for a mouseover event on each of the link.
• We’re adding a class of scale-link to the cursorOutline in Javascript, and later set it up in SCSS
• We’re adding a class of hovered-link to the link to change the appearance of the individual links when the cursor hovers over them.

The styling for the new classes:

.scale-link {
  transform: scale(1.5);
  background: #000;
}

.hovered-link {
  color: #fff;
}

This means that when the cursor hovers over any of the link,

• the cursorOutline will expand/scale to 1.5 times its original size.
• The hovered-link will change the text colour of the links.

This is the result we have 👇

The scaling works alright, but there are a few things you’ll notice:

1. The cursorOutline still remains active even though the links were no longer being hovered on.
2. The cursor is no longer centred.
3. The link does not turn white. Did the hovered-link class not work?
4. The link goes under the mouse.

These were the challenges I discovered while working on it, and you may experience them as well; here's how I dealt with them.

To solve issue #1

This is where we introduce the mouseleave event which is fired when the cursor moves out of the target element.

Still in the forEach block, add the following code:

link.addEventListener("mouseleave", () => {
    cursorOutline.classList.remove("scale-link");
    link.classList.remove("hovered-link");
  });

Basically, we just remove the scale-link and hovered-link when the mouse moves out of the link.

To solve issue #2

The problem here is that the cursorOutline does not scale as it should.

We'll experiment with the transfom-origin property here:

  transform-origin: 130% 100%;

This defines the point around which a transformation is applied. In this case, we set it to 130% on the left and right, and 100% on the top and bottom.

Check out MDN to learn more about this property.

Here’s what we get after solving issues 1 and 2 👇

Side note: If you want the pointer cursor to be displayed, add cursor: none; to the specific element(s)

To solve issue #3

The hovered-link does work, but if we take a look using Chrome Dev Tools, the actual source of the problem is that the link's colour takes precedence over this new class.

To fix this, we can use the !important property, and it will work. But using this property isn’t advisable to use because it generally breaks the natural cascading of stylesheets. It should be used sparingly.

A better option is to be more specific with the styling by using

a.hovered-link {
  color: #fff;
}

To learn more about specificity and the !important property here.

To solve issue #4

If you recall, we gave our cursors a z-index of 100 so that they would be on top of every element on the page, including the links.

So here's a quick fix:

Add a z-index of 100 to the elements to which you want to apply the effect, such as the social media links.

Final Result 👇

Awesome! We were able to resolve the issues we were having. We’re also done adding the custom cursor, and we have explored several interactions using the mouse event listeners. 😎💪

Responsiveness

Lastly, before we can deploy the project, we need to add a media query that prevents the custom cursor from appearing on devices without a pointing device.

Because not everyone uses a mouse or trackpad, forcing them to use a custom cursor is pointless, thus we must disable it:

In scss/responsive/_responsive.scss, We will create a mixin that we will then include in the _cursor.scss

@mixin anyPointer {
  @media (any-pointer: fine) {
    @content;
  }
}

Let's include the mixin to _cursor.scss, where we've already applied styling for both cursors.

We would set the display to none by default, and using the @include rule, we set the display to block so that the cursor will be displayed only if the user is using a pointing device (such as mouse or trackpad):

.cursor-ball,
.cursor-outline {
   ...

  display: none; 
  @include anyPointer {
    display: block; 
    pointer-events: none;
  }
}

Conclusion

Finally, a big yay! 🥳 We've created a cool custom cursor, and you've learned about custom cursors and how they can impact your website's user experience.

If you found this post useful (and I'm sure you did), do well to share this resource with your friends and co-workers, and follow me for more content. If you have a question or find an error or typo, kindly leave your feedback in the comments section.

Also, kindly share what you think. Do you think it's a good idea to have a custom cursor? Are there any other instances when it won't be required? Leave your response in the comments section.

Inspirations from the web

• Iara Grinspun Portfolio
• Unami Ware
• Mubien
• Denton Design

Last week, while browsing the internet, I came across Enyata's website, and after seeing the preloader, I was pretty impressed, so I thought, "Why not develop it out?" And that's exactly what I did.

In this article, I'll show you how to use the timeline feature of the Greensock Animation Platform (GSAP), and at the end, you'll be able to make this preloader.

Let's get started!

Prerequisites

This article assumes that you have:

• Basic understanding of HTML and CSS

• Basic understanding of Javascript

• A code editor (VS Code recommended)

• A web browser (Chrome or Firefox recommended)

What is GSAP?

The Greensock Animation Platform (GSAP) is arguably one of the best animation libraries for the web because it enables you to animate just about anything that can be accessed with JavaScript, including DOM Elements, SVGs, generic objects, canvases, and more.

GSAP is also a great choice because it is:

• flexible

• lightweight

• fast, like really fast (estimated to be 20x faster than jQuery),

• has a large and supportive community via the forums.

You can learn more about this library here.

Tweens and Timelines

In GSAP, a Tween is a Javascript object that allows you to define parameters that control how animation plays out. Tweens works in such a way that you provide the properties in the format:

gsap.method(element, var, duration)

A Timeline is a tool that allows you to chain together multiple animations (i.e Tweens, and other timelines by nesting ) which makes it easy to control the animations as a whole, and to precisely set their timing. A typical timeline is written like so:

let tl = gsap.timeline();

We would be looking into the most commonly used methods to create Tweens:

• to()

• from()

• fromTo()

to()

This is the most common method in GSAP, as it allows you to define the destination values. Just as its name implies, it specifies where your animation is going to .

from()

The from() method acts like a backwards tween, where you set where the values should start from, and then GSAP animates to the element’s current values.

fromTo()

The fromTo() is really great because it allows us to define both the Start and End values for animations, just as shown in the demo below:

There are many other methods listed in the documentation, but we would be working with these three.

Now that we've learned the basics of Tweens and Timelines, let's build out the preloader!

Building out the preloader

Yay! The time we've all been waiting for is here. In this section, we will build a very simple landing page with HTML and CSS, build the preloader, and use the GSAP timeline to animate the elements.

This section has been broken into different steps to make it easier to understand.

Step 1: Install GSAP

First, to use GSAP in a project, we would have to install it. Luckily, there are different methods to do so.

Using the CDN

You can easily set up GSAP into your project by adding the following to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

Installing via Package managers

//Using npm
npm install gsap

//or with yarn
yarn add gsap

Now that it's installed, then import it into your project

import { gsap } from "gsap";

Step 2: Creating the landing page

We'll start by creating an HTML page with 2 divs — one, the preloader div, and the other will be the landing page.

Inside the preloader div, we have a div with a class prl-logo which is the logo on the preloader, and it contains an h1 which would be hidden until it is defined later in the animation sequence.

The SVG element is the menu button in the navigation bar.

<body>
    <!-- Intro -->
    <div class="preloader">
      <div class="prl-logo">
        <h1 class="hide"> cruise. &trade; </h1>
      </div>
      <div class="lightCyan-slider"></div>
      <div class="persianGreen-slider"></div>
      <div class="white-slider"></div>
    </div>

    <!--Hero-->
    <section>
      <nav>
        <a class="logo" href="index.html">Cruise.</a>
        <svg
          class="menu-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z"
            fill="rgba(255,255,255,1)"
          />
        </svg>
      </nav>
      <div class="hero-content">
        <h2>Lets go on an adventure.</h2>
        <p
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
          culpa vero quae perferendis molestiae exercitationem nemo atque
          veritatis ratione rem dolore quibusdam quia, a totam quidem nostrum
          iusto! Reiciendis, rem.</p
        >
        <button>Explore</button>
      </div>
    </section>

    <script src="app.js"></script>
  </body>

Now, for the CSS, we have some basic styling, using flex and position to manipulate the layout and positioning of the elements.

You can also get the fonts I used from Google Fonts — Make sure to import them either in the head tag of your HTML file or in your CSS file.

For the preloader section and the sliders, we'll give them a position of fixed so that we can set the top and left properties for its positioning, and then the height and width of 100%, so it takes up 100% of the viewport.

To make the landing page responsive on mobile devices, we'll define some media queries too.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  max-width: 100%;
  background: url(home1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 10vh;
  padding: 1rem 5rem;
}

.logo {
  font-family: "Abril Fatface", cursive;
  text-decoration: underline;
  font-size: 1.3rem;
  color: #fff;
  font-weight: lighter;
}

.menu-btn {
  cursor: pointer;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  color: #fff;
  text-align: center;
  z-index: -1;
}
.hero-content h2 {
  font-size: 3rem;
  font-family: "Abril Fatface", cursive;
  font-weight: lighter;
}
.hero-content p {
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  color: #f0f2f2;
  margin: 1.5rem 0rem;
  line-height: 24px;
}

button {
  border: none;
  outline: none;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  color: #025959;
  cursor: pointer;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* Preloader  */
.preloader {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prl-logo {
  font-family: "Abril Fatface", cursive;
  font-size: 1.3rem;
  z-index: 2;
}

/* Sliders  */
.lightCyan-slider,
.persianGreen-slider,
.white-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}
.lightCyan-slider {
  background: #d5f2ef;
}

.persianGreen-slider {
  background: #03a6a6;
}

.white-slider {
  background: #fff;
}

.hide {
  opacity: 0;
  color: #03a6a6;
  font-weight: lighter;
}

/* Responsive media queries */
@media screen and (max-width: 768px) {
  .logo,
  .prl-logo {
    font-size: 1rem;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 425px) {
  nav {
    padding: 1rem 3rem;
  }
}

The resulting layout 👇

Great, we have our landing page set up, now let's dive into Javascript and build the animation timeline.

Step 3: Implementing GSAP timeline

We start by creating a timeline, which accepts the defaults property. This lets you set properties that will be inherited by all tweens in that timeline.

In this case, we're setting the ease animation to power1.out.

const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

To define a tween:

1. Define the target element

2. Define the vars parameter

3. Define the position parameter(Note: this is optional)

tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});

The code above first takes the element we want to animate( the target element), which in this case is the class lightCyan-slider.

Then, we add the vars parameter, which contains the properties/values you want the tween to have. In this case, the vars parameter contains the x key which is equivalent to a transform: translateX() in CSS.

To position the animations in the timeline, you'll need to pass the position parameter after the vars parameter. Here it is defined as "-=1", and it is super helpful because it tells the timeline exactly where to insert the animation.

In this case, the animation runs 1 second before the end of the previous animation.

tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);

To learn more about the position parameter, check here.

Now, we can define the other tweens:

const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});

tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(
  ".white-slider",
  {
    x: "-30%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(".hide", {
  x: "0%",
  duration: 2,
  opacity: 1,
});

tl.to(".preloader", {
  x: "200%",
  duration: 3,
});

tl.fromTo(
  "nav",
  {
    opacity: 0,
  },
  {
    opacity: 1,
    duration: 1,
  },
  "-=2"
);

tl.fromTo(
  ".hero-content",
  {
    opacity: 0,
    y: -20,
  },
  {
    opacity: 1,
    duration: 1,
    y: 0,
  },
  "-=1.5"
);

Note : It is important that you write your tweens in the order that you want the timeline to run.

For example, in the code above, we go from:

.lightCyan-slider --> .persianGreen-slider --> .white-slider --> .hide --> .preloader --> nav -->.hero-content

Great!, we have successfully created a timeline using GSAP that chains all the animations for our landing page, see the result!

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

Conclusion

Congrats!!! If you made it to the end, that means you have successfully implemented the GSAP timeline and built an awesome preloader. I hope you got a lot of value from this article.

I want you to know there are a lot of possibilities in using GSAP and is not limited to preloaders. Check out some of the best GSAP animation websites on awwwards and on Greensock Showcase.

Also, do well to like and follow for more content, and if you've got any questions or spotted any errors... please do well to leave some feedback as this is my first technical article :)

Resources and Further Reading

• Greensock Documentation

• GSAP Cheatsheet