DEV Community: Himanshu Tiwari 🌼

Resources for Design Inspiration

Himanshu Tiwari 🌼 — Thu, 18 Mar 2021 20:32:04 +0000

Here are some websites to get inspiration for design and UI.
You can use them in your next project for Design Inspiration ->

BONUS

Comment down your fav one

THINGS TO REMEMBER WHILE CREATING YOUR PORTFOLIO WEBSITE

Himanshu Tiwari 🌼 — Sat, 13 Feb 2021 08:55:04 +0000

A Portfolio website is your reflection, your way to show off projects and skills. Currently, I am also trying to make my own portfolio website and thought to share these things which are important for a portfolio website to have.

1- Home Page: Makes or Breaks

Your complete website should be of absolutely high quality but the home page decides whether the client or visitor will see the whole website or not.
Your Home Page should reflect who you are? what do you do? Also, what are your best projects? Here's a screenshot from this website.

2- Second Most Visited Page: About Page

Your About Page is the second most visited page after your Home Page. This page should be all about you, from name to location or your story. Don't forget to mention work and your qualities. Try to give a story to your visitor or a fun fact about yourself.

You have to be creative and professional both at the same time. Here's an example

3- No one likes you?

People like you, your work, and your projects? If yes, then add testimonials because they give social proof of how good you are at your work.

They add legitimacy to your portfolio website and reinforce your worth in the eyes of visitors. Recommendations from real people can offer an important nudge for potential clients to get in touch.

Here's a reference

4- Navigation -> Seamless

The most simplistic thing is navigation. You can make it creative but don't add so many options to it.

If you have too many pages on your site or a layout that’s confusing for first-time visitors, people will be focused on that, when you want them to be focused on the quality of your creative work.

Example

5- Use your Creative Skills

If you have creative skills then why not show them? Make your website minimalistic and on a theme that reflects your interest.
Look at this example

6- Last but not least

A blog section and Project section -- Example
A contact form (call to action) -- Example
A clients section (if applied) -- Example
A Skills section (depends on you) -- Example

I hope this was helpful to you

Comment your Portfolio Website down in the comments, let's connect with each other.

Tools Every Developer Should Know and Use

Himanshu Tiwari 🌼 — Fri, 05 Feb 2021 05:17:26 +0000

SO FAR SO GOOD
I hope your Web Dev journey sounds like that.
Well if yes, then I have something that can make good to great and,
if no, then don't worry folks these tools will make that good.

I have some fantastic Chrome Extensions and Websites that can make your life way easier as a web developer. I use these tools and they are amazing, secure, and time-saving.

Note: I highly encourage you to learn basics(HTML, CSS, JS), then move towards using these tools.

Websites

Uxwing: For Free PNG and SVG icons for your projects.
Unsplash: For Wallpapers and Images of different sizes.
Jsonplaceholder : For JSON free API.
lighthouse: Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public, or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Css-tricks: Name suggests what it does :) fantastic css articles
css-box-shadow: Create box shadows in an instant, do check out front-end developers.
css-gradient: Create gradient real quick and easy.
Sharingbuttons.io: Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking. Super Helpful.
convert CSS to JS: Convert CSS to JS and VICE VERSA.

Extensions

Wappalyzer: Wappalyzer is a technology profiler that shows you what websites are built with. Find out what CMS a website is using, as well as any framework, eCommerce platform, JavaScript libraries, and many more.
Adblock: Enough of Cringy and attention deflecting ads.
WhatFont: The easiest way to identify fonts on web pages.
ColorZilla: Advanced Eyedropper, Color Picker, Gradient Generator, and other colorful goodies.
Imageye - Image downloader: Find and download all images on a web page. The best tool, I use while cloning any website for practice.

If you have any tool to share, then do write it in the comments
and if you like my work then follow me on
Twitter 😊 Himanshu
Linkedin 😄 thehimanshutiwari

Important JavaScript Interview Q&A

Himanshu Tiwari 🌼 — Mon, 01 Feb 2021 01:00:01 +0000

Ahaan, No time waste let's directly check those questions.

Q1- What is a callback?

Callback functions are passed as arguments of other functions and they are normally executed at the end of the parent function.

For an example check this

Q2- What is CORS?

Cross-Origin Resource Sharing or CORS is a mechanism that uses additional HTTP headers to grant a browser permission to access resources from a server at an origin different from the website
origin.

An example of a cross-origin request is a web application served from http://myowndomain.com that uses AJAX to make a request for http://yourbaddomain.com.

