MeghSohor

RxJS - ajax & fromFetch operators

Fri, 29 Jan 2021 12:00:00 GMT

CRUD operations are fundamental features of any modern website or web application. Almost everyday we need to write code in the Front-End to communicate with the servers through the HTTP protocol (mostly consume data from REST Apis).

To communicate with the servers we mostly use Fetch api or Axios.

Fetch API

Fetch is a built-in api of modern browsers and the problem with the Fetch api is that the HTTP request made through Fetch api isn’t cancelable. There is a workaround though - we can use AbortController to cancel a request. But AbortController isn’t still widely supported.

Moreover, Fetch api doesn’t have protection against XSRF attack.

javascript

fetch('url') 
  .then((response) => { 
  
    // Code for handling the response 
  }) 
  .catch((error) => { 
  
    // Code for handling the error 
  });

Axios

Axios is a Javascript library used to make HTTP requests and it supports the ES6 Promise API. It also has client-side protection against XSRF. And we can cancel the HTTP requests using Axios.

javascript

axios.get('url') 
  .then((response) => { 
  
    // Code for handling the response 
  }) 
  .catch((error) => { 
  
    // Code for handling the error 
  })

RxJS has a couple of operators that we can use to make HTTP requests. And the benefits of using RxJS operators are:

RxJS operators return a stream of observables instead of a single promise
RxJS observables are lazy. So, no HTTP request will be made until we subscribe to the observables
The request is cancelable
Safe against XSRF
Tons of other powerful RxJS operators to customize the HTTP request or manipulate the data returned from the request

RxJS/ajax

RxJS/ajax creates an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL.

javascript

import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

const observable$ = ajax('url').pipe(
  map(response => console.log(response)),
  catchError(error => {
    return throwError(error);
  })
);

// Subscribing to observable
const subscription = observable$.subscribe({
  next: (data) => console.log(data),
  error: (err) => console.error(err),
  complete: () => console.log('Request is complete')
});

// Unsubscribing from the observable
subscription.unsubscribe();

RxJS/fromFetch

fromFetch uses the Fetch api to make an HTTP request.

javascript

import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap, catchError } from 'rxjs/operators';
 
const data$ = fromFetch('url').pipe(
 switchMap(response => {
   if (response.ok) {
     // OK return data
     return response.json();
   } else {
     // Server is returning a status requiring the client to try something else.
     return of({ error: true, message: `Error ${response.status}` });
   }
 }),
 catchError(err => {
   // Network or other error, handle appropriately
   console.error(err);
   return of({ error: true, message: err.message })
 })
);
 
data$.subscribe({
 next: result => console.log(result),
 complete: () => console.log('done')
});

WARNING: Parts of the Fetch API are still experimental. AbortController is required for this implementation to work and use cancellation appropriately.

fromFetch will automatically set up an internal AbortController in order to teardown the internal fetch when the subscription tears down.

CSS BEM Methodology

Wed, 11 Nov 2020 12:00:00 GMT

The BEM methodology (Block, Element, Modifier) is a popular naming convention for classes in HTML and CSS.

It is less confusing comparing to the other methods (i.e. SMACSS) but still provides a good architecture with a recognizable terminology.

3 principle elements of BEM

Block: Container, Wrapper, Layout elements

Example: .form, .menu

Element: Child of a Block element

Example: .form__input, .menu__item

Modifier: can change the appearance of a Block or Element

Example: .form__input--disabled, .menu__item--active

Rules of BEM

HTML tag or ID selector shouldn't be used
Elements are namespaced using the Block names and separated by __ (double underscores)
Modifiers are separated by —- (double hyphens)

Benefits of using BEM

BEM is hugely adopted and one of the most popular methodology for writing CSS
BEM helps to build a solid structure that remains simple and easy to understand.
Because of strict naming conventions, there is less possibility to run into conflicts with CSS names
Everything is a class and nothing is nested, so won't have to face specificity related issues.
The Prolonged naming convention can reduce the readability of the code but it helps to understand the role of each element.

JavaScript Arrow Functions

Sun, 01 Nov 2020 12:00:00 GMT

Arrow function was introduced with ES6 as a new syntax for writing JavaScript functions. There are a few differences between arrow functions and regular functions

Arrow Function vs Regular Function

Arrow Function	Regular Function
The value of `this` will always be inherited from the outer function. If there is no outer function, `this` will refer to the global object. In other words, the arrow function resolves `this` lexically.	The value of `this` depends how the function is invoked or who owns the function: 1. Simple invocation - `this` refers to the global object 2. Method invocation – `this` refers to the parent object 3. Constructor invocation – `this` refers to the newly created instance
Doesn’t have `arguments` object but we can access the arguments using a rest parameter `…args`	Has a special `arguments` object containing the list of arguments
Supports implicit `return` expression statement.	`return` expression statement needs to be explicitly declared.
A class method defined as arrow function will always bind `this` to the class instance.	If a class method defined as a regular function and used as a callback, we have to bind `this` to the method.

Arrow Functions should be used when

The value of this needs to be consistent and returns the same value always
The function has only one line of statement and which may be a simple return expression
The function doesn't need to access its arguments object
Callback functions with static context

Arrow Functions shouldn't be used when

As an object property or object prototype (this inside the arrow function will refer to "window" object instead of the parent object/function)
Callback functions with dynamic context
The function will be used as a constructor
The return expression statement needs to be explicit
Need to access the arguments object of the function

Swipe function for touch-devices in Vanilla JS

Tue, 20 Oct 2020 12:00:00 GMT

When we need to implement Swipe functionality for touch devices, we usually use plugins. But we can write touch-swipe functionality in Vanilla JS which supports all the browsers without using any plugin.

First We will see the whole function and then we will break the function into small pieces and will talk about the pieces:

javascript

