DEV Community: Ineza Bonté Grévy

Rebuilding My Blog: From Next.js to Astro

Ineza Bonté Grévy — Fri, 24 May 2024 04:04:44 +0000

For quite some time the thought of whether my site may be a bit too over-engineered lingered my mind. For a website that just displays blogs I definitely had a ton of javascript

I've recently undertaken the task of rebuilding my site, transitioning from Next.js to Astro, and I couldn't be more pleased with the results. One of the most noticeable improvements is the significant reduction in JavaScript bloat. My pages are now much lighter and faster.

With Next.js, I found myself incorporating more JavaScript than necessary, especially for a simple blog like mine. Switching to Astro allowed me to strip away the unnecessary JavaScript.

This transition also reinforces a growing consensus: JavaScript has become one of the heaviest assets on the web today. By minimizing its usage, we can create faster, more efficient websites.

To better illustrate the improvements, here are some screenshots of my site before and after the switch:

Before (Next.js):
After (Astro):

Notifications in progressive web apps using web push

Ineza Bonté Grévy — Tue, 09 May 2023 17:29:46 +0000

Notifications are an essential part of any web application. They help to keep users informed about important updates, events, and offers. In a Progressive Web App (PWA), notifications can be used to engage users and enhance their experience. In this article we'll go over the APIs depended on by PWAs and how to implement push notifications in your own web application. Let's get started!

Notifications in PWAs depend on these 3 technologies in order to work.

Push API - gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent
Notifications API - allows web pages to control the display of system notifications to the end user. It is designed to be compatible with existing notification systems, across different platforms.
Service Workers - Service workers are special javascript files that act as proxies between web browsers and web servers.

In addition to these 3 technologies we will also be using the web-push library. This library allows us to generate application server keys and it also abstracts all the complexity that comes with pushing data via the Web Push Protocol

To send Notifications in a PWA there are several steps we have to go through to make it possible;

Feature Detection

It’s advisable to ensure that the necessary technologies are available in the user's browser before going any further. Specifically, we need to check for support of the Push API, the Notifications API, and Service Workers. If any of these features are not supported, we should provide a fallback experience or notify the user that notifications are not available.

if (!('Notification' in window)) {
    // Notification API isn't supported
}

if (!('serviceWorker' in navigator)) {
  // Service Workers aren't supported
  return;
}

if (!('PushManager' in window)) {
  // Push API isn't supported
  return;
}

Register a service worker

Registering a service worker is our way of telling the browser where the service worker file is. After registering a service worker the browser will give it access to service worker APIs including Push.

function registerServiceWorker() {
  return navigator.serviceWorker
    .register("/worker.js")
    .then(function (registration) {
      console.log("Service worker successfully registered.");
      return registration;
    })
    .catch(function (err) {
      console.error("Unable to register service worker.", err);
    });
}

Request Permission

The next step would be to ask for permission from the user to display notifications. The Notification.requestPermission() recently changed from using callbacks to promises that is why we cover both callbacks and promises in the example below (we never know which version of the api a browser implemented).

The promise resolves to a string with the possible values being granted, denied or default

