Add alt attributes to all images

pull/3263/head
Kamran Ahmed 2 years ago
parent 52d00a0654
commit cb16abc8e1
  1. 6
      src/components/GuideHeader.astro
  2. 6
      src/components/VideoHeader.astro
  3. 2
      src/guides/asymptotic-notation.md
  4. 2
      src/guides/avoid-render-blocking-javascript-with-async-defer.md
  5. 2
      src/guides/basic-authentication.md
  6. 2
      src/guides/big-o-notation.md
  7. 2
      src/guides/character-encodings.md
  8. 2
      src/guides/ci-cd.md
  9. 2
      src/guides/dhcp-in-one-picture.md
  10. 2
      src/guides/dns-in-one-picture.md
  11. 4
      src/guides/http-basic-authentication.md
  12. 35
      src/guides/http-caching.md
  13. 12
      src/guides/journey-to-http2.md
  14. 2
      src/guides/jwt-authentication.md
  15. 2
      src/guides/oauth.md
  16. 2
      src/guides/random-numbers.md
  17. 2
      src/guides/scaling-databases.md
  18. 2
      src/guides/session-authentication.md
  19. 2
      src/guides/ssl-tls-https-ssh.md
  20. 2
      src/guides/sso.md
  21. 2
      src/guides/token-authentication.md
  22. 2
      src/guides/unfamiliar-codebase.md
  23. 2
      src/guides/what-are-web-vitals.md
  24. 2
      src/guides/what-is-sli-slo-sla.md

@ -20,7 +20,11 @@ const { author } = frontmatter;
target='_blank' target='_blank'
class='font-medium hover:text-gray-600 inline-flex items-center hover:underline' class='font-medium hover:text-gray-600 inline-flex items-center hover:underline'
> >
<img src={author.imageUrl} class='w-5 h-5 inline mr-2 rounded-full' /> <img
alt={author.name}
src={author.imageUrl}
class='w-5 h-5 inline mr-2 rounded-full'
/>
{author.name} {author.name}
</a> </a>
<span class='mx-1.5'>&middot;</span> <span class='mx-1.5'>&middot;</span>

@ -20,7 +20,11 @@ const { author } = frontmatter;
target='_blank' target='_blank'
class='font-medium hover:text-gray-600 inline-flex items-center hover:underline' class='font-medium hover:text-gray-600 inline-flex items-center hover:underline'
> >
<img src={author.imageUrl} class='w-5 h-5 inline mr-2 rounded-full' /> <img
alt={author.name}
src={author.imageUrl}
class='w-5 h-5 inline mr-2 rounded-full'
/>
{author.name} {author.name}
</a> </a>
<span class='mx-1.5'>&middot;</span> <span class='mx-1.5'>&middot;</span>

