Website performance is an important aspect of web development.

It consists of mainly two things:

• The speed of your website

• How usable is your website for visitors?

Importance of website performance

Website performance is very important to consider when building new websites.

If it's an e-commerce store, it can have a large impact on your user's conversion rate.

If it's a lead generation website, it can have an impact on how many users become leads.

If it's a blog, people are more likely to be engaged in your content if the speed is good.

Website performance is also a factor in SEO, so a faster website will rank higher.

Impact of speed on user experience

Speed has a significant impact on user experience.

Slower websites leave a poor impression on users and make them more likely to leave.

Think of trying to navigate through a website, and pages take 10+ seconds to load...

You're very likely to leave, aren't you?

Now that we've established why good website performance is vital for modern websites, let's dive deeper into what affects a website's speed.

Understanding website performance

Factors affecting website speed

There are plenty of factors that impact website speed, including, but not limited to:

• The size of images

• The number of requests made

• The server response time

• The size of the files requested

• Third-party scripts

At the end of the day, the more a browser has to do to render your website (like importing scripts, fetching images, etc.), the slower it will be.

Metrics to measure website performance

There are numerous metrics to take into account when measuring website performance.

Using a tool like Google's PageSpeed Insights, you can get valuable metrics to boost performance. These include:

• First contentful paint (FCP): marks the first point in the page load timeline where the user can see anything on the screen.

• Largest Contentful Paint (LCP): marks the point in the page load timeline when the page's main content has likely loaded.

• Total blocking time: measures the total time after FCP where the main thread was blocked for long enough to prevent responses to user input.

• Cumulative layout shift: a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the lifespan of a page.

All of these metrics are crucial to review to improve website performance.

Strategies to optimize website performance

To effectively optimize website performance, the exact strategies vary based on the website.

A wide range of factors (as discussed previously) play a role in website performance.

Depending on the website, some areas are probably doing well, but others need to be focused on.

Fortunately, a tool like PageSpeed Insights provides actionable, specific opportunities to improve website performance.

Let's talk about a few common strategies that will improve web performance.

Minifying CSS, JavaScript, and HTML

Minifying CSS, JavaScript, and HTML is a simple and effective strategy to improve performance.

Compressing these files will improve your website's load time since it takes less time to download a smaller file.

So when a user's browser fetches your website, it fetches smaller payloads.

How this strategy can be implemented depends on the website.

For CMS-based platforms, there are typical plugins that can handle this.

For custom applications, this can be done through an NPM package or, in some cases, manually.

Minifying CSS, JS, and HTML can't negatively impact performance, so I recommend everyone implement this in some capacity.

Optimizing images and videos

Optimizing images and videos is another strategy to improve website performance.

Unoptimized images and videos can have a significant impact on how fast a website loads.

All images should be compressed and served in a smaller, faster format, like.webp.

Additionally, images that aren't shown right away should be lazy-loaded. This means they are loaded only when the user sees them, rather than on load, so the page's initial load time is faster.

This can be done by adding the loading="lazy" attribute to images.

Videos should also be compressed and preferably deferred from loading to improve the initial load time.

Implementing browser caching

Browser caching is another effective strategy for improving website performance.

Static files like and.js can be cached, so they don't need to be fetched again every time a user loads your website.

You may have noticed this when you revisit a website and it loads significantly faster than the first time you loaded the website.

Implementing this strategy varies based on how the website is built and how it is hosted.

Utilizing Content Delivery Networks (CDN)

A content delivery network is, in essence, a way of delivering content to your users by placing caching servers across the globe.

A CDN is designed to reduce the distance (virtually) between the browser and the server.

This means files are delivered faster, leading to a faster website.

CDNs integrate with web hosting providers to deliver faster website performance with ease.

Reducing server response time

Reducing server response time is another strategy that can boost website performance.

The initial server response time is a crucial part of website performance.

A slow response time means a slow website.

While most of the response time has to do with the exact setup and hosting provider, here are some general tips to improve performance:

• Use well-optimized plugins (particularly those relevant to platforms like Wordpress).

• Choose a popular, trusted hosting provider.

• Optimize your database.

• Reduce resource sizes

That covers website speed; let's move on to enhancing the user experience.

Enhancing the user experience

User experience (UX) is another crucial aspect of website performance.

UX is essentially how usable a website is for the end user.

UX is a wide topic, but let's talk about a few key areas where websites often get wrong.

Improving website navigation

The purpose of website navigation is for users to be able to navigate a website and find the information they are looking for.

Website navigation should be simple.

It should not be difficult for a visitor to find what they are looking for.

On desktop, links should be shown right away and not hidden in a sidebar behind a hamburger icon.

On mobile, the navigation bar should be small so it does not take up too much screen real estate and take away from the content.

Furthermore, the navigation bar should be sticky to improve the user experience so they don't need to scroll back to the top of the page.

These are some general tips on improving website navigation; however, they vary based on the purpose of the website as well as the specific niche.

Looking at similar websites can help determine what works best.

Implementing responsive design

A responsive design is a must-have for websites in 2024 and beyond.

Responsive, essentially, means the website adapts to the user's screen size and shows the content appropriately.

This means the website should look good on computers, laptops, tablets, mobile phones, etc.

Responsive design is crucial for UX, as if elements don't function properly or overflow off the screen, it makes it much harder for users to use the website.

If the website is custom-made, it can be responded to through CSS media queries.

If the website is built on a CMS like WordPress, it's important to choose a responsive theme that works well in your niche.

Minimizing pop-ups and ads

For superior UX, it's best to minimize pop-ups and advertisements that show up.

Using popups for users to complete actions like creating an account is fine, of course.

But having popups that show at random intervals with content that may not be relevant for the user can be very distracting and cause users to leave.

Additionally, too many advertisements on a page will also frustrate users, potentially causing them to leave.

Conclusion

Website performance is crucial for the user experience and SEO. Factors like speed, image size, server response time, and third-party scripts impact performance. Metrics like FCP, LCP, and total blocking time are key.

Strategies to improve performance include minifying CSS/JS/HTML, optimizing images/videos, browser caching, CDN use, and reducing server response time.

Enhancing the user experience involves improving navigation, implementing responsive design, and minimizing pop-ups and ads. Continuous optimization is essential for website success.

Importance of continuous optimization for website performance and user experience.

Continuous optimization is crucial for website performance and the user experience, as things change over time.

User experience is largely about learning what your end user's key goal is and how you can best optimize your website for them to achieve that goal.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Twitter: Blake Yeboah

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Here are 5 useful APIs that I use quite often in my web development projects.

Clipboard API

The clipboard API is a simple method to copy text to a user's clipboard.

This can be used in a wide range of applications such as URL shorteners or blogs, where you want to add a copy button to copy content.

To copy text, you first need an element on the DOM with the text:

<input type="text" value="Text to be copied" id="copy-text">

Now, we can write a quick JavaScript function to copy this text:

