Forem: Faiçal Jebali

How to build a sidebar menu in react with react-burger-menu ?

Faiçal Jebali — Sun, 24 May 2020 07:43:56 +0000

In this tutorial, we’ll build a simple sidebar for a website. Our first step will be to build our boilerplate webpage. To setup the app, I’m using create-react-app, but you can use anything you’re comfortable with.

My blog click here

First before start let us know what is react-burger-menu.

react-burger-menu is a library that allows us to easily create a sidebar for our React applications. It also comes with a multitude of effects and styles to customize the look and feel of our menu.

You can find the full code for this post on CodeSandbox.

Getting Started

First let’s install react-burger-menu

npm install react-burger-menu

Here is our root App component:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import SideBar from "./sidebar";

function App() {
  return (
    <div id="App">
      <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />

      <div id="page-wrap">
        <h1>Click to show menu</h1>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Now we need to start building our sidebar component. For this we’re going to create page sidebar.js

import React from "react";
import { slide as Menu } from "react-burger-menu";

export default props => {
  return (
    <Menu {...props}>
      <a className="menu-item" href="/">
        Home
      </a>

      <a className="menu-item" href="/about">
        About
      </a>

      <a className="menu-item" href="/services">
        Services
      </a>

      <a className="menu-item" href="/contact">
        Contact us
      </a>
    </Menu>
  );
};

Now let’s add a little bit of styling…

html,
body {
  margin: 0;
}

#App {
  font-family: sans-serif;
  height: 100vh;
}

#page-wrap {
  text-align: center;
  overflow: auto;
  top: 45%;
  position: relative;
}

.bm-item {
  display: inline-block;

  /* Our sidebar item styling */
  text-decoration: none;
  margin-bottom: 10px;
  color: #d1d1d1;
  transition: color 0.2s;
}