function requestPermission() {
  return new Promise((resolve, reject) => {
    const permissionResult = Notification.requestPermission((result) => {
      resolve(result);
    });
    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then((permissionResult) => {
    if (permissionResult !== "granted") {
      throw new Error("Permission denied");
    }

    subscribeUserToPush();
  });
}

You should only request consent to display notifications in response to a user gesture (e.g. clicking a button. This is the best practice.

Subscribe a user with PushManager

After registering our service worker and getting user permission we can now subscribe the user to the Push API by calling registration.pushManager.subscribe()

async function subscribeUserToPush() {
  const registration = await registerServiceWorker();

  const subscribeOptions = {
    userVisibleOnly: true,
    applicationServerKey: PUBLIC_VAPID_KEY,
  };

  const pushSubscription = await registration.pushManager.subscribe(
    subscribeOptions
  );

  axios
    .post("/api/subscription", pushSubscription)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => console.log(error));
  return pushSubscription;
}

In the example above several things are happening:

We are calling the registerServiceWorker() function for the second time, this is to activate the service worker. A service worker won't receive events like fetch and push until it successfully finishes installing and becomes "active".
Within the registration.pushManager.subscribe() function we are passing an object with two properties
1. userVisibleOnly - A boolean that must be set to true indicating that the user will be notified every time a push message is sent. Silent messages are not allowed.
2. applicationServerKey - This is a public key generated in a pair along with a private key and are unique to your app. Application server keys otherwise knowns as VAPID keys are used by a push service to identify the application subscribing a user and ensure that the same application is messaging that user.
After subscribing the user we get a subscription object that we can then send to our server to save in our database. This subscription is what we will be using to send push messages from the server.

Here is an example of what the subscription object looks like.

{
  "endpoint": "https://some.pushservice.com/something-unique",
  "keys": {
    "p256dh": "CeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
    "auth":"QyGdcjWInHVndSTdbKFw=="
  }
}

Send messages from server

After saving a client's push subscription we are now ready to send messages with web-push library. Since web-push is a node library this part of the application will be implemented on the server. Frameworks like Next and Gatsby allow you to create api routes which are easy to configure.

We start by adding our vapid keys to web-push along with a mailto: string. The string can be a mailto email address or a URL. This is done so that if the push service needs to get in contact with the sender, they have information that enables them to.

import webpush from "web-push";

const vapidKeys = {
  publicKey: process.env.PUBLIC_KEY,
  privateKey: process.env.PRIVATE_KEY,
};

webpush.setVapidDetails(
  "mailto:ineza@ineza.codes",
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

export default function handler(req, res) {
  if (req.method === "POST") {
    const { subscription, dataToSend } = req.body;
    return webpush
      .sendNotification(subscription, JSON.stringify(dataToSend))
      .then(() => {
        return res.status(200).json({ message: "Notification sent!" });
      })
      .catch((err) => {
        return res.status(400).json({ error: err });
      });
  }

  return res.status(401).json({ message: "Method not allowed" });
}

Through the api route we created above, we are able to receive the subscription that we saved somewhere (a database for example) alongside the message we would like to send to the user. Using the sendNotification() method from web-push we are able to send our request.

Display Notification

Inside our Service worker we add a push event listener that listens for the push event. We need to display the notification to the user, and to tell the event to wait until the browser has shown it before the function can terminate. In the code snippet below we are using the Notification API to display notifications to the user’s device.

self.addEventListener("push", function (event) {
  const data = event.data.json();
  const promiseChain = self.registration.showNotification(data.title, {
    body: data.body,
    icon: "/icons/manifest-icon-192.maskable.png",
    badge: "/icons/badge_72x72.png",
  });
  event.waitUntil(promiseChain);
});

We extend the event lifetime until the browser has done displaying the notification (until the promise has been resolved), otherwise the Service Worker could be stopped in the middle of your processing.

And there you go. Your notifications are ready to go. 🙂

If you are looking to learn more or dive deeper into this topic. I highly recommend the Push Notification overview by web.dev

NB

As of March 27th Web Push is now supported in WebKit in Safari 16.4. At the time of writing the features are still experimental, so you have to dig into Safari settings to enable the Push and Notification APIs. Also worth noting that push notifications are supported in apps that are added to the Home screen.
It should also be noted that the Notification.requestPermission() is available only in secure contexts (HTTPS).

Setting up a MySQL database using Prisma

Ineza Bonté Grévy — Sun, 31 Oct 2021 20:20:25 +0000

What is Prisma?

Prisma is an open-source Node.js and Typescript ORM (Object Relational Mapper) it acts as a sort of middleware between your application and the database helping you to manage and work with your database. It currently supports PostgreSQL, MySQL, SQL Server, SQLite and some of its features also support MongoDB.

I was recently tasked with setting up a MySQL database with a Next.js application. My goal was to connect the database using Next.js’ serverless capabilities.

Below are the steps I followed to achieve that.

Install and invoke Prisma

In order to use Prisma in a project, first install its CLI as a dev dependency.

npm install prisma --save-dev

The next step is to initialize Prisma. You only need to do this once during the setup process.

npx prisma init

At this point, the Prisma CLI created some files in your root directory. The schema.prisma file in the prismafolder is where we define our datasource provider and the schema of the tables in our database. However if you already have an existing database, you don’t need to create a schema from scratch, cause Prisma handles that for you 😉. I’ll show you how shortly.

Connect to the database

The first step is to modify the datasource provider in the schema.prisma file to look like this.

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

I set provider to the type of database I’m using. In my case it’s mysql. The url property will take the value of the connection url which is defined in the .envfile created by Prisma.

DATABASE_URL="mysql://USER:PASSWORD@HOST:PORT/DATABASE"

Above is the format of how to write your connection url.

Generate data models

The next step is to generate the data models/schema. How this happens is; Prisma uses the connection url you provided to connect to the database. Prisma and the database have a short chat, then Prisma comes back with models of your database’s structure i.e data types, relationships and whatever else it needs to know about your database 😄

To do this we run the command

npx prisma db pull

If the command has run successfully Prisma will generate models from MySQL into Prisma data model which is saved in the prisma.schema file. If the Prisma schema is new to you, have a look at their documentation

Read data from the database

In order to perform CRUD (Create, Read, Update, Delete) operations with Prisma we need to install the @prisma/client package.

npm install @prisma/client

Create a Prisma instance

After installing the package the next important step is to create a single Prisma instance that will be imported wherever we need to use it. The reason we need a single instance is because every time we initialize Prisma client in a file it creates a connector to the database, if initialized in multiple files it could exhaust the database connection limit.

// utils/prisma.js

import { PrismaClient } from "@prisma/client";
let prisma;

if (process.env.NODE_ENV === "production") {
    prisma = new PrismaClient();
}
// `stg` or `dev`
else {
    if (!global.prisma) {
        global.prisma = new PrismaClient();
    }

    prisma = global.prisma;
}

export default prisma;

Fetch data from the database

N/B Prisma Client works from the backend so we have to call it from a serverless function or a Nodejs application.

// /pages/api/fetchUsers.js

import prisma from "../../utils/prisma";

export default async function handler(req, res) {
    try {
        const results = await prisma.users.findMany();
        return res.status(200).json(results);
    } catch (error) {
        return res.status(500).json({ message: error.message });
    }
}

Above is a simple example of fetching all records from the users table. I start by calling the prisma instance followed by the table name and finally the function I’d like to run.

Super easy and clean compared to writing raw sql queries. You can learn more prisma functions by looking at their docs which I have included in the reference section below.

I tested the above with Next.js api routes, however the same can be applied to Gatsby serverless functions or a Nodejs application..

Thank you for reading ❤️

Reference

CRUD operations with prisma client

Invoking a single prisma instance

Add Prisma to an existing project

Introduction to Open Graph Meta tags

Ineza Bonté Grévy — Sat, 17 Jul 2021 11:14:55 +0000

What are Open Graph meta tags?

Open Graph is a an internet protocol that was developed by Facebook
back in 2010. They allow you to control what is displayed when a url of your page
is shared on social media networks like Twitter, Facebook, LinkedIn, etc.

Basics of Open Graph

The four basic properties used are:

og:title - The title of the content on the page
og:description - A description of the content on the page you are sharing
og:image - An image url which will be used to represent your content
og:url - The url of the current page
og:type - The type of page you are describing e.g. article, website

Tip: For the images; the minimum recommended dimensions are 1200 x 630 for optimal clarity across different platforms and devices.

Usage

Open Graph meta tags are usually placed in the <head> section of a website.
They are identified by the prefix og: which is in the property attribute of a meta tag accompanied by the content attribute with a value.

<meta property="og:title" content="TailwindCSS setup tutorial" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://url-of-currentpage.com" />
<meta property="og:image" content="https://url-of-image.png" />
<meta property="og:description" content="A description about your content"/>

Why should we use open graph tags?

Their purpose is to make your content eye-catching at the same time providing an
overview of the content the user should expect when they visit the url. This can help to
grow your brand by increasing visibility.

Additional Social Media tags

Some social media sites like twitter have their own open graph tags that help
to customize the look of the content shared within their ecosystem.

For instance Twitter has a twitter:card property which can be used to
specify the type of card twitter uses to display your content. It takes the following
values;

summary
summary_large_image
app
player

It also has the twitter:creator property which can be used to specify
the username of the content creator/author

Here is a link to the documentation with more details.

Testing Open Graph tags

There are tools available that can help you test your url, to know
whether the Open Tags are working and also get a preview of how they
will look once posted on social media.

Resources

For more information about Open Graph meta tags here is a list of resources
that helped me in the writing of this article.

Thank you for reading ❤️

How to use the tailwindcss/typography plugin

Ineza Bonté Grévy — Sat, 05 Jun 2021 13:50:27 +0000

I recently came across the tailwindcss-typography.
This plugin provides a beautiful set of prose classes which you can use to add styling to HTML that you have no control of (such as rendered HTML from Markdown).

This article assumes you have basic knowledge in TailwindCSS. If you are new to TailwindCSS you can have a look at their installation guide
and here is a great course from Scrimba that can help you learn the basics.

1. Install the tailwindcss/typography plugin

To install the plugin you can either use yarn or npm

npm install @tailwindcss/typography

#or

yarn add @tailwindcss/typography

2. Add the plugin to your tailwind config file

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
}

Add prose class to your html

Start by adding the base prose class then followed by the size-modifiers for example prose-sm, prose-lg, prose-xl and prose-2xl.
Without the base prose class it will not work.

<article class="prose prose-lg">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Pellentesque nec lacued eu odio nec nisl varius placerat. 
    In dapibus a lacus vitae fringilla.
    </p>
    <p>
    Donec condimentum tellus augue, eu lacinia est facilisis eu.
    Suspent ipPris a, cursus augue. Sed vitae dictum diam, id interdum ex.
    </p>
    <p>
    Nunc in nunc sed urna congue facilisis. In ullamcorper,
    nunc eget convallis imperdiet, quam felis rhoncus leo, id rhoncus erat leo vel 
    </p>
</article>

And that’s pretty much it. You will now have styled content and not have to worry about styling each element individually.

Here is a live demo of content that is styled using this plugin.

Thank you for reading ❤️

Sorting RSS feeds by year using Next.js

Ineza Bonté Grévy — Sun, 23 May 2021 22:40:00 +0000

One of the issues I created for my portfolio’s repo was to sort my blog feeds according to the year they were created in.

The inspiration came from Tania Rascia's blog section which is one of the most impressive portfolios I've come across.

Assuming you already have your project setup. I'll skip right to the essential steps.

1. Create a function to parse your RSS feed

To parse RSS feeds we will make use of the rss-parser library. For this I'll be using dev.to’s RSS feed which you can get by using:

https://dev.to/feed/{username}

We start by importing the parsing library and then we create a function whose work will be to parse the RSS feed and return the results.

// lib/rss.js

import Parser from "rss-parser";

export function getFeed() {
    const parser = new Parser();
    return parser.parseURL("https://dev.to/feed/inezabonte");
}

2. Create a getStaticProps function

In the pages/blog.js page we add the getStaticProps() function to fetch our articles. It will be using the exported function we just created above.

// pages/blog.js

import { getFeed } from "..lib/rss.js";

export async function getStaticProps() {
    const detailedFeed = await getFeed();

    return {
        props: {
            items: detailedFeed.items,
        },
        revalidate: 60,
    };
}

After fetching the articles we return them inside the props object which will add them to the default export of the /blog.js' file. The purpose of revalidate is to regenerate the page after the time given (in seconds). In our case after 60 seconds the page will regenerate. This could be useful if your RSS feed or API gets new data frequently, which you want to add on the website to keep it updated.

3. Get available years

The next step is to get the span of years across which our articles have been written. We will store the available years as strings in an array.

// pages/blog.js

import { getFeed } from "..lib/rss.js";
import { format } from "date-fns";

export default function Blog({ items }) {
    let years = [];
    let uniqueYear;

    if (items) {
        for (let i = 0; i < items.length; i++) {
            const year = format(new Date(items[i].isoDate), "y");
            years.push(year);
        }
        uniqueYear = [...new Set(years)];
    }

    return (
  )
}

export async function getStaticProps() {
    ...
}

I make use of the format method from the date-fns library to extract the year from the date on which the article was created.

Since this is a loop. It will basically run through all the articles' isoDate property and extract the year. Articles created in the same year might have their year added more than once. This introduces duplicates in the array. To prevent this we convert the array of duplicate years to a Set. This will implicitly remove duplicate elements then convert back to an array.

3. Filter and render the blog articles

After obtaining the years, we then map them and use the year element to filter the items array for articles that belong to that specific year.

// pages/blog.js

import { getFeed } from "..lib/rss.js";
import { format } from "date-fns";

export default function Blog({ items }) {
  let years = [];
  let uniqueYear;

  if (items) {
    for (let i = 0; i < items.length; i++) {
      const year = format(new Date(items[i].isoDate), "y");
      years.push(year);
       }
      uniqueYear = [...new Set(years)];
    }

      return (
          <div>
            {uniqueYear.map((year) => (
            <div>
                 <h2>{year}</h2>
                {items
                    .filter((items) => item.isoDate.startsWith(year))
                .map((article) => (
                        <div>{/* display data from article */}</div>
                    ))}
                </div>
                ))}
        </div>
    );
}

export async function getStaticProps() {
   // ...
}

And that’s it. You can then go ahead and render data for each of your articles depending on what you want to show.

I managed to solve the issue on my portfolio. You can view my code on my GitHub repo.

Thank you for reading ❤️. Feel free to leave any suggestions as to how you would have approached this issue. If you have a question as well feel free to leave it in the comment section below.

How to make your footer stay at the bottom of the page.

Ineza Bonté Grévy — Sun, 09 May 2021 10:30:28 +0000

I recently met an issue with positioning a footer. After finding a solution, I decided to document it in this post.

Our goal is to:

Make the footer stay at the bottom even when the content is not filling the screen.
Make the footer appear at the end of the document when the screen is full of content (instead of overlapping the bottom section)

1. Give your container a min-height of 100vh

The body tag which holds your content should be given a minimum height of 100vh. This will ensure that the body will always take full height of the page even when its content is not filling the page. You can apply this to the body or the container which has the footer as the last tag.

body {
 min-height: 100vh;
}

2. Make your body a flexbox

Make your body a flexbox by giving it a display property with the value of flex and also change its direction by using flex-direction set to column

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

3. Give the footer a margin-top of auto

Assuming your body has a similar layout to this;

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

You can give your footer tag a margin-top property with the value of auto

footer {
  margin-top: auto;
}

And that's it three simple steps :)

Thank you for reading this article ♥️. Feel free to ask any questions you may have down below and I'll get back to you.

How to get GitHub notifications on your Discord server.

Ineza Bonté Grévy — Sat, 01 May 2021 12:52:00 +0000

GitHub provides us with a way to allow other applications such as discord to connect it and receive POST requests whenever any action is done on your repository.

This can be useful if you find the email notifications not as instant as you'd want them to be.

Prerequisites

You need to have a GitHub account with a repository.
You need to have a discord server where we will add the webhook.

1. Create the webhook

A webhook is basically a link that will allow other applications to post into discord.
To create a webhook, head into your server settings => integrations => New webhook

You can give your webhook a name and also choose which channel it will be posting to. You can click on Copy Webhook URL to copy the link which we are going to use on our GitHub repository.

2. Add Discord webhook to GitHub

After creating the webhook the next thing is to add it to your github repository from which you would like to get notifications.

Head over to your repo then settings => Webhooks => Add webhook

Paste the link we copied earlier from discord in the Payload URL and make sure to add /github at the end or it will not work.

Set the Content type to application/json and finally choose the events which should trigger the webhook. Personally, I want everything.

After you are done you can click the green button at the bottom labeled Add webhook to complete the process.

If you have done it correctly you should receive a similar notification to this;

3. Test the webhook

To test the webhook we can perform a simple action such as creating an issue on the repo which we just added the webhook.

Upon creating the issue. You should immediately receive a notification from discord on whatever device you have installed it on.

It will work the same way when pushing commits, creating PRs ...etc

Thank You for reading❤️. If you have any questions feel free to drop them in the comments section below and I'll be glad to answer them.

My journey so far in web development.

Ineza Bonté Grévy — Thu, 15 Apr 2021 15:31:26 +0000

Introduction

It's been a year since I got into web development. It has been a heck of a journey, learning new technology, meeting people with similar ambitions and goals.

I decided to write this blog post as a reflection as to how I got here and hopefully inspire someone who may be considering starting to code

Learning to code is definitely not easy. With so many resources one can be confused as to where to start from. I can testify to this because it personally took me a couple of years😅 to make up my mind as to which direction I wanted to take.

It's never too late to start coding so, take your time and understand the options you have. You can even try a few of them and see which ones you like then identify one that you would be comfortable working in long term.

One thing you should beware of is, the biased opinions people may have towards certain frameworks or languages. It's always best to try it out yourself and see if you like it and if you do go ahead with it.

How it started 🚀

Towards the end of March 2020, the spread of COVID had forced many institutions to close and cities to go under lockdown, and that's when I took the initiative of learning JavaScript. I started off with a friend of mine (@zadock) and we committed ourselves to #100DaysfCode.

The daily challenges we did came from sites such as CodeWars and Edabit which helped quite a lot in understanding the syntax of JavaScript.

At around 60 days into the challenges we decided to go bigger and start working on larger projects which of course were taking more than a day to complete, nevertheless they were essential in helping us test our skills in coding and in the process we got to learn a lot from the projects.

Some of the projects we worked on are a Weather App and also a Twitter bot which is probably the first Nodejs Application I worked on.

After completing 100 Days. I had developed a deeper understanding in JavaScript and was motivated to keep growing and learning.

Lessons I learnt ✍🏽

Help others grow
When you share your work publicly there is a high chance that it could help someone else who may be learning the similar topic. My good friend André Jaenisch always emphasizes on documenting your learning. It could be through a blog or youtube channel where you breakdown what you have learnt or what problem you faced and how you were able to solve it. This will help you retain what you learnt and you will always have a reference to look at if you ever run into the same issue.

The basics are enough to get you started
A question I often get from friends who are starting out in coding is "How long will it take me to learn x?" The answer is that it depends on the learner. We all have different methods that we use when learning, some may be quick and others may be slow and also most of these languages are always evolving, aiming to learn a language 100% is quite unnecessary😅. You may find yourself rarely using some of the features these languages have to offer.
The best advice I'd give is, understand the basics of the language/framework and apply whatever you learned on projects and that will help you gain a deeper understanding on what you are working with. When you come across a new term you can always look it up and you will find so many resources online explaining it.

Getting help on blockers
Whenever you run into an error, it's always a good practice to try and figure it out yourself before asking for help. Most of the time if you copy and paste the error in your search engine you will most likely find the first link going to StackOverFlow or another website where someone found the solution to your problem.
If it seems quite difficult you can then ask for assistance followed by stating the different methods that you tried in solving the issue. This will help whoever is assisting you to get a background on the problem and be in a better position to help you.

Maintain a habit of coding regularly
Coding like any other skill you may want to learn requires you to do it regularly in order to get good at it. Basically practice makes perfect. And I believe that helped me a lot when I started learning JavaScript.

Take care of yourself
Your health contributes greatly to your performance as a developer. It should therefore be your first priority.
As developers we often experience burnout, anxiety, fatigue or loss of motivation. This can be attributed to the fact that we spend so many hours on our computers without taking a break.
It's a good practice to schedule time to relax away from the computer by doing some exercise, taking a walk or a fun activity to relax your mind.
When you resume your work you will feel refreshed and motivated.

This are some of the lessons I have learnt in my journey. Feel free to share yours in the comments below.

Thank You for reading ❤️

Layers Of Web Development for beginners

Ineza Bonté Grévy — Sat, 19 Sep 2020 08:27:22 +0000

Introduction

The development of websites consists of two main layers which are frontend and backend. Each layer has its purpose to fulfil and are both dependent on each other to produce a product which a user can interact with. My goal in this article is to expound on these two layers and their significance in the development of a website.

What is frontend?

Frontend also known as client side refers to what the user of your website sees and interacts with. This refers to things like forms, buttons, animations, menus and so on.

The main objective when designing the frontend part of a website is to make sure that the website is user-friendly in terms of how the user will be interacting and accessing different components of your website. For example the use of background colours that are in contrast with the text in order to improve legibility

It is also important to ensure that the website is responsive in order to improve user experience which will translate into a positive perception of your brand and business.

Frontend languages

When designing the frontend part of a website there are three main languages which are commonly used i.e Html, css and Javascript

HTML
HTML is the standard markup language for creating websites. It is used to describe the structure of your website. It's basically the skeleton of your website.
CSS
CSS is used to describe how the content in your HTML document will look like on a webpage. You can use it to define font-families, colours, animations and so much more.
JavaScript
JavaScript is a scripting language that allows you to add functionality to your website. It is basically the brains of your website. It is in charge of dynamically updating the content of your website and other backend processes

What is backend?

Backend development also known as server-side refers to the activities of a website that happen behind-the-scenes unseen by the user.

It handles functions such as retrieving data from the database, updating data that has been modified, authentication of users when logging in and many other important tasks.

Backend languages

Some of the languages that are used when working with the backend are Java, Python, Ruby, PHP. In the recent years JavaScript has become a commonly used language used in the backend through a runtime environment called Node.js, Node.js allows us to execute JavaScript code outside the browser.

NB: Node.js is not a framework nor is it a programming language. It is simply an environment that allows you to run JavaScript outside the browser.

Being able to use JavaScript both on frontend and backend has made the work of developers easier as they do not need to go through the stress of learning a new language and maintaining different codebases. This is why we have seen the use of Node.js increase among many web developers

How does it add up?

As you begin your journey into web development you may wonder where you'll start or which areas will you concentrate on. A good rule of thumb would be to try both fields and see which one you prefer.

If you feel you can handle both frontend and backend you can become what's called a Fullstack developer. Which means that you are well equipped in both areas, thus giving you a higher bargaining power when looking for employment

Thank You for reading this article😊. Feel free to leave your questions/comments in the Discussions section below, I'll be sure to respond to them.

Introduction to Branches and Pull Requests for Beginners.

Ineza Bonté Grévy — Sun, 23 Aug 2020 18:18:45 +0000

Branches and pull requests are essential to the GitHub workflow, they help developers collaborate on projects simultaneously.
If you’ve never heard of them that’s okay. My goal in this tutorial is to help you understand what they are and how they are used when working on repositories.

What are Branches?

A branch simply put is an isolated environment that is created from the main branch.
It allows you to experiment on new ideas or makes bug fixes without affecting the main branch or being affected by the changes committed by others.

You can use branches to safely develop and test new features.
When the features are ready, a pull request is opened to review the changes you made before being approved and merged into the main branch.

What are pull requests?

A pull request is a feature that allows you to inform others of the changes you’ve made to the repository through your branch.
It allows you to share screenshots and general ideas or seek help when you’re stuck.

A reviewer assigned to the pull request reviews the work you’ve done on your branch and they can get back to you either for more info or to point out a bug you may have missed.
Once the pull request has been reviewed and approved, the branch is merged with the main default branch.

Creating a branch

In order to create a branch. Open the repository on your computer and then open terminal or git cli and use the following command.

git branch readme-edits

git branch is a git command used to create branches; This command creates a branch from the current branch you’re working from.

It is followed by the name you’d like to assign your new branch. In this case I’ll call it readme-edits since I want to edit the README.md file.
Branch names cannot include spaces, the command will fail if you do so.

Switch to the branch

To switch to the branch you just created use the command
git checkout

git checkout readme-edits

git checkout is followed by the name of the branch you would like to switch to. If you want to confirm what branch you’re on, use the git branch command.
The branch highlighted in green with an asterisk is your current working branch.

Commit changes

Open the README.md file make some changes then save the file.

After editing the file, we can now push the new branch we just created to GitHub along with the changes we just made to the README file.

Add the file to staging.
```
git add README.md
```

Commit the changes with a message

git commit -m "Updated the readme file"

Push the changes to GitHub

Since we are pushing a new branch to the repo we will use the --set-upstream flag to create a new branch on our origin remote.
Lastly we specify the name of the branch which should be the same as the one created locally.
```
git push --set-upstream origin readme-edits
```
This command is used when pushing changes in a branch for the first time. You only need to set the upstream once, afterwards you can just use git push.

Opening a Pull Request

After your changes have been pushed, open a pull request, so that the repository owner (in this case it’s you) can review your work and merge it with the main branch.

In the top pane click on the Pull requests tab.

Immediately after opening you will receive a prompt to Compare & pull request since GitHub has noticed new changes that are not in the main branch.
Click on the Compare & pull request button.

After clicking the button you will see the window below, here you can add a more in-depth explanation of the changes you made,
you can also add images, emojis, links using markdown.
This will be visible to those reviewing your pull request. Finally click on create pull request.

Once you’ve created a pull requests, you are free to continue making more changes to the same branch and pushing them.
All your commits to that branch will be added to the pull request, the changes made will be visible within the Files changed tab.

Merging a pull request

Once your changes have been verified, you may merge them into your main branch. Click Merge pull request then click confirm merge.

Seeing the box down below confirms that it has been merged. You can also delete the branch as well.

Update your local setup

Even though we have merged the branch on GitHub, locally the changes haven’t been updated.

1. Switch to main branch
```
git checkout main
```
2. Pull in the changes from GitHub
```
git pull
```
3. Delete the merged branch locally

Delete the branch locally using git branch followed by the -d flag and lastly the name of the branch to delete.
```
git branch -d readme-edits
```

These are the basics you need to know when creating branches and opening pull requests.

Thank You for Reading ❤️

How to Use GitHub and Git for Beginners

Ineza Bonté Grévy — Sat, 15 Aug 2020 16:09:49 +0000

Introduction

If you are a beginner in the field of programming you must have come across the term GitHub and Git from blogs or even tutorials and wondered what they are🤔, in this blog I intend to explain them and hopefully you will get an idea of what they are and how they work.

What is GitHub?

GitHub is a code hosting platform for version control and collaboration. Simply put, GitHub is a cloud storage platform like Google Drive or OneDrive but is built and centred around code.

Apart from just storing your code. GitHub allows you to collaborate with other programmers on projects simultaneously and remotely making it accessible from anywhere in the world.

In my intro I used the word version control. And this is where Git comes in. GitHub not only just stores your code. It keeps track of every single change you make and commit, that way if you ever need to go back to a specific point in time of your project you can easily do so.

What is Git?

Git is a version control system(VCS), it is in charge of tracking your source code or files for any changes made during development. Git operates locally, therefore has to be installed and linked with your GitHub account through a remote in order for it to access your projects and update them accordingly.

Let's get started

In this tutorial I will teach you some of the basics you need when using Git or GitHub

Create a repository on GitHub.
Sign in into your account or create one if it's your first time. Click on the + icon to create a new repository
Enter a name for your repository. Use hyphens instead of spaces. You can add an optional Description as well.
Check ✅ the initialize this repository with a README. This will allow you to be able to download/clone the repository to your local computer.

After that You will see your new repository with one file that is the README.md file. This file is mostly used when one wants to give more details or give instructions about their projects.

Clone the repository to your computer. To clone your repository. Click on the code button. Copy the link of your project using the clipboard icon.

Cloning a Repository with Git

To clone the repository to your computer. Open the terminal or git cli on your computer depending on what OS you use and run git

git

If the command is not recognised then download git from https://git-scm.com

Navigate to the directory you would like to clone your project in and run git clone followed by the link to your repository.
Example

git clone https://github.com/inezabonte/first-app.git

Making a Commit

Commits are snapshots of changes made to your project. Each change you commit is referenced with a unique alphanumeric code that can be used if you ever need to go back to a specific commit.

In order to make changes to our repository. Open the cloned repository in a text editor and let's make some changes to our README file.

After saving your changes, go back to terminal and navigate to your project. After that run;

git status

git status shows us which files have been changed, which files are tracked, etc. As you can see below, it tells us that there is a file that has been modified which is the README.md file

Committing Changes

In order to push our changes to GitHub, we need to:

Stage Changes for commit. To do this we use the command git add followed by the file you want to add.
Example

git add README.md
Commit with a message. This is done using the git commit -m command followed by a short message in quotes explaining the changes you made, to whoever might be looking at the project.
Example

git commit -m "My first commit"
Push to GitHub. Finally we can now push our changes to GitHub. To do this we use the command git push origin master

git push origin master

NB If this is your first push you may be required to enter your GitHub username and password. It's a one-time process.

If you go to your GitHub account you will see a new commit in your project. If you click on it, it will show you more details about the changes you made.

The lines highlighted in green show the additions that you made in your commit. Deletions are highlighted in red.

Here is a diagram that sums all the steps taken when committing your changes.

I hope this tutorial has been of help to you. If you find yourself forgetting some of the codes, don't worry you can google them or also use this Cheatsheet.
If you need further clarification, you can ask in the comments and I'll be sure to get back to you.