But like everything I'm passionate about, I began reading articles and exploring Open source projects on GitHub. I was blown away by how thousands of people could contribute different lines of code, and it would still all come together to make sense.

As a designer, I believed Open source was exclusive to developers, that there was no room for designers or non-coders. It became overwhelming at some point, and I eventually took a break.

Wait... Designers Can Contribute to Open Source?

Everything changed when I stumbled upon Mautic, an Open source marketing product that welcomes non-code contributions. You can imagine my joy when I saw the opportunity to contribute through design. It felt like a dream come true.

I made my first contribution by designing visual imagery for the Mautic 5.2.0 release. I was thrilled when my contribution was accepted and even more excited when I saw my name listed in the credits section of the blog post announcing the release.

That same month, I won a case study challenge. My entry, AccessPalette, was centered on accessibility and Open source. It’s a tool that helps designers and developers choose accessible text and background color combinations that meet Web Content Accessibility Guidelines (WCAG) standards. I was excited that my idea was recognized and awarded.

At that point, I had to decide: would AccessPalette remain just a case study, or could I turn it into a real product? I believed it could be a valuable tool for designers and developers alike, but reality hit, I had no idea how to start an Open source project.

Discovering the GitSkilled Education Program

I searched endlessly, reading articles, browsing forums, and digging through resources on how to launch an Open source project. While I found helpful content, nothing provided the practical guidance I needed, not just to contribute, but to maintain an Open source project.

I didn’t know what license to use, how to set up an issue template, contribution guidelines, and so on. It felt like too much, and I became overwhelmed. Eventually, I abandoned the idea until I discovered the GitSkilled Education Program through the She Code Africa community.

What Is GitSkilled?

The GitSkilled Education Program helps aspiring developers and contributors get started with Open source. It offers both guidance and resources for contributing meaningfully to Open source projects, including exam vouchers for the GitHub Certification, covering the cost entirely.

This was exactly what I needed to revive AccessPalette. Through the program, I gained access to the Microsoft Learn Platform, where I learned things I’d never explored before like setting up a GitHub organization and managing work with GitHub Projects.

I also discovered how to foster engagement through GitHub Discussions, something that will be very useful when contributors begin joining the project. Plus, I got to try out features like GitHub Codespaces and GitHub Copilot. Mind-blowing right!

The GitHub Foundation Learning Path

This experience opened up a whole new world for me. I completed the 8-module GitHub Foundations Learning Path and earned my completion trophy. I learned more than I ever imagined, especially about features that are foundational to starting a successful project.

I realized that I could actually do this. The skills I gained weren’t just theoretical, they were practical and empowering.

Joining the GitSkilled Africa Community

Completing the course gave me access to the GitSkilled Africa Community, a supportive group of like-minded individuals passionate about open source. The atmosphere was welcoming and inspiring. I met people who had already launched their own projects, and reading about their journeys gave me the motivation to keep going.

I'm incredibly grateful to be part of this community.

Becoming GitHub Certified

Preparing for the GitHub Certification Exam was a challenge but a worthwhile one. Even though the voucher covered the cost, I didn’t want to take the opportunity for granted.

I revisited several modules, carefully studied every topic in the examination prep guide, and found helpful resources like a practice test and a FreeCodeCamp article that explained the exam topics in depth.

I was overjoyed to pass the exam and receive my certificate and badge almost immediately. Becoming GitHub Certified means a lot to me, it’s proof that I have the skills to lead and build Open source projects.

Gratitude

I'm truly grateful to the GitSkilled Education Program for helping make my open-source dream a reality. With the knowledge I gained, I was finally able to start AccessPalette.

Thank you for equipping me with all the tools I need to succeed.

A big thank you to She Code Africa for bringing this opportunity to my attention, for checking in on us, and for helping us stay focused from start to finish. Your support has been invaluable.

If you’d like to contribute to AccessPalette, that would be amazing! You’ll find the repository here. Don’t forget to drop a star ⭐. Thank you!

Useful Links

• About GitSkilled

• The GitHub Foundations Learning Path

• Contribute to AccessPalette

• What is Open Source?

• FreeCodeCamp Article on the GitHub Foundation Exam Guide

• GitHub Foundation Practice Test

Let’s Connect!

• LinkedIn

• Twitter

• GitHub

The easiest and fastest way to set up a react project is the create-react-app tool. With this method, you do not need to install Babel or Webpack.

In this tutorial, we'll focus on setting up a react project by running the simple command npx create-react-app my-app.

Prerequisite

• Knowledge of React.

• Knowledge of the terminal.

• Browser installed on your machine.

Before we create-react-app, we need to install some useful tools. Let's get started.