const writeToClipboard = () => {
   const textToBeCopied = document.getElementById("copy-text");
   textToBeCopied.select();
   textToBeCopied.setSelectionRange(0, 99999);
   navigator.clipboard.writeText(textToBeCopied.value);
}

This function can be called however you'd like, such as on click of a copy button.

LocalStorage API

LocalStorage provides a simple interface for storing data locally in your user's browser.

Its very similar to session storage and cookies, with the key difference that is does not expire.

There are three main methods you can use.

To store data, you can use .setItem()

localStorage.setItem('key', 'value');

Items are stored as key/value pairs in localStorage.

To retrieve an item from localStorage, you can use .getItem()

localStorage.getItem('key');

Lastly, to remove an item from localStorage, you can use .removeItem()

localStorage.removeItem('key');

Items are stored as strings in localStorage, so to store an object or array, you need to use the JSON.stringify() method.

const people = ['Blake', 'John', 'Jane'];
localStorage.setItem('people', JSON.stringfy(people));

Then when we get the item, we can use JSON.parse() to convert it back to an array.

const people = JSON.parse(localStorage.getItem('people'));

That sums up localStorage, now lets move on to the Geolocation API.

Geolocation API

The Geolocation API is a simple interface to get the user's location.

This can be used to personalize your website to your users.

For example, you could add a nearby stores section or show deals available for the user's specific location.

To get the users location, you can use the getCurrentPosition() method.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
        console.log(position);
    });
}

position is a object with the user's coordinates as well as timestamp.

History API

The history API allows you to navigate the user back and forward among pages.

For example, to simulate the user clicking the back button:

window.history.back()

And the forward button:

window.history.forward()

Yes, its that simple.

Fetch API

The fetch API is a interface for making HTTP requests.

It cna be used as an alternative to packages like axios or built-in methods like XMLHttpRequest

To make a GET request:

async function makeRequest() {
    const response = await fetch('request url...');
    const json = await response.json();
    console.log(json);
}

To make a POST request:

