Day 3 - 100daysofcode JS begins

#100daysofcode #beginners #javascript #webdev

I took a slightly different route today instead of reading and writing about it the same day, I thought how would it be if I read one day and wrote about it the other day. I wondered if this would help me recall and remember stuff for a longer duration.

Articles Covered:-

Javascript Basics

It was amazing to see how such a vast topic was punched into such a concise and well-done article. Kudos MDN, and all the Open Source contributors.

Notes

It was invented by Brendan Eich (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation). If guys want to know more about JS history watch this

The reason the instructions (above) place the <script> element near the bottom of the HTML file is that the browser reads code in the order it appears in the file.

If the JavaScript loads first and it is supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency.

The return statement tells the browser to return the result variable out of the function so it is available to use. This is necessary because variables defined inside functions are only available inside those functions.
Variables are the fundamental block behind dynamic web pages, or anything dynamic I'd say.
Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as Zero-based indexing.
Mixing data types can lead to some strange results when performing calculations. Be careful that you are referring to your variables correctly, and getting the results you expect. For example, enter '35' + '25' into your console. Why don't you get the result you expected? Because the quote marks turn the numbers into strings, so you've ended up concatenating strings rather than adding numbers. If you enter 35 + 25 you'll get the total of the two numbers.

I liked the fact that they actually used prompt to take input than introducing input field. I have seen more and more modern interfaces starting to use prompts to take small inputs than going through the hassle of creating forms and stuff for small inputs.
And through Propmpts they slowly introduce the readers to the concept of null.

When you run the example and get the dialog box that prompts you to enter your user name, try pressing the Cancel button. You should end up with a title that reads Mozilla is cool, null. This happens because—when you cancel the prompt—the value is set as null. Null is a special value in JavaScript that refers to the absence of a value.
They also recommend learnjavascript.online for people who want an interactive environment. I am doing it via Freecodecamp but this one looks promising too.

Publishing your website

This is an article that I wish I had read when I was trying to figure what cpanel godaddy etc. is and whatnot. It doesn't really answer all of the cpanel or godaddy related doubts but definitely gets one going.

They mentioned a variety of hosts for hosting like Github Pages, Google App Engine, Neocities, Google Sites, Blogger, and WordPress. And some web-based IDEs as well like JSFiddle, Glitch, JS Bin and CodePen. I really like Codesandbox as well.

But they went with deploying through Github Pages in full detail.

I really love Netlify as well. The tools and plugins can make the life of any Jamstack developer a breeze.

Somewhere in the article, it all says

GitHub is a "social coding" site.

which was interesting because all this time I had been using it and never thought of it this way. I always thought of it as a free hard disk space to store code 😅. But this changes some perspectives in my mind.

How the Web works

It truly is a simplified version of web explained with the analogy of road, shops, home and you. It's a small sweet read.

Though while reading it I did ask myself why is it so that we doesn't the server send in the CSS and JS all other such resources along with the index.html file, when it clearly knows that these are the resources that'd be requested by the browser. 😅

Found the answer to it on Stack exchange here When webservers send a page, why don't they send all required CSS, JS, and images without being asked?
TLDR; HTTP limitations, it wasn't designed for this. but Google designed a protocol that can push all its resources to the client, it's called SPDY.

Notes on FCC JS DS Algo course

from strings and variables I touched arrays so loved that.
Arrays can have values of different and unrelated data types as well.

var myJsArray = ["dev.to", 9 , 1.2, {"name":"prasham"}, ["inner","array"]]; // valid Array

Psst, I'll let you in on another trick as well. You can provide values to the keys of an array directly in JS because ultimately everything in JS is an Object. An array is just an object with extra abilities. 😉

var normalArray = [1,2,3,4,5];
console.log(normalArray.length); // 5
console.log(normalArray);        // [1,2,3,4,5]
normalArray.name = "prasham";
console.log(normalArray.length); // 5
console.log(normalArray);        // [1,2,3,4,5,name: "prasham"]

Like strings, arrays use zero-based indexing, so the first element in an array has an index of 0.
Unlike strings, the entries of arrays are mutable and can be changed freely.
Tip: There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
push() and pop() work on the last element of the array.
unshift() and shift() work on the first element of the array.
Remember all of these functions mutate the array that's been operated upon.

I really don't like how confusing their names are and how much difficult it is still for me to remember what the distinction is between them. I wrote an article on this not a big fan of medium but back then I thought all the devs use medium only 😅
The Mysterious .shift() & .unshift()

Just a slight distinction between Parameters and Arguments, I have been guilty of using them interchangeably 😅
Parameters are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or "passed") into a function when it is called are known as arguments.
In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.
Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var.

Generally let or const is a much safer bet.

My Tip: It's great to create reusable Functions, but sometimes I create functions just to make them more readable, even when I know I won't be reusing them anywhere. Devs usually spend most of their time reading code and not writing it, make sure your code is not a pain to read for them, or you a year later 😄 😅

Booleans may only be one of two values: true or false. They are basically little on-off switches, where true is on and false is off. These two states are mutually exclusive.

Note: Boolean values are never written with quotes. The strings "true" and "false" are not Boolean and have no special meaning in JavaScript.

And that's a pack up!

Comments and Conclusion

I find myself almost always ending up to work on it at 9:00 pm around night time which I don't feel is the right time, because during workdays I am gonna be exhausted. But I will stick to it for some time so that I can build a habit of it and later I could maybe play around with timings.

A little baby dance for my day 3 It's a Hatrick!!