Install Node.js

To install Node.js, go to nodejs.org. If you already have Node.js installed on your machine, run the command below on your terminal to confirm the version of the Node.js on your machine. You will need a version greater than or equal to 10.16.

node --version

Node package manager(npm) automatically comes with node installation. To check the version of npm on your machine, run the command below

npm --version

You will need a version of npm greater than or equal to 5.6. If you have a version below the ones listed, update Node.js and npm on your device.

Download and install a code editor

You can use any code editor of your choice. If you don't have any installed, I recommend Visual Studio Code (VS Code). Go to code.visualstudio.com to download VS Code.

Run create-react-app command

If you've ever installed create-react-app globally on your device using the command npm install -g create-react-app, you have to uninstall the package. Run the command below to uninstall:

npm uninstall -g create-react-app

or

yarn global remove create-react-app

Now, you can run the command below in your terminal

npx create-react-app my-app

It will take a few minutes to setup and at the end, a message will be displayed similar to the one below.

npx is a package runner tool that comes with npm version 5.2.

After running the npx create-react-app my-app, a folder will appear on your device called my-app.

Open up the my-app folder with a code editor. It contains a good number of files you will need for your project.

Start the React development server

In your terminal, change the directory to the my-app folder.

cd my-app

Next, run the command below to start the development server.

npm start

After running the command, a tab will automatically open up in your browser that points to http://localhost:3000/. This tab will display a page similar to the image below.

There you have it! You've set up a react project with the create-react-app tool. Now, you can go back to your code editor and code away.

Think of Git and Github as a time machine that can go back in time to provide information on what happened, how it happened, and who caused a change in the past.

In this article, you'll learn how to:

• Install and configure git

• Create a local git repository

• Create a remote repository

• Push files to github

What is git?

Git is open-source software that tracks changes made to a file. It records snapshots of changes made. Linus Torvalds developed git in 2005.

A Software that tracks changes made to a file is known as Version Control System (VCS). There are various version control systems, like Subversion, Mercurial, but git is the most widely used.

Reasons why you should use git

• Git makes it easy to view the timeline of changes made to a project.

• Git encourages collaboration among developers.

• Git allows you to view, restore and make changes to the previous version of a code.

• Git lets you push projects to a remote repository.

Download, install and configure git

Click on one of the links below to download and install git on your device

• Windows

• MacOS

• Linux/Unix

Now open up git and run your first git command.

git --version

The command above will return the current version of git on your device.

The next step is to configure git. Git has to know who you are, therefore include your username and email address. Git uses this information to document the contributor whenever there is a change to the code.

git config --global user.name "myusername"

git config --global user.email "myemail@mail.com"

Hurray! You've successfully installed git and run your first git command. Now the real work begins.

Working with git

Let's imagine you have a project and you want to track this project with version control. Follow the steps below to start working with git

Step 1: Initialize a git repository

A git repository is the .git/ folder inside a project. It tracks and records all the various versions of the project. The .git/ folder is hidden by default on your machine.

To initialize a git repository in a project, open the project with git or open git and change directory cd to the project root directory.

cd /Users/user/my_project

Next, initialize a git repository in the project by running the command below

git init

At this point, there is nothing for git to track because you've not told git the files you want to track.

Step 2: Add files

Run the command git add to specify the files you want git to track.

git add index.html

git add style.css

git add app.js

Adding files one after the other can be time-consuming. The command below adds all file in your project folder at once:

git add .

If don't want to add a file, simply remove the file by running this command git rm --cached filename. For example

git rm --cached style.css

Now, you've specified the files you want git to track. The next step is to save all the changes with a commit.

Step 3: Commit changes

A "git commit" command saves all the changes to the local repository. It captures a snapshot of a project along with a description from the user and the user identity.

To commit the tracked files to the local repository, use the commit command along with a short message -m "short message". For example

git commit -m "Initial commit"

Make sure your commit message is in the present tense.

Now, git has a record of the current state of your project. If you make any change to the file and want to commit that version to git, you have to run the git add command and git commit command with a git message describing the change.

Note that the project is located on your machine and can be accessed only through your machine. This is where Github comes in. Github hosts your project on the web, making it easy to access from any device and by anyone(if you choose to keep your repository public).

What is Github?

Github is a code hosting platform for version control and collaboration. Github has all the benefits of git and even more.

Reasons why you should use GitHub

• Github hosts your repository for free on the web.

• Github encourages collaboration with other developers around the world.

• Github lets you clone projects you love to your machine and start working on them immediately.

• You can never lose your file on Github except you intentionally delete it.

• Github allows you to contribute to any open source projects of your choice.

