DEV Community: Sarah Hassan

Download Bootstrap 5 using npm

Sarah Hassan — Sun, 17 Oct 2021 22:56:25 +0000

Today I will list steps needed to download Bootstrap 5 using npm.

1- Install Bootstrap.

npm install bootstrap

2- Use Bootstrap:
You have 2 options to import Bootstrap's JS.

Option 1:
import all of Bootstrap’s plugins so you will not need @popperjs/core package

import '../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

Option 2:
Import just plugins you need. Then you will need to install and import @popperjs/core package before import bootstrap plugins

a- Install @popperjs/core package.

npm i @popperjs/core

b- In your app.js file import bootstrap and @popperjs/core.

import '../../node_modules/@popperjs/core/dist/umd/popper.min.js';

import 'bootstrap/js/dist/dropdown';

c- Import Bootstrap's CSS.

@import "bootstrap/scss/bootstrap";

Compile and Bundle Javascript es6 with Browserify + Babelify + Gulp

Sarah Hassan — Fri, 05 Mar 2021 15:37:06 +0000

My story began while I was trying to use the tiny slider npm package in my project and I used Gulp as my task runner.

I got an error when I tried to import the tiny slider js file in the script file of my project.

// my gulp file
const { src, dest } = require('gulp');
// minify JS
const uglify = require('gulp-uglify');
// support JS for old browsers
const babel = require('gulp-babel');
// create source map files to JS
const sourcemaps = require('gulp-sourcemaps');
// rename files
const rename = require('gulp-rename');
const replace = require('gulp-replace');

const srcFiles = {
  jsPath: 'src/js/**/*.js'
};

const distFiles = {
  distJSPath: 'dist/js',
};

// my js task
function jsTask() {
  return (
    src([srcFiles.jsPath])
      // To load existing source maps
      // This will cause sourceMaps to use the previous sourcemap to create an ultimate sourcemap
      .pipe(gulpif(!production, sourcemaps.init({ loadMaps: true })))
      .pipe(
        gulpif(
          production,
          babel({
            presets: ['@babel/preset-env'],
          })
        )
      )
      .pipe(concat('all.js'))
      .pipe(gulpif(production, rename({ extname: '.min.js' })))
      .pipe(gulpif(production, uglify()))
      .pipe(gulpif(!production, sourcemaps.write('./')))
      .pipe(dest(distFiles.distJSPath))
  );
}

// my script file
import { tns } from '../../node_modules/tiny-slider/src/tiny-slider';

I got these errors:

Uncaught SyntaxError: Cannot use import statement outside a module

GET http://localhost:3000/node_modules/tiny-slider/src/tiny-slider net::ERR_ABORTED 404 (Not Found)

Let's start to explain what is the problem then we learn to solve it.

I used gulp-babel to compile ES6 to ES5. The problem is that require is not defined in the browser and in the ES5 syntax. So we need to search for another method to bundle all required js modules into one file.

We need this Browserify + Babelify combination to Compile & Bundle.

Browserify bundles js modules into one file to be used in the browser.
'gulp-babel' didn't match with Browserify so, we will use Babelify instead to convert ES6 to ES5.

Steps are as the following:

npm i --save-dev browserify

npm i --save-dev  babelify

// has all packages needed for babelify to work
npm i --save-dev @babel/core

// to tap the specific preset to compile our script
npm i --save-dev @babel/preset-env


// grab source after bundling of browserify and check if entry source is still piped.
npm i --save-dev vinyl-source-stream

// to continue with using source map and uglify
npm i --save-dev vinyl-buffer

In package.json, We need to specify the preset.

"devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.9.6",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babelify": "^8.0.0",
    "browser-sync": "^2.26.7",
    "browserify": "^17.0.0",
    .......
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }

In gulp file:

We can run js task for each group of files separately ex: a script for front-end and script for back-end.

// define entry for browserify
const jsSrc = 'module.js';
const jsFolder = 'src/js/';

// we can add a script for front-end and script for back-end and so on
const jsFiles = [jsSrc];

const srcFiles = {
  jsPath: 'src/js/**/*.js',
  jsFiles: 'src/js/',
}

const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