var  Swipe  = (function () {
  function  Swipe(element) {
    this.xDown  =  null;
    this.yDown  =  null;
    this.element  =  typeof (element) ===  'string'  ?  document.querySelector(element) :  element;
    this.element.addEventListener('touchstart', function (evt) {
      this.xDown  =  evt.touches[0].clientX;
      this.yDown  =  evt.touches[0].clientY;
    }.bind(this), false);
  }

  Swipe.prototype.onLeft  =  function (callback) {
    this.onLeft  =  callback;
    return this;
  };
  Swipe.prototype.onRight  =  function (callback) {
    this.onRight  =  callback;
    return this;
  };
  Swipe.prototype.onUp  =  function (callback) {
    this.onUp  =  callback;
    return this;
  };
  Swipe.prototype.onDown  =  function (callback) {
    this.onDown  =  callback;
    return this;
  };

  Swipe.prototype.handleTouchMove  =  function (evt) {
    if (!this.xDown  ||  !this.yDown) {
      return;
    }
    var  xUp  =  evt.touches[0].clientX;
    var  yUp  =  evt.touches[0].clientY; 
    this.xDiff  = this.xDown  -  xUp;
    this.yDiff  = this.yDown  -  yUp;

    if (Math.abs(this.xDiff) !==  0) {
      if (this.xDiff  >  2) {
        typeof (this.onLeft) ===  "function"  && this.onLeft();
      } else  if (this.xDiff  <  -2) {
        typeof (this.onRight) ===  "function"  && this.onRight();
      }
    }

    if (Math.abs(this.yDiff) !==  0) {
      if (this.yDiff  >  2) {
        typeof (this.onUp) ===  "function"  && this.onUp();
      } else  if (this.yDiff  <  -2) {
        typeof (this.onDown) ===  "function"  && this.onDown();
      }
    }
    // Reset values.
    this.xDown  =  null;
    this.yDown  =  null;
  };

  Swipe.prototype.run  =  function () {
    this.element.addEventListener('touchmove', function (evt) {
      this.handleTouchMove(evt);
    }.bind(this), false);
  };

  return  Swipe;
}());

Lets first discuss about the inner Swipe function

javascript

function  Swipe(element) {
  this.xDown  =  null;
  this.yDown  =  null;
  this.element  =  typeof (element) ===  'string'  ?  document.querySelector(element) :  element;
  this.element.addEventListener('touchstart', function (evt) {
    this.xDown  =  evt.touches[0].clientX;
    this.yDown  =  evt.touches[0].clientY;
  }.bind(this), false);
}

This function has the same name as the Root Swipe function. Because of that, when we will call the root function, the inner Swipe function will be initiated. In this function we are setting up the touchstart event for the target element. And we are capturing the clientX and clientY values from the touchstart event and assigning those values to xDown and yDown properties.

Now we will add the functions for each swipe direction:

javascript

Swipe.prototype.onLeft  =  function (callback) {
  this.onLeft  =  callback;
  return this;
};
Swipe.prototype.onRight  =  function (callback) {
  this.onRight  =  callback;
  return this;
};
Swipe.prototype.onUp  =  function (callback) {
  this.onUp  =  callback;
  return this;
};
Swipe.prototype.onDown  =  function (callback) {
  this.onDown  =  callback;
  return this;
};

Then we will add the function to detect the swipe direction

javascript

Swipe.prototype.handleTouchMove = function (evt) {
  if (!this.xDown || !this.yDown) { return; } 
  var xUp = evt.touches[0].clientX; 
  var yUp = evt.touches[0].clientY; 
  this.xDiff = this.xDown - xUp; 
  this.yDiff = this.yDown - yUp; 

  //Swipe Left or Right 
  if (Math.abs(this.xDiff) !== 0) {
    if (this.xDiff > 2) {
      typeof (this.onLeft) === "function" && this.onLeft(); 
    } else if (this.xDiff < -2) {
      typeof (this.onRight) === "function" && this.onRight(); 
    } 
  }
  if (Math.abs(this.yDiff) !== 0) {
    if (this.yDiff > 2) {
      typeof (this.onUp) === "function" && this.onUp(); 
    } else if (this.yDiff < -2) {
      typeof (this.onDown) === "function" && this.onDown(); 
    } 
  }
  this.xDown = null;
  this.yDown = null; 
};

In this function, we are tracking the swipe distance and the swipe direction. Based on the swipe direction, we are calling the respective swipe-direction function: onLeft, onRight, onUp and onDown.

Note: In the if conditions, we are checking if the distance is > 2 or < -2, because it might happen that when the user swipes on a horizontal direction, there might also be a slight vertical movement. And for this movement, the vertical swipe functions will be triggered. That is why, we are checking if the swipe distance is > 2 or < -2 for an extra bit of safety.

The run function:

javascript

Swipe.prototype.run  =  function () {
  this.element.addEventListener('touchmove', function (evt) {
    this.handleTouchMove(evt);
  }.bind(this), false);
};

Here, we are adding an event-listener for touchmove event for the target element. The handleTouchMove function will be called once the touchmove event fires.

How to use

First, we will create a new object of the function and provide the target element as the parameter

javascript

var swiper = new Swipe('your-target-element');

Then we will call any of the swipe directional functions (onLeft, onRight, onUp and onDown) as per our need and inside the callback function we will write our code:

javascript

swiper.onLeft(function() {
  //Your code goes here
});

Finally run the function:

javascript

swiper.run();

Note: this function will work only in the touch devices. You can use browser’s Developer Tools to switch device that supports touch events and can check the function in there

JS Coding Challenge: Find Anagrams

Mon, 12 Oct 2020 12:00:00 GMT

An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once - from Wikipedia.

Challenge

Given an array of words, we need to write a function which will take two parameters. First parameter is a word and the second parameter is the array of the words. The function will return an array consisting of the anagrams of the word passed as the first parameter from the array of words passed as the second parameter.

Example:

javascript

const words = ['mountain', 'anatomy', 'anemic', 'boldness', 'cinema',
  'iceman', 'machine', 'mechanic', 'elbow', 'below', 'state', 'taste',
  'dusty', 'night', 'study', 'thing', 'search', 'arches', 'chaser',
  'animal', 'manila', 'icewoman'];

const findAnagrams = (word, allWords) => {
  // Write the code here
};

console.log(findAnagrams('cinema', words));

/* 
  Expected output: ['anemic', 'iceman'];
*/

Notes:

All the words in the returned result should have the same length as the given word. Example: iceman and icewoman are not anagrams. Even though iceman has every letter as in icewoman but icewoman has extra letters in it which iceman doesn't have.
The word passed as first parameter should not be included in the returned array. As in the code above you can see that cinema is not included in the expected output.

Algorithm

First, we need to find the total count of each letter in the word. Example: in cinema each letter has a total count of 1
Then, we need to loop through each word in the array of words and follow the Step 1 for each.
Then, we need compare the count of each letter between the given word and the current word in the iteration.
If the current word matches with the given word in terms of the letter and letter counts, we will push that word in the result array.
Follow Step 2 to Step 4 until the end of the words array

Solution

First, we will write a helper function which takes a word converted to an array of letters and will give back an object consisting of each letter in the word as the keys and the total counts of each letter as the value:

javascript

const numberOfEachLetter = (letters) => {
  return letters.reduce((acc, letter) => ({
    ...acc,
    [letter]: acc[letter] ? acc[letter] + 1 : 1,
  }), {});
};

