DEV Community: honorezemagho

Express-generator with Edge Template using Nodejs

honorezemagho — Wed, 10 Feb 2021 21:25:16 +0000

1. Introduction
2. Requirements
3. Definitions
4. Installation

Introduction

When it comes to setting up the server using Express you have to choose your own configuration and sometimes it takes a lot of time to achieve what you have to do.

Today we are going to talk about Express Generator and how we can integrate it with the Edge Template engine who is not actually inbuilt into express-generator templates.

Requirements

Nodejs You need to install Nodejs to follow this tutorial, you can check if you've already installed it by opening your terminal and enter the command node --version and it will give you the installed version.

Definitions

What is Express?

Express according to his documentation is a Fast, unopinionated, minimalist web framework for Node.js.

What is Express generator?

Express Generator is a tool that provides an environment to quickly create a basic structure of express.

What is Edge?

Edge Template is a logical templating engine for Node.js. This means you can write most of the Javascript expressions inside the .edge file.

Installation

Express Generator

To install Express Generator you need to go on your terminal and type the command


npm install -g express-generator

Generate a project

Because we've already installed express-generator now we can use the command


express --no-view name_of_the_project

to generate our project for the backend using express.
NB: We use the "--no-view" option because the ' Edge template ' doesn't exist inside and we need to integrate it.

After the project is generated, go inside the project directory and install the packages by running


cd name_of_the_project
npm install

Add Edge Template Engine

Now we have generated some scaffold using express-generator we need to add 'Edge' as Template Engine.

To do this we need to install a package express-edge


 npm install express-edge

and after we need to register it inside our express application. Inside your app.js add the following lines:



const { engine } = require('express-edge');
app.use(engine);
app.set('views', `${__dirname}/views`);

Finally, your app.js file will look like this at the bottom.



var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
const { engine } = require("express-edge");
const bodyParser = require("body-parser");


var app = express();

app.use(engine);
app.set("views", `${__dirname}/views`);
app.use(bodyParser.json());
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

module.exports = app;

Congratulations.
We have successfully integrated the edge template inside our express-generator app.

Ultimate guide to install and launch MongoDB on macOs

honorezemagho — Tue, 15 Dec 2020 11:32:50 +0000

Today we are going to learn how to install and launch MongoDB on macOS.
We are going to start with the prerequisites, MongoDB Installation, How to launch MongoDB and the Default configuration files.

Introduction

MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

In this tutorial, we are going to set up step by step MongoDB on macOS.

1. Prerequisites

Homebrew
Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple's macOS operating system and Linux.

First of all, you need to verify is homebrew is already installed with the command :

brew -v
// Output if it’s installed
// Homebrew 2.4.15
// Homebrew/homebrew-core (git revision 872ea; last commit 2020-08-31)

To install it, we need to use the command below :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

It can take a while to install just be patient.
For further documentation, you can check out this link.

2. MongoDB Installation

First, we need to up brew dependencies with the command :

brew update

After we need to find the MongoDB Tap:

brew tap mongodb/brew

brew tap adds more repositories to the list of formulae that brew tracks, updates, and installs from. By default, tap assumes that the repositories come from GitHub.

We can install now MongoDB community Edition on our Computer using this command:

brew install mongodb-community

3. Launch MongoDB

To have launchd start mongod immediately and also restart at login, use:

brew services start mongodb-community

To connect to mongodb use the command :

mongo

If there is an error

if for any reason you have an error, open a new terminal window and run the command:

mongod

wait for 15 seconds and then rerun the command

mongo

in another terminal.

4. Default Configuration Files

The configuration file (/usr/local/etc/mongod.conf)
The log directory path (/usr/local/var/log/mongodb)
The data directory path (/usr/local/var/mongodb)

Congratulations.
We have successfully install and launch mongodb.

Awesome resources to learn design for free

honorezemagho — Fri, 04 Dec 2020 09:20:57 +0000

I've collected for you some resources where you can learn design for free. If I didn't put your own please put it into comments to allow me to update the post with it. Happy Learning.

Learning

1. Uxcel.

UX/UI design education done right. Learn UI and Ux Interactively.

2. Webflow University

Create something amazing and learn web design with Webflow — from HTML and CSS basics to SEO and CMS essentials.

3. Laws of Ux

A collection of the maxims and principles that designers can consider when building interfaces.

4. Checklist of Design

A Collection of Best design Practices

5. Humane By Design

A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.

6. DesignCode

Learn how to design and code Apps