async function jsTask() {
  jsFiles.map(function (entry) {
    return (
      browserify({
        entries: [jsFolder + entry],
      })
        .transform(babelify, { presets: ['@babel/preset-env'] })
        .bundle()
        .pipe(source('all.js'))
        // To load existing source maps
        // This will cause sourceMaps to use the previous sourcemap to create an ultimate sourcemap
        .pipe(gulpif(production, rename({ extname: '.min.js' })))
        .pipe(buffer())
        .pipe(gulpif(!production, sourcemaps.init({ loadMaps: true })))
        // .pipe(concat('all.js'))
        .pipe(gulpif(production, uglify()))
        .pipe(gulpif(!production, sourcemaps.write('./')))
        .pipe(dest(distFiles.distJSPath))
    );
  });
}

Resources that help me to solve the problem:

Hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

Thanks for reading!

Improve website performance by optimizing HTML with gulp 4 & browser-sync

Sarah Hassan — Thu, 26 Nov 2020 00:51:43 +0000

Today I will explain how to optimize HTML files reduce their sizes as possible.
We can achieve that by doing 3 things first minifying then compressing finally cache them.

First, let me explain the difference between minify and compress.

Minify: remove white spaces, comments, and unnecessary characters.
while compressing: the process of reducing the size of data (encoding information) using algorithms to compress ex gzip, deflate.

What happens between server and browser?

browser request index.html file.
server sends a .zip file to the browser (index.html.zip) instead of the regular index.html version.
The browser then downloads the zipped file, extracts it, and then shows it to the user.

but how server know it’s OK to send the zipped one and not the regular index file???

They have an agreement with 2 parts:

1 -The browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes): Accept-Encoding: gzip, deflate

2- The server sends a response if the content is actually compressed: Content-Encoding: gzip

For more info read this great article.

I'm using gulp 4 as a task runner and browser-sync. So we will need the following packages.

gulp-htmlmin to minify html files.
gulp-gzip to compress html files.
connect-gzip-static to enable us serve zipped HTML in local server for testing during dev.

a- `minifying`:

1- install with npm:

npm install --save gulp-htmlmin

2- create minifyIndex task to minify index set options like remove comments and whitespace.

function minifyIndex() {
  return src('./index.html')
    .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
    .pipe(dest('dist/'));
}

b- `compressing`:

1- install with npm:

npm install --save-dev gulp-gzip connect-gzip-static

2- create compressIndex task to compress index file

function compressIndex() {
  return src('./index.html')
    .pipe(gzip())
    .pipe(dest('dist/'));
}

3- serve compressed files for the local server
I tried to use the following method but it failed as middleware is too late in the stack when added via the options for .html files so the server didn't serve our zipped file

const compression= require('compression');

browserSync({
    server: {
        baseDir: './',
        middleware: [compression()]
    }
})

adding override boolean will cause this middleware to be applied to the FRONT of the stack as mentioned by Shane Osbourne here

function serveTask() {
  // init browserSync
  browserSync.init({
    // setup server
    server: {
      baseDir: './dist/',
    },
    middleware: [
      {
        route: '', // empty 'route' will apply this to all paths
        handle: gzipStatic('./dist/'), // the callable
        override: true,
      },
    ],
  });
}

Note: you need also to add the regular index version as a fallback in case the server doesn’t send the content-encoding response header, which means the file is not compressed (the default on many servers).

function initIndexHtml() {
  return src('./index.html')
    .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
    .pipe(dest('dist/'));
}

after doing html optimization in my project I succeeded in reducing index file size from 21kb to 3.5kb

Test if the compressed content is served:

1- open your site and developer tools.

2- open network tab check use large request rows to be able view size before and after optimization.

3- reload.

4- click as shown to display headers and response header 'Content-encoding: gzip'.

Thanks for reading!

Hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

localhost + service worker & caches = serve old app

Sarah Hassan — Thu, 24 Sep 2020 20:44:16 +0000