In the above function we are using Array.reduce() function to create an object of the letters and the count of each letter as the value. We are initiating the .reduce() function with an empty object{} which is provided as the second argument of the function.
And, in each iteration we are using the ES6 spread operator to get the previous value from and set updated value to accumulator. And then, using a ternary operator, we are checking if the current letter is already in the accumulator or not. If it is, then we are incrementing the count, otherwise we are setting 1 as the count value.

We can call the function like this:

javascript

const word = 'cinema';
numberOfEachLetter(word.split(''));
// Output
{
  a: 1,
  c: 1,
  e: 1,
  i: 1,
  m: 1,
  n: 1
}

Now, we will write another function which can compare between two words using the above numberOfEachLetter function:

javascript

const hasSameLetterCount = (word1, word2) => {
  const word1Count = numberOfEachLetter(word1.split(''));
  const word2Count = numberOfEachLetter(word2.split(''));

  return word1.length == word2.length && 
    Object.keys(word1Count)
      .every(letter => word1Count[letter] === word2Count[letter]);
};

Firstly, here we are getting the objects of letter counts for both words using the hasSameLetterCount function. Then, we are comparing the length of the two words to make sure that they have exact number of letters.
And finally, we are, using the Object.keys(), iterating through each letter of the first word and comparing to the letters of second word to check if the letters are same and have the same number of occurrence.
Using the Array.every() function we are checking that every letter and the count of the letters matches. Otherwise, the function will return false.

Okay, enough with the helper functions. Let's checkout the final function now:

javascript

const findAnagrams = (word, allWords) => {
  const anagrams = allWords.filter(item => {
    return word !== item && hasSameLetterCount(word, item);
  });
  return anagrams;
};

Here, using the Array.filter() function, we are iterating through each word in the words array and checking if the current word doesn't match with the given word and then sending the both words to the hasSameLetterCount function to check if they are matched to be anagrams. And finally returning the array of the filtered words that match with the criteria.

Does the final function look fat? Here is the slim version using the magic of ES6:

javascript

const findAnagrams = (word, allWords) => allWords
  .filter(item => word !== item &&
    hasSameLetterCount(word, item));

2 useful Polling functions in JavaScript

Sat, 10 Oct 2020 12:00:00 GMT

Sometimes we need to wait for something to be happened in a webpage or web application before we execute a code or call a function or do something else.

By something I mean:

rendering of a HTML element
a JavaScript event
response from API

and many other things.

Let's see how to write a couple of functions to tackle these scenarios:

Poling function 1: wait for HTML element

javascript

var waitForElement = function(elem) {
  if (typeof  elem  ==  'string') {
    return  new Promise(function (resolve) {
      var  wfelem  =  function () {
        if (null  !=  document.querySelector(elem)) {
          resolve(document.querySelector(elem));
        } else {
          window.requestAnimationFrame(wfelem);
        }
      };
      wfelem();
    });
  }
};

We can use the above poling function when we need to wait for a certain HTML element.

Example:

javascript

waitForElement('button#addToCart').then(function(button) {
  button.textContent = 'Buy Now';
});

Poling function 2: wait until a function returns true

javascript

var waitUntil = function(callback) {
  if (typeof callback === 'function') {
    return new Promise(function(resolve, reject) {
      var tick = setInterval(function() {
        if (callback() === true) {
          clearInterval(tick);
          return resolve();
        }
      });
    });
  } else {
    console.error(callback + ' should be a function');
  }
};

We can use the above function to wait until one or more conditions meet the criteria before further execution of the code.

Example:

javascript

  window.waitUntil(function () {
    return "complete" == document.readyState;
    }).then(function () {
      console.log("Page loading complete!");
  });

Modern Browser APIs - Part 1

Sat, 03 Oct 2020 12:00:00 GMT

The modern browsers have created a handful of APIs which can help the developers to build applications that can perform better, work offline, and provide a better user experience.

Today we are going to explore 5 APIs of Modern Browsers that we can use for web applications development and save ourselves from a lot works and troubles:

Window.requestAnimationFrame
Resource Prefetch
Resource Preload
Navigator.sendBeacon
Intersection Observer

Window.requestAnimationFrame

Window.requestAnimationFrame() api can be used to call a function every time display frame changes/updates which is approximately 60 per second or more. Using this method we can create a smooth animation or make a polling function.

requestAnimationFrame has the following benefits:

Browser has the ability to optimize the performance
Execution will be stopped for the inactive browser tabs
More accurate than setTimeout/setInterval

Demo:

javascript

function animate() {

// your code goes here

//the will be called repeatedly by requestAnimationFrame
  requestAnimationFrame(animate);
}
// Intial call to the function
animate();

We also can stop animation using the window.cancelAnimationFrame method:

javascript

  window.cancelAnimationFrame(animate);

A polling function to wait for an HTML element using `requestAnimationFrame` :

javascript

const waitForElement = function (elem) {
  if (typeof elem === 'string') {
      return new Promise(function (resolve) {
          var wfelem = function () {
              if (null != document.querySelector(elem)) {
                  resolve(document.querySelector(elem));
              } else {
                  window.requestAnimationFrame(wfelem);
              }
          };
          wfelem();
      });
  }
};

// You can use the function in following way:

waitForElement('body').then(function(body){
  body.style.background = 'red';
});

Resource Prefetch

Resource prefetching is a technique that we can use to tell the browser to download a page or resource even before the users are going to access them. This technique can be used for the pages that the users are most likely going to visit.

The browser will download and cache the resource in the background with a low priority, so it won't interfere with more important resources.

markdown

  <link rel="prefetch" href="/your-resource-link" />

Resource Preload

Resource preloading is similar to Resource prefetching but the difference is that Prefetching is a way to tell the browser what resource to download that likely to be accessed on the next navigation and Preloading is to load a resource that will be needed for the current page.

The syntax is similar but we also need to provide the resource type in as attribute.

markdown

  <link rel="preload" href="/images/background.jpg" as="image" />

Navigator.sendBeacon

Sometimes we may need to send data to server when a visitor leaves a page. When a user leaves a page, JavaScript fires an event called unload and it is not an easy task to send an Ajax request during this event.
We can use XMLHttpRequest in an unload handler. But it will prevent the browser to load the next page until the request is completed.

javascript

window.addEventListener("unload", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(data);
});

But Navigator.sendBeacon() is here to solve that problem. This method is useful when you need to send a data through Ajax but don't expect a response. And the request is executed asynchronously when the browser gets a chance to send the data during the idle processing time.