7. Learn Mobile Design

A curated list of mobile design resources

Youtube Channels

1. Design Course By Garry Simon

DesignCourse is run by Gary, an expert that creates videos about anything from graphic design to advanced front-end development.

2. Everytues by Teela Cunningham

Teela hosts a weekly how-to channel for Adobe Illustrator, Photoshop, and hand lettering. Her tutorials are created with all skill levels in mind, providing quick tips and tricks so you have confidence in whatever you make.

3. CharliMarie Tv

Charli is a web and graphic designer living in London and posts design videos every week about tools, projects, concepts, and vlogs.

4. Will Paterson

He gives you an in-depth and personal perspective of working within Graphic Design.

5. PiximPerfect

PiXimperfect, hosted by Unmesh Dinda, is a free resource for learning Photoshop and Lightroom. We believe in learning the concept, rather than learning the steps so that you can translate "your" imagination visually to the world.

6. Femke

She shares her learnings and experience being a designer.
Learn UI, Ux design, Ux Research.

7. Red Hope

Creator of https://onepagelove.com/, he have a youtube channel to inspire others.

8.PHLEARN

They are dedicated to providing you with the best photography and photoshop tutorials.

9. DesignGal

The goal of this channel is to teach you what you need to know about being in the design industry, whether you are a student or starting your career as a traditional graphic designer or going into tech as a UI/UX designer

10. BringYourOwnLaptop

This channel will provide you high-quality information tutorials for software such as Adobe Photoshop, Adobe InDesign, Adobe XD, Adobe Illustrator, and more.

Illustrations and Patterns

1. Shape.

More than 29,200 icons and illustrations fully customizable.

2. Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

3. Controls

A set of 108 customizable illustrations.

4. Undraw

Open-source illustrations for any idea you can imagine and create.
You can also select your custom color and all illustrations will be redesigned based on the new color within a second.

5. Figma

Figma helps you and your team to create, test, and ship better designs from start to finish.

6. illlustrations.co

Open source illustrations kit designed 100 awesome illustrations during 100 days of illustration challenge

7. DrawKit

Beautiful, free illustrations. Updated weekly.

8. OpenDoodles

A Free set of Sketchy Illustrations

9. Avataars

Mix & Match Avatars with a Sketch library

10. Error404

Royalty-free illustrations for pages

11. Openpeeps

A hand-drawn people illustration library.

12. Smash Illustrations

Awesome illustration constructor with colorful and trendy characters

Inspiration

1. Muzli

Muzli delivers to you relevant design stories and inspiration.

2. Dribbble

Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals.

3. Ui Sources

Browse recordings of end to end user journeys from the top-grossing apps to reduce iteration cycles, gain insights, identify trends & benchmark against your competitors and industry’s standard.

4. Mobbin.

Here you can access more than 25000 design patterns for free.

5. Ecomm Design

For eCommerce Website Design Gallery & Tech Inspiration.

6. Behance by Adobe

Behance is a social media platform owned by Adobe which claims "to showcase and discover creative work.

7. ScreenLane

Screenlane is a curated and frequently updated directory of the best web and mobile UI designs from live, shipped products. It's no longer just about UI design animations and it will no longer feature designs that are not live.

Simple Flight Database: Database Design

honorezemagho — Mon, 30 Nov 2020 20:22:20 +0000

Database Design is the process of defining how a database will be structured. This primarily includes tables, their relationships, and the columns each table contains.

Today we are going to design the database of a Car Rental Service.
To design a database first we need to make user stories.

1. User Stories

According to Wikipedia, In software development and product management, a user story is an informal, natural language description of one or more features of a software system. User stories are often written from the perspective of an end-user or user of a system.

For our Simple Flight Database, these are user stories.
a) An airplane is assigned to several flights. A flight is assigned to only one airplane.
b) A pilot can perform several flights. A flight is performed by several(normally at least two) pilots.

2. Entity Relationship Diagram

3. Relational Model

Add Tailwind V2 into React in 5 minutes

honorezemagho — Sat, 21 Nov 2020 14:47:07 +0000

What is React?

React is JavaScript library for building user interfaces.

What is Tailwind?

Tailwindcss is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Requirements

Nodejs version 8.10 or Higher.

Getting Started

Today we are going to add tailwind css in our React application without using npm.

Installation

Using create-react-app we are going to generate a new react project.


npx create-react-app react-tailwind
cd react-tailwind
npm start

Add Tailwindcss into Our react App