fetch('request url...', {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

I have another article all about the Fetch API that dives into deeper detail.

Check it out here if you're interested.

Wrapping Up

We have covered 5 useful native web APIs discussed in this article: Clipboard API for copying text, LocalStorage API for storing data, Geolocation API for getting user's location, History API for navigating pages, and Fetch API for making HTTP requests.

Each API is explained with examples and usage instructions.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Twitter: Blake Yeboah

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

In this article, we'll be covering the Fetch API in JavaScript how you can use it to make HTTP requests.

What is the Fetch API?

The fetch() method provides a simple way to make HTTP requests in JavaScript.

It is natively in the browser, meaning you don't have to import an additional module (like axios).

Additionally, its asynchronous and promise-based which makes catching errors and handling responses easy.

Using the Fetch API

The syntax is very simple, you just have to use the fetch() method

Making a GET request is very simple:

fetch('request url')

Replace request url with the URL you want tor request.

The fetch method returns a promise, which means there are two ways you can handle the response.

Using .then Syntax

fetch('request url...')
      .then(response => response.json())
      .then(json => console.log(json))
      .catch(error => console.error(error));

Using async/await

async function makeRequest() {
    const response = await fetch('request url...');
    const json = await response.json();
    console.log(json);
}

We can improve the async/await further by wrapping it in a try/catch statement to catch an error:

async function makeRequest() {
    try {
        const response = await fetch('request url...');
        const json = await response.json();
        console.log(json);
    } catch (error) {
        console.error(error)
    }
}

Additional Options

You can add options to the request by adding a second parameter.

This allows you to add headers, change the request type, and more.

For example, to make a post request:

fetch("https://example.com/profile", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

The method can be set as any HTTP Request method like GET, POST, PUT, DELETE, etc.

The headers object is used to control the headers of the request.

This could be used for authenticating requests, changing the content type (like in the request above), or other headers you want to include.

The body is the request's body.

Wrapping up

That is a overview of how the Fetch API works in JavaScript.

It can used as an alternative to popular packages like axios, as well as built in methods like XMLHttpRequest

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Twitter: Blake Yeboah

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

In this article, we'll be covering 4 mistakes commonly made by people while learning to code that will seriously impact their coding journey.

#1 - Copying and Pasting

The first mistake I'll talk about is copying and pasting.

We've all done it. Don't deny it 😉

There's nothing inherently wrong with copying and pasting code, as long as you understand how the code works to achieve what it does. While learning to code, its crucial that every piece of code you write, you understand how it works.

Otherwise, you're not really learning anything.

If you simply copy and paste a bunch of code from stack overflow to create a cool application, well done, you've created a cool application.

However, you don't understand how it works and haven't learned anything. You haven't progressed as a developer. If asked to speak through your code (e.g in an interview), you won't even know where to start.

It's very important that any code you copy from the internet, you should understand what every part does and be able to explain it to someone else (this really demonstrates your understanding).

#2 - Getting Stuck In Tutorial Hell

Tutorial Hell! We've all heard of it. But what actually is it? (you might be stuck in it and not even realize it 😬)

Tutorial Hell is essentially where you are stuck in a state of watching plenty of tutorials. These could be on building projects, or just learning a new language/framework. But you aren't moving forward, since you keep simply re-creating the projects in the tutorial and following the exact instructions throughout without actually retrieving the knowledge and trying to apply it to your own projects.

The easiest way to get out of tutorial hell, is to simply think of project that is slightly more complicated than anything you have built. Then, using the knowledge you've learned, go out and try to build it.

Will you get stuck? Probably, but that's a good thing.

You'll learn how to solve problems and how to actually progress and apply your knowledge rather than just replicating code on a screen.

To put this into an example, so you can hopefully understand what I'm trying to say:

• Lets say you watched a tutorial on how to build a to-do list in React and then you went out and built a to-do list by following the tutorial.

This is a fine first step, but next, to apply the knowledge you've just learned and progress further as a developer you could:

• Build an expense tracker

An expense tracker is a completely different application than a todo list. However, when you break it down, it essentially requires very similar skills to building a todo list.

It requires handling state, handling user input, rendering state to the DOM exactly what building a todo list teaches you.

You may be thinking since it requires similar skills as a todo list that you won't learn anything by building it?

But, what you're not considering is how much you learn by going out and building an application without blindly following a tutorial and typing code.

You get used to getting stuck and figuring out how to solve the problem.

You get used to reading documentation and coming up with code on your own.

You will start to learn how the concepts you've learned in the tutorial can be applied to a range of other projects you may be interested in building.

Getting out of tutorial hell can be challenging, but as long as you aren't afraid of a challenge and your desire to become a developer outweighs your fear of failure, I'm sure you'll be fine.

#3 - Trying to Learn Too Much At Once

This mistake is very common. I see it all the time and am guilty of it myself.

When you are learning something new, its very important to learn one new technology at a time.

Imagine this:

You want to learn React but you don't know JavaScript. So you decide to learn both React and JavaScript at the same time.

This is a terrible idea because while learning "React" you are writing JavaScript that you don't even understand. You will have no idea whether what you're learning is a part of JavaScript or a part of the React library.

If you proceeded with this approach until you felt as though you have learned both, you may know React and be able to build projects with it. However, if someone asked you to build a todo list with vanilla JavaScript, you wouldn't know where to start.

Is JSX a part of JavaScript?

Can't I just create a Todo component in JavaScript?

How can I manipulate the DOM with JavaScript?

You see my point? Learning multiple things at once, especially interconnected things like JS and React, won't properly teach you either and you will have a much harder time learning later on since you will contradicting knowledge you thought you knew.

Another reason why you shouldn't try learning too much at once is because of how our brains work. We simply cannot absorb too much information at once.

Have you ever spent many hours learning something and then a few days later completely forget it?

This is just how our brain works. We need to take in information gradually and slowly build up our knowledge base.

My advice would be to:

• Be patient, enjoy the learning process
• Take time to learn technologies properly and understand them deeply
• Don't try learning multiple technologies at once

#4 - Skipping The Fundamentals

Its very crucial that you learn the fundamentals of each language or framework you're learning. It can be very easy to skip over the basics and go into the more interesting and advanced concepts. However, you should always take your time to learn the fundmentals.

If you're learning a new language, don't skip over the basics like:

• Defining variables
• Creating and running functions
• Defining and using types (not always applicable)
• Printing text to the console/browser
• Writing comments
• etc

The fundamentals may be boring and easy, but in the end of the day, you have to lay the foundation before you build the house.

That covers the 4 mistakes you should be careful of making while learning to code. Learning to code is a challenging, timely process. Take your time, enjoy the process and you'll become a great developer some day.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

There are plenty of units in CSS. From px to vh, there is an abundance of units all with their distinctive use cases. Considering the amount of options, its perfectly reasonably to be confused as to which unit you should use and where. This article aims to simplify CSS units and explain what each unit is and in what situations you may consider using it.

Units

In case you're unaware or unsure, a unit in CSS (like in maths) is essentially a type of measurement. When adding margins, or adjusting font size, the value you enter is a quantity of units (e.g 6px) which the browser understands and is able to appropriate display the content.

Before mentioning specific units, I'd like to talk about absolute and relative units and the different between them.

Absolute vs Relative

The two types of length units are absolute and relative. Absolute units are fixed, meaning no matter the screen size or any other factor, the element will always appear to that exact size. For example, pixels (px) is an absolute length unit since 50px will be 50px no matter the width of the screen. Relative units specify lengths relative to another length property. For example, vw is a relative unit that represents 1% of the viewport's width. This means if you set a div's width to 50vw, on both large desktop screens and mobile screens it will take up 50 percent of the viewport's width which isn't equivalent between a mobile and desktop device (desktop is larger, obviously).

Now, lets talk about a few different units and where you would probably want to use them.

Pixels (px)

Pixels is one of the most commonly used units. Its probably the unit you first saw when learning CSS. Pixels have a variety of use cases, including:

• Font Sizes
• Widths & Heights
• Margins & Padding

Pixels are great, however if you want your website to better adapt to different screen sizes (be responsive) a relative unit would probably work better. Pixels can still work in a lot of situations though like adding a margin between elements in a list. It heavily depends on the exact circumstance, however a good rule of thumb is if the space needs to constantly change (like get reduced) based on the screen size (width or height) there is probably a more suitable relative unit.

Inches (in)

Inches are another absolute unit. An inch is equal to 96 pixels. To be entirely honest, I have never actually used this unit, however if your web page is specifically built to be printed, they can be helpful to control spacing between elements.

em & rem units

Em and Rem units are very powerful relative length units that I use and see all the time. An em unit is relative to the font-size of the element. For instance, 3em is equal to 3 times the size of the current font. This is a great element to be used for margins and padding that will decrease as the size of the element decreases. This also helps you reduce the amount of media queries you will need to write to your website responsive :)

On the other hand, rem units are relative to the font-size of the root element. This means if your html element has a font-size of 24px, 2rem is equal to 2 times 24px meaning 48px. rem units are great for setting font-size of paragraphs and headings throughout your document since you can reduce all text sizes by simply changing the root element's font-size.

em and rem units are two of the most helpful units I've learned in my CSS journey and I'd highly recommend using them. They are very practical for creating scalable and responsive layouts. I'd recommend em units for margins and padding, as well as rem units for font-sizes.

Percentage (%)

The percentage unit is fairly self-explanatory. It is relative to the parent element. For example, if the width of the body is 500px, a div with the width of 50% which be half of that meaning 250px. Percentage units are also very useful since they can be used to scale layouts appropriately as the size of the screen varies.

Percentage units should be used for widths and heights of paragraphs, or divs where you control the width of the parent element.

vw and vh units

vw and vh units are more relative length units that are very helpful when creating scalable, responsive web pages. A vw unit is equivalent to 1% of the width of the viewport and a vh unit is equivalent to 1% of the height of the viewport. This means that you can set deeply nested elements to take up half the screen no matter the size of the screen.

I often use vw units when I want the content to shrink as the width of the page shrinks. The same applies to vh units just based on the height. You can use these units for:

• Margins
• Padding
• Widths
• Heights

You can even set a font-size to these units for them to consistently shrink with the page however, I'd recommend using rem units for font-size.

Take Away

We've covered many units that are available in CSS. I've provided my personal recommendations for when and where you should use each unit as well as provided a general overview of what the unit represents. One key takeaway from this article is that relative units (vw, %, etc) should be used more often than absolute units to create responsive websites that scale appropriately.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Today, I'm gonna show you 15 DOM methods in JavaScript that I believe are essential for every JS developer to know.

These methods will help you in a variety of ways and are very helpful to have in your toolbelt when building applications with JavaScript.

The Methods

getElementById

The getElementById method allows you to select a DOM element by its Id as the name suggests:

document.getElementById("fun");

This code will select the DOM element with an ID of fun.

You would probably want to store this in a variable so you can use it multiple times without repeating yourself:

const fun = document.getElementById("fun");

querySelector

The querySelector method allows you to select a DOM element by a CSS selector:

document.querySelector("#fun");

This code will also select the DOM element with an ID of fun however querySelector can be used with any CSS selector.

For example, by class:

document.querySelector(".cool-class");

By element:

document.querySelector("p");

Or any other CSS selector.

Another cool aspect of this method is that it can be called on a parent element to select a child that matches the query.

For example, if you have got a paragraph with a class of text inside of a div, you can select it with the following code:

const div = document.querySelector("div");
const paragraph = div.querySelector("#text");

querySelectorAll

The querySelectorAll method is very similar to the querySelector however it returns a NodeList with all elements it found rather than just a single node.

For example, to select all paragraph elements on a page:

const paragraphs = document.querySelectorAll("p");

It is also important to know that a NodeList is different to an Array so you can't call array methods on it. However, you can convert a NodeList to an Array using the spread operator:

const arr = [...paragraphs];

Now you can use methods like 'forEachon thearr` variable since its now an array.

createElement

We know how we can select elements that already exist in the DOM. But how can we create them? For that, the createElement method can be used.

const div = document.createElement("div");

This code simply creates a div. However, the element won't be found on the page because we haven't inserted it yet. For that, we can use the appendChild method.

appendChild

The appendChild allows us to append a Node into the dom:

document.body.appendChild(div)

This code will append the div we just created inside of the body element.

It is important to know that the appendChild element only appends nodes and not text.

removeChild

The removeChild method allows us to remove a child from the DOM.

For example, lets insert a paragraph inside of the div we just created:

const div = document.createElement("div");
const paragraph = document.createElement("p");
div.appendChild(paragraph);
document.body.appendChild(div);

We can then remove the paragraph element:

div.removeChild(paragraph);

This method can also be used to remove an element that was already in the DOM, not one you just inserted. For instance:

document.body.removeChild(document.querySelector("#someElement"));

This code will remove the element with an ID of someElement from the body.

textContent

The textContent method lets us change the text in an element. For instance, lets change the text of a paragraph element with an ID of text:

document.querySelector("#text").textContent = "I'm loving this article :)";

This will change the text of the element with an ID of text. This method can be called on any node so we can use it to add text to elements we create.

For example, lets create a paragraph and change its text, then append it to the body:

const paragraph = document.createElement("p");
paragraph.textContent = "This is a cool paragraph!";
document.body.appendChild(paragraph);

innerHTML

The innerHTML method lets us change the HTML inside of an element. For example, we can add a div inside of the body:

document.body.innerHTML += "<div>My Div</div>"

The key difference between innerHTML and textContent is that innerHTML lets us change the HTML as well as whatever text we want inside, while textContent only lets us change the text.

getAttribute

The getAttribute method lets us retrieve the value of any attribute on an element.

For example, we can select the href of an a tag:

document.querySelector("a").getAttribute("href");

This method can be used to retrieve any attribute on any element.

setAttribute

The setAttribute method lets us set the value of an attribute on an element.

For example, lets change the href of an a tag:

document.querySelector("a").setAttribute("href", "/somewhere-else" );

The first argument is the attribute name and the second is the value.

addEventListener

The addEventListener method is used to run a function when an event is triggered.

For example, lets log something to the console when a button is clicked:

const btn = document.querySelector("button");
const logFunction = () => {
    console.log("Button was clicked");
}
btn.addEventListener("click", logFunction);

The first argument is the event name (there are plenty of them, do a quick google search to see them all) and the second is the function we want to run. It is best to store the function in a variable as we have done rather than use an anonymous function so that the event listener can be removed in the future if we wish.

removeEventListener

The removeEventListener method lets us remove an event listener.

For example, to remove the click event listener we added to the button above:

btn.removeEventListener("click", logFunction)

Now, when the button is clicked logFunction will no longer run.

classList (add(), remove(), contains())

Finally, lets discuss the classList property which contains 3 methods:

• The add method
• The remove method
• & The contains method

The classList property exists on all nodes and returns a DOMTokenList of all classes on the particular element.

document.querySelector("h1").classList;

This code retrieved all classes on the h1 element.

add()

We can call the add method on the classList to add a class to an element:

document.querySelector("h1").classList.add("myClass");

We can also pass in multiple classes to add multiple classes at once:

document.querySelector("h1").classList.add("myClass", "anotherClass", "thirdClass");

remove()

We can call the remove method on the classList to remove a class from an element:

document.querySelector("h1").classList.remove("myClass");

We can also pass in multiple classes to remove multiple classes at once:

document.querySelector("h1").classList.remove("myClass", "anotherClass");

contains()

We can call the contains method on the classList to see if an element has a certain class:

document.querySelector("h1").classList.contains("myClass"); // true or false

This methods return a boolean and can be used in conditional statements as well as.

Take Away

This was a very long article with a lot of information. We've covered plenty of DOM methods that will really up your JavaScript developed skills. I recommend you play around these methods to get a better grasp of their use cases and why they are useful.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Lets get right into it!

The First Navbar

This is the first navbar we will be building. It is a very common layout used by many websites out there. It has the brand name on the left side and the navigation links on the right side.

The Markup

The HTML markup for this navbar is fairly straight forward:

<nav class="navbar">
    <h2 class="nav-brand">My Website</h2>
    <ul class="nav-links">
        <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Shop</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
        </li>
    </ul>
</nav>

We have a nav element wrapping all of the content with a class of navbar. We then have a h2 which contains the website's title/brand. We then have an unordered list with a li for each navigation link that includes an a tag.

The Styling

To style this navbar, we will first need some basic styling for the content within. This includes changing the color of the content to match the purple background and displaying the links horizontally:

.nav-links {
    display: flex;
    list-style: none;
}

.nav-item:not(:first-of-type) {
    margin-left: 1.5em;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

We can now add some styling to the navbar to change its size, colors and spacing:

.navbar {
    width: 100vw;
    height: 7.5vh;
    background: #855FF6;
    color: #fff;
    padding: 0 5vw;
}

Obviously, the height, colors and padding can be adjusted for this navbar to suit your circumstances.

Now let's use flexbox to align the content:

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

A quick explanation of the above:

• display: flex - sets the display of the navbar to flex so the items will now be displayed in a row instead of on top of each other.

• align-items: center - aligns the items (h2 and ul) to the center vertically. This means whatever the height of the navbar is, the content will be in the center.

• justify-content: space-between - puts space between the items so the h2 will stay to the left and the ul will be positioned on the far right.

The Second Navbar

The second navbar is another reasonably common layout. It has got the title/brand on the left side, the links in the middle and button on the right side.

The Markup

The markup is very similar to the previous navbar with the addition of the button after the .nav-links list:

<nav class="navbar">
    <h2 class="nav-brand">My Website</h2>
    <ul class="nav-links">
        <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Shop</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
        </li>
    </ul>
    <button class="nav-btn">Create Account</button>
</nav>

The Styling

Interestingly, the exact same styling used in the previous navbar will make this navbar layout. The reason why is because justify-content: space-between; with three children instead of two children positions the middle child element (in this case, the links) in the center with the adjacent elements on the far left (the h2) and far right (the button).

You will however need to add styling to the button:

.nav-btn {
    height: fit-content;
    padding: 1em 1.5em;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

Now, lets move on to the final navbar layout

The Third Navbar

The third and final layout we will be creating is a simple navbar with the links in the middle and no brand nor button.

The Markup

The markup is quite simple yet again:

<nav class="navbar">
    <ul class="nav-links">
        <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Shop</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
        </li>
    </ul>
</nav>

Same markup without the h2 or button.

The Styling

The styling is the same again however set justify-content to center rather than space-between. This will align the links to the center of the navbar horizontally.

Take Away

Today, I've shown you how to create 3 different common navbar layouts. I hope you've learned something useful and can start using these layouts in your websites.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Today, I'm going to show you two tools that you can use to generate beautiful, presentable images of your code that can be shared on social media.

The First Tool - ray.so

The first tool I'll show you is called ray.so. It was made by the company Raycast and has a really simple UI to use.

You simply enter your code in the code box, adjust the settings at the bottom and then click export. You can select from 8 different colors and 4 different padding options.

Some of my favourite colors include:

Meadow

Breeze

Raindrop

Candy

It also supports a ton of different languages such as JavaScript, HTML, CSS and a bunch more. You can export the image as a PNG or SVG as well as just copying the URL to share.

That just about covers ray.so, lets move on to the next tool.

The Second Tool - Carbon

Carbon is another fantastic tool to create images of your code.

As with ray.so, you can enter your code into the code box, adjust the settings and export the image.

With carbon, you have a lot of customization available including:

• Selecting the color theme
• Changing the background color (or choosing an image)
• Changing the padding (both vertically and horizontally
• Adding a drop shadow
• Customizing the code box window's outline

You can also export it in multiple sizes as either a PNG or SVG. They also have a bunch of presets you can use in the settings menu.

Take Away

Today, I've shown you two different awesome tools that allow you to create images with your code. These images can then be shared on social media, added to blog posts or used however you wish. I hope you've learned something useful today!

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Today I'm going to show you how to deploy a react application with a service called Netlify. This method is completely free and allows you to automatically publish your web app by committing to your GitHub repo.

Lets get started!

Create A Netlify Account

Firstly, head over to Netlify's website and create a free account following their directions.

Image: Netlify's sign up page

Import Project From Git

Click on the Import from Git button under the "sites" heading on the overview page:

Connect To GitHub

Then, connect to GitHub by clicking on the "GitHub" option:

Pick your repository

Pick the project repository you wish to deploy:

Configure Build Settings

Before clicking deploy, make sure that your settings are correct under the Basic build settings header:

Make sure the build command is set to yarn build or npm build.

Make sure the publish directory is set to build.

I believe Netlify automatically detects a React app and configures these settings for you but check to be safe 😀

Deploy site

Click on the Deploy Site button and your react app will start building and then be deployed.

The site will be deployed on a weird domain name ending with .netlify.app. You can change the site name in site settings which will also adjust the domain for you.

Benefits Of This Method

By deploying your react app on Netlify, you:

• Get automatic deploys from your GitHub repo

• Get a free SSL certificate that is automatically setup

• Can connect your custom domain to your application (topic for another article)

• Get access to cool features like forms (for handling form submissions), identity (authentication), analytics (paid unfortunately) and many more 😀

Take Away

In this article, you've learned how to deploy your React application to Netlify for free.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Recently, I competed in my first Hackathon which was the Netlify X Hashnode Hackathon that concluded at the end of February.

I really enjoyed the experience and wanted to share the benefits I found of participating in a Hashnode Hackathon. Additionally, with the Hasura Hackathon taking place now, this article details various reasons why you should make the most of this opportunity and participate.

Also, feel free to check out my article for the Netlify Hackathon here: Introducing Code Network - A Social Network

The Benefits

#1: Win A Prize

One of the benefits of participating in a Hashnode hackathon is that if your submission is good enough, you may win a prize. Depending on the hackathon, the prize may be cash, cool merchandise, specific platform credits or a gift card.

Hashnode hackathon typically have 5 grand prizes as well as 10 runner up prizes so there's plenty of opportunity for you to be a winner. Additionally, you get a participation badge on your blog which is awarded to all winners.

#2: Learn & Grow

Another great benefit of participating is that you will certainly learn from the experience. Whether you learn a new platform the hackathon is based on, or just learn how to document your work, the learning experience is great and helps you grow as a developer.

In the Netlify Hackathon I recently participated in, I learned how to use Netlify Functions which I will certainly be implemented in some of my future projects. I also learned how to document my work in the form of an article, and how to create an open-source project.

There is no doubt that Hashnode hackathons are great opportunities to learn and grow as a developer.

#3: Gain Recognition

Another benefit is earning recognition for your skills. There is no doubt that getting noticed for what you are capable of is a challenge in the development community. However, with Hashnode hackathons, you can get the recognition that you deserve by putting in the effort to build a great application.

#4: Launching Real Apps

By taking part in a Hashnode hackathon, you get the opportunity to launch your own awesome application and see what the community thinks of your work. Hashnode hackathons are a fantastic way to gain practical experience building and launching a real application.

#5: Have Fun

Last but certainly not least, you get to have an awesome, fun experience building and sharing your application. I can tell you from my personal experience that the journey from building an application, writing an article about it and sharing it with the awesome Hashnode community is incredibly fun and rewarding.

Take Away

If you do decide to start taking part in Hashnode hackathons, just remember:

• Whether you win or not doesn't matter. Either way you've built a cool project to show off to the world (and add to your portfolio) whilst having fun.

• Try to learn as much as you can and enjoy the experience

• Check out what other people are building and spread positivity with reactions and comments 😀

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

But firstly, what is smooth scrolling?

What Is Smooth Scrolling?

Imagine a scenario when you have a button that navigates to a different section of your website. With smooth scrolling enabled, clicking that button will smoothly scroll to that section of the website rather than instantly snapping.

See it in action:

Hit the 'About Me' link on this website.

You will notice it smoothly scrolls down to the about section.

This effect is present on plenty of websites and is a useful arrow in your quiver so let's get into the code.

The CSS

To add smooth scrolling to your website simply add the following code to your CSS file:

html { scroll-behavior: smooth }

That's it. You have now added smooth scrolling to your website.

There is one caveat with this method that is its not supported by Safari (at least not on mobile) but other than that it is a great solution that doesn't involve any JavaScript.

Take Away

In this article, I've shown you how to add smooth scrolling to your website with just one line of CSS. Pretty cool right?

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Bootstrap React App

First, lets create a new react app using create-react-app:

npx create-react-app app-name

Then change into its directory:

cd app-name

Replacing app-name with the name of your application

Installing & Initializing Tailwind

Next, we can install Tailwind CSS and its peer dependencies as dev dependenciees:

npm install -D tailwindcss postcss autoprefixer

After installing the dependencies, we can run the init command to generate a tailwind.config.js file:

npx tailwindcss init -p

Updating Config File

Next, we need to update the content property in the tailwind.config.js file:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives To CSS File

Lastly, we need to add the following @tailwind directives to the index.css file in the src directory:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

We're Finished

We can now run the react app with npm start and everything should be working. You can now start using Tailwind CSS in your project.

Take Away

In this article, you have learned how to setup Tailwind CSS with a create-react-app project. I hope this guide has helped you and have a great day!

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, subscribe to my newsletter and follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

In this article, I'm going to show you how to create really simple and cool toasts using the react-toastify package.

Lets get right into it!

What Are Toasts?

Firstly, lets clarify what exactly is a 'toast':

A toast is a little pop-up that can positioned anywhere on the screen that shows a text message to the user. For example, toasts can be used for error messages, success messages or even notifications.

A toast may look like this:

Where does react-toastify fit in?

react-toastify is a cool package I came across recently that lets you easily implements customizable toasts into your react applications. With just two lines of code, you can get a working, responsive toast that can be customized.

After reading this article, you can check out their full documentation here to see everything you can build with react-toastify.

Installation

To install react-toastify, simply run:

npm install --save react-toastify

or with yarn:

yarn add react-toastify

Your First Toast

To create your first toast, import the ToastContainer component and toast function:

import { ToastContainer, toast } from "react-toastify"

You also need to import their CSS file:

Regular Version

import 'react-toastify/dist/ReactToastify.css';

Minified version

import 'react-toastify/dist/ReactToastify.min.css';

Finally, you can place the <ToastContainer /> component anywhere in your JSX and call the toast('Message to be shown') function to show the toast.

For example:

  import React from 'react';
  import { ToastContainer, toast } from 'react-toastify';

  import 'react-toastify/dist/ReactToastify.css';

  const App = () => {
    const handleClick = () => {
        toast("This Is A Toast!");
    }

    return (
      <div>
        <button onClick={handleClick}>Show Toast</button>
        <ToastContainer />
      </div>
    );
  }

Pretty cool right? What makes this package even better is that you can customize the toast by passing certain optional props to the ToastContainer component.

Some options include:

• position: which controls where the toast is positioned. Possible values include: top-left, top-right, top-center, bottom-left, bottom-right, and bottom-center.

• autoClose: which controls how many milliseconds until the toast automatically closes. E.g autoClose={5000} for it to last 5 seconds.

• closesOnClick: which controls whether the toast will close when its clicked on. It's value is a boolean of either true or false.

• theme: which controls the theme of the toast. This can be either light, dark or colored.

• More options in react-toastify's documentation: docs

Additionally, there are 5 different types of toasts you can use including: info, success, warning, error and default. These just change the color of the toast as well as the icon displayed.

Different types in action:

Info

toast.info("Wow so easy !")

Success

toast.success("Wow so easy !")

Warning

toast.warn("Wow so easy !")

Error

toast.error("Wow so easy !")

Default

toast("Wow so easy !")

Note: Changing the theme option will change the appearance from these images

Take Away

In This article, you have learned how to implements toasts in your react applications with the react-toastify library. This can be used in a wide range of scenarios such as displaying error messages and presenting warnings to a user. Recently, I used this package in a cool social network project for the Netlify X Hashnode hackathon: check it out here if interested.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃

Hey everyone,

Today, I am sharing the project I have built for the Netlify X Hashnode hackathon.

🔵 About Code Network ⚪️

Code Network is an open-source social network built for developers that allows you to share posts, follow other developers and play a fun game called Tech Trivia. The application is hosted on Netlify which is an awesome hosting service with a bunch of valuable features. The project combines with the positive social aspects of a social network with the fun elements of playing a game.

Try it out the application: Code Network

💡 The Inspiration

I've always wanted to build a social network that is specifically tailored towards developers. I've also been wanting to get into serverless functions and building applications with them. When I saw this hackathon, I thought it would be a perfect opportunity to achieve both. I could build an awesome social network for developers whilst learning lambda functions (through Netlify Functions).

Hence, Code Network was born.

✏️ Features

Here is a list of what you can do on Code Network:

• Create posts
• Read other user's posts
• Comment on people's posts
• Interact with posts by liking or disliking
• Follow users
• Play tech trivia (a fun trivia game)

⚙️ Tech Stack

Code Network was built with a JavaScript tech stack including:

1. React
2. Redux for state management (via reduxjs/toolkit)
3. Tailwind CSS for styling
4. Netlify Serverless Functions for the backend
5. MongoDB as a DB (through Atlas)
6. Open Trivia DB API for trivia questions

👀 What The Application Looks Like

When you first load onto Code Network, it displays a very nice landing page:

You can then create an account through the register page:

Or sign in through the login page:

Once signed up, you are taken to the home page where a introductory modal opens up and runs through a few simple questions to finish your registration:

You can view the home page which features other people's posts, links to play tech trivia and write a post as well as a list of users to follow:

Through the navigation bar you can navigate to the users page (devs), the posts page, the trivia page or your profile through the dropdown menu on the right:

The developers page (/users) lets you see others users and follow/unfollow them:

The posts page (/posts) shows other people's posts and have a form up the top allowing you to write your own:

For each post you can view and write comments as well as like/dislike:

If you own the post, you can edit its details or delete it through post settings:

The tech trivia page (/trivia) lets you play tech trivia which is a trivia game that asks you random questions about technology and tracks your score. You can select how many questions you wish to answer as well as the difficulty of questions:

The profile page (/users/:id) shows the user's name and headline and also all of the posts they have made:

👌 Code Quality

To ensure consistent formatting throughout the code base, the code was formatted using prettier via the VS code extension.

💪 Difficulties I Had To Overcome

While building the project i had to overcome a variety of bugs and problems.

To name a few:

• Netlify Dev not starting up server with no apparent reason why. After numerous hours, I figured out why the issue was happening and was able to fix it.

• Handling authentication in a neat and organised way was a challenge at first. Since I didn't want to have to check if the user is authenticated on every protected route. To solve this, I created to separate app components (AuthenticatedApp and UnauthenticatedApp) which each help their routes for authenticated users and not authenticated users. I then conditionally rendered each app based off whether the user was authenticated or not. Got the idea from this article.

  return (
        <BrowserRouter>
            {isAuthenticated ? <AuthenticatedApp /> : <UnauthenticatedApp />}
        </BrowserRouter>
    );
  

• How to display error messages and success messages to the user in an organized manner was another challenge. I didn't want to use an Alert component in every part of the application that would need to handle errors. Fortunately, i discovered a cool package called react-toastify which lets you easily display all sorts of messages to the user in the form of popups. This was then implemented across the application.

🧠 What I Learned Creating The Application?

I am very happy to have participated in this hackathon since I learned a lot whilst building my application and also had a fun time doing so. Some of the things I learned:

• How lambda functions work thanks to Netlify Functions
• How to build a quiz style game
• And licensing a project on GitHub

🚀Future Plans

In the future, I intend on adding a ton of cool features to make this application even better.

Some potential future features include:

• Custom profile pictures via cloudinary image upload
• Attach code snippets and images to posts
• Add links to other platforms like GitHub to a user's profile
• Live messaging with Firebase

🔗 Useful Links

• Deployed Web Application
• GitHub Repository

👋 Thanks Again

Thanks to Netlify and Hashnode for hosting this amazing hackathon.

Let me know what you think about Code Network in the comments below. If you wish to contribute to this open-source project, feel free to take a look at the contribution guide in the GitHub repo. Thanks for reading this article and have an awesome day! 🔵 ⚪️

Also, feel free to connect with me on other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: BlakeYeboah

You can also show your support by buying me a coffee 😃

What is the Hashnode API

The Hashnode API can be found at api.hashnode.com/. It is a GraphQL API that allows us to interact with Hashnode in a variety of ways. For instance, you can:

• Fetch posts from a user
• Follow a user
• Delete a post
• And much more

In this article, we'll just be covering how to fetch articles with the API.

Lets begin!

Fetching The Articles

To fetch the articles, we will be making a POST request to the API from a JavaScript file using Fetch. Making the request:

const data = await fetch("https://api.hashnode.com/", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        query,
        variables,
    }),
});

This should be done inside an async function for await to work

This won't work yet as we haven't defined the query or variables variables.

The query variable contains the actual GraphQL query we will use. This looks like this:

const query = `
    query GetUserArticles($page: Int!) {
        user(username: "BlakeYeboah") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    slug
                    coverImage
                }
            }
        }
    }
`;

Replacing "BlakeYeboah" with your Hashnode username so it requests your articles

The variables variable is an object with values for variables mentioned in the query. In this case, its just the page variable which has to be an integer. We'll make this 0 to get the newest articles:

const variables = { page: 0 };

With these variables defined, our API request will now work. However, we must convert the JSON returned from the API into a usable JavaScript object for us to be able to access the posts we have fetched.

We can do this with the .json() method on the data variable which stores our request. We use await since it returns a promise. The code to do this looks like this:

const result = await data.json();

The actual articles are nested a few properties deep:

const articles = result.data.user.publication.posts;

If you want more information for each post, you can adjust the GraphQL query to select other properties as well. For a list of properties available, you can view the docs of the API.

Take Away

In this article, you have learned how to fetch articles from the Hashnode API. This can be used in a variety of was and is definitely useful to know if you have a Hashnode blog. Recently, I used the API to display my latest blog posts on my personal portfolio website.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

Lets get right into it!

Creating A React App With TypeScript

To create a react app with TypeScript, we can use create-react-app with the --typescript flag. This will bootstrap a react application with TypeScript.

Using NPM:

npx create-react-app --typescript example-app

Using Yarn:

yarn create react-app --typescript example-app

Change 'example-app' to the name of your application

Once your application is setup, you will notice all js files have a .ts extension because they are now TypeScript files.

Functional Components

When creating a functional component, we can use the FC type exported by react to give the function a functional component type.

This would look like this:

const App: FC = () => {
    return <div>
        <h1>App</h1>
    </div>
}

We can also define types for props by passing in a type to FC like this:

const App: FC<IProps> = (props) => {
    return <div>
        <h1>App</h1>
    </div>
}

IProps would be a type or interface with the types of all props the component receives

Alternatively, we can define the prop types like we would a regular parameter of a function:

const App: FC = (props: IProps) => {
    return <div>
        <h1>App</h1>
    </div>
}

This would work the exact same way.

Using useState

When using useState, we can define the type of the state by passing it in <> after the declaration.

This would look like this:

const [name, setName] = useState<string>("Blake");

The specifying the type in this case is unnecessary since it can be directly inferred from the string. It would be necessary to define the type if it may change when the value is changed.

Some Other Types

Some other types you may want to know include:

• HTMLInputElement - for html inputs
• React.ChangeEvent - for input change events
• React.FormEvent - for form submissions

There are obviously plenty of types out there related to react as you build applications and implement new features you will likely run into type errors which you can solve by simply searching up the error and finding the type needed for the situation.

Take Away

In this article, we have covered how to implement TypeScript with React and some common types you will often need. I hope you've learned something useful and can start using TypeScript in your React applications.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

A Todo List

We all know what a todo list is. Its a great starter project to build since it will teach you fundamentals of React like components, state management, handling input and more.

Some features you would want to include:

• List of to-dos
• Input field to add a to-do
• Checkbox to mark a to-do as complete
• Delete button to remove a to-do

You can also advance this project by fetching the to-dos from an API such as JSON Placeholder so that you can also practice using APIs with React.

If you are already reasonably comfortable with React, a to-do list probably won't be a great project since its really simple and easy to build. However, its a great project for a complete beginner to learn the basics of React.

A Weather App

A weather app is a simple project where the user enters what city they are in, and the application fetches data about the weather in that city from an API. This project teaches skills like using APIs, binding user data to API requests and display API data to the user.

Some features you would want to include:

• Ability to search weather by city
• Display weather data like temperature
• Filter weather by day

There are plenty of weather APIs out there that are free to get started with making this a great project to build if you're a beginner with React.

A Notes App

A notes app is a simple app you can build where users can create notes and these are saved to their local storage so if the page is refreshed they can still keep their notes. This project teaches skills like managing local storage, handling user input and more.

Some features you would want to include:

• Ability to create notes
• Ability to delete notes
• Notes saved to local storage
• Nicely styled notes

This project is a great project for beginners since being able to use local storage is an important skill when building applications.

A Rock Paper Scissors Game

We've all played rock paper scissors before. Its a really simple game that can be created with React where a user clicks on rock, paper or scissors and it either wins, draws or loses depending on what the computer chooses.

Some features you would want to include:

• Ability to select rock, paper or scissors
• Generate random choice for computer each round
• Compare user's choice and computer's choice to determine a winner

This is a fun project that a beginner should build to help them learn react since it will teach them state management, handling user input and using randomly generated numbers to make decisions.

Take Away

This article has covered 4 different react projects beginners can build to help them practice their skills and improve their ability to use React. Feel free to share your version of any projects mentioned here in the comments of the article.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

The Scrollbar Properties

In your CSS file, there are 3 main properties we will style with our CSS to create a custom scrollbar.

These include:

• ::-webkit-scrollbar - the actual scrollbar element
• ::-webkit-scrollbar-track - the track part of the scrollbar (background)
• ::-webkit-scrollbar-thumb - the scrollbar handle

::-webkit-scrollbar

The first step would be to adjust the width of the scrollbar. By doing so, you will be removing the up and down arrows at the top and bottom of the scrollbar which makes it looks more minimalistic and overall better.

Setting the width to 7px:

::-webkit-scrollbar {
    width: 7px;
}

You can set the width to whatever value you wish. How thin you make it depends on the design of your website so experiment until one floats your boat.

::-webkit-scrollbar-track

The next step will be adjusting the background of the track. If you have a dark aesthetic on your website, you will want a dark scrollbar. And of course a light scrollbar if you have a light aesthetic.

To adjust the background of the track:

::-webkit-scrollbar-track {
    background: #222
}

This code sets the background to a dark grey. You can change the color to whatever you want of course.

::-webkit-scrollbar-thumb

After that, you will probably want to change the background of the thumb which is the handle you drag up and down to scroll through the page. The color you use will depend on the color theme of your website so adjust it accordingly.

The code:

::-webkit-scrollbar-thumb {
    background: rgb(138, 165, 255)
}

This code sets the background to a light blue, you can change the color of course

Adding A Hover Effect On The Thumb

Adding a hover effect to the handle of the scrollbar is optional however it is always beneficial. You would probably want to set the color to a lighter or darker version of the handle's color rather than a completely different color.

To add a hover color change:

::-webkit-scrollbar-thumb:hover {
    background: rgb(150, 177, 255)
}

Browser Support

The ::webkit-scroll element is supported by Chrome, Edge, Safari and Opera so on those browsers we can modify the look of the browser's default scrollbar. On Firefox, you would need to use other CSS properties like scrollbar-width and scrollbar-color which is a topic for another article.

Take Away

In this article, we've covered how to create a custom scrollbar using CSS without the need for any external libraries. I hope you've learned something useful and can start adding custom scrollbars to your future projects.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

Lets get right into!

What Is Your Portfolio?

Your portfolio is a website you build that showcases your best projects to employers or potential clients. Your portfolio is a very important component of finding a job/client since it shows what you are capable of building.

What Is The Purpose Of Having A Portfolio?

Having a portfolio allows you to directly show people projects you have built in the past that showcase your skills and what you are capable of. If you don't have a portfolio, its harder to demonstrate what you can do since you there may not be a way for an employer or client to see your work.

Having a portfolio makes this simple!

What Should Your Portfolio Include?

Your portfolio should include:

• A heading section with a call to action that introduces yourself
• A projects/work section that showcases 3 - 5 of your best projects
• A skills section that showcases your technical proficiencies
• An about section that has a bit of information about yourself (not too detailed)
• A contact section with a form that allows people to directly contact you
• A simple navigation to go between pages
• A link to your resume and socials (e.g GitHub, LinkedIn etc.)

The Header

Having a good looking header to your portfolio is important since this is essentially your first impression. I think a good way to go about it is having a dark background image with some contrasting-colour overlaying text that introduces yourself. Keeping it short is highly beneficial since no one wants to read a full essay on who you are (at least not at the start).

Another important part of your header in a call to action. A call to action is a button or a link that you want visitors to click. This could be a button that links to your work. Or a button that links to your skills. Or even a contact button. The point is its important to have one.

Take a look at the header section of my portfolio:

Its simple and clean. It has a clear navigation at the top of the page that links to the various sections of my portfolio. It has a simple piece of text in the centre that says my name and a short summary of what I do. Finally, there is a call to action that says 'See My Work' that links to the projects section.

The Projects Section

The projects section is the most important part of your portfolio. It directly showcases your work. I would suggest range of about 3 to 6 of your best projects that showcase the skills you claim you can do. For each project, its important to have a title, description of what the project is, a list of skills you used to build it and links to a live site and GitHub repository (or wherever the code is).

Keep the description short and sweet to not make anyone bored but make sure you make the project sound impressive. Having an image of your project (or just a part of the project) is also another good addition since it shows what the project looks like.

Take a look at the projects section of my portfolio:

It has a clear heading at the top saying "My Projects". The image only includes the top of the section however below, there are three of my best projects that highlight my skills. For each project, there is a title, description, list of skills, link to code and link to a live demo as well as a screenshot of the project.

If you aren't sure what projects you want to build/add to your portfolio, check out my article on Full Stack Portfolio Projects You Should Build.

The Skills Section

The skills section isn't necessary since it would be on your resume however I think it can't hurt to have a short, simple section that lists your skills. Additionally, categorizing these skills (e.g frontend, backend, etc) further clarifies your technical proficiencies and what you can do.

Take a look at the skills section of my portfolio:

Its nice, simple and shows exactly what skills I have in what area.

The About Section

The about section has one main purpose of answering these questions:

• Who are you?
• What do you do?
• Why do you do it?

These three W's are the perfect recipe to a good about paragraph. Including an image in your about section is optional. There are negatives since people can discriminate however you probably have an image on your LinkedIn anyway so I don't think it matters. Another part you probably want to include is a links to your social platforms like GitHub and LinkedIn. You can link to other platforms like Instagram if you want but I would only recommend it if its relevant. For example, if you post what you had for dinner last night that probably isn't relevant to a client/employer.

Take a look at the about section of my portfolio:

Its simple and contains everything it needs to do. I decided to add a photo since it improved the aesthetic and improved the layout however this is optional.

Also, remember not to make your about section too long. You don't need to mention every detail in your life, just focus on the good stuff that an employer would be interested in.

The Contact Section

The contact section should simply contain a form that lets users send you an email. This makes it really simple for potential clients or employers to get back to you. Another part you may wish to include is your phone number since people may wish to call you instead of emailing back and forth.

Take a look at the contact section of my portfolio:

Its a very simple form which allows visitors to easily send me an email if they wish.

Other Tips

Here are some other tips you may want to take into account when building your portfolio:

• Design is key: having a good design on your portfolio makes a good impression.
• Simplicity: sometimes, simple is best. This is one of those times.
• One Page: including all sections on one page tends to work better than multiple since people only have to look at that one page and not be constantly switching between pages to see your information.

Take Away

This article has covered the various inclusion and exclusions of a good developer portfolio. Good luck in building or improving you portfolio site!

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

React

React is the frontend framework i use in the majority of frameworks. If you don't know what React is, it is a frontend library maintained by Facebook for building user interfaces. From hooks to the virtual DOM, React is a great option for building user interfaces.

React-Router

React-Router is a must-use package with React since it allows you to setup different routes in your application that would link to different pages. Its really simple to use and has a great developer-experience.

Redux

My preferred library for state management in React is Redux. Redux has been around for a while and I think its the best option available (at least for larger projects). On smaller projects I either implement the Context API with the useContext hook or I simply use props. With @reduxjs/toolkit, it is incredibly easy to setup (compared to the past) and it also doesn't have too high of a learning curve.

TypeScript

TypeScript is great! It allows you to strongly type your JavaScript and can added to react by adding a simple flag to your create-react-app command. TypeScript helps prevent bugs and issues early since it type checks your code and throws more exceptions. I would highly recommend you start using TypeScript in your projects.

Tailwind CSS

I recently began using Tailwind CSS and I must admit I've been really enjoying it. Its utility-based approach seemed a bit messy at first however the customization it brings makes up for it. Prototyping user interfaces quickly whilst also building a custom design was quick a pain prior to Tailwind CSS. Its definitely my favourite front end design framework.

React-Helmet

React helmet is a very helpful package for your React applications since it lets you manipulate the head of the HTML document through your React components. This means that you can change the title of the page dynamically as well as add SEO tags (though not as effective as Next.js SEO).

Take Away

This has been my favourite front end tech stack to build application with in 2021. I hope you enjoyed the article.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