• Github is a community of over a 56million developers. It is a great place to showcase your work to the world and learn from others.

Join Github and create a remote repository

Creating a GitHub account is very simple. Go to github.com and signup with your email address and password.

To create a GitHub repository, follow the steps below:

Step 1: Go to the top right corner of your GitHub homepage. Click on the plus button. Next, click on the new repository.

Step 2: Input a name for your repository

Step 3: Initialize the repository with a README file.

A README file contains important information about your project. It's a form of documentation that gives a detailed explanation of your project.

Step 4: Click the "create repository" button.

You've created a remote repository. It's time to push your project.

Push your project to GitHub

To push your project to GitHub, make sure you are currently in the project directory and you've committed all changes, then run the command below on git.

git branch -M main

git remote add origin https://github.com/yourusername/repositoryname.git

git push -u origin main

Since this is your first time pushing to GitHub, GitHub will require you to validate your credentials by asking you to log in. Next, refresh your GitHub page and, you will see your project on Github.

If you make any change to your local repository and you would like to push the change to GitHub, you don't have to initialize a repository again since you've done that already. Just add the changes using the git add command, commit your changes and push to Github.

Other git commands you should know.

git status lets you know the changes that are tracked and those that are not.

git log displays the history of commits on your local repository.

git clone downloads a copy of a remote repository to your machine.

git pull pulls the latest update from a remote repository to the local version on your machine.

git branch lets you create or delete a branch

Conclusion

Git and Github are tools you will work with as a developer. They may seem hard to learn on the first try, but with constant practice, you will be comfortable using these tools. I hope this article was helpful. If you have any questions, feel free to ask in the comment section below.

Resources

• Pro git book

• Github Guides

• Learn Git Version Control using Interactive Browser-Based Scenarios

What is responsiveness?

Responsiveness is a website's ability to adapt to the browser's viewport automatically. The layout of this blog on a mobile device is different from that on a laptop. You will notice that on a laptop device, the like, share, and Twitter buttons are displayed beside the article, while on a mobile phone, they appear below the article. That is because this website is responsive.

Think mobile-first

Mobile devices account for over 50% of global website traffic. What this means is that half of the internet users access the web through their mobile devices. In the US alone, over 40 million internet users are mobile-only. With this high number of internet users accessing the web through their mobile devices, it is advisable to build your website mobile-first before adapting your designs for other devices. With this approach, you can be sure that your website is fully responsive on mobile devices.

Do not forget the viewport meta tag

The viewport is the area of a web page visible to the user. The viewport does not have a fixed size but varies from one device to another. A desktop has a larger viewport compared to that of a mobile device.

The viewport meta tag is an HTML tag found in the <head> of an HTML document. It tells the browser how to render a webpage.

<head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
</head>

width=device-width sets the width of the content to the width of the device. initial-scale=1 sets the initial zoom level when a user visits the page.

If you omit the viewport meta tag, mobile devices will display a webpage at desktop screen width, making it difficult to read.

Apply media query

A media query is a feature of CSS3 that tells a browser to modify a webpage if it fulfills a condition. Media queries help to achieve responsiveness by customizing webpages to support various screen sizes. They target a device property such as screen resolution, orientation, width, etc, then add styles that make it responsive.

The width media feature specifies the width of the viewport. It is one of the media queries you will certainly use to achieve responsiveness. This can be an exact number(for example 768px) or a range using min-width and max-width.

/* When the viewport is at least 700px and above */
@media screen and (min-width: 700px) {
  .element {
    /* Apply some styles */
  }
}

/* When the viewport is between 500px and 800px wide */
@media only screen and (min-width: 500px) and (max-width: 800px) {
  .element {
    /*Apply some styles*/
  }
}

Layout with CSS Flexbox and CSS Grid

Flexbox and grid layout are the easiest and most effective ways of creating a responsive layout without using positioning or float.

CSS Flexbox

Flexbox is a layout method in one dimension. With flexbox, you can arrange content in rows **or **columns. Flexbox is efficient because contents can grow to fill out space flex-grow or shrink to prevent overflow flex-shrink.

.container {
    display: flex;
}

CSS Grid

CSS Grid is a two-dimensional layout method for laying out items in rows **and **columns. CSS Grid aids in dividing a page into various segments. Grid layout is the most effective way of creating a responsive layout in CSS.

.container {
    display: grid;
}

Make images flexible

A picture is worth a thousand words

There is no doubt that images play a vital role on web pages. Images are appealing and easy to understand compared to blocks of text. A poorly laid out image can mess up the layout of a website preventing visitors from returning. The code snippet below makes images responsive.

img {
 max-width: 100%;
}

The code prevents images from exceeding the width of their container. You can apply this for video content too.

