DEV Community: Mahipal

CSS - Inheritance and Others

Mahipal — Tue, 29 Dec 2020 18:11:40 +0000

As i started learning Cascading, Specificity, Inheritance. Though at a higher level it was bit clear, but i felt difficulty in understanding what does initial, unset do.

So i did some more learning, and learnt some more concepts in the process.

So an element Style is set based on 3 different origins -

User-agent origin

default styles used by the user's web browser. This is Used when no styles are applied. So on an empty CSS you can still see HTML has some styling applied. You could see h1 text is bigger than h2 text, and color is black, and there are margins applied aswell. This is Chrome browsers default style defined that will be set to all its elements.
User Origin

styles that user of the web browser has added using a developer tool or from a browser extension that automatically applies custom styles to content, such as Stylus or Stylish.
Author origin

style origin which contains all of the styles which are part of the document, whether embedded within the HTML or loaded from an external stylesheet file.

CSS - Cascading Style Sheets

When there Is or No Specified Value

Other cases

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

If you have set same attribute style at multiple lines, (for the same element both have same specificity score), the last one will be applied. This is Cascading.

#id-heading {
   color: green; 
}
.class-heading { 
    color: red; 
}
h1 { 
    color: blue; 
}

If you have set same attribute style via its element name or its class name or its id name, the one which has more specificity score to the element (here it is id name) will be applied. This is Specificity.

If we notice DOM Tree, there is a root, parents and children.

So a style applied to a parent element is passed on to its children elements. This is inheritance.

Only Inherited Properties Ex: color, Font Size are passed on its children.
Non-Inherited Properties Ex: border, width, margin, padding are NOT passed on to its children.

An element can have same style attribute set with different values at multiple lines or different css files. But only one style will be set.

Cascade, Specificity, Inheritance will work together to compute the final style for an element.

Inheritance is controlled by 4 different properties

inherit
initial
unset
revert

In the below examples we will be looking at color property and for <a> link element.

default style

In the below example, when there is no CSS styles mentioned, you can see browsers default style (i.e., user agent) being applied to .

Inherit

In the below example, when inherit is set as a value to color property for <a> element, it inherits its parents color value. Red arrows shows the default style is crossed which means its value is overridden.

Brown color is applied.

Initial

For color property, it's usually Black.

Initial value of a property is its initial value as listed in its definition table in CSS specification.

In the below example, you can see browser default for link is crossed and overridden.

unset

When you set unset as a value to inherited property, it will act as inherit, else if set to non-inherited property, it will act as initial.

color is an inherited property, it will inherit value from its parent, here it is brown.
padding is an non-inherited property, it will get initial value, which is 0px.

revert

As in the below example, When there is no style set, browsers default style is applied.

When you set revert on a property, and if that element has no parent, then default style of the browser (i.e., user agent) will be applied.

When you set revert on a property for an element, and if its parent has a style, then parent style will be applied.

all

The all is shorthand CSS property that resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties(variables).
Ex:
all: unset;
all: inherit;
all: initial;
all: revert;

!important will override all the above and will become most specific rule.

.main {
    color: blue !important;
}

Specificity Score

Note: below info directly taken from mdn

The amount of specificity a selector has is measured using four different values - (thousands, hundreds, tens, and ones)

Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always 1000.
Hundreds: Score one in this column for each ID selector contained inside the overall selector.
Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.

The universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have specificity score of 0.


/* specificity: 0101 */
#outer a {
    background-color: red;
}

/* specificity: 0201 */
#outer #inner a {
    background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
    color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
    color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

I think we both learned a bit from this post. cheers.

Web Browser Engine Overview : For Beginners

Mahipal — Sat, 19 Dec 2020 13:54:51 +0000

Website that you visit/read is a Document.

As a human, when you write a Document on a Paper, or lets say print a Newspaper, you see Headlines and some part of the story below it, and links to remaining story on a different page. Some headlines will have full story below it. You see paragraphs break on to a new line, have space between them. You see different colors, images all over inserted at different places of the Page. You see different image sizes, different fonts and font sizes. But when you read, you know which is head line, which are different sub navigation pages, like Sports Page, Movie Page, Classifieds Page. You are human and you are able to recognize what is what.

