DEV Community: Srividya Mysore Venkatesh

Anatomy of a URL

Srividya Mysore Venkatesh — Tue, 14 Sep 2021 04:10:59 +0000

Before I write about the anatomy of a URL. I deem it necessary to define one. So what is a URL?

URL stands for Uniform Resource Locator, which is just a complex way of saying the address of a website.

Let me explain it in a way a 5-year-old would understand, then we will work our way into it.

If you'd ask me where Red fort is I'd tell you "Netaji Subhash Marg, Lal Qila, Chandni Chowk, New Delhi, Delhi, India 110006...here this is the address to Red fort".

you would systematically break it down like It's in India, then in India you'd know it's in Delhi, rather New Delhi, Inside New Delhi, you'd have to find your way into Chandini Chowk,Lal Quila and finally find the road "Netaji Subhash Marg" then voila you've reached. Basically what you did here was, break a piece of address into small tiny parts to find your way to a particular location.

A URL does just that. A URL has several parts when broken down and comprehended would take you to a particular address of a website or a resource and also give information on the query being request, page number, or even architecture of a website.

So, a URL has parts. A simple URL has 3 parts (like https://google.com) and a complex one has 9 parts, not necessary that all the 9 parts are used in every URL.

The 9 parts of a URL are protocol (or scheme), subdomain, domain name, top-level domain, port, path, query, parameters, and fragment.

Let's discuss them one by one:

Protocol {https://} : is also known as the scheme, is the first part of a URL. It represents the sets of rules that decide how files are displayed, formatted, or transferred across the web.
- http or https: which stands for hypertext transfer protocol, tells it that the page is to be displayed
in hypertext format (HTML).
- ftp: file transfer protocol for transferring files
- smtp: single mail transfer protocol (SMTP) used by mail servers to send emails.
Subdomain {https://video} : The most common subdomain is ‘www’ which is a general symbol for any resource on the web. However, it is common to specify the type of resource that the browser should deliver. A video is being requested from the server in our case
Domain Name {https://video.google} : is the actual name of the website. Domain names must be unique as they literally determine the address of a website. In the early days of the web, a person actually had to type the IP address to go to a particular site. Later on, words were used instead as they were easier to remember.
Top-Level Domain or Domain Extension {https://video.google.co.uk} : It is the ‘com’ that appears at the end of simple websites addresses like bing.com. This part specifies what kind of content will be on the website. For instance .com would mean a commercial site or a .org would mean a site for an organization.
Port {https://video.google.co.uk:80} : port is a reserved channel used for specific purposes. Browsers are required to connect to a particular port in order to access the resources on that server.

for example, the default port for http servers is 80 and for https servers is 443.

Path {https://video.google.co.uk:80/videoplay} : Path is used to show which directory on the server stores the resources (files, videos, audio, etc.) that are being requested. Also, paths are used to identify a route in the navigational structure of the website. In our case videoplay indicates that it is a path to play a video.
Query {https://video.google.co.uk:80/videoplay?} : the question mark tells the browser that a query is being performed against a database where the data is stored.
Parameters {https://video.google.co.uk:80/videoplay?docid=-7234293487129834&hl=en} : the parameters are actual values that are actually being passed for example, in this URL https://www.amazon.com/s?k=shoes the parameter being passed is the shoes so the search here will result in shoes.
Parameters can be words, numbers, or even encrypted code sequences.
Fragment {https://video.google.co.uk:80/videoplay?docid=-7234293487129834&hl=en#00h02m30s} :
usually followed by a pound sign, is an optional component of a web address that is preceded by a hash and that directs to a secondary resource, which can be a portion of a page like a footer or a sidebar.

Flow of a URL looks like this:

Although the structure of a web address might seem trivial to the casual onlooker, they are actually important for enhancing user experience and making web apps more efficient.

How much can I flex with Flexbox?

Srividya Mysore Venkatesh — Sun, 25 Apr 2021 19:18:19 +0000

I was making a project with good ol Vanilla CSS and I was trying to align elements on the screen and found it extremely tedious to align each element using relative positioning. And it took me considerable efforts to make a menu bar.

There had to be some way which made it easier and the solution was CSS Flexbox and this is what I learned from it.

What is CSS Flexbox?

CSS Flexbox is a Web Layout model that helps to craft screen layouts.

Using Flexbox, you can control position, size, and spacing of elements relative to their parent element and each other.

One great use of flexbox is that it works in making your screens responsive to varying screen types.

The point being you can make better NavBars, Menus, Grid Layouts, Bar Charts, Equal height columns and all that.

How to apply flex?

First off, we need to understand a container and flex-items. The image below does the explanation I feel.

Now this is the easy part, Lets say you have a container with three flex-items .

It would look like this.

Flex is a display property. So apply flex on the parent container so that all the elements inside become the flex-items and they are put in a row/ column layout.

.container{ display: flex;}

Optional read: Most browsers support flexbox, but, Mordenizr is a JS Library that tells you if your browser supports flexbox or not!

Flex Properties (for flex-items)

Now that flex has been applied they have a nice row/column layout but it still looks shabby and needs an add-on to make it look prettier. So, in order to do that there are a few properties that we could use.

Flex Grow

This defines the ability for a flex item to grow if necessary. Basically like a growth rate. It takes in a unitless value and serves as a proportion of growth and as a result, uses up the space inside of the flex container.

If I gave flex-grow as 1 to all the elements, all of them will take up the container space equally. But if I gave one of the elements a value of 2 then it would grow twice as much as the other elements.

Flex Shrink

It is the exact opposite of flex-growth. It works exactly the same way just that you can think of it as a shrink rate. So, the bigger the shrink value the more it shrinks.
Note: Negative numbers are invalid.

Flex Basis

It is the starting width of an element like a min-width.This defines the default size of an element before the remaining space is distributed.

Default value of flex-basis is 'auto' which means “look at my width or height property”. or you could give it a custom length.

If I had to give flex-grow, flex-shrink and flex-basis combined, I'd do it as:

flex: (flex-grow) (flex-shrink) (flex-basis);

It's default goes like flex: 0 1 auto;

It's like a shorthand flex command.

Element Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.one{order:2}; .two{order:0}; .three{order:1};

Let's talk about Axis

Flex Direction

In 8th standard Mathematics, I remember I was thought about The Cartesian coordinate system having four axes.
I can't help but relate the four flex directions with them.

The Positive X-axis is row. i.e left to right

The Negative X-axis is row-reverse i.e right to left

The Negative Y-axis is column. i.e top to bottom

The positive Y-axis is column-reverse. i.e bottom to top

The Direction along with the flow, is called as the main axis and the coordinate perpendicular to it is called the cross axis

Positioning elements on the main-axis and cross-axis

To position elements on the main axis we use Justify-content

It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Here, Flex-start: will position all the flex-items of that container to the start of the container.

Flex-end : will position all the flex-items of that container to the end of the container.

center: will position flex-items to the center of the container on the main axis.

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

space around: items are evenly distributed in the line with equal space around them.

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen. And unsafe is its antonym.

To position elements on the cross axis, we use Align-items

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

stretch:stretch to fill the container (still respect min-width/max-width)

flex-start, flex-end, and center do the same functionality just that they perform this on the cross axis.

baseline:items are aligned such as their baselines align and first-baseline will align all elements with respect to the baseline of the first element .Similarly, last-baseline

safe and unsafe work the same as written above!

### Elements too crowded in one row?...Flex-wrap it!!

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap: will have the default behaviour.

wrap: will move the last element to the next line as needed.
wrap-reverse : will move the last element to the previous line as needed.

An amalgamation of `flex-direction` and `flex-wrap` is flex-flow!

flex-flow: (flex-direction) (flex-wrap);

default: flex-flow: row nowrap;

Having looked through all these properties, Making screen layouts becomes wayyy easier.

Let's just look at making a navbar with Vanilla css versus with flexbox:

I was trying to clone a navbar from a social media page and I had to position each element with a particular value which was admittingly not the best way to make it. Not to forget the lines of repetitive code making it long and laborious.

But using flexbox not only was my code well structured but also really easy to make and required barely a line to position all the elements of the nav bar put together with some basic styling. Almost seemed magical

Even to style and position elements through the content is obviously more efficient and not to mention its benefit with making websites responsive.

Moreover, I've begun to understand to make most of the web pages with flexbox, and has indeed made my work more easy.

My social media handles:

Twitter: @MysoreSrividya
LinkedIn: Srividya M Venkatesh
Original Post: Hashnode Post

Chapter 8: Bugs and Errors

Srividya Mysore Venkatesh — Tue, 08 Dec 2020 08:12:10 +0000

This is the 8th blog in the series of 21 blogs that bring in all the concepts that I have learned while reading the book Eloquent JS.

When I started programming I dreaded errors. But I have come to realize that they make me a better programmer.

laws in computer programs are usually called bugs. You can roughly categorize bugs into those caused by the thoughts being confused and those caused by mistakes introduced while converting thought to code. The former type is generally harder to diagnose and fix than the latter.

Language:
Its concept of bindings and properties is vague enough that it will rarely catch typos before actually running the program. And even then, it allows you to do some clearly nonsensical things without complaint. But, There are some things that JavaScript does complain about. Writing a program that does not follow the language’s grammar will immediately make the computer complain. Other things, such as calling something that’s not a function or looking up a property on an undefined value, will cause an error to be reported when the program tries to perform the action.

The process of finding mistakes—bugs—in programs is called debugging.

Strict Mode:
This is more like that strict teacher who would invigilate an exam...who looks into finer things than a normal teacher...although a normal teacher would catch you if you commit an offense.

JavaScript can be made a little stricter by enabling strict mode. This is done by putting the string "use strict" at the top of a file or a function body.

Normally, when you forget to put let in front of your binding, as with counter in the example, JavaScript quietly creates a global binding and uses that. In strict mode, an error is reported instead.

Strict mode does a few more things. It disallows giving a function multiple parameters with the same name and removes certain problematic language features entirely.

Basically helps spot a problem efficiently.

Types:
Some languages want to know the types of all your bindings and expressions before even running a program. They will tell you right away when a type is used in an inconsistent way.

JavaScript considers types only when actually running the program, and even there often tries to implicitly convert values to the type it expects, so it’s not much help.

When the types of a program are known, it is possible for the computer to check them for you, pointing out mistakes before the program is run. There are several JavaScript dialects that add types to the language and check them. Like TypeScript!!

Assertions:
Assertions are checks inside a program that verify that something is the way it is supposed to be. They are used not to handle situations that can come up in normal operation but to find programmer mistakes.

Testing and Debugging:
If the language is not going to do much to help us find mistakes, we’ll have to find them the hard way: by running the program and seeing whether it does the right thing.

Doing this by hand, again and again, is a really bad idea. Not only is it annoying.

Computers are good at repetitive tasks, and testing is the ideal repetitive task. Automated testing is the process of writing a program that tests another program.

Once you notice there is something wrong with your program because it misbehaves or produces errors, the next step is to figure out what the problem is.

Sometimes it is obvious. The error message will point at a specific line of your program, and if you look at the error description and that line of code, you can often see the problem.

But not always. Sometimes the line that triggered the problem is simply the first place where a flaky value produced elsewhere gets used in an invalid way.

That is when debugging is the way to go!. to sit and work through the code. Probably add breakpoints or "console.log"-ing at frequent intervals to figure out what is happening.

Exceptions:
When you commit mathematical sins like 0 divided by 0, infinity -1, infinity + infinity....and many such sins. The computer is like ummm....I don't know what to do. what we would like to do is just stop what we are doing and immediately jump to a place that knows how to handle the problem. This is what exception handling does.

When it gets impossible for the code to run through, it 'throws' an exception that is 'caught' in another section of the code. catching is done by encasing statements in a try block.

So three words to remember here are try, catch, throw!

Happy Reading!
SriV

Chapter 7: Project: A Robot

Srividya Mysore Venkatesh — Tue, 08 Dec 2020 07:24:58 +0000

This is the 7th Blog in the series of 21 blogs that put together my learnings from the book eloquent js.
The seventh chapter has yet another beautiful quote which says:
"[...] the question of whether Machines Can Think [...] is about as relevant as the question of whether Submarines Can Swim"

A very important point driven in this chapter is that Theory is necessary to learn to program, but reading and understanding actual programs are just as important.

Our project in this chapter was to build an automaton, a little program that performs a task in a virtual world. Our automaton will be a mail-delivery robot picking up and dropping off parcels.

So the chapter goes about explaining tasks in order to do so.

The first step was to mark all the roads and buildings to form a graph of sorts. This graph is the world that our robot moves through.

The list of roads is converted to a data structure that, for each place, tells us what can be reached from there.

It uses the split method to go from the road strings, which have the form "Start-End", to two-element arrays containing the start and end as separate strings.

Task:

Our Aim is that: Our robot will be moving around the village. There are parcels in various places, each addressed to some other place. The robot picks up parcels when it comes to them and delivers them when it arrives at their destinations.

The automaton must decide, at each point, where to go next. It has finished its task when all parcels have been delivered.

Solution: To be able to simulate this process, we must define a virtual world that can describe it. This model tells us where the robot is and where the parcels are. When the robot has decided to move somewhere, we need to update the model to reflect the new situation.

What is persistent data?
Data structures that don’t change are called immutable or persistent. They behave a lot like strings and numbers in that they are who they are and stay that way, rather than containing different things at different times.

Further Pathfinding and simulation is carried out to conduct tasks and accomplish the feat of making a robot.

https://eloquentjavascript.net/07_robot.html

Refer to the link above to find out the practical aspect of it!

Happy Reading!
SriV

Chapter 6: The Secret Life of Objects

Srividya Mysore Venkatesh — Tue, 08 Dec 2020 07:13:37 +0000

This is the sixth blog out of the twenty-one Blog series. This series is an 'encapsulation'(pun intended) of the concepts learned in the book Eloquent JS.
The sixth chapter is about object-oriented programming concepts.
The objective of objective Oriented Programming is to achieve modularisation.
Encapsulation:
Using modularisation some knowledge about the way a piece of the program works can be kept local to that piece. Someone working on the rest of the program does not have to remember or even be aware of that knowledge. Whenever these local details change, only the code directly around it needs to be updated.

Different pieces of such a program interact with each other through interfaces.

Properties that are part of the interface are called public. The others, which outside code should not be touching, are called private.

Separating interface from implementation is a great idea. It is usually called encapsulation. Basically, wrapping up the code like a nice gift box, not mixing up wrapping tape and gifts....that is encapsulation

Methods:
Methods are nothing more than properties that hold function values.Usually, a method needs to do something with the object it was called on. When a function is called as a method—looked up as property and immediately called, as in object.method()—the binding called this in its body automatically points at the object that it was called on.

This Variable:
You can think of 'this' as an extra parameter that is passed in a different way. If you want to pass it explicitly, you can use a function’s call method, which takes the 'this' value as its first argument and treats further arguments as normal parameters.
Each function has its own 'this' parameter.

Prototypes:
In addition to their set of properties, most objects also have a prototype. A prototype is another object that is used as a fallback source of properties.

When an object gets a request for a property that it does not have, its prototype will be searched for the property, then the prototype’s prototype, and so on.

The prototype relations of JavaScript objects form a tree-shaped structure, and at the root of this structure sits Object.prototype.

Classes:
JavaScript’s prototype system can be interpreted as a somewhat informal take on an object-oriented concept called classes.

A class defines the shape of a type of object—what methods and properties it has. Such an object is called an instance of the class.

Constructors:
A more convenient way to create objects that derive from some shared prototype is called a constructor. In js if we call a function with the 'new' keyword in front of it, it causes it to be treated as a constructor.
It is a convention to have a function capitalized.
Constructors automatically get a property named prototype, which holds a plain empty object. Represented as Object.prototype.

Overriding Derived Properties:
When a property is added to an object, the property is added to the object itself.
if there is a property by the same name and credentials the property will no longer affect the object.

Overriding properties that exist in a prototype is often a useful thing to do. we can override specific objects and let generic objects take a standard value.

Prototype Interference:
A prototype can be used to add new properties and methods to all objects under its influence.

Happy Reading!
SriV

Chapter 5: Higher-Order Functions.

Srividya Mysore Venkatesh — Fri, 04 Dec 2020 17:37:51 +0000

Abstraction:
Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.
It is a useful skill, in programming, to notice when you are working at too low a level of abstraction.

Plain functions, as we’ve seen them so far, are a good way to build abstractions. But sometimes they fall short.
This is structured a little like a for loop—it first describes the kind of loop and then provides a body. However, the body is now written as a function value, which is wrapped in the parentheses of the call to repeat. This is why it has to be closed with the closing brace and closing parenthesis.

Higher-Order Functions:
Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.
Higher-order functions allow us to abstract over actions, not just values. They come in several forms.
We can have functions that change other functions.
We can even write functions that provide new types of control flow.
There is a built-in array method, forEach, that provides something like a for/of loop as a higher-order function.

Script Data Set:
One area where higher-order functions shine is data processing.
This chapter will use a data set about scripts—writing systems such as Latin, Cyrillic, or Arabic.

The example data set contains some pieces of information about the 140 scripts defined in Unicode.Such an object tells us the name of the script, the Unicode ranges assigned to it, the direction in which it is written, the (approximate) origin time, whether it is still in use, and a link to more information.
The direction may be "ltr" for left to right, "rtl" for right to left (the way Arabic and Hebrew text are written), or "ttb" for top to bottom (as with Mongolian writing).

Filtering Arrays:
Filtering arrays just work like a seive. But just that The function to filter is pure. filter function, rather than deleting elements from the existing array, builds up a new array with only the elements that pass the test.It does noy modify the parent array.

Transforming With Map:
To Map an array means to have another same array but at another location.
The map method transforms an array by applying a function to all of its elements and building a new array from the returned values. The new array will have the same length as the input array, but its content will have been mapped to a new form by the function.

Summarising with Readuce:
Another common thing to do with arrays is to compute a single value from them. The higher-order operation that represents this pattern is called reduce (sometimes also called fold). It builds a value by repeatedly taking a single element from the array and combining it with the current value. When summing numbers, you’d start with the number zero and, for each element, add that to the sum.

String and Character Codes:
One use of the data set would be figuring out what script a piece of text is using.

JavaScript strings are encoded as a sequence of 16-bit numbers. These are called code units. A Unicode character code was initially supposed to fit within such a unit (which gives you a little over 65,000 characters). When it became clear that wasn’t going to be enough, many people balked at the need to use more memory per character. To address these concerns, UTF-16, the format used by JavaScript strings, was invented. It describes most common characters using a single 16-bit code unit but uses a pair of two such units for others.
But UTF-16 is a bad bad idea today.

Recognizing Text:
We have a characterScript function and a way to correctly loop over characters. The next step is to count the characters that belong to each script.

for/of) and a function that computes a group name for a given element. It returns an array of objects, each of which names a group and tells you the number of elements that were found in that group.

It uses another array method—findIndex. This method is somewhat like indexOf, but instead of looking for a specific value, it finds the first value for which the given function returns true. Like indexOf, it returns -1 when no such element is found.

Happy Reading!
SriV
(Yes this was a little flat read will make sure blog six is entertaining)

Chapter 5: Higher-Order Functions

Srividya Mysore Venkatesh — Fri, 04 Dec 2020 17:29:15 +0000

This is the fifth blog in the series of twenty-one blogs. These blogs are to summarise my learning of the book Eloquent JS.

Loved this quote from the book "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies."

Script Data Set:
One area where higher-order functions shine is data processing.
This chapter will use a data set about scripts—writing systems such as Latin, Cyrillic, or Arabic.

String and Character Codes:
One use of the data set would be figuring out what script a piece of text is using.

Recognizing Text:
We have a characterScript function and a way to correctly loop over characters. The next step is to count the characters that belong to each script.

for/of) and a function that computes a group name for a given element. It returns an array of objects, each of which names a group and tells you the number of elements that were found in that group.

Happy Reading!
SriV
(Yes this was a little flat read will make sure blog six is entertaining)

Chapter 4: Data Structures- Objects and Arrays.

Srividya Mysore Venkatesh — Fri, 04 Dec 2020 05:30:12 +0000

This is the fourth blog in the series of twenty-one blogs that bring together my understanding from the book EloquentJS. The book at this point starts with a fictional story of a boy named Jaques, who turns into a squirrel on eating peanuts and not brushing his teeth. So to get to this result he applies all the concepts that are taught in this chapter.

Data Sets:
Say, for example, that we want to represent a collection of the numbers 2, 3, 5, 7, and 11.
We could get creative with strings and we would have to somehow extract the digits and convert them back to numbers to access them....that is a lot of work.
Fortunately, JavaScript provides a data type specifically for storing sequences of values. It is called an array and is written as a list of values between square brackets, separated by commas.
NOTE- The first index of an array is zero, not one.

Array Properties:
Expressions like myString.length and Math.max are those statements that access a property of some value.
Almost all JavaScript values have properties. The exceptions are null and undefined. If you try to access a property on one of these nonvalues, you get an error.
Two main ways to access properties in Java Script are with a Dot and Square Brackets.

Methods:
Properties that contain functions are generally called methods. Both string and array values contain, in addition to the length property, a number of properties that hold function values.

For example, toUpperCase and toLowerCase convert text to 'CAPITALS' and 'notcapitals'.

Objects:
Values of the type object are arbitrary collections of properties. One way to create an object is by using braces as an expression.
Objects are usually represented by ---> Key:value or identity:property.
braces have two meanings in JavaScript. At the start of a statement, they start a block of statements. In any other position, they describe an object.

Delete option deletes an object. But, there is a difference between setting a property to undefined and actually deleting it is that, in the first case, the object still has the property (it just doesn’t have a very interesting value), whereas in the second case the property is no longer present and in will return false.

What properties does an object have? Object.keys
Copy all properties from one object to another? Object.assign

Mutability:
Object values can be modified. The types of values, such as numbers, strings, and Booleans, are all immutable—it is impossible to change the values of those types.
Objects work differently. You can change their properties, causing a single object value to have different content at different times.

When you compare objects with JavaScript’s == operator, it compares by identity: it will produce true only if both objects are precisely the same value. Comparing different objects will return false, even if they have identical properties.

The Lycanthrope's Log:
Correlation is a measure of dependence between statistical variables. A statistical variable is not quite the same as a programming variable. In statistics you typically have a set of measurements, and each variable is measured for every measurement.
To compute the measure of correlation between two Boolean variables, we can use the phi coefficient (ϕ).
Correlation between variables is usually expressed as a value that ranges from -1 to 1.

NOTE:We can represent a two-by-two table in JavaScript with a four-element array ([76, 9, 4, 1]). We could also use other representations, such as an array containing two two-element arrays ([[76, 9], [4, 1]])

Array Loops:
This kind of loop is common in classical JavaScript—going over arrays one element at a time is something that comes up a lot, and to do that you’d run a counter over the length of the array and pick out each element in turn.

This works not only for arrays but also for strings and some other data structures.

Further Arraylogy:
Push & Pop ---> add and remove elements at end of the array
Shift & Unshift ---> add and remove elements at the start of the array
getTask() --->get front item from queue.
rememberUrgently ---> adds a task in front of the queue.
LastIndexOf ---> to search from the end instead of the start.
Slice ---> takes start and end indices and returns an array with elements in between.
conactenation ---> Refer to Blog1

Strings and Their Properties:
length ---> length of the string
slice, indexOf ---> string’s indexOf can search for a string containing more than one character, whereas the corresponding array method looks only for a single element.
Trim --->removes whitespace (spaces, newlines, tabs, and similar characters) from the start and end of a string.
Split and Join --->You can split a string on every occurrence of another string with split and join it again with join.

Rest Parameters:
It can be useful for a function to accept any number of arguments.
To write such a function, you put three dots before the function’s last parameter.
such a function is called, the rest parameter is bound to an array containing all further arguments. If there are other parameters before it, their values aren’t part of that array.

You can use a similar three-dot notation to call a function with an array of arguments.

The Math Object:
Math.max (maximum), Math.min (minimum), and Math.sqrt (square root). cos(cosine), sin(sine), tan(tangent) supports their inverse as well as acos, asin and atan. Also supports the number pi to the closest approximation.

Math.random --->This is a function that returns a new pseudorandom number between zero (inclusive) and one (exclusive) every time you call it.

There are also the functions Math.ceil (for “ceiling”, which rounds up to a whole number), Math.round (to the nearest whole number), and Math.abs, which takes the absolute value of a number, meaning it negates negative values but leaves positive ones as they are.

NOTE: Having too many global bindings “pollutes” the namespace.

JSON - JavaScript Object Notation:
If you want to save data in a file for later or send it to another computer over the network, you have to somehow convert these tangles of memory addresses to a description that can be stored or sent.
What we can do is serialize the data. That means it is converted into a flat description. A popular serialization format is called JSON.
Comments are not allowed in JSON.

Happy Reading!
SriV

Chapter 3:Functions.

Srividya Mysore Venkatesh — Fri, 04 Dec 2020 01:48:47 +0000

This is the third blog post out of the twenty-one blog series. Coz of course the book has 21 chapters. These blogs sum up my learning from the book EloquentJS.

Let's say you are writing a blog...if you used a new English word it would be deemed wrong. But while writing a piece of code and writing a new word here is indispensable...Gives a lot of power right?

Function Definition:
A function is created with an expression that starts with the keyword function. Functions have a set of parameters( or not)and a body, which contains the statements that are to be executed when the function is called. The function body of a function created this way must always be wrapped in braces, even when it consists of only a single statement.
Some functions produce a value, and some don’t.

A return statement determines the value the function returns. When control comes across such a statement, it immediately jumps out of the current function and gives the returned value to the code that called the function. A return keyword without an expression after it will cause the function to return undefined.

Bindings and Scopes:
Each binding has a scope, which is the part of the program in which the binding is visible.
For bindings defined outside of any function or block, the scope is the whole program—you can refer to such bindings wherever you want. These are called global For bindings defined outside of any function or block, the scope is the whole program—you can refer to such bindings wherever you want. These are called global variables.
But bindings created for function parameters or declared inside a function can be referenced only in that function, so they are known as local bindings.
Having these kinds of bindings give isolation to functions.
Bindings declared with let and const are in fact local to the block that they are declared in.

Nested Scope:
A scope within a scope is called being nested.JavaScript distinguishes not just global and local bindings. Blocks and functions can be created inside other blocks and functions, producing multiple degrees of locality.

Function As Values:
A function binding usually simply acts as a name for a specific piece of the program. Such a binding is defined once and never changed.
A function value can do all the things that other values can do. It is possible to store a function value in a new binding, pass it as an argument to a function, and so on.

Function Declaration:
The function keyword is used at the start of a statement.
The preceding code works, even though the function is defined below the code that uses it. Function declarations are not part of the regular top-to-bottom flow of control.

Arrow Functions:
Arrow functions were added in 2015, mostly to make it possible to write small function expressions in a less verbose way.
Instead of the function keyword, it uses an arrow (=>) made up of an equal sign and a greater-than character.
It expresses something like “this input (the parameters) produces this result (the body)”.
When an arrow function has no parameters at all, its parameter list is just an empty set of parentheses.

The Call Stack:
Let's say a function was called and the controller went to place x, Because a function has to jump back to the place that called it when it returns, the computer must remember the context from which the call happened.
The place where the computer stores this context is the call stack. Every time a function is called, the current context is stored on top of this stack.
Storing this stack requires space in the computer’s memory. When the stack grows too big, the computer will fail with a message like “out of stack space” or “too much recursion”.

What if you give extra arguments to a function or too little arguments?
It ignores the extra arguments and computes the square of the first one.
If you pass too few, the missing parameters get assigned the value undefined.

Closure:
What happens to local bindings when the function call that created them is no longer active?
Local bindings are created anew for every call, and different calls can’t trample on one another’s local bindings.
This feature—being able to reference a specific instance of a local binding in an enclosing scope—is called closure.

A good mental model is to think of function values as containing both the code in their body and the environment in which they are created. Not in which it is called.

Recursion:
It is perfectly okay for a function to call itself, as long as it doesn’t do it so often that it overflows the stack. A function that calls itself is called recursive.
In typical JavaScript implementations, it’s about three times slower than the looping version.
The dilemma of speed versus elegance is an interesting one. You can see it as a kind of continuum between human-friendliness and machine-friendliness. Almost any program can be made faster by making it bigger and more convoluted. The programmer has to decide on an appropriate balance.

Therefore, always start by writing something that’s correct and easy to understand.
Recursion is not always just an inefficient alternative to looping. Some problems really are easier to solve with recursion than with loops. Most often these are problems that require exploring or processing several “branches”, each of which might branch out again into even more branches.

Growing Functions:
The first is that you find yourself writing similar code multiple times. You’d prefer not to do that. Having more code means more space for mistakes to hide and more material to read for people trying to understand the program. So you take the repeated functionality, find a good name for it, and put it into a function.

The second way is that you find you need some functionality that you haven’t written yet and that sounds like it deserves its own function. You’ll start by naming the function, and then you’ll write its body. You might even start writing code that uses the function before you actually define the function itself.

Functions and Side Effects:
Functions can be roughly divided into those that are called for their side effects and those that are called for their return value.
Functions that create values are easier to combine in new ways than functions that directly perform side effects.

A pure function is a specific kind of value-producing function that not only has no side effects but also doesn’t rely on side effects from other code. Non-Pure ones rely on side effects and also have side effects. Although its nothing wrong to write not-pure functions.

Happy Reading!
SriV

Chapter 2: Program Structure

Srividya Mysore Venkatesh — Thu, 03 Dec 2020 19:34:05 +0000

This is the second blog in the series of twenty-one blogs that encapsulate my learnings from the book Eloquent JS. So Chapter one was said to be nouns and fragments of a sentence while this chapter would thread them to be meaningful prose.

Expressions:
In chapter 1 we created new values but they are of use only if they are framed properly. Expression is not grumpy, happy,sad...A fragment of code that produces a value is called an expression.

Expressions can contain other expressions
NOTE: Expression: Sentence Fragment :: JS Statement: Full Statement
A program is a list of statements.

A statement stands on its own, so it amounts to something only if it affects the world. It could display something on the screen—that counts as changing the world—or it could change the internal state of the machine in a way that will affect the statements that come after it. These changes are called side effects.

In some cases, JavaScript allows you to omit the semicolon at the end of a statement. In other cases, it has to be there, or the next line will be treated as part of the same statement.TO AVOID ALL FORMS OF CONFUSION JUST USE A SEMI-COLON.

Bindings/Variables:
(a)Nomenclature: Binding names can be any word. Digits can be part of binding names, but the name must not start with a digit. A binding name may include dollar signs ($) or underscores (_) but no other punctuation or special characters. Must not be a keyword too!

(b)Using Capitals while naming Variables: Most JavaScript programmers, follow the bottom style—they capitalize every word except the first.

(c) About: To catch and hold values, JavaScript provides a thing called a binding or variable. That’s the second kind of statement. The special word (keyword) 'let' indicates that this sentence is going to define binding. It is followed by the name of the binding
A single 'let' statement may define multiple bindings.
After a binding has been defined, its name can be used as an expression
When a binding points at a value, that does not mean it is tied to that value forever.

You should imagine bindings as tentacles, rather than boxes. They do not contain values; they grasp them—two bindings can refer to the same value. A program can access only the values that it still has a reference to. When you need to remember something, you grow a tentacle to hold on to it or you reattach one of your existing tentacles to it.
When you define a binding without giving it a value, the tentacle has nothing to grasp, so it ends in thin air. If you ask for the value of an empty binding, you’ll get the value undefined.

The Environment:
The collection of bindings and their values that exist at a given time is called the environment. When a program starts up, this environment is not empty.

Functions:
A function is a piece of program wrapped in a value. Such values can be applied in order to run the wrapped program.
Prompt ----> input function.
Console.log ----> output function.
Executing a function is called invoking, calling, or applying it. You can call a function by putting parentheses after an expression.
Values given to functions are called arguments.

FUN FACT: Though binding names cannot contain period characters, console.log does have one. This is because console.log isn’t a simple binding. It is actually an expression that retrieves the log property from the value held by the console binding.

Return Values:
When a function produces a value, it is said to return that value. Anything that produces a value is an expression in JavaScript

Control Flow:
When your program contains more than one statement, the statements are executed as if they are a story, from top to bottom.....nothing more than this

Indentation:
You could write your entire code in one line and it would still work. But could you go back and read it? No. Hence, Indentation is important.

LOOPS:
(a) If/Else: Conditional execution is created with the if keyword in JavaScript. In the simple case, we want some code to be executed if, and only if, a certain condition holds.

The if keyword executes or skips a statement depending on the value of a Boolean expression. The deciding expression is written after the keyword, between parentheses, followed by the statement to execute.

The braces can be used to group any number of statements into a single statement, called a block.

You can use the else keyword, together with if, to create two separate, alternative execution paths. You can youse multiple if/else/elseif pairs.

(b)While and Do Loops:
What is a loop? to run a piece of code multiple times. This form of control flow is called a loop. Looping control flow allows us to go back to some point in the program where we were before and repeat it with our current program state.

A statement starting with the keyword while creates a loop. The word while is followed by an expression in parentheses and then a statement, much like if

A do loop is a control structure similar to a while loop. It differs only on one point: a do loop always executes its body at least once, and it starts testing whether it should stop only after that first execution.

(c)For Loops:First a “counter” binding is created to track the progress of the loop. Then comes a while loop, usually with a test expression that checks whether the counter has reached its end value. At the end of the loop body, the counter is updated to track progress.Basically, Initialisation ---> Checks ---> Updation.

Breaking out of the loop:
Having the looping condition produce false is not the only way a loop can finish. There is a special statement called break(like a code suicide) that has the effect of immediately jumping out of the enclosing loop.
If you were to remove that break statement or you accidentally write an end condition that always produces true, your program would get stuck in an infinite loop. A program stuck in an infinite loop will never finish running, which is usually a bad thing.(ooopsie..)

Comments: Comments in my opinion are like multivitamins that we take every day. You won't die without taking them but taking them keeps you healthy. Similarly, writing comments on your code is not essential but is surely a healthy practice. Helps you to re-collect easily.

//---> single line comments
/* comment here */ ---> multiple line comments

Happy Reading!
SriV

Chapter 1: Values, Types and Operators

Srividya Mysore Venkatesh — Thu, 03 Dec 2020 18:09:55 +0000

This is the first part of the twenty-one part series of blogs.I will be blogging my learnings from each chapter of the book EloquentJS."Below the surface of the machine, the program moves. Without effort, it expands and contracts. In great harmony, electrons scatter and regroup. The forms on the monitor are but ripples on the water. The essence stays invisibly below."...The book starts off with this quote. I personally think it kind of adds the importance of the work of a coder or a developer.

Bits:
Bits are any kind of two-valued things, usually described as zeros and ones. So they could be expressed as typically any opposites. Black and White, strong and weak electrical signal anything.

Values:
Imagine a sea of bits—an ocean of them. A typical modern computer has more than 30 billion bits in its volatile data storage and Nonvolatile storage (the hard disk or equivalent) tends to have yet a few orders of magnitude more. To be able to work with sooooo many bits we need better representation using chunks called 'values'.

Numbers:
Values of the number type are, unsurprisingly, numeric values.(HaHa). JavaScript uses a fixed number of bits, 64 of them, to store a single number value.

How to depict Fractional Numbers? Use a dot (like 8.34).
Big or small numbers use e(exponent)...like 7.994e4.
Calculation with Whole numbers is always precise. And with fractional numbers not quite hence use approximations.

Arithmetic:
Consider 13 + 11 * 9
The + and * symbols are called operators. Basically two values get along perform an operation and give out a new value( I mean that almost sounds like a relationship).
They are applied left to right. When in doubt, just add parentheses(sure. haha).
NEW OPERATOR IN TOWN!! The % symbol is used to represent the remainder operation. The remainder operator’s precedence is the same as that of multiplication and division. You’ll also often see this operator referred to as modulo.

Special Numbers:
The special entries here are Infinity, -Infinity, and NaN(Not a Number). These numbers are used to perform mathematical sins like infinity - 1, 0/0, Infinity - Infinity.

Strings:
A string is declared itself if it is enclosed within quotes. You can use single quotes, double quotes, or backticks to mark strings, as long as the quotes at the start and the end of the string match.
When does it get difficult? imagine how putting quotes between quotes might be hard
ROLE OF \n.... I am doing the neogcamp \n I aspire to be a Web Dev.
It Will is written as: I am doing the neogcamp.
I aspire to be a Web Dev.
Strings, too, have to be modeled as a series of bits to be able to exist inside the computer. The way JavaScript does this is based on the Unicode standard.
BTW, you cannot perform operations on strings. you can concatenate it but not add

"con"+"cat"+"e"+"nate"="concatenate"

Unary Operators
Not all operators are symbols.
typeof operator, which produces a string value naming the type of the value you give it.
Operators that use two values are called binary operators, while those that take one are called unary operators.
FUN FACT: The minus operator can be used both as a binary operator and as a unary operator.

Boolean Values
Distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”.For this purpose, JavaScript has a Boolean type, which has just two values, true and false, which are written as those words.

Comparison
Compare two values using Comparison Operators.
Strings can be compared too!.
console.log("Aardvark" < "Zoroaster")
// → true
uppercase letters are always “less” than lowercase ones, so "Z" < "a".Goes from left to right, comparing the Unicode codes one by one.

FUN FACT: There is only one value in JavaScript that is not equal to itself, and that is NaN (“not a number”).

Logical Operators
There are also some operations that can be applied to Boolean values themselves. JavaScript supports three logical operators: and, or, and not.

&& AND operator results truly only if both values to it are true.
|| OR operator results true only if either value to it is true.

Ternary Operators
Operates on three values. When it is true, it chooses the middle value, and when it is false, it chooses the value on the right.
console.log(true ? 1 : 2);
// → 1
console.log(false ? 1 : 2);
// → 2

Empty Values
There are of these null and undefined, used to indicate absence of a meaningful value.

FUN FACT: The difference in meaning between undefined and null is an accident of JavaScript’s design!!

Automatic Type Conversion:

console.log("five" * 2)
// → NaN
console.log(false == 0)
// → true

When an operator is applied to the “wrong” type of value, JavaScript will quietly convert that value to the type it needs, using a set of rules that often aren’t what you want or expect. This is called type coercion.

Happy Reading!
SriV

Good HTML Practices

Srividya Mysore Venkatesh — Tue, 24 Nov 2020 10:32:54 +0000

Over time just writing code holds very little value, that is because it is no more efficient, and loses modularity. Writing clean code becomes very essential.
Some good practices while writing HTML are listed below:

Start with DOCTYPE
DOCTYPE is required for activating standard mode.
Bad: Good:
<!DOCTYPE html>
...
...
don't put white spaces around tags and attribute values.
Bad:

HTML Best Practices

Good:

HTML Best Practices

3.Don’t omit the closing tag
It is always a good practice to close all opened tags and in the same order.
Bad: Good:

... ...

4.Don’t mix character cases
Either have them written in UPPER case on in the lower case. It gives consistency also.
Bad:
General

Good:
General

Also Good:
General

5.Don’t mix tag for CSS and JavaScript
Sometimes script element blocks construction.
Bad:

Good:

Also good:

6.Use main element
main element can be used wrapping contents.Not use

everywhere.
Bad: ...

Good:

...

These practices make error rectification much easier and also helps with accessing elements easily

DEV Community: Srividya Mysore Venkatesh

Anatomy of a URL

Flow of a URL looks like this:

How much can I flex with Flexbox?

What is CSS Flexbox?

How to apply flex?

Flex Properties (for flex-items)

Flex Grow

Flex Shrink

Flex Basis

If I had to give flex-grow, flex-shrink and flex-basis combined, I'd do it as:

Element Order

Let's talk about Axis

Flex Direction

Positioning elements on the main-axis and cross-axis

An amalgamation of flex-direction and flex-wrap is flex-flow!

Having looked through all these properties, Making screen layouts becomes wayyy easier.

Chapter 8: Bugs and Errors

Chapter 7: Project: A Robot

Chapter 6: The Secret Life of Objects

Chapter 5: Higher-Order Functions.

Chapter 5: Higher-Order Functions

Chapter 4: Data Structures- Objects and Arrays.

Chapter 3:Functions.

Chapter 2: Program Structure

Chapter 1: Values, Types and Operators

Good HTML Practices

HTML Best Practices

HTML Best Practices

An amalgamation of `flex-direction` and `flex-wrap` is flex-flow!