Q3- Evaluate 0.1 + 0.2 === 0.3 ?

It evaluates to false because JavaScript uses the IEEE 754 standard for Math and it makes use of 64-bit floating numbers. This causes precision errors when doing decimal calculations, in short, due to computers working in Base 2 while decimal is Base 10.

0.1 + 0.2  
//OUTPUT
//0.30000000000000004

Q4- What is the difference between lexical scoping and dynamic scoping ?

Lexical scoping or Static scoping refers to when the location of a function's definition determines which variables you have access to. On the other hand, dynamic scoping uses the location of the function's invocation to determine which variables are available.
For better source code we often use Lexical scoping.

Q5- What is the difference between `undefined` and `null` ?

The major difference - null is explicit while undefined is implicit. Let's say we have a variable and we don't have a value associated with that, so that makes it undefined but null is set as the value to explicitly indicate “no value”. undefined is used when the nothing is "not" known, and null is used when the nothing is known.

Q6- Does JavaScript pass by value or by reference?

Pass by value always.However, with objects, the value is a reference to the object.

Q7- What is the output of the following code?

const a = [0, 1, 2]
const b = [0, 1, 2]
const c = "0,1,2"

console.log(a == c)
console.log(a == b)

TRUE - automatic type conversion
FALSE - Arrays are compared by reference

Q8- Are semicolons required in JavaScript?

Sometimes
Semicolons are usually optional in JavaScript but have edge cases where they are required.

If you don't use semicolons, tools like Prettier will insert semicolons for you in the places where they are required to save in a text editor to prevent errors.

Q9- What does the following code evaluate to?

typeof typeof 0

It evaluates to "string".
typeof 0 evaluates to number
and typeof "number" evalutes to string

Enough for today
But not for JavaScript ;)
If you have some amazing Questions to add, let's add them in the comments which will be beneficial for everyone.

Date & Time in JavaScript

Himanshu Tiwari 🌼 — Sun, 24 Jan 2021 13:07:39 +0000

Let’s meet someone amazing today 😁, haha a new built-in object: Date. In Javascript, we can easily work with Date & Time using the Date class. To create an object of this type we use the new keyword.

 // Creating a Date object
    var dateObj = new Date();

    console.log(dateObj);

By doing this, we create an object with the current date and time formed by weekday, month, day, year, hours, minutes, seconds, and timezone. Now that's friggin precise 😝.

Methods of the Date object 😵

Method	Description
getDate()	Returns the day of the month (1 to 31)
getDay()	Returns the weekday (0 - Sunday to 6 -
	Saturday)
getFullYear()	Returns the full year (YYYY)
getMonth()	Returns the month (0 to 11)
getHours()	Returns the hours (0 to 23)
getMinutes()	Return the minutes (0 to 59)
getSeconds()	Returns the seconds (0 to 59)
getMilliseconds()	Returns the milliseconds (0 to 999)
getTime()	Returns the number of milliseconds since the
	Epoch(Jan 1st, 1970, 00:00:00)
setTime()	Creates a specific date from milliseconds
	since the epoch.

What is UNIX EPOCH?😰

The Epoch is present in most programming languages. We can consider it the starting point of counting the time. This is useful to do calculations with date and time.

Javascript uses the Unix Epoch, which is: Jan 1st, 1970, 00:00:00, UTC.

A Time Chart for reference 😅

Time	Milliseconds (ms)
1 second	1,000
1 minute	60,000
1 hour	3,600,000
1 day	86,400,000
1 year (365 days)	31,536,000,000

How to calculate how many hours have passed since the Epoch? 😬

    var Obj = new Date();

    Obj = Obj.getTime();

    var hours = Obj / 3600000;

    console.log(Math.floor(hours));

Passing Argument to Date() 😷

We created date objects without passing any arguments, this is why they represented the current time but we can also use them with specific objects or better to say a specific number of objects.

Numeric arguments	Time represents
One	milliseconds since the epoch
Two	years and month (months go from 0 to 11)
Three	years, month, and day
Four	years, month, day, and hours
Five	years, month, days, hours, minutes
Six	years, month, day, hours, minutes, and

var Obj = new Date(2021,1,24);
    console.log( Obj );

We can also pass strings as an argument and in different formats

ISO date: "2020-03-18" (YYYY-MM-DD)
Short Date: "03/18/2020" (MM/DD/YYYY)
Long Date: "Mar 18 2020" or "18 Mar 2020"