I will share with you an issue that occurred while I was developing a new app. When I try to open the new app with the localhost at the port 3000 it always opens the old app :(

You can imagine what I felt, stop the server, and then start again many times and I couldn't believe why the old app continuously appears???

I googled for a solution to kill that old app.

My Sincere friend StackOverflow help me, please then I found a solution. Open cmd and run netstat -ano | findstr :<PORT> and then a list will appear and you can kill it by run taskkill /PID <PID> /F

Wow, I killed it. let's try to open our new app in confidence. What???? No, the old app is still alive :(

I tried many other solutions but it is still alive!

Take a breathe and think and think again and suddenly I asked myself what weapons the old app had to beat me in this game?? The old app is a weather app with a manifest file and service worker and cachhhhe. I google again and found this solution. Now -a loud hahaha- I know how to kill it :D

Just by clearing storage from developer tools. What caused the issue is that chrome was loading cached files for the old app. So every time I tried to open at the port 3000 it was opened from caches.

Thanks for reading! If you meet a similar issue leave a comment and share how you did solve it.

Don't forget to follow me to get real programming problems that you may face and get solutions for them.

Hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

Font Awesome 5 with Using a Package Manager + using Gulp 4

Sarah Hassan — Tue, 04 Aug 2020 01:27:54 +0000

In this article, we will learn how to add Font Awesome 5 by using the package manager and gulp 4.

1- Install Font Awesome using a Package Manager

npm install --save @fortawesome/fontawesome-free

yarn add --dev @fortawesome/fontawesome-free

2- Import Font Awesome in you main SCSS file

// in your main SCSS file
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';

// import one or more styles
@import '../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';

Important Tip: to avoid getting blank squares for font awesome icons you need adding those filesotf | ttf | eot | svg | woff(2) and they are in webfonts folder
you need to make sure webfonts folder and index.html are in your dist folder of production version

3- Check if webfonts folder exists then make a copy in dist by using any file in the webfonts folder.

Note: We need to pass a path for a file, not a folder because in docs of package was mentioned that:

The package used to check if filepath exists and is a file. Returns false for directories.

We will use file-exists package to check if webfonts exists then make a copy of webfonts and put in the dist folder

// in your gulpfile
const fileExists = require('file-exists');
const gulpif = require('gulp-if');

const webFontsPath= './node_modules/@fortawesome/fontawesome-free/webfonts/*';
const distWebfonts= 'dist/webfonts';

// use a file of webfonts to check it's existing then make a copy in dist
const fontawesomeWebfont =
  './node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot';

// to check if file exists or not for testing purposes
console.log(fileExists.sync(fontawesomeWebfont)); // OUTPUTS: true or false

// copy webfonts folder if it exists
// because our task contains asynchronous code
// use async before our task
// to avoid getting this error `Did you forget to signal async completion`
async function copyfontawesomeWebfontsTask() {
  return gulpif(
    fileExists.sync(fontawesomeWebfont),
    src([webFontsPath]).pipe(dest(distWebfonts))
  );
}

Wow, now you can use copyfontawesomeWebfontsTask :)

Thanks for reading! I know there are many methods to do that but this method worked for me and like to share with you.
Hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

How to solve index conflicts when we remove indexes in random order from an array?

Sarah Hassan — Thu, 12 Mar 2020 18:26:26 +0000

There are a lot of ways to remove items from an array. Today, I will discuss with you the index conflict problem that I faced while I was building my last app and how I solved it. I had an array of indexes that I should remove from the student data array.

// indexes to remove from the student data array
const selectedIndexs = [0, 3, 1];
const studentData = [
 {name:'Alice',attendanceDays:[false,true, …]},
 {name:'Lydia',attendanceDays:[false,true, …]},
 {name:'Mike',attendanceDays:[true,false, …]},
 {name:'Harry',attendanceDays:[false,true, …]},
 {name:'Julie',attendanceDays:[true,false, …]}
];

The selectedIndexs were in random order when I deleted the item in index 0 from studentData. The remaining items in studentData were shifted and this result in index conflict and removing unwanted students.
Let’s simplify the code and get to our main point, how to remove random indexes from an array? Say, I have an array of student names.

const studentNames = ['Alice', 'Lydia', 'Mike', 'Harry', 'Julie'];

Suppose I have another array containing student’s indexes we want to remove. (students at indexes 0, 2)