Navigator.sendBeacon() takes two parameters: first one is the url and second one is the data. The function will return a true response when the data is successfully sent to server or false if the request isn't successful.

javascript

window.addEventListener("unload", function() {
  if (navigator.sendBeacon) {
    // Send the beacon
    var status = navigator.sendBeacon(url, data);
    // Log the result
    console.log(status);
  }
};

Intersection Observer

It is hard to find a Developer who didn't write/use a code to check if an element is visible in the viewport.

We usually create a function and attach it to the scroll event and check if the target element pops up in the screen. Check the following snippet in jQuery:

javascript

$(window).scroll(function() {
  var top_of_element = $("#element").offset().top;
  var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
  var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
  var top_of_screen = $(window).scrollTop();

  if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
      // the element is visible, do something
  } else {
      // the element is not visible, do something else
  }
});

Whew! Lots of calculations is going on there which I have never been able to remember.
But, we now have IntersectionObserver() method which can save us from all of these troubles.

javascript

const observer = new IntersectionObserver(function(elements) {
  console.log(elements);
});

observer.observe(document.querySelectorAll('p'));

The first argument of IntersectionObserver is a function that can take an array of HTML elements. There is a second optional argument that takes an object of options:

javascript

const observer = new IntersectionObserver(function(elements) {
  elements.forEach(function(element) {
      if (element.intersectionRatio >= 0.5 && element.intersectionRatio < 1) {
          element.style.opacity = "0.5";
      } else if (element.intersectionRatio >= 1) {
          element.style.opacity = "1";
      }
  });
}, {
  // You can use a single value
  threshold: 0.5 // The observer's callback will be once the target element is 50% visible
  // Or you can use an array of value
  threshold: [0.5, 1.0] // The callback will run when target element is 50% and 100% visible
});

observer.observe(document.querySelectorAll('p'));

CSS Shapes 101

Thu, 26 Sep 2019 10:00:00 GMT

This article describes styles of different shapes: triangles, parallelograms, diamonds, comic bubbles, and more using CSS only.

BORDER-RADIUS PROPERTY

The border-radius property is an important concept to understand before styling any CSS figures. It allows rounding corners of HTML elements. The curve for each angle is determined by one or two radii defining its shape — a circle or an ellipse. The radius extends to the entire background, even if the element has no borders.

The border-radius property allows rounding all corners of HTML elements at the same time. If you set two values for the border-radius property, the first value will round the upper left and lower right corners, and the second one will round the upper right and lower left corners. You can use px, em, % or other units to set values.

By using the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties, you can round each corner in its own way.

The values separated by the slash (/) symbol define the horizontal and vertical radii.

Below are some examples of shapes with different border radii.

css

.shape1 { border-radius: 15px; }
.shape2 { border-top-left-radius: 15px; }
.shape3 { border-top-right-radius: 15px; }
.shape4 { border-bottom-left-radius: 15px; }
.shape5 { border-bottom-right-radius: 15px; }
.shape6 { border-radius: 0 0 15px 15px; }
.shape7 { border-radius: 15px 15px 0 0; }
.shape8 { border-radius: 0 10px 20px; }
.shape9 { border-radius: 10px 20px; }
.shape10 { border-radius: 10px/20px; }
.shape11 { border-radius: 5px 10px 15px 30px/30px 15px 10px 5px; }
.shape12 { border-radius: 10px 20px 30px 40px/30px; }

.shape {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 5px solid #32557f;
}

CIRCLE

A circle is the simplest CSS shape. Apply the border-radius: 50%; property to an element with identical width and height, and you’ll get a circle.

css

.circle {
  background: #32557f;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

OVALS/ELLIPSES

Ovals are made in the same way as circles. The only difference is that ovals’ width should be different from its height.

css

.ellipse {
  background: #32557f;
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

HALF-ELLIPSES

To make half-ellipses, use sets of values separated by the slash (/) symbol to define the horizontal and vertical radii. If you put 50% before the slash symbol, you will get a vertical half-ellipse. And if you put 50% after the slash symbol, you’ll get a horizontal half-ellipse. Combinations of 0 and 100% values define the direction of your half-ellipse.
See the examples below:

css

.half-ellipse1 { border-radius: 50% / 100% 100% 0 0; }
.half-ellipse2 { border-radius: 50% / 0 0 100% 100%; }
.half-ellipse3 { border-radius: 100% 0 0 100% / 50%; }
.half-ellipse4 { border-radius: 0 100% 100% 0 / 50%; }

.half-ellipse {
  background: #32557f;
  width: 150px;
  height: 75px;
}

QUARTER-ELLIPSES

To make quarter-ellipses, use combinations of 0 and 100% values.

css

.quarter-ellipse1 { border-radius: 100% 0 0 0; }
.quarter-ellipse2 { border-radius: 0 100% 0 0; }
.quarter-ellipse3 { border-radius: 0 0 100% 0; }
.quarter-ellipse4 { border-radius: 0 0 0 100%; }

.quarter-ellipse {
  background: #32557f;
  width: 150px;
  height: 75px;
}

CONE

And here is how you make a cone:

css

.cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #32557f;
  border-radius: 50%;
}

TRIANGLES

CSS triangles are useful to create arrows, for example, in a select element or inside buttons.
To make a triangle, create a box with zero width and height.

css

.triangle {
  width: 0;
  height: 0;
}

The actual width and height of the arrow are determined by the width of the border. In an up arrow, for example, the bottom-border is colored while the left and right are transparent, which forms the triangle.

css

.triangle .triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #32557f;
}

.triangle .triangle-down {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #32557f;
}

.triangle .triangle-left {
  border-top: 50px solid transparent;
  border-right: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}

.triangle .triangle-right {
  border-top: 50px solid transparent;
  border-left: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}

To make a right triangle (a right-angled triangle), make the top or bottom border colored and leave the right or left border transparent.

css