I hope you guys have learnt and saved it for later reference
and if you found my grammatical mistakes then don't forget to comment them 😂

Grids -> CSS: Learn through code way

Himanshu Tiwari 🌼 — Tue, 19 Jan 2021 10:06:13 +0000

Today let's understand Grids in a practical way
All you have to do is copy the code and paste it into a code editor and before reading from top to bottom, just have a quick look at the HTML part.

Note: Try Commenting and un-commenting accordingly as you go
down for playing with items

<!-- 
How to read
Read from top to down and read with comments also 
comment and uncomment accordingly as you try different things.

I hope you have prior knowledge of CSS basics so that you don't 
act noob here ;) LOL -->

<!-- 
The whole HTML is full of 
GOLDEN WORDS, so do read them as soon as they encounter -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
                                   scale=1.0">
    <title>CSS-GRID-SYSTEM</title>
    <style>
        .container {
            display: grid;
            /*
            ⭐ GOLDEN WORDS: 1 
            So when we start, we begin by making the main 
            the container as display: grid; 
            and that's a really important thing to understand.

            After this we use a very basic property i.e. 
            grid-template-columns 
            which takes the number of columns and their width. 
            Like in the example below you can see, I have written 
            3 widths, i.e. I am dividing the screen into 3 columns 
            with respective widths.
            The width can be in pixel or in fr... most commonly 
            fr, fr divides the screen into columns...
            let's talk with example see GW:2 where fr is written  
            */

            grid-template-columns: 300px 120px 120px;
            grid-template-columns: 120px auto 120px; 

            /*
            ⭐ GOLDEN WORDS: 2 
            here in the example below the screen is divided into 
            1+2+1 columns and the second column is twice 
            the first column. 
            FR stands for fraction, try practicing by changing 
            values things will get more clear then
            */

            grid-template-columns: 1fr 2fr 1fr;

            /* 
               Repeat takes 2 parameters, 
               1: the number of columns or rows used accordingly
               2: width of auto or __px or any numerical value
            */

            grid-template-columns: repeat(4, auto); 

            /* 
               GridGap is simple it's like margin for grids try 
               playing with them you will understand 
            */

            grid-gap: 1rem;
            /* grid-column-gap: 2rem; */
            /* grid-row-gap: 3rem; */

            /* grid-template-rows: 20px 20px 20px ; */
            /* grid-template-rows: repeat(4, auto); */

            /*
            ⭐ GOLDEN WORDS : 3
            So you might have understood the above statement, 
            right!!! 
            __NO :(__
            That's the same as what I did for columns which now is 
            done for rows.
            N O W
            what is this auto rows property,
            i.e. Go and see the HTML item tags you can see there 
            are 9 total items but we styled only 4 or 3 columns 
            and a width of 3 or 4 items so what about others, so 
            we can style their widths using this 👇 property
                          grid-auto-rows: _____; property
            try working with it for more explanation 
            */

            grid-auto-rows: 120px; 

            /*
            ⭐ GOLDEN WORDS: 4 
            GTC or grid-template-columns: ___; can be used in a 
            bit different way with auto-fit and minmax property 
            and basically, it has a certain reason 

            reason: repeat contains 2 parameters 
            (as I told above), number of rows 
            or columns and size of them, so here auto-fit is for 
            the number of columns i.e. it will adjust accordingly, 
            to the screen and minmax property is for setting the 
            minimum and the maximum width of the item grids. Here 
            300px is minimum width and 1fr(fraction) is for 
            maximum width i.e. for 1 .item (class) on-screen 
            alone... 
            try practicing this a few times and you will 
            understand this well
            few devs use media queries instead so we can use that 
            as well( I prefer using media queries for that) 
            */

            grid-template-columns: repeat(auto-fit , 
                                   minmax(300px,1fr));

            /* justify-content: center; */


            /*
            ⭐ GOLDEN WORDS: 5 
            A very powerful tool to make designs of a website is 
            grid but the area tool in the grid is something that 
            makes it so so powerful.
            So, I did some tweaks here
            first I took 3 items and gave them id's and remember 
            to comment on other items before moving forward. 
            then 
            gave them grid-area while styling there id's
            anything relevant let's say a name (check below👇) 
            after that in the container itself, we made the 
            grid-template-areas: ___; 
            this property uses those areas to represent 
            design

            It designs in a 2D representation 
            ___________________________________________
            |__________|__________|_________|_________|
            |__________|__________|_________|_________|
            |__________|__________|_________|_________|


            i.e. every name is 1fr width and we write it as we 
            want it to appear(try to write logically and 
            practically possible things for god's sake  🙏), 
            a better way to understand this is to run 
            the below code and see... 
            don't forget to play by yourself
             */
            grid-template-areas: 
            "itemOne itemOne itemTwo itemTwo"
            "itemThree itemThree itemTwo itemTwo";

        }

        .item {
            /* height: 100px;
            width: 100px; */
            background-color: rgb(62, 210, 255);
            border: 2px solid black;
            /* margin: 3px; */
            padding: 10px 5px;
        }

        /* 
        ⭐ GOLDEN WORDS: 6 
        Now as you are an amazing learner so it's time to 
        learn Spanning 
        So we selected the first item using the first-child 
        selector property and now used grid-column for spanning 
        through the column and the way I did it is by giving the 
        start "1" and then a "/" with a "span" keyword and then 
        end 2, 
        results were item 1 now spans all the way to col-2 
        the very same can be done with grid-row selector.
        Those commented 4 lines are another way of representation 
        and nothing else. This will be more clear only if you play 
        more with this, try experimenting with the below 
        statements
        */
        .item:first-child {

            /* grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3; */

            grid-column: 1 / span 2;
            grid-row: 1 / span 2;

        }

        /* Check them for golden word 5 ☝️ */

        #one{
            grid-area: itemOne;
        }
        #two{
            grid-area: itemTwo;
        }
        #three{
            grid-area: itemThree;
        }
    </style>