So, how can we help the Computer to do the same ?

All the web pages are text or images mainly. Your web browser is the software application that can display/read text and recognise what is what, ** Only If you Mark the text properly.**

So, how do you Mark the text, so that Browsers can differentiate which text is what ?

Here comes the HTML - Hyper Text Markup Language, which is made up of different elements. When you apply these elements to your text, that text will get a meaning in a document. These elements when applied to some text, can give a different meaning like as a Headline, paragraph, line break, table, a list, navigation bar, article, header, footer, link etc.

But what about people who are blind ? These differently abled people will use screen readers or Accessibility features which most of the devices support. Your Web Browsers support too. Even your iOS/Android device, Check your settings for this Accessibility feature.

And so is the Localization as every reader wont read your language, and it is not limited to language conversion.

These HTML elements will give additional information for these screen readers.

`HTML is a Markup language to structure text file. And it is for the web.

XML is another markup language which is a data-description language. XML allows users to define their own tags. This feature makes it more powerful, and can be used in many more other applications , like

SVG is based on XML
Web services
MathML

If you want to present your Marked Up Text to the Users Visually by adding color or style or animation , you need CSS (Cascading Style Sheets) a declarative language help which is a rule-based language.

A CSS rule is a set of properties associated with a selector.
"Cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance.

Declarative language - WHAT to do

You tell your Car driver, just the house address where you want to go

Ex: HTML, XML, CSS, JSON, SQL.

Ex: Project Manager - tells - what to do

Imperative language - HOW to do

You tell your Car driver, street by street directions till the house address where you want to go

Ex: C, C++, C#, Java, JavaScript, Scala, Python.

Ex: Developer - figures out - how to do

So, a Declarative program will be executed by Imperative program.

Just like W3C who define web standards, CSS standards are done by CSS Working group within W3C.

Okay, so CSS can be used to style HTML. Guess what?
You can even style other Markup languages like XML , SVG ,
MathML with CSS.

Web Standards is a work in progress document which keeps getting updated. Your favourite browser will keep implementing these standards and keep releasing new version updates. Below image is for illustration only.

There is a possibility that all browsers may not be at the same implementation status. So, if you are using an element/property there is a chance that it may work in one browser and may not work in different one.

Your Browser has different features that it is capable of doing but mainly is to communicate with web servers and display (or render) on Browsers window.

So, What happens within a Browser Engine?

Browser engine is the heart of the browser. It is tightly integrated with Render engine and JavaScript engine. So together, Browser engine takes care of Implementing Web Standards, DOM/CSS Parsing to Object Models, Calculating Styles, Layout, draw graphics, request resources from the network stack and others.

Some popular Browser Engines - WebKit, Blink, Gecko

Some popular JavaScript Engines - JavaScriptCore, V8, SpiderMonkey

Google Chrome uses Blink, V8.

When we speak of Object, what is it really ? If you have heard of Object oriented programming, or if you are coming from Java/C++ background, you can easily relate.

So here, we have these HTML elements and CSS selectors.

Once these elements/selectors are loaded into memory (Parsed to Tokens, Nodes), browser provides uses that information and relate style elements to create a Render Tree, which then creates Layout which tells which object occupies which coordinates and its properties, and then Paints (renders) your screen accordingly for you to see.

Browser allows us a way to create copies of these element/selector references (called objects), which we can use to interact with them programatically, like read or write to a paragraph or title, and many more things.

HTML is converted to DOM Tree. CSS is converted to CSSOM Tree.

DOM - Document Object Model for HTML. *(you know that web page is a document, right) * - is a set of APIs that allow manipulation of HTML from JavaScript

CSSOM - CSS Object Model for CSS - is a set of APIs that allow manipulation of CSS from JavaScript.

WebAPI - DOM, CSSOM are 2 of many other APIs that browser provides.

Render Engine

HTML and CSS document will be parsed by the Render engine. Parsing is done based on the language Vocabulary and Tokens are created. Syntax rules applied on Tokens and Nodes are created.

Tokens which are converted to Objects are linked in a Tree Data Structure each separate for DOM and CSSOM. This Object Model will be used by the Browser for all further processing.

Browser blocks rendering untill it has both the DOM and CSSOM. CSS media types and media queries allow us to un-block rendering while CSSOM is being constructed as the page downloads.

<link href="style.css" rel="stylesheet"> <link href="print.css" rel="stylesheet" media="print"> <link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Browser combines both DOM, CSSOM into Render Tree, which captures all the visible content of the page, all its style information for each node.

From Render Tree, Browser enters Layout creation stage, where it computes exact position and size of each object (in pixels) in the browser window.

When Layout is complete, Browser issues Paint Setup and Paint events, which converts render tree to Pixels on the screen.

JavaScript is written at the end of the body mainly because, JavaScript execution is parser blocking. Browser must pause DOM construction and hand over control to JavaScript runtime, and let script execute before proceeding with DOM construction.

For detailed information, there is ton of material in google.

Hope this post helped u gain some knowledge like it did to me.

git - part 2: for beginners

Mahipal — Thu, 17 Dec 2020 06:26:16 +0000

After that small talk, in this post let's use some git commands.

Additional Info:-

For complete list of commands, refer this.

Refer this Visual Git Cheat Sheet.

Refer this for some detailed information.

Refer this for commonly used commands.

Git Client that i really like are Fork and Tower. Free are SourceTree and Github Desktop

I have git setup already on my station.

When we work with git, files will be moved into 4 different steps on your laptop/PC before moving to 5th step which is upstream repo on the cloud.

Stash

this is like files will be moved as draft copy, which is on stand by with git stash push
Workspace

this is the actual place where you add/update your files, and these are not yet tracked by git
Staged area or Index area

this is the place where all your files reside when they are ready for version control after you say git add .
Local repository

once committed with git commit -m "<msg>", this is the place where your files reside and have a version name and control. From here they can be moved to Upstream Repository (github account in the cloud)

So, i have this fresh directory(0 bytes), and when you enter

git status

gives the status of files

you get an error saying This is not a git repo.

So you need to setup every working directory to maintain different versions.

Initialization

After git init,

the directory gets initialized, and

git status Now says there are no commits made yet.

Though the directory looks empty, its size has increased from 0 to X bytes. So what changed ? git init will create a hidden folder .git, which tracks all the changes to this directory. It looks like this, if you see the hidden folder.

Now i have added 1 text file and added 1 statement to it. When i say git status it will still say No commits yet, but is tracking the files.

Moving to Staging area

git add .

this will move all the files to the staging area

If you have more than 1 file, but you want to add only 1 file to the staging area, then use
git add <file/folder name>

this will move specific file/folder name to the staging area (also called Index area)

Moving to Local repo

git commit -m <commit message>

this will commit all the files from staging area to the local repository. Your saving point in the history, which you can comeback to at a later point. In previous post , its like going to be version history, like Earth.

update, stage, commit

Updating both the files and adding to the staging area and then committing to local repo

Moving to Upstream repo

To move the files from your local PC to your github account, there should be a link established between the two. Create a repository in your github account.

If you have cloned the repository, there is git already initialized and already a link established. Check by git remote -v

To establish link between Local PC and Github repo

git remote add origin <https://github.com/username/repo-name.git>

It will now add your github repo as the origin from which you can push your changes and pull updates to your local PC.

to Push updates to your Upstream repo

git push -u origin <branch name>

origin is your upstream repo from where you can fetch/push
branch name here it is master

Head, Branch and Merge

Till now you have a stable code.

Now you want to build a new feature, but do not want to disturb your stable code, and work from a different copy.

So for that, You can create a branch, which will have all the old code and you can start creating the new feature on top of it. Once you think your feature is working properly, you can merge your new code with old code. Suppose if your new code is not working properly or at a later point you think it will not be useful, you can delete the branch without having to worry about loosing your old code.

Just like a Tree having a Trunk which is the main/master branch, and there are side branches which are coming out of the Master branch at different places,

in git, you can create new side branches from existing code (from Master/any branch), make updates, the only difference from actual tree is that, you can merge your new updates to master/any branch.

Head is how the git knows on which branch you are on currently.
Detached Head is like if you move from current state to a older commit like Commit 1, you are in detached head state. This can be done by git checkout <commitCode>. commit code can be found using git logging commands.

To view the list of branches, run

git branch

it will list all the branches on your local repo

git branch -a

this will list all the branches from local repo and remote repo

To create a new branch, git branch <branch-name>

At this point, your Head will still be at master branch, as you have only created but not moved.

to move, git checkout <branch-name>

Creating and moving your Head to new branch can be done with single command
git checkout -b <branch-name>

Let us create a new branch named feature-1

Lets update few lines, add to stage and commit.

All the updates are commited in your new feature-1 branch.

Now, if you switch to your Master branch, you will not see any of the updates made in your feature-1 branch. So both branches are being maintained separately.

Now you feel that feature-1 updates working properly and you want to include in to your Master branch, so for that you need to merge.

git merge <branch-name>

merges all updates from your branch-name into your Head

Lets say you now at feature-1 branch (and there are no changes to your Master branch since your new branch creation)

when you say git merge master - tool says Already up to date. because your Head is at feature-1, and all the updates from your master branch are already in your feature-1 branch

change your head to master by git checkout master and say git merge feature-1

Push to upstream

Now you can push your main branch updates to upstream
git push origin

You can even push your new branch to upstream
git push -u origin <branch-name>

Log

To view changes

git log

shows all the changes

git log --summary

shows all the changes with some additional details

git log --oneline

shows all the commits in single line

git shortlog

Conflicts

When you are merging 2 files with same filenames, and if there is code/text on the same line numbers on both the files, then there will be conflict and merge will not happen right away.

We can discuss on conflicts and others commands in a different post.

git - part 1: for Beginners

Mahipal — Thu, 10 Dec 2020 17:21:51 +0000

Hey, do you remember about Safety Net that I mentioned here. Ya, Git falls under this classification, its Source Code Control.

More like version control.

Git - is a version control software tool.

Github - is a Repository. Mainly used for code/projects.

(just like Google Drive - is a repository of all your documents/pictures/other files).

lets say

Today, you write 10 lines of code - lets call that version-1.
Tomorrow, you edit 2 lines and add 5 more lines of code - now its version-2.
Later, You/Someone else, will add/update another few lines of code - now its version-3.

Now you want to go back to version-1 (or any other version) - Sure thing. possible with Version Control Software/Tool. Finally We Don't need to create folders each day to say Day1_code, Day2_Code,...

Maybe you must have seen this in google docs (also similar in Microsoft docs)

You see , there are different versions of the above document and so different features in your google drive. Similarly in Git, there are different features and commands for those features.

you can create a document.

In Git, you say `git Init`
daily add some content to it,

In Git, you say `git add .`
you can name each version.

In Git, you say `git commit -m `Earth Topic`

