DEV Community: Gaurav-Shekhawat

Day 11 : Revision day, going through the topics I learnt in more detail

Gaurav-Shekhawat — Tue, 24 Aug 2021 15:11:01 +0000

After being overloaded by information in the past 10 days, I felt the need to stop and give myself time to absorb the material I have been through.

So, no new content for today, enjoy.....

Day 10 : Understanding DOM and debugging was never so easy

Gaurav-Shekhawat — Mon, 23 Aug 2021 13:45:22 +0000

I am summarising everything that I have learnt today. If you also want to go through the same topic, I believe the article links I am providing is one of the best on the web available for that topic.

DOM tree basics :- java-script-info

The essential guide to javascript Iterators (the for-of loop guide) :- javascriptutorial.net and Educative

Walking through the DOM :- javascript-info . In this article, you may feel some problem at the last with the table properties. Just see the properties being used in the example, ignore others (we will search for them whenever needed, as we know what to search for).

Searching element in DOM :- javascript-info

Debugging javascript using chrome developer tools :- Google

Best guide to debugging javascript for beginners I could find - link . In this everything is explained in a much simpler language.

Day 9 : addEventListener('click', ..) and .onclick are not the same

Gaurav-Shekhawat — Sun, 22 Aug 2021 06:38:13 +0000

so, this is different from previous posts. The past week was the first week of me posting any article on the web. Even after not writing everything in detailed form, the response I got was beyond my expectations. From now on, I will try my best to cover everything in detail..

`addEventListener('click', ....)` and `.onclick` are not the same

Yes, they are not the same. The difference being that in the addEventListener , we can add multiple listeners to the same event. While the onclick "overrides" the previous onclick attached to the same event.

For example:- see the below codepen

As a result, in the console:
When we click the onClick Button, only I’m also clicked! is logged out
When we click the addEventListner Button, both I’m clicked! and I’m also clicked! are logged out

To conclude, although we can attach the same event with different syntax, using addEventListener(‘click’, …) we can have multiple listeners on one event, whereas using onclick we can only assign one listener to one event (which is always the latest assigned listener).

Please open the above codepen through "edit in codepen" and then see the outputs in the console. I have added enough comments to make you understand everything. In case of any doubt, please do comment.

The full reference about the above point can be found at Medium.

Day 8 : Learning JS fundamentals, Part -3

Gaurav-Shekhawat — Sat, 21 Aug 2021 10:42:32 +0000

Closures

Closure is when a function "remembers" the variables outside of it, even if you pass that function elsewhere.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

The full reference can be found on - MDN

In the above example, the variable question will remian alive, even after 100ms of execution of parent function.

Example - 2

Here, the function holdYourQuestion will remember the question, even if it is called at an entire different time on an entire differnet place.

`this` keyword

It is all about the call, it is not the definition of the function, it is not where the function is, none of that matters, it is only how the function was called that determines where the this keyword will be pointing to.

A this-aware function can thus have a different context each time it's called, which makes it more flexible & reusable.

DOUBT

Prototypes in js

Day 8 : Learning JS Fundamentals, Part-2

Gaurav-Shekhawat — Sat, 21 Aug 2021 08:39:43 +0000

see the below example:-

In the function above, we have not declared the variables teacher and topic, still we assigned them values. When we call this function, this changes the value of the "teacher" variable present in the global , while the topic will be declared as a new variable in the global scope, hence the output of the last line will be "React".

Undefined vs Undeclared

clear from the name...

function expressions

Function expression

Arrow function Expressions

just skim through the above two articles starting paragrpahs.

The first function above is an example of anonymous function expression while the second is a named function expression.

Example for arrow functions:-

Immediately invoked function expressions

These are used in places of our code where we need to collect a set of variables and protect them from encroaching upon an outer scope. These are not used nowadays, instead block scoping is used(with let).

Block scoping

In the below example, the variable temp will be available only inside the if block.

var are good, when you want to define a variable at a function level. (as the scope of var is global or the function in which it is defined).

Day 8 : Learning JS

Gaurav-Shekhawat — Sat, 21 Aug 2021 07:00:27 +0000

Important point about objects in js

3 and 3.0 ??

When you do typeof(null) you will get the answer as object. A bug maybe?? Arrays are also objects...(subtype of)

Why no () after `.length` of an array in js ??

Read this stack-overflow post.

`shift()` and `pop()`.