.triangle .triangle-top-left {
  border-top: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-top-right {
  border-top: 100px solid #32557f;
  border-left: 100px solid transparent;
}

.triangle .triangle-bottom-left {
  border-bottom: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-bottom-right {
  border-bottom: 100px solid #32557f;
  border-left: 100px solid transparent;
}

ARROWS

To create a simple arrow without a tail, make a box with a width and height, border, as well as zero left and top borders.

css

.arrow {
  width: 15px;
  height: 15px;
  border: 2px solid #32557f;
  border-left: 0;
  border-top: 0;
}

To make an up arrow, add the transform: rotate(225deg); property, and to make a down arrow, add the transform: rotate(45deg); property to rotate the arrow to 225 and 45 degrees respectively.

css

.arrow-up { transform: rotate(225deg); }
.arrow-down { transform: rotate(45deg); }

You can also make a curved arrow with a tail:

css

.arrow-curved {
    position: relative;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid #32557f;
    transform: rotate(10deg);
}
.arrow-curved:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 3px solid #32557f;
    border-radius: 20px 0 0 0;
    top: -12px;
    left: -9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
}

And below is an example of how to create an arrow-pointer:

css

.arrow-pointer {
  width: 250px;
  height: 50px;
  background: #32557f;
  position: relative;
}
.arrow-pointer:after {
  content: '';
  position: absolute;
  left: 0; bottom: 0; width: 0; height: 0;
  border-left: 25px solid #7eb4e2;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.arrow-pointer:before {
  content: '';
  position: absolute;
  right: -25px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid #32557f;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

DIAMONDS

css

.diamond1 {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #32557f;
  position: relative;
  top: -50px;
}
.diamond1:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: #32557f;
}

.diamond2 {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid #32557f;
  position: relative;
  top: -50px;
}
.diamond2:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid #32557f;
}

.diamond3 {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid #32557f;
  position: relative;
  top: -50px;
}
.diamond3:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 20px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid #32557f;
}

.diamond4 {
  border-style: solid;
  border-color: transparent transparent #32557f transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
.diamond4:after {
  content: '';
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #32557f transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

PENTAGON

A pentagon is a five-sided polygon.

css

.pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #32557f transparent;
}
.pentagon:before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #32557f;
}

HEXAGON

A hexagon is a six-sided polygon.

css

.hexagon {
  width: 100px;
  height: 55px;
  background: #32557f;
  position: relative;
}
.hexagon:before {
  content: '';
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid #32557f;
}
.hexagon:after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid #32557f;
}

STARS

A five-pointed star:

css

.star-five {
  position: relative;
  display: block;
  width: 0px;
  height: 0px;
  margin: 50px 0;
  color: #32557f;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #32557f;
  transform: rotate(35deg);
}
.star-five:before {
  content: '';
  position: absolute;
  top: -45px;
  left: -65px;
  display: block;
  height: 0;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid #32557f;
  transform: rotate(-35deg);
}

.star-five:after {
  content: '';
  position: absolute;
  top: 3px;
  left: -105px;
  display: block;
  width: 0px;
  height: 0px;
  color: #32557f;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #32557f;
  transform: rotate(-70deg);
}

A six-pointed star:

css

.star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #32557f;
  position: relative;
}
.star-six:after {
  content: '';
  position: absolute;
  top: 30px;
  left: -50px;
  width: 0;
  height: 0;
  border-top: 100px solid #32557f;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

A eight-pointed star:

css

.star-eight {
    background: #32557f;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    transform: rotate(20deg);
}
.star-eight:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #32557f;
    transform: rotate(135deg);
}

A twelve-pointed star:

css

.star-twelve {
  background: #32557f;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
.star-twelve:before,
.star-twelve:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: #32557f;
}

.star-twelve:before {
  transform: rotate(30deg);
}

.star-twelve:after {
  transform: rotate(60deg);
}

BUBBLES

css

// SASS styles

.bubble {
  position: relative;
  width: 120px;
  height: 80px;
  background: #32557f;
  border-radius: 10px;
}

.bubble1 {
  @extend .bubble;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-right-color: #32557f;
    border-left: 0;
    margin-top: -13px;
    margin-left: -13px;
  }
}

.bubble2 {
  @extend .bubble;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left-color: #32557f;
    border-right: 0;
    margin-top: -13px;
    margin-right: -13px;
  }
}

.bubble3 {
  @extend .bubble;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-bottom-color: #32557f;
    border-top: 0;
    margin-left: -13px;
    margin-top: -13px;
  }
}

.bubble4 {
  @extend .bubble;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-top-color: #32557f;
    border-bottom: 0;
    margin-left: -13px;
    margin-bottom: -13px;
  }
}

BUBBLES WITH BORDERS

css

.bubble5 {
    position: relative;
    width: 280px;
    height: 80px;
    padding: 5px;
    color: #32557f;
    border-radius: 5px;
    border: 3px solid #32557f;
}
.bubble5:before,
.bubble5:after {
    content: '\0020';
    display: block;
    position: absolute;
    top: -15px;
    left: 15px;
    z-index: 2;
    width: 0;
    height: 0;
    overflow: hidden;
    border: solid 15px transparent;
    border-top: 0;
    border-bottom-color: #7eb4e2;
}

.bubble5:before {
    top: -18px;
    z-index: 1;
    border-bottom-color: #32557f;
}

To make a bubble with a shadow, add an additional div element for the arrow.

markdown

<div class="bubble6"> <div class="bubble6-arrow"></div> </div>

css

.bubble6 {
  position: relative;
  width: 280px;
  height: 80px;
  background: #efefef;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
  padding: 15px;
}

.bubble6-arrow {
  position: absolute;
  right: 15px;
  bottom: -25px;
  border-left: 21px solid transparent;
  border-top: 20px solid rgba(0, 0, 0, .2);
}
.bubble6-arrow:before {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 2px;
  border-left: 23px solid transparent;
  border-top: 23px solid #a7a7a7;
}

.bubble6-arrow:after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 4px;
  border-left: 21px solid transparent;
  border-top: 21px solid #efefef;
}

BRACKETS

css

.brackets {
  width: 100px;
  height: 100px;
  border: 5px solid #32557f;
  border-top: none;
  border-bottom: none;
  border-radius: 30px/90px;
}

CROSS

css

.cross {
  background: #32557f;
  height: 50px;
  position: relative;
  width: 10px;
}
.cross:after {
  background: #32557f;
  content: '';
  height: 10px;
  left: -20px;
  position: absolute;
  top: 20px;
  width: 50px;
}

EGG

css

