Top ten Javascript tricks – part 1

Convert a string to an array of Characters using spread Syntax – ES6

// Split string uisng ES6 Spread
const angular  = 'angular';

//  old ways
const splicedAngualr = angular.split('');
// [ 'a', 'n', 'g', 'u' , 'l' , 'a' ,'r']

// new ES6 way
const splicedAngular = [...angular]
// [ 'a', 'n', 'g', 'u' , 'l' , 'a' ,'r']

Addition string (’10’) and number (5)

const str = '10';
const num = 5;

// This doesn't returnt the sum, its concatenated
str + num
// 105 (not correct)

//prepend string with "+" to calculate the sum
+str + num
// 15 (correct)

How to remove an Array Duplicates

const duplicates = [1, 2, 2, 4 , 5, 5, 6, 6];

const uniques = Array.from(new Set(duplicates));

// uniques [1, 2, 4, 5, 6]

3 ways to convert string to boolean

const isBool = 'Helperscript';

new Boolean(isBool) // true

Boolean(isBool) // true

!!isBool // true

How to check if NaN equals to NaN?

const item = NaN;

// this doesn't work
item === NaN; // false

//This works!
Object.is(item, NaN); // true

Two ways to repeat the strings

const str = 'J';

// 1. Repeat
str.repeat(3);

// 2. Fill
Array(3).fill(str).join('');

// result 'JJJJ'

Refactoring the ‘if’ condition

const isPerson = false;

//not correct
if(isPerson === false)

// correct
if(!isPerson)

Check if a string contains Substring

const word ='summer';

// old way
word.indexOf('sum') !=== -1 // true

// ES6 way
word.includes('sum');

Check the number is Negative or Positive

const num = -2;

// old ways
num === 0 ? num : (num > 0 ? 1 : -1) // -1

// ES6
Math.sign(num); // -1 if positive return 1 

The standard naming pattern for boolean variable

// Non standard
const person =  false;
const age = false;
cosnt dance = false

// Good standard
const isPerson =  true;
const hasAge = true;
cosnt canDance = true

I hope this will helpful for most beginners as well as to everyone. Thanks for reading. If you know any tricks comment below.

Javascript tricks part2 >

different styles of button | CSS | linear gradient

different styles of button in html | css | linear gradient background