@ -22,5 +22,5 @@ tags:
Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation). Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation).
[![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png) [![Asymptotic Notation](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png) [![Avoid Render Blocking with Async and Defer](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/basic-authentication.png)](/guides/basic-authentication.png) [![Basic Authentication](/guides/basic-authentication.png)](/guides/basic-authentication.png)

@ -22,5 +22,5 @@ tags:
Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology.
[![](/guides/big-o-notation.png)](/guides/big-o-notation.png) [![Big-O Notation](/guides/big-o-notation.png)](/guides/big-o-notation.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/character-encodings.png)](/guides/character-encodings.png) [![Character Encodings](/guides/character-encodings.png)](/guides/character-encodings.png)

@ -22,5 +22,5 @@ tags:
The image below details the differences between the continuous integration and continuous delivery. Also, here is the [accompanying video on implementing that with GitHub actions](https://www.youtube.com/watch?v=nyKZTKQS_EQ). The image below details the differences between the continuous integration and continuous delivery. Also, here is the [accompanying video on implementing that with GitHub actions](https://www.youtube.com/watch?v=nyKZTKQS_EQ).
[![](/guides/ci-cd.png)](/guides/ci-cd.png) [![CI vs CD](/guides/ci-cd.png)](/guides/ci-cd.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/dhcp.png)](/guides/dhcp.png) [![DHCP in One Picture](/guides/dhcp.png)](/guides/dhcp.png)

@ -24,4 +24,4 @@ DNS or Domain Name System is one of the fundamental blocks of the internet. As a
DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet. DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.
[![](https://i.imgur.com/z9rwm5A.png)](https://i.imgur.com/z9rwm5A.png) [![DNS in One Picture](https://i.imgur.com/z9rwm5A.png)](https://i.imgur.com/z9rwm5A.png)

@ -31,7 +31,7 @@ Given the name "Basic Authentication", you should not confuse Basic Authenticati
Because it is a part of the HTTP specifications, all the browsers have native support for "HTTP Basic Authentication". Given below is the screenshot from the implementation in Google Chrome. Because it is a part of the HTTP specifications, all the browsers have native support for "HTTP Basic Authentication". Given below is the screenshot from the implementation in Google Chrome.
![](/guides/basic-authentication/chrome-basic-auth.png) ![Chrome Basic Authentication](/guides/basic-authentication/chrome-basic-auth.png)
## How does it Work? ## How does it Work?
@ -52,7 +52,7 @@ The browser might use Realm to cache the credential. In the future, when there i
## Step 2 ## Step 2
Upon receiving the response from the server, the browser will notice the `WWW-Authenticate` header and will show the authentication popup. Upon receiving the response from the server, the browser will notice the `WWW-Authenticate` header and will show the authentication popup.
![](/guides/basic-authentication/chrome-basic-auth.png) ![Chrome Basic Authentication](/guides/basic-authentication/chrome-basic-auth.png)
## Step 3 ## Step 3
After the user submits the credentials through this authentication popup, the browser will automatically encode the credentials using the `base64` encoding and send them in the `Authorization` header of the same request. After the user submits the credentials through this authentication popup, the browser will automatically encode the credentials using the `base64` encoding and send them in the `Authorization` header of the same request.

@ -39,7 +39,7 @@ Before we get into further details, let me give you an overview of the terms tha
- **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire - **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
- **Cache Invalidation** is the process of removing any stale content available in the cache - **Cache Invalidation** is the process of removing any stale content available in the cache
![](https://i.imgur.com/9MjlzvW.png) ![Web Cache](https://i.imgur.com/9MjlzvW.png)
### Caching Locations ### Caching Locations
@ -75,21 +75,30 @@ Although you can control the reverse proxy caches (since it is implemented by yo
So, how do we control the web cache? Whenever the server emits some response, it is accompanied by some HTTP headers to guide the caches on whether and how to cache this response. The content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content. So, how do we control the web cache? Whenever the server emits some response, it is accompanied by some HTTP headers to guide the caches on whether and how to cache this response. The content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
- [Expires](#expires) - [Introduction](#introduction)
- [Pragma](#pragma) - [Caching Locations](#caching-locations)
- [Cache-Control](#cache-control) - [Browser Cache](#browser-cache)
- [private](#private) - [Proxy Cache](#proxy-cache)
- [public](#public) - [Reverse Proxy Cache](#reverse-proxy-cache)
- [no-store](#no-store) - [Caching Headers](#caching-headers)
- [no-cache](#no-cache) - [Expires](#expires)
- [max-age: seconds](#max-age) - [Pragma](#pragma)
- [s-maxage: seconds](#s-maxage) - [Cache-Control](#cache-control)
- [must-revalidate](#must-revalidate) - [private](#private)
- [proxy-revalidate](#proxy-revalidate) - [public](#public)
- [Mixing Values](#mixing-values) - [no-store](#no-store)
- [no-cache](#no-cache)
- [max-age: seconds](#max-age-seconds)
- [s-maxage: seconds](#s-maxage-seconds)
- [must-revalidate](#must-revalidate)
- [proxy-revalidate](#proxy-revalidate)
- [Mixing Values](#mixing-values)
- [Validators](#validators) - [Validators](#validators)
- [ETag](#etag) - [ETag](#etag)
- [Last-Modified](#last-modified) - [Last-Modified](#last-modified)
- [Where do I start?](#where-do-i-start)
- [Utilizing Server](#utilizing-server)
- [Caching Recommendations](#caching-recommendations)
#### Expires #### Expires

@ -95,7 +95,7 @@ Three-way handshake in its simplest form is that all the `TCP` connections begin
Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be received in order to fulfill the request. Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be received in order to fulfill the request.
![](http://i.imgur.com/uERG2G2.png) ![Three-way Handshake](https://i.imgur.com/uERG2G2.png)
> Please note that there is a minor issue with the image, the last `ACK` packet sent by the client to end the handshake contains only `y+1` i.e. it should have been `ACK:y+1` instead of `ACK: x+1, y+1` > Please note that there is a minor issue with the image, the last `ACK` packet sent by the client to end the handshake contains only `y+1` i.e. it should have been `ACK:y+1` instead of `ACK: x+1, y+1`
@ -131,7 +131,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
- New status codes - New status codes
- ..and more - ..and more
I am not going to dwell about all the `HTTP/1.1` features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is [Key differences between `HTTP/1.0` and HTTP/1.1](http://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers. I am not going to dwell about all the `HTTP/1.1` features in this post as it is a topic in itself and you can already find a lot about it. The one such document that I would recommend you to read is [Key differences between `HTTP/1.0` and HTTP/1.1](https://www.ra.ethz.ch/cdstore/www8/data/2136/pdf/pd1.pdf) and here is the link to [original RFC](https://tools.ietf.org/html/rfc2616) for the overachievers.
`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humongous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc. `HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humongous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
@ -162,7 +162,7 @@ By now, you must be convinced that why we needed another revision of the HTTP pr
- Request Prioritization - Request Prioritization
- Security - Security
![](http://i.imgur.com/S85j8gg.png) ![HTTP Model](https://i.imgur.com/S85j8gg.png)
#### 1. Binary Protocol #### 1. Binary Protocol
@ -187,7 +187,7 @@ Since `HTTP/2` is now a binary protocol and as I said above that it uses frames
It was part of a separate RFC which was specifically aimed at optimizing the sent headers. The essence of it is that when we are constantly accessing the server from a same client there is alot of redundant data that we are sending in the headers over and over, and sometimes there might be cookies increasing the headers size which results in bandwidth usage and increased latency. To overcome this, `HTTP/2` introduced header compression. It was part of a separate RFC which was specifically aimed at optimizing the sent headers. The essence of it is that when we are constantly accessing the server from a same client there is alot of redundant data that we are sending in the headers over and over, and sometimes there might be cookies increasing the headers size which results in bandwidth usage and increased latency. To overcome this, `HTTP/2` introduced header compression.
![](http://i.imgur.com/3IPWXvR.png) ![Header Compression](https://i.imgur.com/3IPWXvR.png)
Unlike request and response, headers are not compressed in `gzip` or `compress` etc formats but there is a different mechanism in place for header compression which is literal values are encoded using Huffman code and a headers table is maintained by the client and server and both the client and server omit any repetitive headers (e.g. user agent etc) in the subsequent requests and reference them using the headers table maintained by both. Unlike request and response, headers are not compressed in `gzip` or `compress` etc formats but there is a different mechanism in place for header compression which is literal values are encoded using Huffman code and a headers table is maintained by the client and server and both the client and server omit any repetitive headers (e.g. user agent etc) in the subsequent requests and reference them using the headers table maintained by both.
@ -210,8 +210,8 @@ Without any priority information, server processes the requests asynchronously i
There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirements i.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum key sizes, ephemeral keys are required etc. There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirements i.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum key sizes, ephemeral keys are required etc.
`HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. `HTTP/2` is here and it has already [surpassed SPDY in adaption](https://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it.
For anyone interested in further details here is the [link to specs](https:/http2.github.iohttp2-spec) and a link [demonstrating the performance benefits of `HTTP/2`](http://www.http2demo.io/). For anyone interested in further details here is the [link to specs](https:/http2.github.iohttp2-spec) and a link [demonstrating the performance benefits of `HTTP/2`](https://www.http2demo.io/).
And that about wraps it up. Until next time! stay tuned. And that about wraps it up. Until next time! stay tuned.

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png) [![JWT Authentication](/guides/jwt-authentication.png)](/guides/jwt-authentication.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/oauth.png)](/guides/oauth.png) [![OAuth - Open Authorization](/guides/oauth.png)](/guides/oauth.png)

@ -22,5 +22,5 @@ tags:
Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random. Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random.
[![](/guides/random-numbers.png)](/guides/random-numbers.png) [![Random Numbers](/guides/random-numbers.png)](/guides/random-numbers.png)

@ -22,5 +22,5 @@ tags:
The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load. The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load.
[![](/guides/scaling-databases.svg)](/guides/scaling-databases.svg) [![Scaling Databases](/guides/scaling-databases.svg)](/guides/scaling-databases.svg)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/session-authentication.png)](/guides/session-authentication.png) [![Session Authentication](/guides/session-authentication.png)](/guides/session-authentication.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png) [![SSL vs TLS vs HTTPs vs SSH](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/sso.png)](/guides/sso.png) [![SSO](/guides/sso.png)](/guides/sso.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/token-authentication.png)](/guides/token-authentication.png) [![Token based Authentication](/guides/token-authentication.png)](/guides/token-authentication.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png) [![Unfamiliar Codebase](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/web-vitals.png)](/guides/web-vitals.png) [![Web Vitals](/guides/web-vitals.png)](/guides/web-vitals.png)

@ -20,5 +20,5 @@ tags:
- "guide-sitemap" - "guide-sitemap"
--- ---
[![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg) [![SLI vs SLO vs SLA](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg)

Loading…
Cancel
Save