.egg {
  display: block;
  width: 130px;
  height: 175px;
  background-color: #32557f;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

FLAG

css

.flag {
  width: 110px;
  height: 56px;
  box-sizing: content-box;
  padding-top: 15px;
  position: relative;
  background: #32557f;
  color: #7eb4e2;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.flag:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #7eb4e2;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

HEART

css

.heart {
  position: relative;
  width: 120px;
  height: 100px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: '';
  left: 60px;
  top: 0;
  width: 60px;
  height: 90px;
  background: #32557f;
  border-radius: 60px 60px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

INFINITY SYMBOL

css

.infinity {
  position: relative;
  width: 106px;
  height: 50px;
  box-sizing: content-box;
}
.infinity:before,
.infinity:after {
  content: '';
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 10px solid #32557f;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
.infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

LEAVES

css

// SASS styles

.leaf {
  width: 100px;
  height: 100px;
  border: 5px solid #32557f;
}

.leaf1 {
  @extend .leaf;
  border-radius: 0 100%;
}

.leaf2 {
  @extend .leaf;
  border-radius: 0 50% 50% 50%;
}

LOCK

css

.lock {
  font-size: 4px;
  position: relative;
  top: 10em;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  box-sizing: border-box;
  border: 3.5em solid #32557f;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
}
.lock:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: -12em;
  left: 50%;
  width: 14em;
  height: 12em;
  margin-left: -7em;
  border: 2.5em solid #32557f;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
.lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: -1em;
  left: 50%;
  width: 5em;
  height: 8em;
  border: 1em solid #32557f;
  border-radius: 2.5em;
  margin-left: -2.5em;
}

MAGNIFYING GLASS

css

.magnifying-glass {
  font-size: 5em;
  display: inline-block;
  width: 0.4em;
  box-sizing: content-box;
  height: 0.4em;
  border: 0.1em solid #32557f;
  position: relative;
  border-radius: 0.35em;
}
.magnifying-glass:before {
  content: '';
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: #32557f;
  width: 0.35em;
  height: 0.08em;
  transform: rotate(45deg);
}

PAC-MAN

css

.pac-man {
  width: 0px;
  height: 0px;
  border-top: 60px solid #32557f;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #32557f;
  border-left: 60px solid #32557f;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Use Regex in JavaScript to Improve Search Results

Mon, 02 Sep 2019 10:00:00 GMT

Being able to accurately and efficiently filter search results based on a user’s input is vital for ensuring a positive and effective user experience. In this post, we will create a search bar using JavaScript, HTML and CSS. Given a list of names, we should be able to filter out names based on the user’s input.

A common way to achieve this is simply to use JavaScript’s .filter() function and check if any of the elements .includes() the user’s input.

javascript

filterFunction = (userInput) =>{
  var filteredNames = names.filter((x)=>{ 
    return x.includes(userInput)
  }   
  return filteredNames
}

This function checks if the user’s input matches any part of any of the names in the array. If our array of names contains ‘Tom’, ‘Jerry’, ‘Larry’, ‘Barry’, and the user types in ‘T’, the filtered list will only contain one name, because ‘Tom’ is the only name in the list that contains the letter ‘T’.

This method is pretty effective, but it’s a bit restrictive because the user has to type the exact order of letters, otherwise no results will be returned. Say the user wants to find Larry from our list of names, but accidentally types ‘Lrary’. Despite the fact that the letters are correct and the order is only off by one letter, the search results would turn up empty.

So in this post, we’re going to use regex in addition to .includes() in order to return more convenient results without compromising the search accuracy. First, let’s get our HTML and CSS ready.

We are using Bootstrap to setup the layout of the page. See below for the HTML:

markdown

<div class="container">
  <h1 class="text-center title">All Star Wars Characters</h1>

  <div class="search-box">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text"><i class="fa fa-search"></i></div>
      </div>
      <input type="text" class="form-control" placeholder="Search Heroes..." onkeyup="searchHeroes()">
    </div>
  </div>
  <div class="heroesContainer"></div>
</div>

And CSS:

css

.title {
  font-size: 5vw;
  font-weight: 300;
  color: #989898;
  padding: 5rem 0 3rem;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.search-box {
  max-width: 500px;
  margin: 0 auto 2rem;
}

.heroesContainer {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

.heroesContainer > p {
  padding: 0.25rem 1rem;
  margin: 0.5rem;
  border: 1px solid #b6c5d2;
  border-radius: 2em;
  white-space: nowrap;
  background: #fff;
}

.heroesContainer > h6 {
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: 100;
  color: red;
}

Now, onto the JavaScript.
The array we are going to use contains the list of names of all 432 characters from one of the greatest Movie Series, Star Wars.

javascript

const heroes = ["2-1B","4-LOM","8D8","99","0-0-0","A'Koba","Admiral Gial Ackbar","Sim Aloo","Almec",
"Mas Amedda","Amee","Padmé Amidala","Cassian Andor","Fodesinbeed Annodue","Raymus Antilles","Wedge Antilles",
"AP-5","Queen Apailana","Doctor Chelli Lona Aphra","Faro Argyus","Aiolin and Morit Astarte","Ello Asty",
"Attichitcuk","AZI-3","Ponda Baba","Kitster Banai","Cad Bane","Darth Bane","Barada","Jom Barell",
"Moradmin Bast","BB-8","(puppeteers)","(consultants)","BB-9E","Tobias Beckett","Val Beckett","The Bendu",
"Shara Bey","Sio Bibble","Depa Billaba","Jar Jar Binks","Temiri Blagg","Commander Bly","Bobbajo",
"Dud Bolt","Mister Bones","Lux Bonteri","Mina Bonteri","Borvo the Hutt","Bossk","Ezra Bridger","BT-1",
"Sora Bulq","C1-10P","C-3PO","Lando Calrissian","Moden Canady","Ransolm Casterfo","Chewbacca","Chief Chirpa",
"Rush Clovis","Commander Cody","Lieutenant Kaydel Ko Connix","Jeremoch Colton","Cordé","Salacious B. Crumb",
"(puppeteer)","Arvel Crynyd","Dr. Cylo","Larma D'Acy","Figrin D'an","Kes Dameron","Poe Dameron","Vober Dand",
"Joclad Danva","Dapp","Biggs Darklighter","Oro Dassyne","Gizor Dellso","Dengar","Bren Derlin","Ima-Gun Di",
"Rinnrivin Di","Tan Divo","DJ","Lott Dod","Jan Dodonna","Daultay Dofine","Dogma","Dormé","Cin Drallig",
"Garven Dreis","Droidbait","Rio Durant","Lok Durd","Eirtaé","Dineé Ellberger","Ellé","Caluan Ematt","Embo",
"Emperor's Royal Guard","Jas Emari","Ebe E. Endocott","Galen Erso","Jyn Erso","Lyra Erso","EV-9D9","Moralo Eval",
"Cornelius Evazan","Onaconda Farr","Boba Fett","Jango Fett","Feral","Commander Fil","Finn","Kit Fisto",
"Fives","FN-1824","FN-2003","FN-2199","Bib Fortuna","Commander Fox","FX-7","GA-97","Adi Gallia","Gardulla the Hutt",
"Yarna d'al' Gargan","Garindan","Gasgano","Saw Gerrera","Gonk droid","Commander Gree","Greedo","Janus Greejatus",
"Captain Gregor","General Grievous","Grummgar","Gungi","Nute Gunray","Mars Guo","Rune Haako","Hardcase",
"Rako Hardeen","Gideon Hask","Hevy","San Hill","Clegg Holdfast","Vice Admiral Amilyn Holdo","Tey How","Huyang",
"Armitage Hux","Brendol Hux","IG-88","Chirrut Îmwe","Inquisitors","Grand Inquisitor","Fifth Brother","Sixth Brother",
"Seventh Sister","Eighth Brother","Sidon Ithano","Jabba the Hutt","(puppeteers)","Queen Jamillia","Wes Janson",
"Kanan Jarrus","Jaxxon","Greeata Jendowanian","Tiaan Jerjerrod","Commander Jet","Dexter Jettster","Qui-Gon Jinn",
"Jira","Jubnuk","K-2SO","Tee Watt Kaa","General Kalani","Agent Kallus","Harter Kalonia","Maz Kanata","Colonel Kaplan",
"Karbin","Karina the Great","Alton Kastle","King Katuunko","Coleman Kcaj","Obi-Wan Kenobi","Ki-Adi-Mundi","Klaatu",
"Klik-Klak","Derek 'Hobbie' Klivian","Agen Kolar","Plo Koon","Eeth Koth","Sergeant Kreel","Pong Krell",
"Black Krrsantan","Bo-Katan Kryze","Satine Kryze","Conder Kyl","Thane Kyrell","L3-37","L'ulo L'ampar",
"Beru Whitesun Lars","Cliegg Lars","Owen Lars","Cut Lawquane","Tasu Leech","Xamuel Lennox","Tallissan 'Tallie' Lintra",
"Slowen Lo","Lobot","Logray","Lumat","Crix Madine","Shu Mai","Malakili","Baze Malbus","Mama the Hutt","Ody Mandrell",
"Darth Maul","Saelt-Marae ('Yak Face')","Mawhonic","Droopy McCool","Pharl McQuarrie","ME-8D9","Lyn Me","Tion Medon",
"Del Meeko","Aks Moe","Sly Moore","Morley","Delian Mors","Mon Mothma","Conan Antonio Motti","Jobal Naberrie",
"Pooja Naberrie","Ruwee Naberrie","Ryoo Naberrie","Sola Naberrie","Momaw Nadon","(puppeteers)","Boss Rugor Nass",
"Lorth Needa","Queen Neeyutnee","Enfys Nest","Bazine Netal","Niima the Hutt","Jocasta Nu","Po Nudo","Nien Nunb",
"(puppeteer)","Has Obbit","Barriss Offee","Hondo Ohnaka","Ric Olié","Omi","Ketsu Onyo","Oola","OOM-9","Savage Opress",
"Bail Organa","Breha Organa","Leia Organa","Garazeb 'Zeb' Orrelios","Orrimaarko ('Prune Face')","Admiral Kendal Ozzel",
"Odd Ball","Pablo-Jill","Teemto Pagalies","Jessika 'Jess' Testor Pava","Captain Quarsh Panaka","Casca Panzoro",
"Reeve Panzoro","Baron Papanoida","Che Amanwe Papanoida","Chi Eekway Papanoida","Paploo","Captain Phasma","Even Piell",
"Admiral Firmus Piett","Darth Plagueis","Sarco Plank","Unkar Plutt","Poggle the Lesser","Yarael Poof","Jek Tono Porkins",
"Nahdonnis Praji","PZ-4CO","Ben Quadinaros","Qi'ra","Quarrie","Quiggold","R2-D2","R2-KT","R3-S6","R4-P17",
"R5-D4","RA-7 ('Death Star droid')","Rabé","Admiral Raddus","Dak Ralter","Oppo Rancisis","Admiral Dodd Rancit",
"Rappertunie","Sinjir Rath Velus","Gallius Rax","Eneb Ray","Max Rebo","Ciena Ree","Ree-Yees","Kylo Ren","Captain Rex",
"Rey","Carlist Rieekan","Riley","Rogue Squadron","Romba","Bodhi Rook","Pagetti Rook ('Weequay')","Rotta the Hutt",
"Rukh","Sabé","Saché","Admiral U.O. Statura","Joph Seastriker","Miraj Scintel","Admiral Terrinald Screed","Sebulba",
"Aayla Secura","Korr Sella","Zev Senesca","Echuu Shen-Jon","Sifo-Dyas","Aurra Sing","Luke Skywalker","Shmi Skywalker",
"The Smuggler","Snaggletooth","Supreme Leader Snoke","Sy Snootles","(puppeteer)","Osi Sobeck","Han Solo","Greer Sonnel",
"Sana Starros","Lama Su","Shriv Suurgav","Mercurial Swift","Gavyn Sykes","Cham Syndulla","Hera Syndulla","Jacen Syndulla",
"Orn Free Taa","Cassio Tagge","Mother Talzin","Wat Tambor","Riff Tamson","Ahsoka Tano","Tarfful","Jova Tarkin",
"Grand Moff Wilhuff Tarkin","Roos Tarpals","TC-14","Berch Teller","Teebo","Teedo","Mod Terrik","Tessek","Lor San Tekka",
"Petty Officer Thanisson","Inspector Thanoth","Lieutenant Thire","Grand Admiral Thrawn","C'ai Threnalli",
"Shaak Ti","Paige Tico","Rose Tico","Saesee Tiin","Bala-Tik","Meena Tills","Quay Tolsite","Bargwill Tomder",
"Wag Too","Coleman Trebor","Admiral Trench","Strono Tuggs","Tup","Letta Turmond","Longo Two-Guns","Gregar Typho",
"Ratts Tyerell","U9-C4","Luminara Unduli","Finis Valorum","Eli Vanto","Nahdar Vebb","Maximilian Veers","Asajj Ventress",
"Evaan Verlaine","Garrick Versio","Iden Versio","Lanever Villecham","Nuvo Vindi","Tulon Voidgazer","Dryden Vos","Quinlan Vos",
"WAC-47","Wald","Warok","Wicket W. Warrick","Watto","Taun We","Zam Wesell","Norra Wexley","Temmin 'Snap' Wexley",
"Vanden Willard","Mace Windu","Commander Wolffe","Wollivan","Sabine Wren","Wuher","Kazuda Xiono","Yaddle","Yoda","(puppeteer)",
"Joh Yowza","Wullf Yularen","Ziro the Hutt","Zuckuss","Constable Zuvio"];

Let’s take a look at the function that is going to render all of the results in the container, showHeroes.

javascript

showHeroes = (filteredHeroes) => {
  const container = document.querySelector('.heroesContainer');
  if (filteredHeroes.length > 0 ) {
    container.innerText = ""
    filteredHeroes.map((name) => {
      const p = document.createElement("P")
      p.innerText = name
      container.appendChild(p)
    })
  } else {
    const h6 = document.createElement("h6")
    h6.innerText = "No Results"
    container.innerHTML = "";
    container.appendChild(h6);
  }
}

The function is passed an array as an argument. We iterate through the array and use JavaScript’s createElement function to create a p tag for each item in the array. Then we add the name at that iteration to the innerText of that p tag, which will represent the search results.

Once we’ve created the p tag and added the innerText, we can use JavaScript’s appendChild function to append the created p tag and its content to heroesContainer.

If there is no hero found which means the length of the filteredHeroes is 0, then we are going to show the “No Results” text in h6 tag.

We also need to call this function with the heroes array in document.onDOMContentLoaded when the page loads for first time to initialize our results and show all the characters.

javascript

document.addEventListener("DOMContentLoaded", () => {
  showHeroes(heroes)
});

Now, onto our filter function searchHeroes().

javascript

searchHeroes = () => {
  const searchText = event.target.value.toLowerCase();

  const filteredResult = heroes.filter(hero => {
    return hero.toLowerCase().includes(searchText);
  });

  showHeroes(filteredResult)
}

This function filters the heroes array based on whether or not any of the character names contains the user’s input. We also use toLowerCase() to improve input validation. Remember, ‘Pam’ is not equal to ‘pam’, so without changing both the character name in the array and the user input to all lowercase, a user who types ‘pam’ will yield no search results.

Even after converting the names and input to lowercase letters, this functionality falls short. If a user types ‘apm’ they will yield no search results. It’s the same case if a user types in ‘mcihael’. Both of those inputs were more than likely meant to have been ‘pam’ and ‘michael’. So how can we account for minor spelling mistakes like that and correct our search results accordingly?

Introducing, Regex!

Regex, short for ‘regular expression’, is a special text string for describing a search pattern. We are going to implement a search pattern using regex that takes the first three letters of a character’s name and compares it to the first three letters of the input.

Check the checkName() function below:

javascript

checkName = (name, str) => {
  const pattern = str.split("").map(letter => {
    return `(?=.*${letter})`
  }).join("");
  const regex = new RegExp(`${pattern}`, "g");
  return name.match(regex);
}

Let’s break this down:

?= is a positive lookahead.
. matches any character except line break.
* matches zero or more instances of a character.
() is a capturing group, which is used to group characters together in a regular expression so that we can apply other operators (?=.*).
g is the global modifier which performs a global search of the string looking for matches. You could also add i to g to make it an insensitive (not case sensitive) search as well, but in this case I have already converted the input and character name to lowercase letters, so the g modifier is sufficient.

This function splits our user input, iterates over the characters and uses string interpolation to add each letter to the (?=.*) regex after the asterisk(*). Once we have an array of regex patterns, we join all items in the array to create a larger regex pattern that encompasses all letters. From that we can use new RegExp to create a regular expression from the joined patterns.

The individual patterns we’ve created for each letter will match any strings that contain that letter. Combining them will apply all of the individual capturing groups to overall pattern, making them all matchable patterns for the string. This is will compensate for where .includes(str) falls short.

If the user is trying to find ‘Kelly’, but types in ‘e’ as the first letter by mistake. x.toLowerCase().includes(str) will work, but then if the user continues typing and types ‘k’ next, the previous check won’t work.

If we pass ‘ek’ to checkName(), we can create the regex (?=.*e)(?=.*k) which will match a string containing ‘e’ and ‘k’ regardless of order. We apply that regex to the first three letters of ‘kelly’, which is also passed to the function as name. Then .match() will return true if the regex is met. Otherwise it will return false.

Now that we know what we are trying to accomplish and how to do it, let’s look at our revised searchHeroes() function:

javascript

searchHeroes = () => {
  const searchText = event.target.value.toLowerCase().substring(0, 3);
  const filteredResult = heroes.filter(hero => {
    const heroSub = hero.substring(0, 3).toLowerCase();
    return hero.toLowerCase().includes(searchText) || checkName(heroSub, searchText);
  });
  showHeroes(filteredResult)
}

We use substring() to take the first three letters of the input and the character’s name. Then we check if hero.toLowerCase().includes(str) is true. If it is, we skip the regex validation because .includes() is a more accurate match since its literally part of the character name, order and character wise.
If hero.toLowerCase().includes(str) is false, we use checkName() to apply our regex validation. This will improve the user’s search results without being too strict and without compromising the accuracy of the overall search.

Thank you for reading the post. Hope it will help you someday! Check below for live demo and git repo for this tutorial.

Git Repo

github/javascript-regex-search

Live Demo

meghsohor.github.io/javascript-regex-search/

MeghSohor

RxJS - ajax & fromFetch operators

Fetch API

Axios

RxJS/ajax

RxJS/fromFetch

CSS BEM Methodology

3 principle elements of BEM

Rules of BEM

Benefits of using BEM

JavaScript Arrow Functions

Arrow Function vs Regular Function

Arrow Functions should be used when

Arrow Functions shouldn't be used when

Swipe function for touch-devices in Vanilla JS

How to use

Finally run the function:

JS Coding Challenge: Find Anagrams

Challenge

Example:

Notes:

Algorithm

Solution

2 useful Polling functions in JavaScript

Poling function 1: wait for HTML element

Example:

Poling function 2: wait until a function returns true

Example:

Modern Browser APIs - Part 1

Window.requestAnimationFrame

Demo:

A polling function to wait for an HTML element using requestAnimationFrame :

Resource Prefetch

Resource Preload

Navigator.sendBeacon

Intersection Observer

CSS Shapes 101

BORDER-RADIUS PROPERTY

Below are some examples of shapes with different border radii.

CIRCLE

OVALS/ELLIPSES

HALF-ELLIPSES

QUARTER-ELLIPSES

CONE

TRIANGLES

ARROWS

DIAMONDS

PENTAGON

HEXAGON

STARS

BUBBLES

BUBBLES WITH BORDERS

BRACKETS

CROSS

EGG

FLAG

HEART

INFINITY SYMBOL

LEAVES

LOCK

MAGNIFYING GLASS

PAC-MAN

Use Regex in JavaScript to Improve Search Results

Introducing, Regex!

Let’s break this down:

Git Repo

Live Demo

A polling function to wait for an HTML element using `requestAnimationFrame` :