const selectedIndexs = [0, 4, 2] //  which refer to 'Alice', 'Julie' and 'Mike'

I had first thought to use iterate over selectedIndexs array using forEach and then I used the splice method to remove each studentIndex from studentNames array.

selectedIndexs.forEach( studentIndex => studentNames.splice(studentIndex, 1));

First, the student at index 0 from studentNames array will be removed and the array will be [ 'Lydia', 'Mike', 'Harry', 'Julie'].

Then the student at index 4 will be removed, but there isn’t a student at index 4 because indexes have been shifted and so the array will be as it is [ 'Lydia', 'Mike', 'Harry', 'Julie'].

Finally, the student at index 2 will be removed and the array will be [ 'Lydia', 'Mike', 'Julie'].

What ???

Can you guess what’s happened here?

I want to remove ['Alice', 'Julie' and 'Mike'] but instead of that 'Alice', 'Harry' were removed.
As you know the splice method manipulates the original array and does not return a new array. This is what happened in our example, the splice method changed the studentNames and that was the cause of the index conflict.
How to solve this issue? A good practice to follow when we want to remove items from an array is to start from the last index. Suppose if we want to remove array items in a random order then we need to sort indexes in descending order using the sort method.

//sort method will return [4, 2, 0]
//splice method will first remove student at index 4 then at index 2 and finally at index 0 and return ['Lydia', 'Harry']
selectedIndexs.sort((a,b) => a > b? -1 : 1).forEach( studentIndex => studentNames.splice(studentIndex, 1))

Student at index 4 first will be removed then will be removed student at index 2 and lastly the student at index 0 will be removed and studentNames will be ['Lydia', 'Harry']. This approach ensures that we remove from the last index to avoid index conflict.

Conclusion: 'If you want to remove items from an array in a random order you need to sort indexes in descending order first'.

Hope this helps, your feedback will be appreciated. Thanks for reading!
Resources:

MDN Docs: Array.prototype.splice()
MDN Docs: Array.prototype.sort()

Attribution: Images made by Freepik from flaticon

How to mask your API key?

Sarah Hassan — Mon, 02 Mar 2020 16:27:44 +0000

Your API key should remain private and to achieve that Git should not track the API key. So today I will talk about two ways for masking API key, suppose you are developing a new app using React.js and have an API key to fetch news.

First one, using the environment variable

1- Create a file called .env in the project directory and define a variable with uppercase.

REACT_APP_NEWS_KEY = 'your_API_key'

2- Ignore .env file by adding its name to .gitignore file. The purpose of .gitignore file is to ensure that certain files not tracked by Git.

# api keys
.env

3- Access API key in your project using process.env.

const API_KEY = process.env.REACT_APP_NEWS_KEY;

const getPosts = async () => {
    try {
      dispatch({ type: 'SEND_REQUEST' });
      const response = await fetch(
        `https://newsapi.org/v2/everything?q=javascript&apiKey=${API_KEY}`
      );
      const data = await response.json();
      dispatch({ type: 'REQUEST_FINISH' });
      dispatch({ type: 'SET_POSTS', payload: data });
    } catch (err) {
      console.log(err);
    }
  };

Important Note: After creating the environment variable you have to restart your server to avoid getting your API key is invalid, you will receive a 401 - Unauthorized HTTP error.

Second one, using named export

1- Create a folder in src folder called config and inside it create a js file called config.js

const reactNewKey = 'your_API_key';

export { reactNewKey };

2- Ignore config.js file by adding its path in .gitignore file

src/config/config.js

3- Acess API key in your project by importing it

import { reactNewKey } from 'path_of_your_file'

Thanks for reading! I hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)

DEV Community: Sarah Hassan

Download Bootstrap 5 using npm

Compile and Bundle Javascript es6 with Browserify + Babelify + Gulp

Improve website performance by optimizing HTML with gulp 4 & browser-sync

What happens between server and browser?

a- minifying:

b- compressing:

Test if the compressed content is served:

localhost + service worker & caches = serve old app

Font Awesome 5 with Using a Package Manager + using Gulp 4

How to solve index conflicts when we remove indexes in random order from an array?

How to mask your API key?

a- `minifying`:

b- `compressing`: