¿What you should know about web sites?
General knowledge of how a website is accessed.
Hey, Bryan here! Welcome to my newsletter. Each week I publish content to help you get to the next level in your career. Here we talk about coding, from what a programming language is to how to become an outstanding tech lead. If you have questions, don’t agree with something, or just want to say “Hi!” don’t hesitate to send me a message ❤️
Can you make a website, but you don’t know how people around the world can access it? 🤔
Or maybe you haven’t had the chance to build a website from zero to shipping it to production? or maybe someone else it’s responsible for the configuration and deployment like a DevOps person.
If you are identified with the above comment or just want to know more, in this article we are going to learn all pieces involved with delivering a site when you access it from your browser, like google.com or facebook.com
Before we talk about how a website is shown, every website uses a client/server architecture where different clients like computers, smartphones, etc can communicate with servers and these are in charge to fulfill a user request, in our case, showing a website.
The key piece here is the communication between a client and a server, this is achieved by using certain communication protocols. The protocols more used in web development are:
HTTP/HTTPS: EVERY time you type a URL like google.com an HTTP request is made and usually the content that the server sends back it’s the index.html file stored in the server.
WebSockets: these are used for real-time communication. For instance, when you join Facebook live, everyone is connected to the same event and able to send and receive messages/reactions almost instantly.
RTMP (Real-Time Messaging Protocol): this one is used on sites like Twitch for streaming video content.
Now you know about the web architecture and the most used protocols for communication and we can dive into what you SHOULD know if you are a web developer.
So let’s answer some basic questions
How someone can access my website?
First, we as humans are better with letters & words than numbers. On the other hand, computers are better with numbers. For example, it’s easier to remember Facebook.com than their IP address 157.240.233.35
So, when someone Facebook.com there is a process that converts it into an IP address that let the client communicate with Facebook’s servers and eventually serves the site.
This process is made using DNS (Domain Name System). You can think of DNS as the old telephone directory or your contact list on your smartphone, where you look for someone’s name to make a call or send them a message.
Once the client has the site's IP address, there is a back and forth between the client & server to establish a connection.
Once the connection is made, the server sends the HTML and the browser it’s in charge of processing the HTML, CSS & JS to show the content on the screen.
Demystify domains
If you’re thinking of buying a domain, you should think primarily about two things, the site name and the TLD (top-level domain), for instance, a “.gov” if the site belongs to the government, there are other many TLDs for countries like “.us” or “.org”, the famous “.com”, etc.
google.com is the main domain where the name is google and the TLD is .com
Now, when we buy a domain we can register as many subdomains that points to different sites by using CNAME. For example, sites like drive.google.com and photos.google.com are subdomains for google.com
Where are the websites hosted?
If you’re looking for a place to host your site, you have many options, from hosting it on your computer (make sure to have a public IP address), using hosting services like GoDaddy or DreamHost, or more complex providers like AWS, Google Cloud, etc.
In the end, the decision is tight to your budget, what technologies you’re using, and other things like SLA (the promise of uptime for the servers).
What do we host?
Independently if you use a Library/Framework like React, Angular or even jQuery, in the end, what’s generated is HTML, CSS & JS along with other static files like images.
Bonus! 🎁
When you access a site for the first time, the DNS resolution is stored in different cache layers, so the next time you access the site, we resolve the IP address as soon as possible. These cache layers are:
Browser’s cache.
OS cache.
Your router’s cache.
There are other architectures besides client/server, for example, peer-to-peer that’s used in apps like BitTorrent
In the following article we are going to dive deep into different types of communication between clients and servers like:
HTTP Push and Pull
Ajax Polling
Long Polling
WebSockets
Server sent events
Message queues