Inside the public folder, locate the file index.html.
and add the Tailwindcss CDN link https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css.

It will looks as it under.


 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Congratulations.
We have successfully add Tailwindcss inside our React App.

XAMPP Installation Step By Step on MacOs

honorezemagho — Mon, 26 Oct 2020 14:49:55 +0000

Introduction

XAMPP is the most popular PHP development environment
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.
Today we are going to install it.

Installation

First of all we have to download it. Just click here to download.

You will see a page like this.

Just download the version of your operating system. From Mine, I am using macOS.
Once it finishes downloading, we have to install it. In your Downloads folder search the XAMPP application and click it twice to install.

You'll see the install window, once everything will be ready.

Click it twice and when a warning box will appear, click open.

You will have to enter your computer password to allow XAMPP to install and click on “OK”.

Now we get to the setup process. Click "Next" to start the process.

After checking all options if it’s not yet checked. Click ‘“Next” to continue.

XAMPP will be installed in your Applications directory. Click “Next”.

After click on “Next”.

Now everything is ready for installation. Click on “Next”.

Now XAMPP will start installing in your computer automatically just leave it run.

When it will finish you will see this screen. Just check ”Launch XAMPP” and click on “Finish”.

Now you will see a XAMPP window as follows.

Congratulations.
You have successfully installed XAMPP on your Mac.

MYSQL Workbench, Step by Step Installation MacOs

honorezemagho — Mon, 26 Oct 2020 14:05:05 +0000

Introduction

MySQL Workbench is a unified visual tool for database architects, developers, and DBAs. MySQL Workbench provides data modeling, SQL development, and comprehensive administration tools for server configuration, user administration, backup, and much more.

Today we are going to install it on macOS.

Prerequisites

First of all, you have to check your macOS version. From the Apple menu in the corner of your screen, choose About This Mac. You should see the macOS name, such as macOS Mojave, followed by its version number. If you need to know the build number as well, click the version number to see it.

Installation

1. Download

First of all, we have to download it. Click here to download. You will see a page like this.
Please verify that the version of your Workbench is compatible with the version of your system.

If not, please click on the “Archives” tab. Keep changing the version until the “Product Version” fits with the “version of your system.”

For my own, it’s the version “8.0.12” who is compatible with my macOS version. After click on the “Download” button.

Installation

After downloaded, we need to install it.
First of all, we need to locate our file in the “Downloads” folder.

After “double click” on the file, just wait until you see this screen.

Now, we need to drag the Mysql workbench and drop inside the Applications folder.

After it will start copying into the Applications folder. Just wait until it finished.

When it's done, you have successfully install “MYSQL Workbench”.
Congratulations.

2020 Hacktoberfest Repository for beginners

honorezemagho — Tue, 20 Oct 2020 12:35:50 +0000

After submitting more than 10 pull requests and some repository were ineligible to Hacktobertfest I decided to help beginners who are starting open-source with Hacktobest to get their pull request fast as possible.

This is the list of some repository that I have found:

Opensource edu-bot from facebook developerscircles. Click Here
Hacktoberfest from Darsh2001. Click Here

3.Hacktoberfest from tarunsinghofficial. Click Here

4.Hacktoberfest from Arjun Adhikari.Click Here

5.Hacktoberfest from Potential17.Click Here

6.Hacktoberfest from subeshb1.Click Here

Implement OCR with React#2

honorezemagho — Fri, 16 Oct 2020 16:42:31 +0000

In the last tutorial we have implemented the upload functionality.
In this tutorial we are going to add Tesseract.js.

This article is divided in two parts. This is the part 2 , for the Part1 click here

Requirements

Nodejs version 8.10 or Higher.

First, we are going to install Tesseract.js package

npm install tesseract.js

After we are going to import createWorker function it in src/App.js file .

import {createWorker} from "tesseract.js";

inside the function App() we are going to add a worker and a method to recognize text inside an image.

  const worker = createWorker({
    logger: (m) => console.log(m),
});

const ExtractTextFromImage = async (imageUrl) => {
  await worker.load();
  await worker.loadLanguage("eng");
  await worker.initialize("eng");
  const {
      data: {
          text
      },
  } = await worker.recognize(imageUrl);
  setText(text);
  await worker.terminate();
};

After we are going to define the state for image URL and text display. we are going to use useState and useEffect React Hook. First of all, we need to import useState from react.

 import React,{useEffect,useState} from "react";