</head>

<body>

    <div class="container">
        <div id = one class="item">This is Item-1</div>
        <div id = two class="item">This is Item-2</div>
        <div id = three class="item">This is Item-3</div>
        <div class="item">This is Item-4</div>
        <div class="item">This is Item-5</div>
        <div class="item">This is Item-6</div>
        <div class="item">This is Item-7</div>
        <div class="item">This is Item-8</div>
        <div class="item">This is Item-9</div>
    </div>

</body>

</html>

I hope you have learned something 👍
haha found my grammatical mistakes then comment them down

Namespacing in JavaScript

Himanshu Tiwari 🌼 — Sun, 17 Jan 2021 12:20:29 +0000

One of the most confusing things in JavaScript, I found was namespacing. So, I learned about it and thought to share the notes with everyone who is confused about it.

When we make applications and as our application grows and becomes more complex, it is likely that at some point two variables or functions will end up having the same name, resulting in conflict.

To avoid this we can make use of namespaces, which will create a local scope for our variables and functions. Javascript doesn't actually have namespaces like other programming languages, so what we'll see there are alternative ways of achieving the same outcome. The most common way of simulating namespaces is via objects.

Let's talk about some approaches which you can often use and often see others using it

1. By Direct Assignment

var webApp = {}

webApp.id = 0;

webApp.next = function() {
    return webApp.id++;  
}

webApp.reset = function() {
    webApp.id = 0;   
}

Note that the names "id" or "next" are generic names that could easily be repeated many times in a large web application. Instead of adding more words to our variables, like "idOfwebApp", and making them separate in the global scope, we place them inside an object that will hold all information about our web app.

So, let's break the above code for this example and you will automatically understand for others below.
If we take a close look here, then what is happening is, it is acting as an object having a key named id and 2 functions.
If we write

console.log(webApp.next());
//output will be 0 itself, just like an object.

You can use this instead of using the same big long names

2. Using Object Literal Notation

var webApp = {

    id: 0,

    next: function() {
        return this.id++;   
    },

    reset: function() {
        this.id = 0;    
    }
}

This is the most common thing we often see, the most common namespacing we basically use.

3. The Module Pattern

var webApp = (function() {

    var id= 0;

    return {
        next: function() {
            return id++;    
        },

        reset: function() {
            id = 0;     
        }
    };  
})();

This is where things turn tricky!!!
Everything must be clear to you but what that "();" is representing is -- self-invoking function.

So Why Module approach over Object Litteral

Object literal notation is rigid – it's all about property assignments, with no room for supporting logic. Moreover, all properties must be initialized and property values cannot easily cross-reference one another. The module pattern suffers none of these constraints and gives us the added benefit of privacy.

Conclusion

The use of the Module Approach is flexible for big Projects and can be used whereas the Object approach is better for mini-projects and addons less complexity.

Further Read

Read More about Module Pattern

Thanks For the read, hope you learned something :)
Found my grammatical mistakes, haha comment them down