Both are used to take out elements from the array. shift() starts from the beginning while pop from the end.

for each loop in js

See that we are using back-ticks within that console.log() , it enables us to write variables inside the string using ${}.

`includes()` function in js

checks for substring for a string, or array values in case of an array and so on..

types in js

In js, variables don't have types, values do.
In JS, if a variable has never been declared, or not assigned a value, it considers both as an "undefined" state.

var v;
typeof(v);   //undefined
typeof(w);   //undefined

hello = function(){};
typeof(hello);      //"function"

NaN

NaN is a special value that sort of indicates that we've had an invalid numberic operation of some sort.

`new` keyword in js

In the first example below, it is used to instantaite an object of date subtype, while in the second, we are doing type conversion into string

Hence we can convert to string by two methods, first using that String(num_variable) and second using num_variable.toString().

Conversion of string to int

follow this link

Falsy and Truthy in js

Falsy implies the values, that will be considered as false, if we try to convert or use then as boolean (using inside if or while statements).

The first value in the table is am empty string.

All other remaining values are truthy.

Double equals vs Triple Equals

Double equals considers coersion, while triple equal don't. So, if both of our variables has the same type, then we can use any of these.

Day 7 : Deep diving into Django Routes

Gaurav-Shekhawat — Fri, 20 Aug 2021 18:20:08 +0000

How to run your django server for the first time? Use the below command :-

python manage.py runserver

This will give you the IP address telling where your web app is currently running.

To create your very first app use:-

python manage.py startapp hello

Now, to install this app into our project, go to settigs.py in the main parent directory, inside that update the list of INSTALLED_APPS.

From now on, our focus will be on the views.py file.

Implementing our Django app

You can think of each view as something a user might want to see. So, first we create a default view. The function accepts (request) as its argument. The request represents the HTTP request which the user made in order to access our web server.

Now update the urls.py files.

Day 7 : Learning Django Fundamentals

Gaurav-Shekhawat — Thu, 19 Aug 2021 20:17:52 +0000

Django is a python web programming framework, which allows us to dynamically generate HTML and CSS for the backend of our website. Django combines the static web pages created using HTML and CSS with the endless possibilites of the programming language python, leading us to built dynamic web applications.

Django will allow us to write python code which will dynamically generate HTML and CSS.

HTTP

It stands for Hyper-Text-Transfer-Protocol, which is the protocol for how messages are going to be sent back and forth over the internet.

Example of a HTTP request method:-

Get tells us that we want to get that particular page. / simply indicates that we are requesting for the home page. HTTP/1.1 is the version of HTTP which we are using. Host tells us what URL we are trying to access the web-page for.

Example of an HTTP response:-

HTTP Status Codes:-

Starting an Django Project

To start a django project in the current directory, run this command:-

django-admin startproject project_name

The short intro to some starter files made by Django is given below:-

manage.py :- We will use this file to be able to execute commands on this django project.
settings.py :- If we want to change some settings to add features to our application or make modifications to how our application behaves.
urls.py :- This is the table of contents of all the urls on our web applications which ulitmately a user can visit.

Day 6: 100 days of code, Learning Bootstrap fundamentals and sass inheritance

Gaurav-Shekhawat — Wed, 18 Aug 2021 20:08:23 +0000

There will be less content today as I am busy with academics.

Don't forget to use the `flex-wrap:wrap`

In my last some of the projects, I have to change almost the entire code in media queries so that my website look good on an mobile device. This can be avoided to a great extent by using:-

flex-wrap: wrap;

So, use it wisely whenever needed.

Bootstrap Basics

Bootstrap is a css library, which consists of code written by someone-else, taking care of all the styles and responsive web design. To use it in our projects, go to Bootstrap and copy the css link inside of your html file.
To use any-functionality of bootstrap, just link bootstrap with your html, and then just specify in the class of your html tag, what you want to do with that element, among some classes given in bootstrap website.

For example, if you want to design a warning button:-

<button class = "btn btn-warning">  Warning  </button>

Now practice and get your hands dirty ..

Bootstrap column model

This is a bootstrap way to make sure that our web-pages are mobile responsive. In this model, bootstrap divides its page into 12 distinct columns.

Large screen:-

as we shrink the size of the screen down.

Bootstrap also let us specify how many columns should an div take, depending on the size of the screen as small or large. Here is the example:-

This behaves as 4 div in 1 row on a large screen, and 2 div's in each row on a small screen.