After

 const [ text, setText] = useState(null);

 const [imageUrl] = useState(null);

 useEffect(() => {
        if (imageUrl != null) {
            ExtractTextFromImage();
        }
    });

Now we are going to add a container to display the text from the image in React.Fragment bloc.

  <div className = "container text-center pt-5" >
          {text}
  </div>

and update the text when processing the image.

const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded");
      setText("Recognizing...");
ExtractTextFromImage(meta.url);
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}

For the GitHub repository click Here

This article is divided into two parts. This is the part 2 , for the Part1 click here

Implement OCR with React#1

honorezemagho — Tue, 13 Oct 2020 15:10:20 +0000

What is OCR?

According to Wikipedia, Optical character recognition or optical character reader is the electronic or mechanical conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a scene-photo or from subtitle text superimposed on an image. You can read the full article Here.

Today we are going to Implement Optical Character Recogniton using React and Tesseract.js.

This article is divided in two parts. This is the part 1 , for the Part2 click here

Requirements

Nodejs version 8.10 or Higher.

Installation

Using create-react-app we are going to generate a new react project.


npx create-react-app react-ocr
cd react-ocr
npm start

For the user interface, we are going to use Bootstrap and to add upload we are going to use React Dropzone Uploader.

npm install --save bootstrap react-dropzone-uploader

and add import styles it in src/index.js file

import 'bootstrap/dist/css/bootstrap.css';
import 'react-dropzone-uploader/dist/styles.css';

We are going now in src/App.js to, import Dropzone component at the top

import Dropzone from 'react-dropzone-uploader';

and replace App class like this to have some basic user interface:



function App ()  {
  render() {
    return (
     <React.Fragment>

      <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>
        <Dropzone 
        accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        />
</React.Fragment>
    )
  }
};

It looks like this.

We are going now to integrate upload functionnality using react-dropzone-uploader package that we install before by adding using getUploadParams, onChangeStatus, maxFiles, multiple,canCancel properties.
For storage, we are going to use HttpBin

After adding it our function looks like this:



import React from 'react';
import './App.css';
import Dropzone from 'react-dropzone-uploader';


function App () {

 const getUploadParams = () => {
    return {
        url: 'https://httpbin.org/post'
    }
}

 const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded")
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}


    return (
      <React.Fragment >

        <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>


        <Dropzone 
        getUploadParams = {
         getUploadParams
      }
      onChangeStatus = {
          handleChangeStatus
      }
      maxFiles = {
          1
      }
      multiple = {
          false
      }
      canCancel = {
          false
      }
       accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        /> 

</React.Fragment>
    )
};

export default App;

Now we have successfully add upload functionnality.

This article is divided into two parts. This is the part 1 , for the Part2 click here

DEV Community: honorezemagho

Express-generator with Edge Template using Nodejs

Table of Contents

Introduction

Requirements

Definitions

What is Express?

What is Express generator?

What is Edge?

Installation

Express Generator

Generate a project

Add Edge Template Engine

Ultimate guide to install and launch MongoDB on macOs

Introduction

1. Prerequisites

2. MongoDB Installation

3. Launch MongoDB

4. Default Configuration Files

Awesome resources to learn design for free

Learning

1. Uxcel.

2. Webflow University

3. Laws of Ux

4. Checklist of Design

5. Humane By Design

6. DesignCode

7. Learn Mobile Design

Youtube Channels

1. Design Course By Garry Simon

2. Everytues by Teela Cunningham

3. CharliMarie Tv

4. Will Paterson

5. PiximPerfect

6. Femke

7. Red Hope

8.PHLEARN

9. DesignGal

10. BringYourOwnLaptop

Illustrations and Patterns

1. Shape.

2. Eva Icons

3. Controls

4. Undraw

5. Figma

6. illlustrations.co

7. DrawKit

8. OpenDoodles

9. Avataars

10. Error404

11. Openpeeps

12. Smash Illustrations

Inspiration

1. Muzli

2. Dribbble

3. Ui Sources

4. Mobbin.

5. Ecomm Design

6. Behance by Adobe

7. ScreenLane

Simple Flight Database: Database Design

1. User Stories

2. Entity Relationship Diagram

3. Relational Model

Add Tailwind V2 into React in 5 minutes

What is React?

What is Tailwind?

Requirements

Getting Started

Installation

Add Tailwindcss into Our react App

XAMPP Installation Step By Step on MacOs

Introduction

Installation

MYSQL Workbench, Step by Step Installation MacOs

Introduction

Prerequisites

Installation

1. Download

Installation