If you want to display a cropped version of an image for smaller screen sizes, an understanding of art direction is essential. You can learn more about this here

Use relative units

Units are vital when creating a responsive layout. There are several units in CSS, each one of them displays content differently. For example, pixel px is a fixed unit and it prevents users from altering the font size of a website while em and other relative units give users the freedom to adjust the font size from their device settings.

Relative units specify a length of an element in reference to another element. Relative units are practical in creating a scalable layout.

Examples of relative units and their description:

• rem is relative to the font size of the root element.

• em is relative to the font size of the parent element.

• vh is relative to 1% of the viewport's height.

• vw is relative to 1% of the viewport's width.

Conclusion

Responsiveness of a website on all screen sizes should be top priority when creating a website. The simple and effective steps in this article will certainly make your website responsive across all devices.

Matryoshka dolls are a set of wooden dolls of decreasing size placed one inside another. To get the candy, we would take the following steps as shown in the diagram below:

This procedure is recursive.

Features of a recursive function

function recurse() {
    if (condition) {
        //base case
    } else {
        recurse(); //recursive case
    }
}

A recursive function has two parts:

Recursive case: A recursive case is a part of the function that calls itself. Without a recursive case, a recursive function will not exist.

Base case: A base case is a terminating condition that tells the function when to stop calling itself. If omitted, the recursive function will run continuously and eventually crash your program.

Example of recursion

A good example of recursion is factorial.

Factorial is the product of an integer and all the positive integers below it. For example

• the factorial of 9 is 9! = 9 x 8 x 7 x 6 x 5 x 4 x 3 x 2 x 1

• the factorial of 3 is 3! = 3 x 2 x 1 = 6

This is what the code will look like in JavaScript

function factorial(num) {
    if (num == 1 || num == 0) {
        return 1;  //base case
    } else {
        return num * factorial(num - 1);   //recursive case
    }
}

factorial(3);
//6

From the above code we can see that the function calls itself again factorial(num - 1) but this time, minus one which makes it recursive.

Now, let's examine what happens when we pass 3 into the function argument

Since 3 is not equal to 1 or 0it will skip the base case and proceed to the recursive case which, results in 3 * factorial(3 - 1)

3 * factorial(2)

factorial(2) will go through the same process. 2 is not equal to 1 or 0 it will skip the base case and proceed to the recursive case which, will result in 2 * factorial(2 - 1)

2 * factorial(1)

factorial(1) will go through the same process but will return 1 since it fulfills our base case.

return 1

At this stage, we have decreased the argument by one on each function call and, our base case is true. The function will return in order from inner to outer because recursion is a group of nested function calls.

factorial(1) returns 1

factorial(2) returns 2 * factorial(1) or 2 * 1

factorial(3) returns 3 * factorial(2) or 3 * 2 * 1

3 * 2 * 1 = 6

Below is a diagram showing the procedure.

Recursion can also solve the problems below:

• Fibonacci sequence

• Towers of Hanoi

• Quick sort

• Linked list

• Merge sort

Alternative to recursion

Iteration is an alternative to recursion. Iteration is the process of executing a set of instructions repeatedly. Any recursive function can be written iteratively and vice versa.

Let us solve the factorial problem iteratively

function factorialize(num) {
  if (num === 0 || num === 1)
    return 1;
  for (var i = num - 1;  i >= 1;  i--) {
    num *= i;
  }
  return num;
}
factorialize(3);
//6

We can see that recursion is an easy way to write and understand code compared to iteration, but recursion is not always the best option.

Recursion takes more memory space by building stacks which, eventually makes the program slow, while iteration use state variables for stacking and counting.

Some problems are simple to solve using recursion, especially when the efficiency of the program is not a concern. In such a case, recursion is a more preferred option.

Advantages of recursion

The following are reasons why you should use recursion.

• Recursion makes code easy to understand.

• It is a direct way to solve complex problems.

• It makes code clean and precise.

• It is an alternative to iteration.

• It helps manipulate the tree structures of an object.

Disadvantages of recursion

• Recursion requires more memory space because all the function calls store in the recursion call stack.

• Recursion is slow compared to iteration because it consumes more memory space.

• Poorly written recursive function leads to stack overflow. A stack overflow occurs when a function calls itself repeatedly until it exceeds the memory(call stack) allocated to it.

Conclusion

• Recursion is a process in which a function calls itself.

• A recursive function must have a base case and a recursive case.

• A base case tells the function when to stop.

• A recursive case is a part of the function that calls itself.

• Factorial is the product of an integer and all the positive integers below it.

• Recursive functions can be written iteratively and vice versa.

• Recursion makes code precise and easy to understand.