.bm-item:hover {
  color: white;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  right: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #000;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

You can find the full code for this post on CodeSandbox.

My Blog more posts

Thanks for reading.

Request a free GitKraken Pro account

Faiçal Jebali — Thu, 16 Apr 2020 15:50:30 +0000

I created a website COVID19 statistic and I get free pro accounts through this program are for 25 users for one year.

We’re committed to doing what we can to help. If you’re contributing to a COVID-19 related project, you are eligible to request a free GitKraken Pro license for yourself and up to 25 team members. Thank you for working on projects that will help with COVID-19, and we appreciate your honesty.

Apply Now

My Blog here

How to build a PWA app with HTML, CSS, and VanillaJS?

Faiçal Jebali — Tue, 14 Apr 2020 21:39:55 +0000

In this article, we are going to build a PWA from scratch with HTML, CSS, and JavaScript. Before starting let us know what is PWA.

What is PWA app ?
PWA (Progressive Web Apps) is one of the most talked about technology shifts in the web and has gained unparalleled momentum among the practitioners in the IT world. If you are building for the web, I’m sure that PWA is the latest ‘buzzword’ that has been added to your work vocabulary. It’s not surprising because PWA has made the far fetched dream of installing web apps on phone for real,it's just your regular website that runs in a browser with some enhancements like the ability:

To install it on a mobile home screen
To access it when offline
To access the camera
Get push notifications - ...

You can check it live here
Source code here
My blog here

Let's start
I want to first create a new home page, that I will call index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Recipes App</title>
  </head>
  <body>
    <main>
      <nav>
        <h1>Recipes App</h1>
      </nav>
      <div class="container flex"></div>
    </main>
    <script src="js/app.js"></script>
  </body>
</html>

And then we need to add page js/app.js

const container = document.querySelector(".container");
const recipes = [
  {
    name: "Best Chocolate Chip Cookies",
    description: "Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Dissolve baking soda in hot water. Add to batter along with salt. Stir in flour, chocolate chips, and nuts. Drop by large spoonfuls onto ungreased pans.",
    image: "images/recipe1.jpg"
  },
  {
    name: "Brown Sugar Banana Bread",
    description: "Place the bananas into a large plastic zipper bag, seal the bag, and smoosh the bananas with your fingers until very well mashed. Set the bananas aside. Place the brown sugar and butter into a mixing bowl, and mix on medium speed with an electric mixer until light and fluffy, 1 to 2 minutes. Cut a corner from the plastic bag, and squeeze the mashed bananas into the bowl of brown sugar mixture. With the electric mixer on medium speed, beat in the bananas, egg, cinnamon, vanilla extract, and milk until the mixture is well combined. Switch the mixer to low speed, and gradually beat in the flour, baking soda, baking powder, and kosher salt just until the batter is smooth, about 1 minute. Spread the batter into the prepared loaf pan.",
    image: "images/recipe2.jpg"
  },
  {
    name: "Cheesecake Pops",
    description: "Cake pops are a fun versatile party food. Learn techniques for making cake pops with a variety of recipes and become inspired with clever decorating ideas.",
    image: "images/recipe3.jpg"
  },
  {
    name: "Chicken Soup with Drop-In Noodles",
    description: "Chicken soup that you can let simmer in a slow cooker all day then make homemade drop noodles just before serving. Quick and easy.",
    image: "images/recipe4.jpg"
  },
  {
    name: " Tortilla Soup II",
    description: "You may thicken soup by adding the desired amount of tomato paste to the soup or extend the recipe by adding one 10-ounce can of tomato soup. Garnish with shredded Monterey Jack cheese and the tortilla strips.",
    image: "images/recipe5.jpg"
  },
  {
    name: " Copycat Panera® Broccoli Cheddar Soup",
    description: "My husband loves Panera® broccoli cheddar soup but it went up in price and therefore we set out on a hunt to create the perfect broccoli cheddar soup. Here is what we came up with. There are tons of variations and options to make this soup your own. You can add extra veggies, different cheeses, garlic to your onions, a little nutmeg to the finished soup, green onions, sour cream, etc. The list goes on and on. Make it your own! Serve topped with cheese!",
    image: "images/recipe6.jpg"
  },

];

With this code bellow, we can now loop through the array and show them on the HTML file. And to make everything work, we wait until the DOM (Document Object Model) content finished load to run the getRecipes method.

const getRecipes = () => {
  let output = "";
  recipes.forEach(
    ({ name,description, image }) =>
      (output += `
              <div class="item-flex">
                <img class="item-avatar" src=${image} />
                <h1 class="item-title">${name}</h1>
                <p>${description}</p>
                <a class="item-link" href="#">Read More</a>
              </div>
              `)
  );
  container.innerHTML = output;
};

document.addEventListener("DOMContentLoaded", getRecipes);

The Service Worker offers a cache interface to represent the pairs of Request / Response objects that will be cached. You can register multiple cache objects for the same domain.

Next we need to cache the assets,so we should to create serviceWorker.js

// serviceWorker.js
staticRecipes = "recipes-app";
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/recipe1.jpg",
  "/images/recipe2.jpg",
  "/images/recipe3.jpg",
  "/images/recipe4.jpg",
  "/images/recipe5.jpg",
  "/images/recipe6.jpg",
];

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticRecipes).then(cache => {
      cache.addAll(assets);
    })
  );
});

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request);
    })
  );
});

The service worker has several life cycles, and one of them is the install event. It runs when a service worker is installed. It's triggered as soon as the worker executes, and it's only called once per service worker.

Then we should to register the Service Worker, go to js/app.js and add this code bellow.

// In js/app.js
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log(err));
  });
}

Now, we successfully cached our assets on the browser. And the next time we load the page, the service worker will handle the request and fetch the cache if we are offline.

In the end I added some css code.