SASS inheritance

Let's suppose we are designing 3 alert messages as below:-

If we write it using nesting in sass, then in the output css, the code will be copyed in the css styling of all the alert, this will increase the size of our css to a large extent in long term. To solve this problem, we use inheritance.

Hence, the better solution of the above problem will be :-

New things learnt about Git

When you clone an empty repository from github, and them modify it and commit in your local machine, then if you run the git status command, you will get some "error-looking" message, the reason for that is:-

Completed the google search project and uploaded everything to git

Day 5: 100 days of code, FrontendMentor Projects Summary

Gaurav-Shekhawat — Wed, 18 Aug 2021 16:39:44 +0000

Starting day 5…

FrontendMentor :- Order Summary Component

Learnings:-
Made an outer-container, and then set the background image as that svg file, due to this there is no distortion in that. Also, set the background-size to 100vw, so that the image fill the whole width of the outer-container.
It is good if you put the below code at the start of each sass file. By this, we can then manually set the margin and padding for each element.

*{ 
margin:0;
padding:0;
box-sizing:border-box;
}

In the sass file, while putting colors as hsl or rgb, you have to put spaces between the values otherwise it will give an error. Hence,

box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.21);

will work but

box-shadow: 0px 0px 16px 5px rgba(0 0 0 0.21);      //wontwork

Set the width of the "card" div not in term of percentage of the "outer-container", because it will shrink in that case as we decrease the size of the window. Better, you should set the width as:-

.card{
max-width: 450px;
}

By this, the size of your card will not decrease as the width of the window decreases.
Setting the media queries:-

@media only screen and (max-width: 600px) {
* {
font-size: 14px;
}
.outer-container {
background: url("./order-summary-component-main/images/pattern-background-mobile.svg") hsl(225deg, 100%, 94%);
background-size: 100vw;
background-repeat: no-repeat;
}
.container {
margin: 70px 0;
width: 330px;
}
.annual-plan {
width: content-width;
}
}

Remember that

width:content-width;

is a very powerful tool. Use it wisely.

FrontendMentor :- Stats preview card component

