diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ed326dd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Cattyboard" + ] +} \ No newline at end of file diff --git a/Week-1/Assignment/index.html b/Week-1/Assignment/index.html new file mode 100644 index 0000000..e81e623 --- /dev/null +++ b/Week-1/Assignment/index.html @@ -0,0 +1,97 @@ + + + + + + + + Assignment 1 + + + + + + + + + +
+ +
+
+ +
+
+ Cattyboard Hot Chart 100! +
+
+

CattyBoard Top 100 Single Charts (11.06.36)

+

UnKnown Artist

+

2016.Artists. 100 Songs

+
    +
  • Play All
    • +
  • Add to
    • +
  • More
    • +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
1. One DanceCrake feat CatKid & Cyla2:54CATTY CLOUD SYNC
2. PandaCattee4:06CATTY CLOUD SYNC
3. Can't stop the feelingCatin Cimberlake3:56CATTY CLOUD SYNC
4. Work From HomeCat Harmony from Colla3:34CATTY CLOUD SYNC
+
+
+ +
+ Cattyboard Hot Chart 100! +
+

If it Ain't Love

+

Catson Derulo

+
+
+ + + + + +
+
+ + + \ No newline at end of file diff --git a/Week-1/Assignment/style.css b/Week-1/Assignment/style.css new file mode 100644 index 0000000..b186af3 --- /dev/null +++ b/Week-1/Assignment/style.css @@ -0,0 +1,164 @@ +* { + font-family: "Lato", sans-serif; + margin: 0; + padding: 0; +} + +body { + height: 100vh; + width: 100vw; +} + +.sideNav { + height: 100%; + width: 35px; + position: fixed; + z-index: 1; + top: 0; + left: 0; + overflow-x: hidden; + padding-top: 20px; +} + +.side-nav li i { + color: #000000; + margin: 32px 0px 30px 10px; + font-weight: bold; +} + +.center { + height: calc(100% - 80px); +} + +.description { + margin-top: 0; + margin-left: 35px; + display: flex; + align-items: center; + height: calc(100% - 360px); + background-color: #696868; + color: aliceblue; +} + +.image-section { + margin: 50px; +} + +.description img { + width: 200px; + height: 200px; +} + +.description-section { + margin: 0px 10px 0px 20px; +} + +.description-section h2 { + font-weight: 500; + margin-bottom: 10px; +} + +.description-section p { + font-size: 0.8rem; +} + +.mini-controller { + display: flex; + margin-top: 90px; +} + +.mini-controller li { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; + cursor: pointer; +} + +.mini-controller li i { + margin-right: 3px; + font-weight: bolder; +} + +.controller { + margin-left: 35px; + height: 55%; + width: 97%; +} + +.controller table { + height: 60%; + width: 100%; + margin: 10px; + font-weight: 500; + border-collapse: collapse; +} + +.controller tbody { + display: table; + width: 100%; + height: 100%; +} + +.controller tr:nth-child(even) { + background-color: #f0f0f0; + border-radius: 3px; +} + +.controller td { + padding: 20px; +} + +.controller td a { + margin-left: 200px; + color: blue; + border: 1px solid black; + text-decoration: none; + padding: 3px; + font-weight: 700; +} + +.footer { + display: flex; + height: 5rem; + width: 100%; + background-color: #43689b; + position: absolute; + z-index: 100; +} + +.footer img { + height: 4rem; + width: 4rem; + position: absolute; + margin: 12px; +} + +.footer p { + color: white; + font-size: 0.8rem; + margin: 0 0 6px 100px; +} + +.left-info { + margin-top: 35px; + width: 50%; +} + +.player-icons { + width: 50%; + display: flex; + justify-content: space-around; + align-items: center; +} + +.player-icons i { + cursor: pointer; + font-weight: 800; + color: white; +} + +.pause-icon { + font-size: 1.7rem; + font-weight: bolder; +} \ No newline at end of file diff --git a/Week-1/README.md b/Week-1/README.md new file mode 100644 index 0000000..e462ff3 --- /dev/null +++ b/Week-1/README.md @@ -0,0 +1,141 @@ + +# The Assignment of the week-1 with the work and the task assigned +--- +# How the web browsers work? + +Here, we will try to see what happens when we enter a URL into a browser and hit Enter. In short, following steps take place: + +1. The browser looks up at the IP Address for the domain that you have entered. +2. Browser initiates a TCP connection with the server. +3. After the connection is made, a HTTP request is sent to the server. +4. Server processes the request and sends back a response. +5. The browser renders the response using several mechanisms and rules which will see in detail. + +## Let's try to see with the help of a diagram of how the flow works: + +![lya7b81ow94pniln3aif](https://user-images.githubusercontent.com/56493775/168250913-ec514172-ea1b-4a06-b3eb-75786179807d.jpg) + +## What is the main functionality of the browser? + +The main functionality of a web broswer is, I would say, fetch useful information from the World Wide Web on request by a user/ client, translate those files received from server and render it to the user. The browser does it in fraction of seconds. It does so in the steps explained concisely above. In this answer, we will focus more on the rendering part like the HTML and CSS parsers, rendering engines, layout and painting and many more things. + +## High Level Components of a browser + +The browser's high level architecture consists of following components: + +1. **The UI** - This includes the whole UI consisting of address bar, all the buttons, bookmarking options and many more things. It varies from browser to browser. +2. **The browser engine** - It simply acts a link between the UI and the rendering engine. +3. **The rendering engine** - It is used to display requested content on the browser. If the requested content is HTML, the rendering engine parses HTML and CSS and displays the parsed content on the screen. +4. **Networking** - It used for different types of network calls like HTTPS, HTTP. It might have different implementations in different types of platforms. +5. **UI Backend** - It is used for drawing out basic widgets like boxes and windows. It is not platform specific- it is more of a generic implementation. +6. **JavaScript Interpreter** - It is used to parse and execute JavaScript code. +7. **Data Storage** - This is a layer which is used for persistence. The browser might need to save some data locally such as cookies or localStorage is also a very good example. + +## Rendering engine and its uses + +So, the main use of rendering engine is to of course render content requested by the user. But, how does it perform this task. The image below explains the basic flow of a rendering engine: + +![Screenshot 2022-05-13 115549](https://user-images.githubusercontent.com/56493775/168249985-3a6e023d-e1c8-4f9b-802d-42db3034a5db.png) + +It includes four steps: + +1. The requested HTML content is parsed in small fragments, including all the CSS files. The HTML elements are then transformed into DOM nodes to form the **DOM Tree**. + +2. After the DOM tree is created, the engine also creates a **render tree**. This tree has all the information regarding the order in which the elements will be dispalyed. It doesn't add to itself those DOM nodes which are not instantly needed. + +3. After the render tree is created, the browser goes through the **layout process**. The process of finding out the values for the elements to find out there desired position is known as layout process. + +4. The final step is to paint the screen, in which we traverse the render tree and apply **paint()** method which paints each node in the render tree using the UI backend layer. + +## HTML and CSS Parsers + +### HTML Parser + +The job the HTML parser is to parse the HTML markup into a parse tree. +Parsing is generally done on context free grammar. But, HTML cannot easily be defined by a CFG that the parsers require. +HTML cannot be parsed by regular top down or bottom up parsers due to: + +1. Forgiving nature of the language +2. Presence of dyanmic code + +So, the browsers create custom parsers for parsing HTML. The algorithm consists of two stages: **tokenization and tree construction**. This is the basic flow of HTML parser: + +![Screenshot 2022-05-13 121731](https://user-images.githubusercontent.com/56493775/168250051-e36835db-4303-4fb5-8f33-b336637341b5.png) + +**Tokenization** is like the lexical analysis phase of the compiler. It parses the input tokens. The algorithm is designed in a form of state machine. Every state takes on or more characters of the input stream and updates the next state according to one of those characters. + +**Tree Construction Algorithm**: + +The document object is created when the parser starts running. In the tree construction phase, the root of DOM tree i.e. the Document will come into the picture and new elements will get added to it. Each node released by the tokenizer will be processed by the tree constructor. For every token, the specification defines which DOM element is relevant to it and will be created for this token. + +### CSS Parsing + +Unlike HTML, CSS is a context free grammar and is parsed using the types of parsers commonly used. +Let's see example of WebKit CSS parser- + +WebKit uses Flex and Bison parser generators to create parsers automatically from CSS files. Bison creates a bottom-up shift reduce parser. The CSS file is parsed into a StyleSheet object. Each object contains CSS rules. The CSS rule objects contain selectors and declaration objects and other objects corresponding to CSS grammar. The following image is an example: + +![Screenshot 2022-05-13 123654](https://user-images.githubusercontent.com/56493775/168250095-6055d166-bdfe-4be5-ae78-e6b4c905e363.png) + +## Script Processors and Order of Script Processing + +The whole model of the web is more or less synchronous. The script are parsed and executed when the parser reaches a `