Forem: Nour Adel

How A Web Page Works

Nour Adel — Wed, 24 Jun 2020 04:26:59 +0000

Have you ever wondered how your web page gets built by your browser and the steps that are taken to convert your HTML, CSS, and JavaScript code into a fully fledged website that can handle events and to be interactive? Well in this article I will try my best to explain all of this to you which will help you to optimize your websites and applications for better speed and performance.

What is a Web Browser?

Yes, I hear you saying "come on, we all know what a web browser is, give us something more useful!". Well, everyone including my mom knows what a web browser is but do you as a developer really understand the mechanics it uses to get you your webpage? Your browser is just a program that gets files from the server you request (when you search something, etc.) or your site requests (to load assets, etc.) from a server. The browser knows what to exactly to display by using it's engine. Every browser got it's own browser engine. Chrome's browser engine is Blink, while Firefox's is Gecko.

The Lifecycle of a website

The lifecycle of a website starts when a user enters a new website. The first thing the browser does when you click or visit a link is it forms a request that is sent to a server that processes your request and then creates a response that's most times HTML, CSS, and JavaScript. Then when our browser receives that response and goes through two steps to render the web page correctly:

Building Page
Handling Events but it doesn't stop there, it keeps repeating these steps as long as you are interacting with the site and ends only when you close the website or you shift to another tab.

Page building Phase

Let's explore how your browser builds your web page because that's the first thing it does as soon as it gets the information it needs from the server. It's purpose is to set up what you see on the web page which is done in two states:

Parsing HTML and generating the DOM (Document Object Model)
Executing the JavaScript Code The browser can switch between two states. If it encounter a script tag the browser pauses the rendering of the HTML and executes the code inside of the script tag then gets back to parsing HTML and DOM construction and stops when it doesn't find any more HTML to build or JavaScript to run.

Note: That's why people tend to put their script tags in the end of their body tag so all the HTML been parsed before executing the JavaScript code.

Parsing HTML and generating the DOM

HTML is like the skeleton of web pages so when the browser receives it, it parses it one HTML element at a time and builds the structural representation of these HTML elements where every HTML element is represented as a node (A tree like structure) aka the DOM.

Each box is a node element in your DOM

As you can now probably realize why it was named Document Object Model. The first top element is the document object and they are structured really well like a model. Every element can either have or be a sibling or a child or a parent. For example the head element got the title as a node child and the title got a text node inside of it while the body got 3 children and the anchor and heading tag got one child. Every element got a parent except the root HTML element.

Note: The document is not an element so it's not the parent of the HTML element. The document is just an object which generates the tree like structure for your page.

Executing the JavaScript code

When a browser sees a script tag it uses another engine for executing that code, and just like browser engines there is a different JavaScript engines. For Chrome and Opera it's the "V8 engine", for Firefox it's "SpiderMonkey", and for Internet Explorer it's "Chakra".
The browser provides a global object that you can use to interact with the browser, represent the page you are on and contain the DOM. For the browser it's the window object, while for Node.JS it's the global object. The window object contains the DOM to access, modify, add elements in our web page.

Event Handling

You probably heard of the word GUI before. Which stands for Graphical User Interface. The GUI is a form of user interface that reacts to events done by the user with event handling to convey information.
The process of event handling:

The browser checks if there is an event on the top of the event queue. (Event queue is like a line of events that gets executed from top to bottom)
If no events are available, then the browser repeats the process
If there’s an event at the top of the event queue, then the browser takes it and executes the callback function to it.

Note: Only one event can be executed at a time since JavaScript is a synchronous (Code is executed one at a time) programming language. While events are asynchronous (Code is executed along with each other at the same time).

So these are the two phases of the lifecycle of any web page or application.

Wrap up

If you are wondering how this will be useful for you then thinking again because this information is gonna help you a lot with performance for your sites and applications and make it more responsive.

If you enjoyed the blog and learned anything make sure to follow me for more blogs soon. Have a great day and goodbye! 👋

The Complete Guide To Markdown

Nour Adel — Sun, 14 Jun 2020 16:38:03 +0000

Have you ever wondered how these "readme.md" files are written on Github? Or how Blog posts like this are written? Whether you're new or you have been a programmer for a while then you probably have heard of "Markdown" but you probably never had the chance to learn it or you probably know some of it's syntax but can't quiet get the grasp of it. No problem! This is tutorial is for anyone who wants to learn Markdown and add a new skill to their belt because it's something everyone should know.

So what's Markdown Exactly❓

Markdown is a lightweight markup language that you can use to add formatting plaintext text documents. Created by John Gruber in 2004 for purpose of readability and ease of use. It can be converted to HTML and other formats. It's file extension usually ends in ".md".

Depending on the application you use, you may not be able to preview the formatted document in real time. But that’s okay. Markdown syntax is designed to be readable and easy to be used by everyone, so the text in Markdown files can be read even if it isn’t rendered by your application.

What's Markdown used for?🤔

Markdown can be used for everything. People use it to create websites, documents, presentations, email messages, static site generators (Gatsby, etc), forums, and technical documentation. Websites like Reddit and GitHub support Markdown, and lots of desktop and web-based applications support it.

Type of formats that Markdown support:

Headings
Emphasis
Links
Lists
Code Blocks
Images
Blockquotes
Horizontal rules

Setup💻

Now I suggest coding along with this Blog if you want the full benefit.

Online Editors

Downloadable Editors

Note❗: If you are using a text editor like VSCode I suggest getting a Markdown previewer extension to be able to render your Markdown right in the text editor.

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level (Like h1, h2, h3, etc. in HTML).

Markdown	Rendered
# Heading 1	Heading 1
# Heading 2	Heading 2
# Heading 3	Heading 3
# Heading 4	Heading 4
# Heading 5	Heading 5
# Heading 6	Heading 6

Best Practices 👏

Dont't do this ❌	Do this ✔️
#Heading	# Heading

Paragraphs

Paragraphs do not require any tags or signs. They are fairly simple.

Markdown	Rendered
This is a paragraph	This is a paragraph
You can just type anything	You can just type anything

Best Practices 👏

Dont't do this ❌	Do this ✔️
Don't add tabs or spaces in front of paragraphs.	Don't add tabs or spaces in front of paragraphs.

Emphasis

To make text either bold or italic

Bold by putting ** or __ before and after your text
Italic by putting * or _ before and after your text

Bold

Markdown	Rendered
This is bold text	This is bold text
Another __bold text__	Another bold text

Italic

Markdown	Rendered
This is Italic text	This is Italic text
Another _Italic text_	Another Italic text

Bold and Italic

Markdown	Rendered
This is _This is bold and italic at the same time_	This is bold and italic at the same time
This is also _This is bold and italic at the same time_	This is also *bold and italic at the same time*

Horizontal Rule

Add three or more asterisks ***, dashes ---, or underscores ___ on a line by themselves.

***
---
___

Note❗: Add a blank line before and after the horizontal rule

Lists

Ordered and unordered lists.

Ordered Lists

Add a number with period next to it then add a space.

Markdown	Rendered
`1. First 2. Second 3. Third`	First Second Third

Unordered Lists

Add a - with a space after it.

Markdown	Rendered
`- First - Second - Third`	First Second Third

Blockquotes

Add > in front of your content.

> This is a block quote

Rendered:

This is a block quote

Blockquotes with multiple lines

> This is a Blockquote
>
> Continued Blockquote

Rendered:

This is a Blockquote

Continued Blockquote

Nested Blockquotes

> This is a Blockquote
>
> >> Nested Blockquote

Rendered:

This is a Blockquote

Nested Blockquote

Code

Inserting a code block

Markdown	Rendered
``` sudo apt-get install sl ```	`sudo apt-get install sl`

Implementing langauge support

You can implement language support like code highlights by adding the language name next to your first three back-ticks.

```javascript
function greet(greeting, name){
    return `${greeting} ${name}!`
}
```

Rendered:

function greet(greeting, name){
    return `${greeting} ${name}!`
}

You can repeat the same with PHP, Python, or Go.

Links

Links can be created by adding link name between two brackets then follow it by the URL between two parentheses

This is a link to a really great video [The Art of Code]("https://www.youtube.com/watch?v=6avJHaC3C2U")

Rendered:
This is a link to a really great video The Art of Code

Best Practices 👏

Dont't do this ❌	Do this ✔️
[link](https://www.example.com/my great page)	[link](https://www.example.com/my%20great%20page)

Images

You can add images by adding an exclamation mark (!), with an alternate text after it (in case the image couldn't load or for people with visual problems) between two brackets, followed by the URL between two parentheses.

![Beautiful Illustration](https://images.unsplash.com/photo-1530628442364-48f5567cce00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80)

Rendered:

You can also link to an image by enclosing the image tags in two brackets with an exclamation mark (!) after the first bracket, followed by the URL between two parentheses.

[![How to simplify your life](https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)](https://medium.com/swlh/simplify-your-life-the-art-of-questions-3282d6723533)

Escaped Characters

Using characters that are related to Markdown inside your text by adding a backslash () in front of your character.

\- Escaped
- Not Escaped

Rendered:
- Escaped

Not Escaped which results to a list item being rendered

You can realize the not escaped resulted to a list item being rendered

List of Escaped Characters

Character	Escaped
\	\\
`	\`
*	\*
_	\_
{ }	\{ \}
[ ]	\[ \]
( )	\( \)
#	\#
+	\+
-	\-
.	\.
!	\!
\|	\\|

Tables

To create tables you add a pipe symbol (|) for rows and three or more hyphens (---) for columns.

| Table Head | Table Head |
| ----------- | ----------- |
| Table Body | Table Body |
| Table Body | Table Body |

Rendered:

Table Head	Table Head
Table Body	Table Body
Table Body	Table Body

Creating tables can be very time consuming. I recommend using Tables Generator to generate Markdown Tables easily. Another easy way is to use HTML tables as Markdown supports HTML. More on that later.

Strikethrough

You can do strikethrough by adding two tilde symbols (~~) before and after the text.

~~Strikedthrought~~ text

Rendered:
~~Strikedthrought~~ text

Emojis

You can add emojis by simply...adding emojis. Most Markdown Applications understand emoji characters. You can also use their shortcode.

I am enjoying this blog so far :smile:

Rendered:
I am enjoying this blog so far 😄

HTML

Most Markdown Applications support HTML. HTML can be a lot easier with creating tables and adding images.

This is <strong>HTML</strong>

Rendered:
This is HTML

So Yea! That's about Markdown. I didn't cover everything but I am proud to say i covered most things.

Additional Resources to learn

Here are a bunch of resources you can learn Markdown from.

Markdown Guide

If you liked the blog make sure to follow me for more blogs soon. Have a great day and goodbye! 👋

Forem: Nour Adel

How A Web Page Works

What is a Web Browser?

The Lifecycle of a website

Page building Phase

Parsing HTML and generating the DOM

Executing the JavaScript code

Event Handling

Wrap up

The Complete Guide To Markdown

So what's Markdown Exactly❓

What's Markdown used for?🤔

Type of formats that Markdown support:

Setup💻

Online Editors

Downloadable Editors

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Best Practices 👏

Paragraphs

Best Practices 👏

Emphasis

Bold

Italic

Bold and Italic

Horizontal Rule

Lists

Ordered Lists

Unordered Lists

Blockquotes

Blockquotes with multiple lines

Nested Blockquotes

Code

Implementing langauge support

Links

Best Practices 👏

Images

Escaped Characters

List of Escaped Characters

Tables

Strikethrough

Emojis

HTML

Additional Resources to learn