Lets say Yesterday you wrote about Mars, name that version Mars and Today you wrote about Earth, so name that version as Earth, that will be easier for you to switch to previous date/version or to identify all the versions.

google docs has Auto Save. Or you manually Click Save. In Git, you say `git push`

move(restore) document to any of the previous date,

In Git, you say `git checkout [branch-name]`
You/(like many others) can get access (collaborate) to other peoples google drive documents, and your can update the your changes to the original document

In Git, this is called pull request
and you can get latest updated document and see all the new changes.

In Git, this is called `git pull

In Git, there are many other features, and many other technical terms to know of.

If you do not have a github account, create one.

and Now you can do 2 things.

work on your own project, and upload/maintain your code in your github account. > use git commands
work on others project i.e, collaborate, or use others project and make changes and run it independently based on its licence, from your github account. > use fork, clone and git commands

If you go into others repositories, (this is your origin repository) you can see fork and clone

Usual steps when you Fork or Clone

fork	clone
click on `fork`	use `git clone` command
1. downloads a copy to your github account	1. downloads a copy to your local machine
2. clone the repository to your local machine	-
3. make changes on your machine	2. make changes on your machine
4. push changes to your github repo	3. push changes to your github repo
5. send Pull Request Command to send changes to Original repo	-
6. If original repo Owner accepts your changes, your code will be merged	-

I will write another post on some of the commands and about the work flow.

If you liked the content, please free to follow me on twitter

Part 2 of the post is here

How Client-Server Communication Works: For Dummies

Mahipal — Tue, 01 Dec 2020 14:17:48 +0000

Some point in your life, You may have had connected your Mobile device to your friends Mobile device via Bluetooth or Lets say you did. You can even send a file or receive a file or Accept an incoming file or Reject or Close the connection. You can do various actions.(or lets say methods). Here we do not care how your image file or audio file is being sent from your Mobile to your friend Mobile. All you care about is weather it is successfully reached or not.

Here these two Mobile devices are able to communicate/send or receive data via Bluetooth Protocol (as both the devices have Bluetooth Protocol Stack implemented). You don't care how it is working internally, you just use the above discussed actions(or methods) and get your work done.

Similarly, your web browser needs a way to communicate with another browser or application. Your browser should be able to Receive and Send data to another web browser (or application). Here comes HTTP (Hyper Text Transfer Protocol), which is an application level protocol, that sits above communication protocol TCP/IP . So if you browser has to send/get any data that your are reading now, HTTP plays the role (with few other underneath protocols). What are the different actions here ? Read this to speak HTTP.

Just like when you get the audio file via Bluetooth, to listen you would need MP3 audio player Software. Similarly, once data reaches your browser, you need help of other Software for you to read. Same is for Sending. Consider them as HTML, CSS, JS(JavaScript).

Image Source: MDN

Now, when you type some web address like www.apple.com, your browser (Chrome, Safari, Firefox, Edge etc) sends some request to another computer (server), server will send back some data/images/files, and browser will parse, and now you can see all the products with beautiful images.
Okay, will my request directly reaches Apples server ? Nope. Read this if you want to know.

Typically, HTTP request / response handshake is

browser requests	server returns
HTML page	an HTML file
a style sheet	a CSS file
an JPG image	a JPG file
JavaScript code	a JS file
data	data (in XML or JSON)

These Servers are built and Maintained by Companies like Apple/Google/AWS/Digital Ocean/ where all the data will be hosted. Some are not open to public and some are.

Lets put the same in an example.
So, there is a nice Restaurant around. Restaurant owner has few Servers (or Bearers) working for him. You decide to visit and go to this Restaurant, For the restaurant owner you are a Client. So, You reach the restaurant which is on a particular street and building, you find restaurants beautiful carpets, nice paint, nice decorations and you feel nice. You find a table to sit and order what you want to the Server. Server goes back inside to bring what you ordered, Meanwhile you may make a call or play a game or just do nothing. Once the food is ready, your Server is back with food and it is served, and you Consume the food, and leave the Restaurant.

If we break this story further down,

there is restaurant on a particular street/building -> Unique Address, called 'IP Address' which is in digits. As it is difficult to remember we use domain names that later gets translated. We use web address in browsers.
you reach the restaurant via road -> your Internet connection
restaurant has many rooms and floors -> built with HTML
restaurant has beautiful carpets/wall paints/decorations -> built with CSS
there is a table to sit and eat in one room -> webpage with some user actions/entry
there are restrooms in another room -> another webpage
lights are running when a switch is enabled, water runs when tap is opened -> JS can make this runnnig
you are able to communicate to server and request food by saying GET that food-> send Request to Server via JS through HTTP using GET method. Beware that Server could also say OK (food if available) or BAD Request (Sorry Food Not available).
the food is being prepared -> Server Computer is reading the data
server is able to get food back to you -> get Response from Server via HTTP (can be multiple responses) and JS parses the data.
you eat -> data from Server is being read/viewed
you leave the place -> close the website.

Websites are primarily built using HTML, CSS, JavaScript and

Browsers communicate with Servers using HTTP and they understand HTML, CSS, JS

Using HTTP, you can Create, Read, Update, Delete Operations on the Server.

Just like 'GET', other HTTP Methods are

GET (Read)

Requests using GET should only retrieve data and should have no other effect.

Ex: Returns Item Inventory list, Find Purchase order by ID

HEAD

The HEAD method asks for a response identical to that of a GET request, but without the response body. This is useful for retrieving meta-information written in response headers, without having to transport the entire content.

same as GET, except it does not have response body.

POST (Create)

POST requests are used to send data to the Server. Data is stored in the request body of HTTP request

The POST method requests that the server accept the entity enclosed in the request as a new subordinate of the web resource identified by the URI. The data POSTed might be, for example, an annotation for existing resources; a block of data that is the result of submitting a web form to a data-handling process; or an item to add to a database.

Ex: Place an Order for an Item

PUT (Update/Replace)

The PUT method requests that the enclosed entity be stored under the supplied URI. If the URI does not point to an existing resource, then the server can create the resource with that URI.

DELETE (Delete)

The DELETE method deletes the specified resource.

Ex: Delete purchase order by ID

TRACE

The TRACE method echoes the received request so that a client can see what changes or additions have been made by intermediate servers.

OPTIONS

The OPTIONS method returns the HTTP methods that the server supports for the specified URL. This can be used to check the functionality of a web server by requesting '*' instead of a specific resource.

CONNECT

The CONNECT method converts the request connection to a transparent TCP/IP tunnel, usually to facilitate SSL-encrypted communication (HTTPS) through an unencrypted HTTP proxy.

PATCH (Update/Modify)

The PATCH method applies partial modifications to a resource.

Just like Server saying 'OK', HTTP response codes are

1xx (Informational): Request received, continuing process.
2xx (Successful): The action was successfully received, understood, and accepted.
3xx (Redirection): Further action needs to be taken in order to complete the request.
4xx (Client Error): The request contains bad syntax or cannot be fulfilled.
5xx (Server Error): The server failed to fulfil an apparently valid request.

Client Tool Classification

Mahipal — Tue, 01 Dec 2020 02:35:28 +0000

Cover Image Source: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0

So, though you are a beginner or expect, you would be using lot of tools that aid in code development, its testing, fixing any errors, making it public/live, hence making your life easier.

All of these tools would mainly be classified into 3 categories.

1. Safety Net Tools

these tools are useful during code development.

2. Transformation Tools

these tools transform your code. Like one language/syntax to another.

3. Post-development Tools

these tools are helpful during testing and deployment.

Few examples under each category:

Safety Net

Linters
- Eslint > a highly configurable tool for catching potential syntax errors and encouraging "best practices"
- csslint
- webhint > that surfaces best practices including approaches to accessibility, performance, cross-browser, security, testing for PWAs etc.
Source Code Control (version control)
- SVN
- Git
Code Formatters
- Prettier
Bundlers/Packagers >these get your code ready for production. Some features are like removing unnecessary spaces which reduces the size (minifying), removing unnecessary lib's that your code is not using (tree-shaking).

Transformation

These Tools convert Code to browser-compatible code

Write code using latest language features, and have it transformed which works on most of the devices including old browsers that don't support these features in native lang.
- Babel > JavaScript compiler that allows developers to write their code using cutting-edge JavaScript, which Babel then takes and converts into old-fashioned JavaScript that more browsers can understand
- PostCSS >allows to write cutting-edge latest CSS. If there is no equivalent way in old browsers, PostCSS will install JavaScript polyfill to emulate the same behavior.
Write code in entirely different language and have it transformed
- Sass/SCSS > allows you to use variables, nested rules, functions and other features some of which are not available in native.

TypeScript

superset of JavaScript that provides additional features. TypeScript compiler will covert Typescript Code to JavaScript when building for production.
- Frameworks: React, Ember, Vue etc > built on top of vanilla JS, allows you to use custom syntax, which later be transformed.

Post-development

This makes sure that your code makes it to servers and continues to run.
This stage runs mostly automatically, unless there is an issue.

Testing
1. Frameworks for writing test
  - Jest
  - Mocha
  - Jasmine
2. Automated tests
Deployment
- tools to get your site published
  - Netlify
  - Vercel
  - Github Pages
Auditing Tools/Quality/etc

Exhaustive List of Tools:
https://frontendmasters.com/books/front-end-handbook/2019/#6

Source: MDN

""

Mahipal — Sun, 29 Nov 2020 07:13:53 +0000

When i started learning html few days ago, i used to forget mentioning <!DOCTYPE html>.

I thought learning more about it, i will start forgetting less.

So, What does it mean ? What happens if you don't or want to write ? Why should you write it at all ? and also in the beginning of the file and not in second line or after.

<!DOCTYPE html>

<! > markup declaration, that is carried forward from earlier versions of HTML. To let browser know that, <! This is HTML version x.x document !> or <!-- This is comment -- >

DOCTYPE - Documentation Type

html - version of HTML. Here it means HTML5.

Some History

Back old days, Web Browser was first developed in 1990 and NCSA Mosaic was the first browser to display images and text simultaneously and led to the Internet Boom.

Netscape Navigator developed by Netscape which employed many of the original Mosaic authors. Firefox is the successor to Netscape, as the Mozilla community was created by Netscape in 1998 before their acquisition by AOL.

Spyglass, Inc. licensed the technology and trademarks from NCSA for producing its own web browser, Microsoft licensed Spyglass Mosaic and later purchased.

Among few other players, Netscape and Microsoft had majority market share. Both Microsoft and Netscape liberally incorporated proprietary extensions to HTML in their products, and tried to gain an edge by product differentiation.

If you want more on this, this is the place.

Though W3C is in place many did not follow while developing their browsers. Here you can find what others opined back then.

Back to Present

Major upgrade of HTML Web Standards is v5.0 (W3C and WHATWG were working together)

W3C earlier documented all the standards/api's at WebPlatform and Later moved to MDN

As of today, Most of the browsers support these recommended standards, called Full Standards Mode i.e., the behavior described by the HTML and CSS specifications

So by writing <!DOCTYPE html> in the first line of your file, you are telling the Browsers to render the content based on the Full Standards Mode.

Here comes other 2 modes

Quirks Mode
- this emulates browser behaviour as that of old legacy browsers.
Almost Standards Mode
- this has few behaviours implemented from Quirks mode.

The only purpose of DOCTYPE is for the browser is to know on which mode rendering has to be. (and as to prevent entering Quirks mode as default).

Even if you write a comment on the first line and second line as DOCTYPE, your browser will enter quirks mode, and you will see unexpected behaviour.

But what if you want to support your content on old Browsers i.e., before HTML 5.0, Nah. There is no reason that you want to spin your head on that.
But if you want to really to support Legacy browsers or give a try, this is the link.

DEV Community: Mahipal

CSS - Inheritance and Others

When there Is or No Specified Value

Other cases

`Cascade`, `Specificity`, `Inheritance` will work together to compute the final style for an element.

default style

Inherit

Initial

unset

revert

all

`!important` will override all the above and will become most specific rule.

Specificity Score

Web Browser Engine Overview : For Beginners

So, What happens within a Browser Engine?

Render Engine

git - part 2: for beginners

Initialization

Moving to Staging area

Moving to Local repo

update, stage, commit

Moving to Upstream repo

Head, Branch and Merge

Push to upstream

Log

Conflicts

git - part 1: for Beginners

Usual steps when you Fork or Clone

How Client-Server Communication Works: For Dummies

Client Tool Classification

Safety Net

Transformation

Post-development

""

Some History

Back to Present

DEV Community: Mahipal

CSS - Inheritance and Others

When there Is or No Specified Value

Other cases

Cascade, Specificity, Inheritance will work together to compute the final style for an element.

default style

Inherit

Initial

unset

revert

all

!important will override all the above and will become most specific rule.

Specificity Score

Web Browser Engine Overview : For Beginners

So, What happens within a Browser Engine?

Render Engine

git - part 2: for beginners

Initialization

Moving to Staging area

Moving to Local repo

update, stage, commit

Moving to Upstream repo

Head, Branch and Merge

Push to upstream

Log

Conflicts

git - part 1: for Beginners

Usual steps when you Fork or Clone

How Client-Server Communication Works: For Dummies

Client Tool Classification

Safety Net

Transformation

Post-development

""

Some History

Back to Present

`Cascade`, `Specificity`, `Inheritance` will work together to compute the final style for an element.

`!important` will override all the above and will become most specific rule.