Buttons in website, web application, or any blog, which are very important to attract the people to get click on the button without giving time to read. The button is mostly used for digital marketing in the internet world.
In below, I give all the button CSS file.
style.css

 .global-warming-btn{
        
        background-color :'#20bf55';
        background-image: linear-gradient(315deg, #20bf55 0%, #01baef 74%);
        font-family:  'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
        
    }
    .global-warming-btn:hover{
        background-image: linear-gradient(315deg, #20bf55 0%, #01aaef 74%);
        
    }

    .violet-stock{
        background-color: #0cbaba;
        background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
        font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
    }
    .violet-stock:hover{
        background-image: linear-gradient(315deg, #0caaba 0%, #370036 74%);
    }
    .girly-pink{
        background-color: #eec0c6;
        background-image: linear-gradient(315deg, #eec0c6 30%, #7ee8fa 74%);
        font-family: 'Roboto';
        color:#696969;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
    }
    .girly-pink:hover{
        background-image: linear-gradient(315deg, #ecc0c6 0%, #7ee8fa 0%);
    }
   .blewy-btn{
    background-color: #2a2a72;
    background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
    font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .blewy-btn:hover{
    background-image: linear-gradient(315deg, #151568 0%, #0064a1 74%);  
   }
   .cocktail-btn{
    background-color: #36096d;
   background-image: linear-gradient(315deg, #36096d 0%, #37d5d6 74%);
   font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .cocktail-btn:hover{
    background-image: linear-gradient(315deg, #1e043d 0%, #25aaaa 74%);
   }
   .anonymous-pon{
    background-color: #7f53ac;
    background-image: linear-gradient(315deg, #7f53ac 0%, #1b34a3 74%);
    
    font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }.anonymous-pon:hover{
    background-image: linear-gradient(315deg, #7f53ac 0%, #0c2bb6 74%);
    
   }
   .ceaser-btn{
    background-color: #42378f;
    background-image: linear-gradient(315deg, #42378f 0%, #aa0510 74%);
     
    font-family: 'Roboto';
        color:white;
    font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .ceaser-btn:hover{
    background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
   }
   .calm-ash{
    background-color: #537895;
    background-image: linear-gradient(315deg, #537895 0%, #09203f 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .calm-ash:hover{
    background-image: linear-gradient(315deg, #688499 0%, #09203f 74%);
   }
   .dark-ash{
    background-color: #485461;
    background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .dark-ash:hover{
    background-image: linear-gradient(315deg, #63707e 0%, #28313b 74%);
   }

   .v-pinky{
    background-color: #f907fc;
background-image: linear-gradient(315deg, #f907fc 0%, #05d6d9 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .v-pinky:hover{
background-image: linear-gradient(315deg, #750577 0%, #05d6d9 74%);
   }
   .elvis-blue{
    background-color: #2876f9;
    background-image: linear-gradient(315deg, #2876f9 0%, #6d17cb 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .elvis-blue:hover{
    background-image: linear-gradient(315deg, #0d61f1 0%, #6d17cb 74%);
   }

   .unvolved-blue{
    background-color: #29539b;
    background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .unvolved-blue:hover{
    background-image: linear-gradient(315deg, #072e72 0%, #1e3b70 74%);
   }

   .deep-water{
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .deep-water:hover{
    background-image: linear-gradient(147deg, #000000 0%, #0477c4 74%);
   }
   .labor-btn{
    background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .labor-btn:hover{
    background-image: linear-gradient(147deg, #000000 0%, #0c335a 74%);
   }
   .whale-btn{
    background-color: #130f40;
background-image: linear-gradient(315deg, #130f40 0%, #000000 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .whale-btn:hover{
    background-image: linear-gradient(315deg, #484666 0%, #000000 74%);
   }
   .vilgreen{
    background-color: #0d0a0b;
background-image: linear-gradient(315deg, #0d0a0b 0%, #009fc2 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .vilgreen:hover{
    background-image: linear-gradient(315deg, #0d0a0b 0%, #00c6f3 74%);
   }
   .outline-black{
       border:3px solid #3c3c3c;
       font-family: 'Roboto';
    color:#3c3c3c;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .outline-black:hover{
border-color:rgb(182, 182, 182);
background-color:#3c3c3c;
color:white;
   }
   .outline-yellow{
    border:3px solid #FF9800;;
       font-family: 'Roboto';
    color:#3c3c3c;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc; 
   }
   .outline-yellow:hover{
border-color:#3c3c3c;
background-color:#FF9800;
color:#3c3c3c;
   }

linear-buttons.html

<div class="container">
    <div class="btn-container"></div><a class="vilgreen">Submit</a></div>
    <div class="btn-container"><a class="whale-btn">Submit</a></div>
    <div class="btn-container"><a class="labor-btn">Submit</a></div>
    <div class="btn-container"><a class="deep-water">Submit</a></div>
    <div class="btn-container"><a class="global-warming-btn">Submit</a></div>
    <div class="btn-container"><a class="violet-stock">Submit</a></div>
    <div class="btn-container"><a class="girly-pink">Submit</a></div>
    <div class="btn-container"><a class="blewy-btn">Submit</a></div>
    <div class="btn-container"><a class="cocktail-btn">Submit</a></div>
    <div class="btn-container"><a class="anonymous-pon">Submit</a></div>
    <div class="btn-container"><a class="ceaser-btn">Submit</a></div>
    <div class="btn-container"><a class="calm-ash">Submit</a></div>
    <div class="btn-container"><a class="dark-ash">Submit</a></div>
    <div class="btn-container"><a class="v-pinky">Submit</a></div>
    <div class="btn-container"><a class="elvis-blue">Submit</a></div>
    <div class="btn-container"><a class="unvolved-blue">Submit</a></div>
    <div class="btn-container"><a class="outline-black">Submit</a></div>
    <div class="btn-container"><a class="outline-yellow">Submit</a></div>
</div>

admin free template UI UX design

admin template free
View   Download

Sample Admin Dashboard UI/UX Template is fully free to use. No attribution needed for any modification or commerical purposes. In this template all plugins are totally free.

  • Responsiveness
  • bootstrap 4
  • Jquery
  • chartist.js
  • slim scroll
  • counter up
  • way points

All plugins are in build in this free download.

Note: The images you see in the screenshots are used for demo purposes only, they are not incuded in the download package.

View   Download

Free html themes to download | free licence

Themes here submitted are free to use. No attribution required!

HS Dashboard

View   Download

This HsDashboard is Awesome dashboard view. Dashboard design are mainly used for many Industrial IOT projects or some management projects.

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google’s Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

This product came as a result of users asking for a material dashboard after we released our successful demo. We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.

Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

Material Dashboard uses a framework built by our friend Federico – Bootstrap Material Design, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.

Download this amazing dashboard Theme.

View   Download