Learnings:-
wasted 30 minutes, trying to put that violet mask over the image, then found the correct way to do that using pseudo elements(covered in day 2, also remember that don't try to use pseudo elements on images, as it will not work sadly).

HTML code:-

<div class="imagediv">
<img src="./stats-preview-card-component-main/images/image-header-desktop.jpg" alt="" />
</div>

CSS code:-

.imagediv{
position: relative;
}
.imagediv::after{
position: absolute;
content:'';
display: block;
inset:0;
width:100%;
opacity:0.5;
height:100%;
background: hsl(277, 84%, 61%);
}

Spent the whole time to fit the image inside of that container, to the left. The best solution I found was using this:-

HTML:-

<div class="imagediv">
<img src="./stats-preview-card-component-main/images/image-header-desktop.jpg" alt=""/>
</div>

CSS -

.imagediv {
position: relative;    //  this is used for the point this point.
width:50%;     // width of image container as half of total
img {
object-fit:cover;      //this preserve the aspect ratio and 
                         trims off extra image left                                                                 
width:100%;
height:100%;
}
}

If two div's borders are overlapping, then you can combine them using:-

border-collapse: collapse;

Full reference:- CSS tricks

CSS checked pseudo class

The implementation can be seen in the above codepen.
The full description, you can find on:- MDNdocs

Summary: css-tricks

CSS `element1~element2` Selector

FULL description :- W3Schools

Summary: Basically if the code is p~ul , then it selects all the ul below p which have the same parent as p.

CSS `element+element` Selector

Summary: If the code is div + p then it selects all the p , immediately after div ( and not as child of div, basically the p which is just after the closing div tag)

Full reference :- w3schools

Other frontendmentor projects done:-

four card feature section
three column preview card
profile card component.

Day 4: 100 days of code, innerHTML and innerText difference in JS

Gaurav-Shekhawat — Tue, 17 Aug 2021 19:04:40 +0000

DIfference between innerHTML and innerText in js

see this medium article for details.

This is short summary of the above article.

Difference between `getElementById` and `getElementsByClassName`

The difference that I found through trial and error:-

The getElementById will select only one element(as only one element will have that unique id), while in the arguments of getElementsByClassName we can provide multiple classes, and it will select all the elements matching those classes. Hence getElementsByClassName is like an array. Example:-

<div class="parentDiv"></div>

To access the above, you have to write

var divToBeAppended = document.getElementsByClassName("parentDiv");
divToBeAppended[0].appendChild(newButton);

Important things to remember:-

In case of a image as direct child of an div with rounded corners, the image will overflow through the container. To stop that, you can use:-

.container{
overflow:hidden;
}

Things i couldn't make a summary of:-

Change button colors project
Kotlin basics:- functions, variables, etc.

Things couldn't complete ( try again)

CP problem:- Time is Mooney
CP DP handbook last section

Day 3: 100 days of Code , Javascript Fundamentals, With Some Important Functions

Gaurav-Shekhawat — Mon, 16 Aug 2021 11:59:18 +0000

Today, I will be learning javascript. So, let's begin..

Javascript

Hoisting

Hoisting is a javascript mechanism where variables and functions declarations are moved to the top of their scope before code execution. Example: this code :-

 console.log (greeter);
 var greeter = "say hello";

will be treated as-

var greeter;
console.log(greeter);  //greeter is undefined
greeter = "say hello";

In this example, var variables are hoisted to the top of their scope and initialised with the value of undefined.let and const are hoisted but not initialsed and hence if we try to use them before initialising like the above example, we will get a Reference Error.

Some ways to access the values or properties of a object

Let person be an object:-

let person: {
name : "John",
class : 10,
good : true
}

To access name of person:-

Method-1:- person.name
Method-2:- person["name"]. Attention, here you must put the value of the property inside the double or single quotes, person[name] will not work.

We can change the value of properties of both a "let" and a "const" object, but we cannot add or remove properties in case of "const" object.(for the case of var, we can).Example:-

let student = {
    class: 10,
    name: "John",
    padal: true
}

student.huehue = false; //no errors
console.log(student); // prints {class: 10, name: "John", padal: true, huehue: false}

Defining functions inside of an object

We can define functions inside of an object, the syntax will be:-

let student = {
name : "John",
studentInfo: function (){
   return name;
}
};

Use the function like:-

console.log(student.studentInfo());

switch statements

The syntax is like:-

switch (expression) {
    case 0:
        text = "weekend";
        break;
    case 1:
        text = "not-weekend";
        break;
    case 2:
        text = "weekend";
        break;
    default:
        text = "no_idea";
}

Where expression is the expression whose values we are putting in the cases, such as "0", "1" etc.

Json

JSON stands for javascript object notation. It is basically an array of objects.
Do the below thing to include a JSON file inside your project.

An important guide to object-keys in javascript

see this medium article.

Other short points:-

Var, let, and const, What's the difference? - freecodecamp . Read only the last para for summary.
Some new short topics learnt:-
1. getElementById(" ")
2. innerHTML :- make sure you write value of Id and innerHTML in double quotes/or single maybe.
3. prompt
4. indexOf(" ")
5. slice(firstIndex, lastIndex):- The first index is included while the last is excluded.
6. toUpperCase()
7. toLowerCase()
8. replace("oldsubstring", "newsubstring") :- Example:- if the string initial is banana, then replace("ban", "123") will give "123ana".
9. charAt(index)
10. split("someseperator") :- if nothing is passed such as split(""), then it will split the individual character of the string. 11 . toString():- can also be used on arrays, in that case all the elements of the array will become seperated by commas, without any space in between.

Array common methods

join("somespecifier") :- make a string out of an array, concatenating elements by putting "somespecifier" between them.
pop :- removes the last element from the array.
push("newElementInTheArray") :- appends
shift():- removes first element from the array, very expensive thing to do.
unshift():- add first element to the array.
reverse():- reverses the order of the array
sort():- while sorting numbers, if you do not pass any function with sort, then the numbers will not be sorted. So, to sort in ascending order, you must write

myArray.sort(function(a,b){return (a-b);});

and to sort in descending order:-

myArray.sort(function(a,b){return (b-a);});

You can declare an array, also like:-

let myArray = new Array();

Define the array inside the (), if you want to.

onclick:-

<button class = "btn-primary" onclick="ageInDays()">Click me</button>

here ageInDays is a javascript functions defined in the js file.

After creating an html element, using createElement, If you are creating an 'img', then during the source allocation of the img:-

image.setAttribute("src","//unsplash.it/200/200"); //wrong

This is wrong, and the correct way is:-

img.src = "//unsplash.it/200/200";

Topics need to improve upon

functions inside of sort
JSON