/* In css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f7f7f7;
}
h1 {
    text-align: center;
    font-size: 40px;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}
.item-flex {
    width: calc(50% - 20px);
    margin: 5px;
    padding: 5px;
}
img.item-avatar {
    width: 100%;
}
h1.item-title {
    font-size: 21px;
    line-height: 26px;
    text-align: left;
}

@media only screen and (max-width: 600px) {
    .item-flex {
        width: calc(100% - 20px);
        margin: 5px;
        padding: 5px;
    }
    h1 {
        font-size: 30px;
        line-height: 33px;
    }
}

You can check it live here
You can view the full code report here
My Blog here
Thanks for reading.

The 10+ Best NodeJS CMS Platforms To Use in 2020

Faiçal Jebali — Thu, 30 Jan 2020 11:01:17 +0000

My blog here
What is Node.js?

Node.js is an open source server environment
Node.js is free
Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
Node.js uses JavaScript on the server

The 10 most popular NodeJS CMS 2020

1. Strapi CMS

Most of you are already aware of the ultimate benefits of headless CMS. Strapi is an open source headless nodejs CMS. It offers developers to create a powerful, self-hosted, and highly customizable content API. Strapi is also suitable for developing systematic and well-configured web and mobile applications. It is very secure and feature-rich in nature.

2. KeystoneJs

KeystoneJs is a powerful NodeJs CMS framework. It has been providing robust CMS support for years now. Apart from providing powerful CMS structures, KeystoneJs is also used to develop RESTful APIs, e-commerce applications, platforms, and different online forums. KeystoneJs offers a simplified Admin UI that assists developers in creating beautiful, sophisticated CMS.

3. Ghost CMS

Ghost CMS is an open source headless NodeJs CMS. It is a powerful blogging platform that is written in JavaScript. It has such a sophisticated design that provides a simple path for online bloggers or online publications. Popular brands such as Apple, Tinder, SkyNews, Zappos, and many others use Ghost CMS for its simplicity and easily manageable functions.

4. Apostrophe CMS

Aposthrophe is a free, open-source CMS for NodeJs. Developers were focused on increasing the productivity of web development and content management while building this NodeJs CMS. Today, it has been used worldwide to create and maintain websites/ web applications of all categories. AposthropheCMS has the solution to all your problems.

5. EnduroJs

EnduroJs is currently considered one of the most productive NodeJs CMS. It is minimalistic, fast, and quite clean and neat. Professionals are really impressed with its modern architecture. It requires almost zero set-ups, and its admin panel is so sophisticated. Although it comes with a small community, those who have used it are really satisfied with its interface.

6. We.Js

We.Js offers a handful of features for developing modern active websites. Instant features such as themes, views, articles all are available in We.Js. It also provides astounding user management and supports different media formats.

7. Prismic.io

Prismic is considered to be an alternative to WordPress. It is both productive and enjoyable for developers. It is also a headless CMS. You can easily develop Prismic projects using NodeJs. This beautiful CMS offers a special starter project kit for NodeJs.

8. TotalJs CMS

TotalJs is a NodeJs framework that offers you to build amazing web applications. However, when it comes to TotalJs CMS, it assists you in developing extraordinary professional and personal websites. TotalJs content management system is a NodeJs CMS that is built on NoSQL without following any dependencies.

9. Buckets.io

Buckets.io is a modern open-source NodeJs CMS. It is developed on NodeJs and Mongo DB. It offers an innovative segmentation-technology that can transform the way of communication between the upper hand to online customers. It comes with great integration support covering about 1500+ applications.

10. NodeBeats

NodeBeats is an open-source nodejs framework that has been built using the MEAN framework. It is a mature content management system that helps you to create seamless content-oriented web applications. With this NodeJs CMS, you can easily create feature-rich content websites and transform them to any extent you like.

Best NodeJs CMS
Many people still confuse CMS with WordPress or Joomla or other open-source platforms. However, due to being a solid back-end language, NodeJs, now, is building some great and useful CMS platforms.

My Blog

How to install Next.js?

Faiçal Jebali — Mon, 20 Jan 2020 08:58:50 +0000

How to install Next.js?

I wrote this tutorial to help you quickly learn Next.js and how to install with cli.

It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosystem, in particular server-side rendering.
I find Next.js an awesome tool to create Web Applications, and at the end of this post I hope you'll be as excited about it as I am. And I hope it will help you learn Next.js!

How to install Next.js?
To install Next.js, you need to have Node.js installed.

Make sure that you have the latest version of Node. Check with running node -v in your terminal, and compare it to the latest LTS version listed on https://nodejs.org/.

After you install Node.js, you will have the npm command available into your command line.

Using create-next-app
If you're familiar with create-react-app, create-next-app is the same thing - except it creates a Next app instead of a React app, as the name implies.

I assume you have already installed Node.js, which, from version 5.2 (2+ years ago at the time of writing), comes with the npx command bundled. This handy tool lets us download and execute a JavaScript command, and we'll use it like this:

npx create-next-app

The command asks the application name (and creates a new folder for you with that name), then downloads all the packages it needs (react, react-dom, next)

and you can immediately run the sample app by running npm run dev

And here's the result on http://localhost:3000: