Computer Science – What goes on under the hood – 3 Informative Links

 

I’ve been reading up about JavaScript Engines and how JavaScript actually works under the hood. This led to me looking into how browsers work, and then how computers work.

I strongly suggest anyone starting out in coding or software development to look into how computers work, how browsers work, and how your JavaScript code is processed and compiled. It’s helped me realise how performance problems can arise from seemingly innocent mistakes that start small, but snowball into bigger problems.

1 –  A really fun introduction to computer science (at a super basic level).

Early Computing: Crash course Computer Science

2 – Short intro into how JavaScript engines work.

A Guide to JavaScript Engines for Idiots

3 – Informative and well written page about how modern web browsers work.

How Browsers Work: Behind the scenes of modern web browsers

 

 

What Does Full Stack Web Development Mean?

If you are a Full Stack developer it means you have the ability to combine Front-End technologies with Back-End technologies to make a website all the way through from scratch. It is an all round understanding of the technologies used to develop web pages.

There are two main components of a website, there’s the Front-End and the Back-End. The Front End is what you actually see on a website. The Back End is the technology used to decide what to show you on the Front-End. For instance lets say you’re looking at Facebook.com. What you see, the fonts, the colours, the layout and the content, is all the Front-End stuff. The Back-End decides what pictures or comments and content to retrieve from the database then display it on the Front-End.

The Front — End

 

The Front-end revolves around three key technologies:

HTML

CSS

JavaScript

There are other technologies such as jQuery and Bootstrap but they just frameworks of JavaScript and CSS. Frameworks are large bodies of pre-written code that can be used with the programming language in question to put together code quickly and/or more efficiently.

HTML is Hyper Text Markup Language. Every web page will have HTML, it is the structure of a web page. You can view it by right clicking on a web page and selecting “View Page Source”

CSS is cascading style sheets. CSS is the actual styling of a web site. CSS is not mandatory but almost all websites these days have it. The colours, fonts borders and layout of a website is all defined by CSS.

JavaScript allows you to add interactivity to the website, including programming logic. Any site with interactivity uses JavaScript in some way, otherwise the site is ‘static’.

The Back -End

 

The Back-End of a website has three components:

The language

The Framework

The Database

Technologies such as PHP, Node.js Ruby/Rails, Java, Python, etc. are all viable options for the Back-end of a website.

An example might be, Python as the language, Django as the framework, SQlite as the database.

For example If you were signing up into a website, HTML and CSS would display the log in form, python would validate the information then use it to create your profile and then write it to a SQlite database.

This could also just as easily be done with PHP, Laravel and MYSQL.

So there you have a very brief explanation of what Full Stack means. This is a question I see asked quite a lot by those starting out on their joinery of web development.

The other closely related question I see is Which should I learn first, Front-End or Back-End? For me this is an easy one to answer. I would say Front-End, especially if you have little or no experience of coding. Learning Front-End is easy to get started with and fun. It would be hard to get your head around the Back-End without some knowledge of the Front-End. You can always specialise after you have a good knowledge of both stacks.

How the web works

When you type in a URL(web address) into your browser your computer then sends this request as a packet, which includes the IP address of the website you want to visit. The IP address allows servers connected to the internet to identify the web site you’re looking for.

Your browser sends its request through wires or if you’re using your phone, through a satellite and then through wires. If you’re using a wireless network, your device will connect to your router which is wired to the internet. At a very basic level the internet is wires connecting computers with some sort of protocol. These wires are either copper or fibre optic.

Your ISP(internet service provider) will reroute the browsers request to the appropriate server location using the IP address as a guide. Once your request reaches the server, it can send back the website you asked for. However, a full website with content is too big to send as a single packet of data.

To solve this, the server sends back the website split up into many smaller packets of data. These packets come with instructions on how to get back to you and reassemble once they reach you. The packets don’t care how they reach you, just the final location. All these packets may take different paths to get to your computer or your cell phone or whatever browser you’re using. What they really care about is the fastest way to get back to your destination at your home IP address. Once they reach you they reassemble to display whatever page you requested. All of this moves at close to the speed of light. So it happens very fast.

And that is a higher level explanation of what happens when you input a URL into your browser.

HTML Headers

In this lecture we are going to look at header tags. You can use headers tags from <h1> to <h6>

They of course need to be closed like most other html tags <h1>This is a big header</h1>

Google will look at information contained in your header tags to which is uses to rank your page and display information in its search contents

 

<h1>This is a big header</h1>

This is a big header

 

<h2>This is quite a big header</h2>

This is quite a big header

<h3>This is an h3 header</h3>

This is an h3 header

 

<h4>This is an h4 header</h4>

This is an h4 header

 

<h5>This is an h5 header</h5>

This is an h5 header

 

<h6>This is an h6 header</h6>

This is an h6 header

Creating a full web page

To create an HTML document we create a file with an .html file extention. Then we edit it in a text editor.

Any text editor will do, even notepad but its best to use a web developer text editor such as Brackets (as used by Rob), Atom, Sublime or one of the many other options.

In this example we will start with the <html></html> tags

Most web developer text editors will add an additional close tag when you open one.

Remember, HTML uses tags that are opened <html> and closed </html>

It’s important to indent your code to make it easier to read.

Here is the code to our very basic first webpage

<html>

<head>

<title>My Webpage</title>

</head>

<body>

My first webpage!

</body>

</html>

Structure of a web page

We have tags that open and close, special tags are used to divide the page into sections called <div> tags. These are important.

HTML syntax – <html statement> text or info to display </html statement>

Example:<div>some text content</div>

HTML stands for hyper text markup language. It is a scripting language that tells a web browser to display a web page and the information on it. An HTML document has the file extention .html eg index.html

Point your browser at example.com. Then right click it (or any web page) and click view page source to view a web pages html code

HTML uses tags that are opened <html> and closed </html>

HTML web pages start with <!doctype html> — (which unsually doesnt have a closing tag)

Web pages are divided into sections – head – body. They start with <html> Then they have a <head> with <meta> tags and a <title> tag
Then they have a <body> tag

Sometimes css is found in the head enclosed in <style> tags but mostly css will be loaded from an external source. You can also use a <script> tag to execute some javascript code