diff --git a/bin/guide-migrator.cjs b/bin/guide-migrator.cjs new file mode 100644 index 000000000..32b2d913e --- /dev/null +++ b/bin/guide-migrator.cjs @@ -0,0 +1,83 @@ +const fs = require('fs'); +const path = require('path'); +const yaml = require('json-to-pretty-yaml'); + +const contentDirPath = path.join(__dirname, './developer-roadmap/content'); +const guides = require('./developer-roadmap/content/guides.json'); +const authors = require('./developer-roadmap/content/authors.json'); + +const guideImagesDirPath = path.join(__dirname, './developer-roadmap/public/guides'); +const newGuideImagesDirPath = path.join(__dirname, '../public/guides'); + +// Remove the guide images directory +if (fs.existsSync(newGuideImagesDirPath)) { + fs.rmSync(newGuideImagesDirPath, { recursive: true }); +} + +fs.cpSync(guideImagesDirPath, newGuideImagesDirPath, { recursive: true }); + +// Remove the old guides directory +const newGuidesDirPath = path.join(__dirname, '../src/guides'); +if (fs.existsSync(newGuidesDirPath)) { + fs.rmSync(newGuidesDirPath, { recursive: true }); +} + +fs.mkdirSync(newGuidesDirPath); + +guides.forEach((guide) => { + const { id: guideId } = guide; + + const originalGuidePath = path.join(contentDirPath, 'guides', `${guideId}.md`); + const newGuidePath = path.join(__dirname, `../src/guides/${guideId}.md`); + + const guideWithoutFrontmatter = fs.readFileSync(originalGuidePath, 'utf8'); + fs.copyFileSync(originalGuidePath, newGuidePath); + + const guideAuthor = authors.find((author) => author.username === guide.authorUsername); + + const guideFrontMatter = yaml + .stringify({ + title: guide.title, + description: guide.description, + author: { + name: guideAuthor.name, + url: `https://twitter.com/${guideAuthor.twitter}`, + imageUrl: `${guideAuthor.picture}`, + }, + seo: { + title: `${guide.title} - roadmap.sh`, + description: guide.description, + }, + isNew: guide.isNew, + type: guide.type, + date: guide.createdAt.replace(/T.*/, ''), + sitemap: { + priority: 0.7, + changefreq: 'weekly', + }, + tags: ['guide', `${guide.type}-guide`, `guide-sitemap`], + }) + .replace(/date: "(.+?)"/, 'date: $1'); + + const guideWithUpdatedUrls = guideWithoutFrontmatter + .replace(/\[\!\[\]\((.+?\.png)\)\]\((.+?\.png)\)/g, '[![]($1)]($2)') + .replace(/\[\!\[\]\((.+?\.svg)\)\]\((.+?\.svg)\)/g, '[![]($1)]($2)') + .replace(/\/http/g, 'http') + .replace(/]\(\/guides\/(.+?)\.png\)/g, '](/guides/$1.png)') + .replace(/'); + + const guideWithFrontmatter = `---\n${guideFrontMatter}---\n\n${guideWithUpdatedUrls}`; + + console.log(`Writing guide ${guideId} to disk`); + fs.writeFileSync(newGuidePath, guideWithFrontmatter); +}); + +const oldAuthorAssetsPath = path.join(__dirname, 'developer-roadmap/public/authors'); +const newAuthorAssetsPath = path.join(__dirname, '../public/authors'); + +if (fs.existsSync(newAuthorAssetsPath)) { + fs.rmSync(newAuthorAssetsPath, { recursive: true }); +} + +fs.cpSync(oldAuthorAssetsPath, newAuthorAssetsPath, { recursive: true }); diff --git a/bin/sync-content.sh b/bin/sync-content.sh index c3153c0fe..ee35af3fd 100644 --- a/bin/sync-content.sh +++ b/bin/sync-content.sh @@ -24,7 +24,7 @@ echo "=== Migrating Content ===" node content-migrator.cjs echo "=== Migrating Guides ===" -# node guide-migrator.cjs +node guide-migrator.cjs echo "=== Migrating Videos ===" # node video-migrator.cjs diff --git a/public/authors/danielgruesso.jpeg b/public/authors/danielgruesso.jpeg new file mode 100644 index 000000000..038f8d4d9 Binary files /dev/null and b/public/authors/danielgruesso.jpeg differ diff --git a/public/authors/dmytrobol.png b/public/authors/dmytrobol.png new file mode 100644 index 000000000..5bdc96cb8 Binary files /dev/null and b/public/authors/dmytrobol.png differ diff --git a/public/authors/ebrahimbharmal007.png b/public/authors/ebrahimbharmal007.png new file mode 100644 index 000000000..148e9f2be Binary files /dev/null and b/public/authors/ebrahimbharmal007.png differ diff --git a/public/authors/jesse.png b/public/authors/jesse.png new file mode 100644 index 000000000..a02fc7972 Binary files /dev/null and b/public/authors/jesse.png differ diff --git a/public/authors/kamran.jpeg b/public/authors/kamran.jpeg new file mode 100644 index 000000000..a69fbeb89 Binary files /dev/null and b/public/authors/kamran.jpeg differ diff --git a/public/authors/kamranahmedse.jpeg b/public/authors/kamranahmedse.jpeg new file mode 100644 index 000000000..5c743b583 Binary files /dev/null and b/public/authors/kamranahmedse.jpeg differ diff --git a/public/authors/lesovsky.jpeg b/public/authors/lesovsky.jpeg new file mode 100644 index 000000000..c62c8b458 Binary files /dev/null and b/public/authors/lesovsky.jpeg differ diff --git a/public/authors/spekulatius.jpg b/public/authors/spekulatius.jpg new file mode 100644 index 000000000..9061fe242 Binary files /dev/null and b/public/authors/spekulatius.jpg differ diff --git a/public/guides/asymptotic-notation.png b/public/guides/asymptotic-notation.png new file mode 100644 index 000000000..8e7f17e53 Binary files /dev/null and b/public/guides/asymptotic-notation.png differ diff --git a/public/guides/avoid-render-blocking-javascript-with-async-defer.png b/public/guides/avoid-render-blocking-javascript-with-async-defer.png new file mode 100644 index 000000000..92354dd55 Binary files /dev/null and b/public/guides/avoid-render-blocking-javascript-with-async-defer.png differ diff --git a/public/guides/bash-vs-shell.jpeg b/public/guides/bash-vs-shell.jpeg new file mode 100644 index 000000000..b5ea28aef Binary files /dev/null and b/public/guides/bash-vs-shell.jpeg differ diff --git a/public/guides/basic-authentication.png b/public/guides/basic-authentication.png new file mode 100644 index 000000000..7b8992571 Binary files /dev/null and b/public/guides/basic-authentication.png differ diff --git a/public/guides/basic-authentication/chrome-basic-auth.png b/public/guides/basic-authentication/chrome-basic-auth.png new file mode 100644 index 000000000..22f73f93e Binary files /dev/null and b/public/guides/basic-authentication/chrome-basic-auth.png differ diff --git a/public/guides/basic-authentication/safari-basic-auth.png b/public/guides/basic-authentication/safari-basic-auth.png new file mode 100644 index 000000000..c3b04523d Binary files /dev/null and b/public/guides/basic-authentication/safari-basic-auth.png differ diff --git a/public/guides/big-o-notation.png b/public/guides/big-o-notation.png new file mode 100644 index 000000000..1afe6efca Binary files /dev/null and b/public/guides/big-o-notation.png differ diff --git a/public/guides/character-encodings.png b/public/guides/character-encodings.png new file mode 100644 index 000000000..961c4f085 Binary files /dev/null and b/public/guides/character-encodings.png differ diff --git a/public/guides/ci-cd.png b/public/guides/ci-cd.png new file mode 100644 index 000000000..ded525fae Binary files /dev/null and b/public/guides/ci-cd.png differ diff --git a/public/guides/dhcp.png b/public/guides/dhcp.png new file mode 100644 index 000000000..360c8a9cc Binary files /dev/null and b/public/guides/dhcp.png differ diff --git a/public/guides/jwt-authentication.png b/public/guides/jwt-authentication.png new file mode 100644 index 000000000..0e015e887 Binary files /dev/null and b/public/guides/jwt-authentication.png differ diff --git a/public/guides/oauth.png b/public/guides/oauth.png new file mode 100644 index 000000000..591fbf179 Binary files /dev/null and b/public/guides/oauth.png differ diff --git a/public/guides/project-history.png b/public/guides/project-history.png new file mode 100644 index 000000000..7ea6f87a0 Binary files /dev/null and b/public/guides/project-history.png differ diff --git a/public/guides/proxy/forward-proxy.png b/public/guides/proxy/forward-proxy.png new file mode 100644 index 000000000..f68a56e09 Binary files /dev/null and b/public/guides/proxy/forward-proxy.png differ diff --git a/public/guides/proxy/proxy-example.png b/public/guides/proxy/proxy-example.png new file mode 100644 index 000000000..11cf6edf4 Binary files /dev/null and b/public/guides/proxy/proxy-example.png differ diff --git a/public/guides/proxy/reverse-proxy.png b/public/guides/proxy/reverse-proxy.png new file mode 100644 index 000000000..95a0be4db Binary files /dev/null and b/public/guides/proxy/reverse-proxy.png differ diff --git a/public/guides/random-numbers.png b/public/guides/random-numbers.png new file mode 100644 index 000000000..7a41a271e Binary files /dev/null and b/public/guides/random-numbers.png differ diff --git a/public/guides/scaling-databases.svg b/public/guides/scaling-databases.svg new file mode 100644 index 000000000..855105dc9 --- /dev/null +++ b/public/guides/scaling-databases.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/guides/session-authentication.png b/public/guides/session-authentication.png new file mode 100644 index 000000000..d35178077 Binary files /dev/null and b/public/guides/session-authentication.png differ diff --git a/public/guides/sli-slo-sla.jpeg b/public/guides/sli-slo-sla.jpeg new file mode 100644 index 000000000..0eec28167 Binary files /dev/null and b/public/guides/sli-slo-sla.jpeg differ diff --git a/public/guides/ssl-tls-https-ssh.png b/public/guides/ssl-tls-https-ssh.png new file mode 100644 index 000000000..4e997016c Binary files /dev/null and b/public/guides/ssl-tls-https-ssh.png differ diff --git a/public/guides/sso.png b/public/guides/sso.png new file mode 100644 index 000000000..a5ef85f4f Binary files /dev/null and b/public/guides/sso.png differ diff --git a/public/guides/token-authentication.png b/public/guides/token-authentication.png new file mode 100644 index 000000000..40eb86755 Binary files /dev/null and b/public/guides/token-authentication.png differ diff --git a/public/guides/torrent-client/address.png b/public/guides/torrent-client/address.png new file mode 100644 index 000000000..0a11fa5fc Binary files /dev/null and b/public/guides/torrent-client/address.png differ diff --git a/public/guides/torrent-client/bitfield.png b/public/guides/torrent-client/bitfield.png new file mode 100644 index 000000000..cd4384281 Binary files /dev/null and b/public/guides/torrent-client/bitfield.png differ diff --git a/public/guides/torrent-client/choke.png b/public/guides/torrent-client/choke.png new file mode 100644 index 000000000..3c6d374e9 Binary files /dev/null and b/public/guides/torrent-client/choke.png differ diff --git a/public/guides/torrent-client/client-server-p2p.png b/public/guides/torrent-client/client-server-p2p.png new file mode 100644 index 000000000..a119bff9d Binary files /dev/null and b/public/guides/torrent-client/client-server-p2p.png differ diff --git a/public/guides/torrent-client/download.png b/public/guides/torrent-client/download.png new file mode 100644 index 000000000..c5a8f86d0 Binary files /dev/null and b/public/guides/torrent-client/download.png differ diff --git a/public/guides/torrent-client/handshake.png b/public/guides/torrent-client/handshake.png new file mode 100644 index 000000000..262da0d9a Binary files /dev/null and b/public/guides/torrent-client/handshake.png differ diff --git a/public/guides/torrent-client/info-hash-peer-id.png b/public/guides/torrent-client/info-hash-peer-id.png new file mode 100644 index 000000000..ad343bde3 Binary files /dev/null and b/public/guides/torrent-client/info-hash-peer-id.png differ diff --git a/public/guides/torrent-client/info-hash.png b/public/guides/torrent-client/info-hash.png new file mode 100644 index 000000000..1afeda969 Binary files /dev/null and b/public/guides/torrent-client/info-hash.png differ diff --git a/public/guides/torrent-client/message.png b/public/guides/torrent-client/message.png new file mode 100644 index 000000000..b70155a7c Binary files /dev/null and b/public/guides/torrent-client/message.png differ diff --git a/public/guides/torrent-client/pieces.png b/public/guides/torrent-client/pieces.png new file mode 100644 index 000000000..efd22f321 Binary files /dev/null and b/public/guides/torrent-client/pieces.png differ diff --git a/public/guides/torrent-client/pipelining.png b/public/guides/torrent-client/pipelining.png new file mode 100644 index 000000000..bdfc029be Binary files /dev/null and b/public/guides/torrent-client/pipelining.png differ diff --git a/public/guides/torrent-client/trackers.png b/public/guides/torrent-client/trackers.png new file mode 100644 index 000000000..8bbd6a84c Binary files /dev/null and b/public/guides/torrent-client/trackers.png differ diff --git a/public/guides/unfamiliar-codebase.png b/public/guides/unfamiliar-codebase.png new file mode 100644 index 000000000..12e704966 Binary files /dev/null and b/public/guides/unfamiliar-codebase.png differ diff --git a/public/guides/web-vitals.png b/public/guides/web-vitals.png new file mode 100644 index 000000000..a50f7db40 Binary files /dev/null and b/public/guides/web-vitals.png differ diff --git a/src/guides/asymptotic-notation.md b/src/guides/asymptotic-notation.md new file mode 100644 index 000000000..20db33e39 --- /dev/null +++ b/src/guides/asymptotic-notation.md @@ -0,0 +1,26 @@ +--- +title: "Asymptotic Notation" +description: "Learn the basics of measuring the time and space complexity of algorithms" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Asymptotic Notation - roadmap.sh" + description: "Learn the basics of measuring the time and space complexity of algorithms" +isNew: false +type: "visual" +date: 2021-04-03 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +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) + diff --git a/src/guides/avoid-render-blocking-javascript-with-async-defer.md b/src/guides/avoid-render-blocking-javascript-with-async-defer.md new file mode 100644 index 000000000..d1078f907 --- /dev/null +++ b/src/guides/avoid-render-blocking-javascript-with-async-defer.md @@ -0,0 +1,24 @@ +--- +title: "Async and Defer Script Loading" +description: "Learn how to avoid render blocking JavaScript using async and defer scripts." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Async and Defer Script Loading - roadmap.sh" + description: "Learn how to avoid render blocking JavaScript using async and defer scripts." +isNew: false +type: "visual" +date: 2021-09-10 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png) + diff --git a/src/guides/basic-authentication.md b/src/guides/basic-authentication.md new file mode 100644 index 000000000..4f35d5bc5 --- /dev/null +++ b/src/guides/basic-authentication.md @@ -0,0 +1,24 @@ +--- +title: "Basic Authentication" +description: "Understand what is basic authentication and how it is implemented" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Basic Authentication - roadmap.sh" + description: "Understand what is basic authentication and how it is implemented" +isNew: false +type: "visual" +date: 2021-05-19 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/basic-authentication.png)](/guides/basic-authentication.png) + diff --git a/src/guides/basics-of-authentication.md b/src/guides/basics-of-authentication.md new file mode 100644 index 000000000..244dcff81 --- /dev/null +++ b/src/guides/basics-of-authentication.md @@ -0,0 +1,105 @@ +--- +title: "Basics of Authentication" +description: "Learn the basics of Authentication and Authorization" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Basics of Authentication - roadmap.sh" + description: "Learn the basics of Authentication and Authorization" +isNew: false +type: "textual" +date: 2022-09-21 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +Our last video series was about data structures. We looked at the most common data structures, their use cases, pros and cons, and the different operations you could perform on each data structure. + +Today, we are kicking off a similar series for Authentication strategies where we will discuss everything you need to know about authentication and authentication strategies. + +In this guide today will be talking about what authentication is, and we will cover some terminology that will help us later in the series. You can watch the video below or continue reading this guide. + + + +## What is Authentication? + +Authentication is the process of verifying someone's identity. A real-world example of that would be when you board a plane, the airline worker checks your passport to verify your identity, so the airport worker authenticates you. + +If we talk about computers, when you log in to any website, you usually authenticate yourself by entering your username and password, which is then checked by the website to ensure that you are who you claim to be. There are two things you should keep in mind: + +- Authentication is not only for the persons +- And username and password are not the only way to authenticate. + +Some other examples are: + +- When you open a website in the browser. If the website uses HTTP, TLS is used to authenticate the server and avoid the fake loading of websites. + +- There might be server-to-server communication on the website. The server may need to authenticate the incoming request to avoid malicious usage. + +## How does Authentication Work? + +On a high level, we have the following factors used for authentication. + +- **Username and Password** +- **Security Codes, Pin Codes, or Security Questions** — An example would be the pin code you enter at an ATM to withdraw cash. +- **Hard Tokens and Soft Tokens** — Hard tokens are the special hardware devices that you attach to your device to authenticate yourself. Soft tokens, unlike hard tokens, don't have any authentication-specific device; we must verify the possession of a device that was used to set up the identity. For example, you may receive an OTP to log in to your account on a website. +- **Biometric Authentication** — In biometric authentication, we authenticate using biometrics such as iris, facial, or voice recognition. + +We can categorize the factors above into three different types. + +- Username / Password and Security codes rely on the person's knowledge: we can group them under the **Knowledge Factor**. + +- In hard and soft tokens, we authenticate by checking the possession of hardware, so this would be a **Possession Factor**. + +- And in biometrics, we test the person's inherent qualities, i.e., iris, face, or voice, so this would be a **Qualities** factor. + +This brings us to our next topic: Multi-factor Authentication and Two-Factor Authentication. + +## Multifactor Authentication + +Multifactor authentication is the type of authentication in which we rely on more than one factor to authenticate a user. + +For example, if we pick up username/password from the **knowledge factor**. And we pick soft tokens from the **possession factor**, and we say that for a user to authenticate, they must enter their credentials and an OTP, which will be sent to their mobile phone, so this would be an example of multifactor authentication. + +In multifactor authentication, since we rely on more than one factor, this way of authentication is much more secure than single-factor authentication. + +One important thing to note here is that the factors you pick for authentication, they must differ. So, for example, if we pick up a username/password and security question or security codes, it is still not true multifactor authentication because we still rely on the knowledge factor. The factors have to be different from each other. + +### Two-Factor Authentication + +Two-factor authentication is similar to multifactor authentication. The only difference is that there are precisely two factors in 2FA. In MFA, we can have 2, 3, 4, or any authentication factors; 2FA has exactly two factors. We can say that 2FA is always MFA, because there are more than one factors. MFA is not always 2FA because there may be more than two factors involved. + +Next we have the difference between authentication and authorization. This comes up a lot in the interviews, and beginners often confuse them. + +### What is Authentication +Authentication is the process of verifying the identity. For example, when you enter your credentials at a login screen, the application here identifies you through your credentials. So this is what the authentication is, the process of verifying the identity. + +In case of an authentication failure, for example, if you enter an invalid username and password, the HTTP response code is "Unauthorized" 401. + +### What is Authorization + +Authorization is the process of checking permission. Once the user has logged in, i.e., the user has been authenticated, the process of reviewing the permission to see if the user can perform the relevant operation or not is called authorization. + +And in case of authorization failure, i.e., if the user tries to perform an operation they are not allowed to perform, the HTTP response code is forbidden 403. + +## Authentication Strategies + +Given below is the list of common authentication strategies: + +- Basics of Authentication +- Session Based Authentication +- Token-Based Authentication +- JWT Authentication +- OAuth - Open Authorization +- Single Sign On (SSO) + +In this series of illustrated videos and textual guides, we will be going through each of the strategies discussing what they are, how they are implemented, the pros and cons and so on. + +So stay tuned, and I will see you in the next one. diff --git a/src/guides/big-o-notation.md b/src/guides/big-o-notation.md new file mode 100644 index 000000000..ee704e732 --- /dev/null +++ b/src/guides/big-o-notation.md @@ -0,0 +1,26 @@ +--- +title: "Big-O Notation" +description: "Easy to understand explanation of Big-O notation without any fancy terms" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Big-O Notation - roadmap.sh" + description: "Easy to understand explanation of Big-O notation without any fancy terms" +isNew: false +type: "visual" +date: 2021-03-15 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +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) + diff --git a/src/guides/character-encodings.md b/src/guides/character-encodings.md new file mode 100644 index 000000000..98046473a --- /dev/null +++ b/src/guides/character-encodings.md @@ -0,0 +1,24 @@ +--- +title: "Character Encodings" +description: "Covers the basics of character encodings and explains ASCII vs Unicode" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Character Encodings - roadmap.sh" + description: "Covers the basics of character encodings and explains ASCII vs Unicode" +isNew: false +type: "visual" +date: 2021-05-14 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/character-encodings.png)](/guides/character-encodings.png) + diff --git a/src/guides/ci-cd.md b/src/guides/ci-cd.md new file mode 100644 index 000000000..fcf7b3d94 --- /dev/null +++ b/src/guides/ci-cd.md @@ -0,0 +1,26 @@ +--- +title: "What is CI and CD?" +description: "Learn the basics of CI/CD and how to implement that with GitHub Actions." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "What is CI and CD? - roadmap.sh" + description: "Learn the basics of CI/CD and how to implement that with GitHub Actions." +isNew: false +type: "visual" +date: 2021-07-09 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +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) + diff --git a/src/guides/design-patterns-for-humans.md b/src/guides/design-patterns-for-humans.md new file mode 100644 index 000000000..2e2cbd2c7 --- /dev/null +++ b/src/guides/design-patterns-for-humans.md @@ -0,0 +1,2291 @@ +--- +title: "Design Patterns for Humans" +description: "A language agnostic, ultra-simplified explanation to design patterns" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Design Patterns for Humans - roadmap.sh" + description: "A language agnostic, ultra-simplified explanation to design patterns" +isNew: false +type: "textual" +date: 2019-01-23 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +Design patterns are solutions to recurring problems; **guidelines on how to tackle certain problems**. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations. + +> Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems + +Wikipedia describes them as + +> In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. + +## Be Careful + +Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns. + +- Design patterns are not a silver bullet to all your problems. +- Do not try to force them; bad things are supposed to happen, if done so. +- Keep in mind that design patterns are solutions **to** problems, not solutions **finding** problems; so don't overthink. +- If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code. + +> Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways. + +## Types of Design Patterns + +This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of [the book which introduced these design patterns](https://en.wikipedia.org/wiki/Design_Patterns). There are three types of design patterns: + +* [Creational](#creational-design-patterns) +* [Structural](#structural-design-patterns) +* [Behavioral](#behavioral-design-patterns) + +## Creational Design Patterns + +In plain words +> Creational patterns are focused towards how to instantiate an object or group of related objects. + +Wikipedia says +> In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation. + +There are 6 types of Creational patterns + + * [Simple Factory](#-simple-factory) + * [Factory Method](#-factory-method) + * [Abstract Factory](#-abstract-factory) + * [Builder](#-builder) + * [Prototype](#-prototype) + * [Singleton](#-singleton) + +🏠 Simple Factory +-------------- +Real world example +> Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it. + +In plain words +> Simple factory simply generates an instance for client without exposing any instantiation logic to the client + +Wikipedia says +> In object-oriented programming (OOP), a factory is an object for creating other objects – formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new". + +**Programmatic Example** + +First of all we have a door interface and the implementation +```php +interface Door +{ + public function getWidth(): float; + public function getHeight(): float; +} + +class WoodenDoor implements Door +{ + protected $width; + protected $height; + + public function __construct(float $width, float $height) + { + $this->width = $width; + $this->height = $height; + } + + public function getWidth(): float + { + return $this->width; + } + + public function getHeight(): float + { + return $this->height; + } +} +``` +Then we have our door factory that makes the door and returns it +```php +class DoorFactory +{ + public static function makeDoor($width, $height): Door + { + return new WoodenDoor($width, $height); + } +} +``` +And then it can be used as +```php +// Make me a door of 100x200 +$door = DoorFactory::makeDoor(100, 200); + +echo 'Width: ' . $door->getWidth(); +echo 'Height: ' . $door->getHeight(); + +// Make me a door of 50x100 +$door2 = DoorFactory::makeDoor(50, 100); +``` + +**When to Use?** + +When creating an object is not just a few assignments and involves some logic, it makes sense to put it in a dedicated factory instead of repeating the same code everywhere. + +🏭 Factory Method +-------------- + +Real world example +> Consider the case of a hiring manager. It is impossible for one person to interview for each of the positions. Based on the job opening, she has to decide and delegate the interview steps to different people. + +In plain words +> It provides a way to delegate the instantiation logic to child classes. + +Wikipedia says +> In class-based programming, the factory method pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by creating objects by calling a factory method—either specified in an interface and implemented by child classes, or implemented in a base class and optionally overridden by derived classes—rather than by calling a constructor. + + **Programmatic Example** + +Taking our hiring manager example above. First of all we have an interviewer interface and some implementations for it + +```php +interface Interviewer +{ + public function askQuestions(); +} + +class Developer implements Interviewer +{ + public function askQuestions() + { + echo 'Asking about design patterns!'; + } +} + +class CommunityExecutive implements Interviewer +{ + public function askQuestions() + { + echo 'Asking about community building'; + } +} +``` + +Now let us create our `HiringManager` + +```php +abstract class HiringManager +{ + + // Factory method + abstract protected function makeInterviewer(): Interviewer; + + public function takeInterview() + { + $interviewer = $this->makeInterviewer(); + $interviewer->askQuestions(); + } +} + +``` +Now any child can extend it and provide the required interviewer +```php +class DevelopmentManager extends HiringManager +{ + protected function makeInterviewer(): Interviewer + { + return new Developer(); + } +} + +class MarketingManager extends HiringManager +{ + protected function makeInterviewer(): Interviewer + { + return new CommunityExecutive(); + } +} +``` +and then it can be used as + +```php +$devManager = new DevelopmentManager(); +$devManager->takeInterview(); // Output: Asking about design patterns + +$marketingManager = new MarketingManager(); +$marketingManager->takeInterview(); // Output: Asking about community building. +``` + +**When to use?** + +Useful when there is some generic processing in a class but the required sub-class is dynamically decided at runtime. Or putting it in other words, when the client doesn't know what exact sub-class it might need. + +🔨 Abstract Factory +---------------- + +Real world example +> Extending our door example from Simple Factory. Based on your needs you might get a wooden door from a wooden door shop, iron door from an iron shop or a PVC door from the relevant shop. Plus you might need a guy with different kind of specialities to fit the door, for example a carpenter for wooden door, welder for iron door etc. As you can see there is a dependency between the doors now, wooden door needs carpenter, iron door needs a welder etc. + +In plain words +> A factory of factories; a factory that groups the individual but related/dependent factories together without specifying their concrete classes. + +Wikipedia says +> The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes + +**Programmatic Example** + +Translating the door example above. First of all we have our `Door` interface and some implementation for it + +```php +interface Door +{ + public function getDescription(); +} + +class WoodenDoor implements Door +{ + public function getDescription() + { + echo 'I am a wooden door'; + } +} + +class IronDoor implements Door +{ + public function getDescription() + { + echo 'I am an iron door'; + } +} +``` +Then we have some fitting experts for each door type + +```php +interface DoorFittingExpert +{ + public function getDescription(); +} + +class Welder implements DoorFittingExpert +{ + public function getDescription() + { + echo 'I can only fit iron doors'; + } +} + +class Carpenter implements DoorFittingExpert +{ + public function getDescription() + { + echo 'I can only fit wooden doors'; + } +} +``` + +Now we have our abstract factory that would let us make family of related objects i.e. wooden door factory would create a wooden door and wooden door fitting expert and iron door factory would create an iron door and iron door fitting expert +```php +interface DoorFactory +{ + public function makeDoor(): Door; + public function makeFittingExpert(): DoorFittingExpert; +} + +// Wooden factory to return carpenter and wooden door +class WoodenDoorFactory implements DoorFactory +{ + public function makeDoor(): Door + { + return new WoodenDoor(); + } + + public function makeFittingExpert(): DoorFittingExpert + { + return new Carpenter(); + } +} + +// Iron door factory to get iron door and the relevant fitting expert +class IronDoorFactory implements DoorFactory +{ + public function makeDoor(): Door + { + return new IronDoor(); + } + + public function makeFittingExpert(): DoorFittingExpert + { + return new Welder(); + } +} +``` +And then it can be used as +```php +$woodenFactory = new WoodenDoorFactory(); + +$door = $woodenFactory->makeDoor(); +$expert = $woodenFactory->makeFittingExpert(); + +$door->getDescription(); // Output: I am a wooden door +$expert->getDescription(); // Output: I can only fit wooden doors + +// Same for Iron Factory +$ironFactory = new IronDoorFactory(); + +$door = $ironFactory->makeDoor(); +$expert = $ironFactory->makeFittingExpert(); + +$door->getDescription(); // Output: I am an iron door +$expert->getDescription(); // Output: I can only fit iron doors +``` + +As you can see the wooden door factory has encapsulated the `carpenter` and the `wooden door` also iron door factory has encapsulated the `iron door` and `welder`. And thus it had helped us make sure that for each of the created door, we do not get a wrong fitting expert. + +**When to use?** + +When there are interrelated dependencies with not-that-simple creation logic involved + +## 👷 Builder +Real world example +> Imagine you are at Hardee's and you order a specific deal, lets say, "Big Hardee" and they hand it over to you without *any questions*; this is the example of simple factory. But there are cases when the creation logic might involve more steps. For example you want a customized Subway deal, you have several options in how your burger is made e.g what bread do you want? what types of sauces would you like? What cheese would you want? etc. In such cases builder pattern comes to the rescue. + +In plain words +> Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object. + +Wikipedia says +> The builder pattern is an object creation software design pattern with the intentions of finding a solution to the telescoping constructor anti-pattern. + +Having said that let me add a bit about what telescoping constructor anti-pattern is. At one point or the other we have all seen a constructor like below: + +```php +public function __construct($size, $cheese = true, $pepperoni = true, $tomato = false, $lettuce = true) +{ +} +``` + +As you can see; the number of constructor parameters can quickly get out of hand and it might become difficult to understand the arrangement of parameters. Plus this parameter list could keep on growing if you would want to add more options in future. This is called telescoping constructor anti-pattern. + +**Programmatic Example** + +The sane alternative is to use the builder pattern. First of all we have our burger that we want to make + +```php +class Burger +{ + protected $size; + + protected $cheese = false; + protected $pepperoni = false; + protected $lettuce = false; + protected $tomato = false; + + public function __construct(BurgerBuilder $builder) + { + $this->size = $builder->size; + $this->cheese = $builder->cheese; + $this->pepperoni = $builder->pepperoni; + $this->lettuce = $builder->lettuce; + $this->tomato = $builder->tomato; + } +} +``` + +And then we have the builder + +```php +class BurgerBuilder +{ + public $size; + + public $cheese = false; + public $pepperoni = false; + public $lettuce = false; + public $tomato = false; + + public function __construct(int $size) + { + $this->size = $size; + } + + public function addPepperoni() + { + $this->pepperoni = true; + return $this; + } + + public function addLettuce() + { + $this->lettuce = true; + return $this; + } + + public function addCheese() + { + $this->cheese = true; + return $this; + } + + public function addTomato() + { + $this->tomato = true; + return $this; + } + + public function build(): Burger + { + return new Burger($this); + } +} +``` +And then it can be used as: + +```php +$burger = (new BurgerBuilder(14)) + ->addPepperoni() + ->addLettuce() + ->addTomato() + ->build(); +``` + +**When to use?** + +When there could be several flavors of an object and to avoid the constructor telescoping. The key difference from the factory pattern is that; factory pattern is to be used when the creation is a one step process while builder pattern is to be used when the creation is a multi step process. + +🐑 Prototype +------------ +Real world example +> Remember dolly? The sheep that was cloned! Lets not get into the details but the key point here is that it is all about cloning + +In plain words +> Create object based on an existing object through cloning. + +Wikipedia says +> The prototype pattern is a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects. + +In short, it allows you to create a copy of an existing object and modify it to your needs, instead of going through the trouble of creating an object from scratch and setting it up. + +**Programmatic Example** + +In PHP, it can be easily done using `clone` + +```php +class Sheep +{ + protected $name; + protected $category; + + public function __construct(string $name, string $category = 'Mountain Sheep') + { + $this->name = $name; + $this->category = $category; + } + + public function setName(string $name) + { + $this->name = $name; + } + + public function getName() + { + return $this->name; + } + + public function setCategory(string $category) + { + $this->category = $category; + } + + public function getCategory() + { + return $this->category; + } +} +``` +Then it can be cloned like below +```php +$original = new Sheep('Jolly'); +echo $original->getName(); // Jolly +echo $original->getCategory(); // Mountain Sheep + +// Clone and modify what is required +$cloned = clone $original; +$cloned->setName('Dolly'); +echo $cloned->getName(); // Dolly +echo $cloned->getCategory(); // Mountain sheep +``` + +Also you could use the magic method `__clone` to modify the cloning behavior. + +**When to use?** + +When an object is required that is similar to existing object or when the creation would be expensive as compared to cloning. + +💍 Singleton +------------ +Real world example +> There can only be one president of a country at a time. The same president has to be brought to action, whenever duty calls. President here is singleton. + +In plain words +> Ensures that only one object of a particular class is ever created. + +Wikipedia says +> In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. + +Singleton pattern is actually considered an anti-pattern and overuse of it should be avoided. It is not necessarily bad and could have some valid use-cases but should be used with caution because it introduces a global state in your application and change to it in one place could affect in the other areas and it could become pretty difficult to debug. The other bad thing about them is it makes your code tightly coupled plus mocking the singleton could be difficult. + +**Programmatic Example** + +To create a singleton, make the constructor private, disable cloning, disable extension and create a static variable to house the instance +```php +final class President +{ + private static $instance; + + private function __construct() + { + // Hide the constructor + } + + public static function getInstance(): President + { + if (!self::$instance) { + self::$instance = new self(); + } + + return self::$instance; + } + + private function __clone() + { + // Disable cloning + } + + private function __wakeup() + { + // Disable unserialize + } +} +``` +Then in order to use +```php +$president1 = President::getInstance(); +$president2 = President::getInstance(); + +var_dump($president1 === $president2); // true +``` + +## Structural Design Patterns +In plain words +> Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?" + +Wikipedia says +> In software engineering, structural design patterns are design patterns that ease the design by identifying a simple way to realize relationships between entities. + +There are 7 types of structural patterns + + * [Adapter](#-adapter) + * [Bridge](#-bridge) + * [Composite](#-composite) + * [Decorator](#-decorator) + * [Facade](#-facade) + * [Flyweight](#-flyweight) + * [Proxy](#-proxy) + +🔌 Adapter +------- +Real world example +> Consider that you have some pictures in your memory card and you need to transfer them to your computer. In order to transfer them you need some kind of adapter that is compatible with your computer ports so that you can attach memory card to your computer. In this case card reader is an adapter. +> Another example would be the famous power adapter; a three legged plug can't be connected to a two pronged outlet, it needs to use a power adapter that makes it compatible with the two pronged outlet. +> Yet another example would be a translator translating words spoken by one person to another + +In plain words +> Adapter pattern lets you wrap an otherwise incompatible object in an adapter to make it compatible with another class. + +Wikipedia says +> In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code. + +**Programmatic Example** + +Consider a game where there is a hunter and he hunts lions. + +First we have an interface `Lion` that all types of lions have to implement + +```php +interface Lion +{ + public function roar(); +} + +class AfricanLion implements Lion +{ + public function roar() + { + } +} + +class AsianLion implements Lion +{ + public function roar() + { + } +} +``` +And hunter expects any implementation of `Lion` interface to hunt. +```php +class Hunter +{ + public function hunt(Lion $lion) + { + $lion->roar(); + } +} +``` + +Now let's say we have to add a `WildDog` in our game so that hunter can hunt that also. But we can't do that directly because dog has a different interface. To make it compatible for our hunter, we will have to create an adapter that is compatible + +```php +// This needs to be added to the game +class WildDog +{ + public function bark() + { + } +} + +// Adapter around wild dog to make it compatible with our game +class WildDogAdapter implements Lion +{ + protected $dog; + + public function __construct(WildDog $dog) + { + $this->dog = $dog; + } + + public function roar() + { + $this->dog->bark(); + } +} +``` +And now the `WildDog` can be used in our game using `WildDogAdapter`. + +```php +$wildDog = new WildDog(); +$wildDogAdapter = new WildDogAdapter($wildDog); + +$hunter = new Hunter(); +$hunter->hunt($wildDogAdapter); +``` + +🚡 Bridge +------ +Real world example +> Consider you have a website with different pages and you are supposed to allow the user to change the theme. What would you do? Create multiple copies of each of the pages for each of the themes or would you just create separate theme and load them based on the user's preferences? Bridge pattern allows you to do the second i.e. + +![With and without the bridge pattern](https://cloud.githubusercontent.com/assets/11269635/23065293/33b7aea0-f515-11e6-983f-98823c9845ee.png) + +In Plain Words +> Bridge pattern is about preferring composition over inheritance. Implementation details are pushed from a hierarchy to another object with a separate hierarchy. + +Wikipedia says +> The bridge pattern is a design pattern used in software engineering that is meant to "decouple an abstraction from its implementation so that the two can vary independently" + +**Programmatic Example** + +Translating our WebPage example from above. Here we have the `WebPage` hierarchy + +```php +interface WebPage +{ + public function __construct(Theme $theme); + public function getContent(); +} + +class About implements WebPage +{ + protected $theme; + + public function __construct(Theme $theme) + { + $this->theme = $theme; + } + + public function getContent() + { + return "About page in " . $this->theme->getColor(); + } +} + +class Careers implements WebPage +{ + protected $theme; + + public function __construct(Theme $theme) + { + $this->theme = $theme; + } + + public function getContent() + { + return "Careers page in " . $this->theme->getColor(); + } +} +``` +And the separate theme hierarchy +```php + +interface Theme +{ + public function getColor(); +} + +class DarkTheme implements Theme +{ + public function getColor() + { + return 'Dark Black'; + } +} +class LightTheme implements Theme +{ + public function getColor() + { + return 'Off white'; + } +} +class AquaTheme implements Theme +{ + public function getColor() + { + return 'Light blue'; + } +} +``` +And both the hierarchies +```php +$darkTheme = new DarkTheme(); + +$about = new About($darkTheme); +$careers = new Careers($darkTheme); + +echo $about->getContent(); // "About page in Dark Black"; +echo $careers->getContent(); // "Careers page in Dark Black"; +``` + +## 🌿 Composite + +Real world example +> Every organization is composed of employees. Each of the employees has the same features i.e. has a salary, has some responsibilities, may or may not report to someone, may or may not have some subordinates etc. + +In plain words +> Composite pattern lets clients treat the individual objects in a uniform manner. + +Wikipedia says +> In software engineering, the composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets clients treat individual objects and compositions uniformly. + +**Programmatic Example** + +Taking our employees example from above. Here we have different employee types + +```php +interface Employee +{ + public function __construct(string $name, float $salary); + public function getName(): string; + public function setSalary(float $salary); + public function getSalary(): float; + public function getRoles(): array; +} + +class Developer implements Employee +{ + protected $salary; + protected $name; + protected $roles; + + public function __construct(string $name, float $salary) + { + $this->name = $name; + $this->salary = $salary; + } + + public function getName(): string + { + return $this->name; + } + + public function setSalary(float $salary) + { + $this->salary = $salary; + } + + public function getSalary(): float + { + return $this->salary; + } + + public function getRoles(): array + { + return $this->roles; + } +} + +class Designer implements Employee +{ + protected $salary; + protected $name; + protected $roles; + + public function __construct(string $name, float $salary) + { + $this->name = $name; + $this->salary = $salary; + } + + public function getName(): string + { + return $this->name; + } + + public function setSalary(float $salary) + { + $this->salary = $salary; + } + + public function getSalary(): float + { + return $this->salary; + } + + public function getRoles(): array + { + return $this->roles; + } +} +``` + +Then we have an organization which consists of several different types of employees + +```php +class Organization +{ + protected $employees; + + public function addEmployee(Employee $employee) + { + $this->employees[] = $employee; + } + + public function getNetSalaries(): float + { + $netSalary = 0; + + foreach ($this->employees as $employee) { + $netSalary += $employee->getSalary(); + } + + return $netSalary; + } +} +``` + +And then it can be used as + +```php +// Prepare the employees +$john = new Developer('John Doe', 12000); +$jane = new Designer('Jane Doe', 15000); + +// Add them to organization +$organization = new Organization(); +$organization->addEmployee($john); +$organization->addEmployee($jane); + +echo "Net salaries: " . $organization->getNetSalaries(); // Net Salaries: 27000 +``` + +☕ Decorator +------------- + +Real world example + +> Imagine you run a car service shop offering multiple services. Now how do you calculate the bill to be charged? You pick one service and dynamically keep adding to it the prices for the provided services till you get the final cost. Here each type of service is a decorator. + +In plain words +> Decorator pattern lets you dynamically change the behavior of an object at run time by wrapping them in an object of a decorator class. + +Wikipedia says +> In object-oriented programming, the decorator pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class. The decorator pattern is often useful for adhering to the Single Responsibility Principle, as it allows functionality to be divided between classes with unique areas of concern. + +**Programmatic Example** + +Lets take coffee for example. First of all we have a simple coffee implementing the coffee interface + +```php +interface Coffee +{ + public function getCost(); + public function getDescription(); +} + +class SimpleCoffee implements Coffee +{ + public function getCost() + { + return 10; + } + + public function getDescription() + { + return 'Simple coffee'; + } +} +``` +We want to make the code extensible to allow options to modify it if required. Lets make some add-ons (decorators) +```php +class MilkCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 2; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', milk'; + } +} + +class WhipCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 5; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', whip'; + } +} + +class VanillaCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 3; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', vanilla'; + } +} +``` + +Lets make a coffee now + +```php +$someCoffee = new SimpleCoffee(); +echo $someCoffee->getCost(); // 10 +echo $someCoffee->getDescription(); // Simple Coffee + +$someCoffee = new MilkCoffee($someCoffee); +echo $someCoffee->getCost(); // 12 +echo $someCoffee->getDescription(); // Simple Coffee, milk + +$someCoffee = new WhipCoffee($someCoffee); +echo $someCoffee->getCost(); // 17 +echo $someCoffee->getDescription(); // Simple Coffee, milk, whip + +$someCoffee = new VanillaCoffee($someCoffee); +echo $someCoffee->getCost(); // 20 +echo $someCoffee->getDescription(); // Simple Coffee, milk, whip, vanilla +``` + +📦 Facade +---------------- + +Real world example +> How do you turn on the computer? "Hit the power button" you say! That is what you believe because you are using a simple interface that computer provides on the outside, internally it has to do a lot of stuff to make it happen. This simple interface to the complex subsystem is a facade. + +In plain words +> Facade pattern provides a simplified interface to a complex subsystem. + +Wikipedia says +> A facade is an object that provides a simplified interface to a larger body of code, such as a class library. + +**Programmatic Example** + +Taking our computer example from above. Here we have the computer class + +```php +class Computer +{ + public function getElectricShock() + { + echo "Ouch!"; + } + + public function makeSound() + { + echo "Beep beep!"; + } + + public function showLoadingScreen() + { + echo "Loading.."; + } + + public function bam() + { + echo "Ready to be used!"; + } + + public function closeEverything() + { + echo "Bup bup bup buzzzz!"; + } + + public function sooth() + { + echo "Zzzzz"; + } + + public function pullCurrent() + { + echo "Haaah!"; + } +} +``` +Here we have the facade +```php +class ComputerFacade +{ + protected $computer; + + public function __construct(Computer $computer) + { + $this->computer = $computer; + } + + public function turnOn() + { + $this->computer->getElectricShock(); + $this->computer->makeSound(); + $this->computer->showLoadingScreen(); + $this->computer->bam(); + } + + public function turnOff() + { + $this->computer->closeEverything(); + $this->computer->pullCurrent(); + $this->computer->sooth(); + } +} +``` +Now to use the facade +```php +$computer = new ComputerFacade(new Computer()); +$computer->turnOn(); // Ouch! Beep beep! Loading.. Ready to be used! +$computer->turnOff(); // Bup bup buzzz! Haah! Zzzzz +``` + +🍃 Flyweight +--------- + +Real world example +> Did you ever have fresh tea from some stall? They often make more than one cup that you demanded and save the rest for any other customer so to save the resources e.g. gas etc. Flyweight pattern is all about that i.e. sharing. + +In plain words +> It is used to minimize memory usage or computational expenses by sharing as much as possible with similar objects. + +Wikipedia says +> In computer programming, flyweight is a software design pattern. A flyweight is an object that minimizes memory use by sharing as much data as possible with other similar objects; it is a way to use objects in large numbers when a simple repeated representation would use an unacceptable amount of memory. + +**Programmatic example** + +Translating our tea example from above. First of all we have tea types and tea maker + +```php +// Anything that will be cached is flyweight. +// Types of tea here will be flyweights. +class KarakTea +{ +} + +// Acts as a factory and saves the tea +class TeaMaker +{ + protected $availableTea = []; + + public function make($preference) + { + if (empty($this->availableTea[$preference])) { + $this->availableTea[$preference] = new KarakTea(); + } + + return $this->availableTea[$preference]; + } +} +``` + +Then we have the `TeaShop` which takes orders and serves them + +```php +class TeaShop +{ + protected $orders; + protected $teaMaker; + + public function __construct(TeaMaker $teaMaker) + { + $this->teaMaker = $teaMaker; + } + + public function takeOrder(string $teaType, int $table) + { + $this->orders[$table] = $this->teaMaker->make($teaType); + } + + public function serve() + { + foreach ($this->orders as $table => $tea) { + echo "Serving tea to table# " . $table; + } + } +} +``` +And it can be used as below + +```php +$teaMaker = new TeaMaker(); +$shop = new TeaShop($teaMaker); + +$shop->takeOrder('less sugar', 1); +$shop->takeOrder('more milk', 2); +$shop->takeOrder('without sugar', 5); + +$shop->serve(); +// Serving tea to table# 1 +// Serving tea to table# 2 +// Serving tea to table# 5 +``` + +## 🎱 Proxy +Real world example +> Have you ever used an access card to go through a door? There are multiple options to open that door i.e. it can be opened either using access card or by pressing a button that bypasses the security. The door's main functionality is to open but there is a proxy added on top of it to add some functionality. Let me better explain it using the code example below. + +In plain words +> Using the proxy pattern, a class represents the functionality of another class. + +Wikipedia says +> A proxy, in its most general form, is a class functioning as an interface to something else. A proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked. + +**Programmatic Example** + +Taking our security door example from above. Firstly we have the door interface and an implementation of door + +```php +interface Door +{ + public function open(); + public function close(); +} + +class LabDoor implements Door +{ + public function open() + { + echo "Opening lab door"; + } + + public function close() + { + echo "Closing the lab door"; + } +} +``` +Then we have a proxy to secure any doors that we want +```php +class SecuredDoor +{ + protected $door; + + public function __construct(Door $door) + { + $this->door = $door; + } + + public function open($password) + { + if ($this->authenticate($password)) { + $this->door->open(); + } else { + echo "Big no! It ain't possible."; + } + } + + public function authenticate($password) + { + return $password === '$ecr@t'; + } + + public function close() + { + $this->door->close(); + } +} +``` +And here is how it can be used +```php +$door = new SecuredDoor(new LabDoor()); +$door->open('invalid'); // Big no! It ain't possible. + +$door->open('$ecr@t'); // Opening lab door +$door->close(); // Closing lab door +``` +Yet another example would be some sort of data-mapper implementation. For example, I recently made an ODM (Object Data Mapper) for MongoDB using this pattern where I wrote a proxy around mongo classes while utilizing the magic method `__call()`. All the method calls were proxied to the original mongo class and result retrieved was returned as it is but in case of `find` or `findOne` data was mapped to the required class objects and the object was returned instead of `Cursor`. + +## Behavioral Design Patterns + +In plain words +> It is concerned with assignment of responsibilities between the objects. What makes them different from structural patterns is they don't just specify the structure but also outline the patterns for message passing/communication between them. Or in other words, they assist in answering "How to run a behavior in software component?" + +Wikipedia says +> In software engineering, behavioral design patterns are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication. + +There are 10 types of behavioral design patterns + +* [Chain of Responsibility](#-chain-of-responsibility) +* [Command](#-command) +* [Iterator](#-iterator) +* [Mediator](#-mediator) +* [Memento](#-memento) +* [Observer](#-observer) +* [Visitor](#-visitor) +* [Strategy](#-strategy) +* [State](#-state) +* [Template Method](#-template-method) + +## 🔗 Chain of Responsibility + +Real world example +> For example, you have three payment methods (`A`, `B` and `C`) setup in your account; each having a different amount in it. `A` has 100 USD, `B` has 300 USD and `C` having 1000 USD and the preference for payments is chosen as `A` then `B` then `C`. You try to purchase something that is worth 210 USD. Using Chain of Responsibility, first of all account `A` will be checked if it can make the purchase, if yes purchase will be made and the chain will be broken. If not, request will move forward to account `B` checking for amount if yes chain will be broken otherwise the request will keep forwarding till it finds the suitable handler. Here `A`, `B` and `C` are links of the chain and the whole phenomenon is Chain of Responsibility. + +In plain words +> It helps building a chain of objects. Request enters from one end and keeps going from object to object till it finds the suitable handler. + +Wikipedia says +> In object-oriented design, the chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain. + +**Programmatic Example** + +Translating our account example above. First of all we have a base account having the logic for chaining the accounts together and some accounts + +```php +abstract class Account +{ + protected $successor; + protected $balance; + + public function setNext(Account $account) + { + $this->successor = $account; + } + + public function pay(float $amountToPay) + { + if ($this->canPay($amountToPay)) { + echo sprintf('Paid %s using %s' . PHP_EOL, $amountToPay, get_called_class()); + } elseif ($this->successor) { + echo sprintf('Cannot pay using %s. Proceeding ..' . PHP_EOL, get_called_class()); + $this->successor->pay($amountToPay); + } else { + throw new Exception('None of the accounts have enough balance'); + } + } + + public function canPay($amount): bool + { + return $this->balance >= $amount; + } +} + +class Bank extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} + +class Paypal extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} + +class Bitcoin extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} +``` + +Now let's prepare the chain using the links defined above (i.e. Bank, Paypal, Bitcoin) + +```php +// Let's prepare a chain like below +// $bank->$paypal->$bitcoin +// +// First priority bank +// If bank can't pay then paypal +// If paypal can't pay then bit coin + +$bank = new Bank(100); // Bank with balance 100 +$paypal = new Paypal(200); // Paypal with balance 200 +$bitcoin = new Bitcoin(300); // Bitcoin with balance 300 + +$bank->setNext($paypal); +$paypal->setNext($bitcoin); + +// Let's try to pay using the first priority i.e. bank +$bank->pay(259); + +// Output will be +// ============== +// Cannot pay using bank. Proceeding .. +// Cannot pay using paypal. Proceeding ..: +// Paid 259 using Bitcoin! +``` + +👮 Command +------- + +Real world example +> A generic example would be you ordering food at a restaurant. You (i.e. `Client`) ask the waiter (i.e. `Invoker`) to bring some food (i.e. `Command`) and waiter simply forwards the request to Chef (i.e. `Receiver`) who has the knowledge of what and how to cook. +> Another example would be you (i.e. `Client`) switching on (i.e. `Command`) the television (i.e. `Receiver`) using a remote control (`Invoker`). + +In plain words +> Allows you to encapsulate actions in objects. The key idea behind this pattern is to provide the means to decouple client from receiver. + +Wikipedia says +> In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to encapsulate all information needed to perform an action or trigger an event at a later time. This information includes the method name, the object that owns the method and values for the method parameters. + +**Programmatic Example** + +First of all we have the receiver that has the implementation of every action that could be performed +```php +// Receiver +class Bulb +{ + public function turnOn() + { + echo "Bulb has been lit"; + } + + public function turnOff() + { + echo "Darkness!"; + } +} +``` +then we have an interface that each of the commands are going to implement and then we have a set of commands +```php +interface Command +{ + public function execute(); + public function undo(); + public function redo(); +} + +// Command +class TurnOn implements Command +{ + protected $bulb; + + public function __construct(Bulb $bulb) + { + $this->bulb = $bulb; + } + + public function execute() + { + $this->bulb->turnOn(); + } + + public function undo() + { + $this->bulb->turnOff(); + } + + public function redo() + { + $this->execute(); + } +} + +class TurnOff implements Command +{ + protected $bulb; + + public function __construct(Bulb $bulb) + { + $this->bulb = $bulb; + } + + public function execute() + { + $this->bulb->turnOff(); + } + + public function undo() + { + $this->bulb->turnOn(); + } + + public function redo() + { + $this->execute(); + } +} +``` +Then we have an `Invoker` with whom the client will interact to process any commands +```php +// Invoker +class RemoteControl +{ + public function submit(Command $command) + { + $command->execute(); + } +} +``` +Finally let's see how we can use it in our client +```php +$bulb = new Bulb(); + +$turnOn = new TurnOn($bulb); +$turnOff = new TurnOff($bulb); + +$remote = new RemoteControl(); +$remote->submit($turnOn); // Bulb has been lit! +$remote->submit($turnOff); // Darkness! +``` + +Command pattern can also be used to implement a transaction based system. Where you keep maintaining the history of commands as soon as you execute them. If the final command is successfully executed, all good otherwise just iterate through the history and keep executing the `undo` on all the executed commands. + +➿ Iterator +-------- + +Real world example +> An old radio set will be a good example of iterator, where user could start at some channel and then use next or previous buttons to go through the respective channels. Or take an example of MP3 player or a TV set where you could press the next and previous buttons to go through the consecutive channels or in other words they all provide an interface to iterate through the respective channels, songs or radio stations. + +In plain words +> It presents a way to access the elements of an object without exposing the underlying presentation. + +Wikipedia says +> In object-oriented programming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers; in some cases, algorithms are necessarily container-specific and thus cannot be decoupled. + +**Programmatic example** + +In PHP it is quite easy to implement using SPL (Standard PHP Library). Translating our radio stations example from above. First of all we have `RadioStation` + +```php +class RadioStation +{ + protected $frequency; + + public function __construct(float $frequency) + { + $this->frequency = $frequency; + } + + public function getFrequency(): float + { + return $this->frequency; + } +} +``` +Then we have our iterator + +```php +use Countable; +use Iterator; + +class StationList implements Countable, Iterator +{ + /** @var RadioStation[] $stations */ + protected $stations = []; + + /** @var int $counter */ + protected $counter; + + public function addStation(RadioStation $station) + { + $this->stations[] = $station; + } + + public function removeStation(RadioStation $toRemove) + { + $toRemoveFrequency = $toRemove->getFrequency(); + $this->stations = array_filter($this->stations, function (RadioStation $station) use ($toRemoveFrequency) { + return $station->getFrequency() !== $toRemoveFrequency; + }); + } + + public function count(): int + { + return count($this->stations); + } + + public function current(): RadioStation + { + return $this->stations[$this->counter]; + } + + public function key() + { + return $this->counter; + } + + public function next() + { + $this->counter++; + } + + public function rewind() + { + $this->counter = 0; + } + + public function valid(): bool + { + return isset($this->stations[$this->counter]); + } +} +``` +And then it can be used as +```php +$stationList = new StationList(); + +$stationList->addStation(new RadioStation(89)); +$stationList->addStation(new RadioStation(101)); +$stationList->addStation(new RadioStation(102)); +$stationList->addStation(new RadioStation(103.2)); + +foreach($stationList as $station) { + echo $station->getFrequency() . PHP_EOL; +} + +$stationList->removeStation(new RadioStation(89)); // Will remove station 89 +``` + +👽 Mediator +-------- + +Real world example +> A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator. + +In plain words +> Mediator pattern adds a third party object (called mediator) to control the interaction between two objects (called colleagues). It helps reduce the coupling between the classes communicating with each other. Because now they don't need to have the knowledge of each other's implementation. + +Wikipedia says +> In software engineering, the mediator pattern defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program's running behavior. + +**Programmatic Example** + +Here is the simplest example of a chat room (i.e. mediator) with users (i.e. colleagues) sending messages to each other. + +First of all, we have the mediator i.e. the chat room + +```php +interface ChatRoomMediator +{ + public function showMessage(User $user, string $message); +} + +// Mediator +class ChatRoom implements ChatRoomMediator +{ + public function showMessage(User $user, string $message) + { + $time = date('M d, y H:i'); + $sender = $user->getName(); + + echo $time . '[' . $sender . ']:' . $message; + } +} +``` + +Then we have our users i.e. colleagues +```php +class User { + protected $name; + protected $chatMediator; + + public function __construct(string $name, ChatRoomMediator $chatMediator) { + $this->name = $name; + $this->chatMediator = $chatMediator; + } + + public function getName() { + return $this->name; + } + + public function send($message) { + $this->chatMediator->showMessage($this, $message); + } +} +``` +And the usage +```php +$mediator = new ChatRoom(); + +$john = new User('John Doe', $mediator); +$jane = new User('Jane Doe', $mediator); + +$john->send('Hi there!'); +$jane->send('Hey!'); + +// Output will be +// Feb 14, 10:58 [John]: Hi there! +// Feb 14, 10:58 [Jane]: Hey! +``` + +💾 Memento +------- +Real world example +> Take the example of calculator (i.e. originator), where whenever you perform some calculation the last calculation is saved in memory (i.e. memento) so that you can get back to it and maybe get it restored using some action buttons (i.e. caretaker). + +In plain words +> Memento pattern is about capturing and storing the current state of an object in a manner that it can be restored later on in a smooth manner. + +Wikipedia says +> The memento pattern is a software design pattern that provides the ability to restore an object to its previous state (undo via rollback). + +Usually useful when you need to provide some sort of undo functionality. + +**Programmatic Example** + +Lets take an example of text editor which keeps saving the state from time to time and that you can restore if you want. + +First of all we have our memento object that will be able to hold the editor state + +```php +class EditorMemento +{ + protected $content; + + public function __construct(string $content) + { + $this->content = $content; + } + + public function getContent() + { + return $this->content; + } +} +``` + +Then we have our editor i.e. originator that is going to use memento object + +```php +class Editor +{ + protected $content = ''; + + public function type(string $words) + { + $this->content = $this->content . ' ' . $words; + } + + public function getContent() + { + return $this->content; + } + + public function save() + { + return new EditorMemento($this->content); + } + + public function restore(EditorMemento $memento) + { + $this->content = $memento->getContent(); + } +} +``` + +And then it can be used as + +```php +$editor = new Editor(); + +// Type some stuff +$editor->type('This is the first sentence.'); +$editor->type('This is second.'); + +// Save the state to restore to : This is the first sentence. This is second. +$saved = $editor->save(); + +// Type some more +$editor->type('And this is third.'); + +// Output: Content before Saving +echo $editor->getContent(); // This is the first sentence. This is second. And this is third. + +// Restoring to last saved state +$editor->restore($saved); + +$editor->getContent(); // This is the first sentence. This is second. +``` + +😎 Observer +-------- +Real world example +> A good example would be the job seekers where they subscribe to some job posting site and they are notified whenever there is a matching job opportunity. + +In plain words +> Defines a dependency between objects so that whenever an object changes its state, all its dependents are notified. + +Wikipedia says +> The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. + +**Programmatic example** + +Translating our example from above. First of all we have job seekers that need to be notified for a job posting +```php +class JobPost +{ + protected $title; + + public function __construct(string $title) + { + $this->title = $title; + } + + public function getTitle() + { + return $this->title; + } +} + +class JobSeeker implements Observer +{ + protected $name; + + public function __construct(string $name) + { + $this->name = $name; + } + + public function onJobPosted(JobPost $job) + { + // Do something with the job posting + echo 'Hi ' . $this->name . '! New job posted: '. $job->getTitle(); + } +} +``` +Then we have our job postings to which the job seekers will subscribe +```php +class EmploymentAgency implements Observable +{ + protected $observers = []; + + protected function notify(JobPost $jobPosting) + { + foreach ($this->observers as $observer) { + $observer->onJobPosted($jobPosting); + } + } + + public function attach(Observer $observer) + { + $this->observers[] = $observer; + } + + public function addJob(JobPost $jobPosting) + { + $this->notify($jobPosting); + } +} +``` +Then it can be used as +```php +// Create subscribers +$johnDoe = new JobSeeker('John Doe'); +$janeDoe = new JobSeeker('Jane Doe'); + +// Create publisher and attach subscribers +$jobPostings = new EmploymentAgency(); +$jobPostings->attach($johnDoe); +$jobPostings->attach($janeDoe); + +// Add a new job and see if subscribers get notified +$jobPostings->addJob(new JobPost('Software Engineer')); + +// Output +// Hi John Doe! New job posted: Software Engineer +// Hi Jane Doe! New job posted: Software Engineer +``` + +🏃 Visitor +------- +Real world example +> Consider someone visiting Dubai. They just need a way (i.e. visa) to enter Dubai. After arrival, they can come and visit any place in Dubai on their own without having to ask for permission or to do some leg work in order to visit any place here; just let them know of a place and they can visit it. Visitor pattern lets you do just that, it helps you add places to visit so that they can visit as much as they can without having to do any legwork. + +In plain words +> Visitor pattern lets you add further operations to objects without having to modify them. + +Wikipedia says +> In object-oriented programming and software engineering, the visitor design pattern is a way of separating an algorithm from an object structure on which it operates. A practical result of this separation is the ability to add new operations to existing object structures without modifying those structures. It is one way to follow the open/closed principle. + +**Programmatic example** + +Let's take an example of a zoo simulation where we have several different kinds of animals and we have to make them Sound. Let's translate this using visitor pattern + +```php +// Visitee +interface Animal +{ + public function accept(AnimalOperation $operation); +} + +// Visitor +interface AnimalOperation +{ + public function visitMonkey(Monkey $monkey); + public function visitLion(Lion $lion); + public function visitDolphin(Dolphin $dolphin); +} +``` +Then we have our implementations for the animals +```php +class Monkey implements Animal +{ + public function shout() + { + echo 'Ooh oo aa aa!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitMonkey($this); + } +} + +class Lion implements Animal +{ + public function roar() + { + echo 'Roaaar!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitLion($this); + } +} + +class Dolphin implements Animal +{ + public function speak() + { + echo 'Tuut tuttu tuutt!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitDolphin($this); + } +} +``` +Let's implement our visitor +```php +class Speak implements AnimalOperation +{ + public function visitMonkey(Monkey $monkey) + { + $monkey->shout(); + } + + public function visitLion(Lion $lion) + { + $lion->roar(); + } + + public function visitDolphin(Dolphin $dolphin) + { + $dolphin->speak(); + } +} +``` + +And then it can be used as +```php +$monkey = new Monkey(); +$lion = new Lion(); +$dolphin = new Dolphin(); + +$speak = new Speak(); + +$monkey->accept($speak); // Ooh oo aa aa! +$lion->accept($speak); // Roaaar! +$dolphin->accept($speak); // Tuut tutt tuutt! +``` +We could have done this simply by having an inheritance hierarchy for the animals but then we would have to modify the animals whenever we would have to add new actions to animals. But now we will not have to change them. For example, let's say we are asked to add the jump behavior to the animals, we can simply add that by creating a new visitor i.e. + +```php +class Jump implements AnimalOperation +{ + public function visitMonkey(Monkey $monkey) + { + echo 'Jumped 20 feet high! on to the tree!'; + } + + public function visitLion(Lion $lion) + { + echo 'Jumped 7 feet! Back on the ground!'; + } + + public function visitDolphin(Dolphin $dolphin) + { + echo 'Walked on water a little and disappeared'; + } +} +``` +And for the usage +```php +$jump = new Jump(); + +$monkey->accept($speak); // Ooh oo aa aa! +$monkey->accept($jump); // Jumped 20 feet high! on to the tree! + +$lion->accept($speak); // Roaaar! +$lion->accept($jump); // Jumped 7 feet! Back on the ground! + +$dolphin->accept($speak); // Tuut tutt tuutt! +$dolphin->accept($jump); // Walked on water a little and disappeared +``` + +💡 Strategy +-------- + +Real world example +> Consider the example of sorting, we implemented bubble sort but the data started to grow and bubble sort started getting very slow. In order to tackle this we implemented Quick sort. But now although the quick sort algorithm was doing better for large datasets, it was very slow for smaller datasets. In order to handle this we implemented a strategy where for small datasets, bubble sort will be used and for larger, quick sort. + +In plain words +> Strategy pattern allows you to switch the algorithm or strategy based upon the situation. + +Wikipedia says +> In computer programming, the strategy pattern (also known as the policy pattern) is a behavioural software design pattern that enables an algorithm's behavior to be selected at runtime. + +**Programmatic example** + +Translating our example from above. First of all we have our strategy interface and different strategy implementations + +```php +interface SortStrategy +{ + public function sort(array $dataset): array; +} + +class BubbleSortStrategy implements SortStrategy +{ + public function sort(array $dataset): array + { + echo "Sorting using bubble sort"; + + // Do sorting + return $dataset; + } +} + +class QuickSortStrategy implements SortStrategy +{ + public function sort(array $dataset): array + { + echo "Sorting using quick sort"; + + // Do sorting + return $dataset; + } +} +``` + +And then we have our client that is going to use any strategy +```php +class Sorter +{ + protected $sorter; + + public function __construct(SortStrategy $sorter) + { + $this->sorter = $sorter; + } + + public function sort(array $dataset): array + { + return $this->sorter->sort($dataset); + } +} +``` +And it can be used as +```php +$dataset = [1, 5, 4, 3, 2, 8]; + +$sorter = new Sorter(new BubbleSortStrategy()); +$sorter->sort($dataset); // Output : Sorting using bubble sort + +$sorter = new Sorter(new QuickSortStrategy()); +$sorter->sort($dataset); // Output : Sorting using quick sort +``` + +💢 State +----- +Real world example +> Imagine you are using some drawing application, you choose the paint brush to draw. Now the brush changes its behavior based on the selected color i.e. if you have chosen red color it will draw in red, if blue then it will be in blue etc. + +In plain words +> It lets you change the behavior of a class when the state changes. + +Wikipedia says +> The state pattern is a behavioral software design pattern that implements a state machine in an object-oriented way. With the state pattern, a state machine is implemented by implementing each individual state as a derived class of the state pattern interface, and implementing state transitions by invoking methods defined by the pattern's superclass. +> The state pattern can be interpreted as a strategy pattern which is able to switch the current strategy through invocations of methods defined in the pattern's interface. + +**Programmatic example** + +Let's take an example of text editor, it lets you change the state of text that is typed i.e. if you have selected bold, it starts writing in bold, if italic then in italics etc. + +First of all we have our state interface and some state implementations + +```php +interface WritingState +{ + public function write(string $words); +} + +class UpperCase implements WritingState +{ + public function write(string $words) + { + echo strtoupper($words); + } +} + +class LowerCase implements WritingState +{ + public function write(string $words) + { + echo strtolower($words); + } +} + +class DefaultText implements WritingState +{ + public function write(string $words) + { + echo $words; + } +} +``` +Then we have our editor +```php +class TextEditor +{ + protected $state; + + public function __construct(WritingState $state) + { + $this->state = $state; + } + + public function setState(WritingState $state) + { + $this->state = $state; + } + + public function type(string $words) + { + $this->state->write($words); + } +} +``` +And then it can be used as +```php +$editor = new TextEditor(new DefaultText()); + +$editor->type('First line'); + +$editor->setState(new UpperCase()); + +$editor->type('Second line'); +$editor->type('Third line'); + +$editor->setState(new LowerCase()); + +$editor->type('Fourth line'); +$editor->type('Fifth line'); + +// Output: +// First line +// SECOND LINE +// THIRD LINE +// fourth line +// fifth line +``` + +📒 Template Method +--------------- + +Real world example +> Suppose we are getting some house built. The steps for building might look like +> - Prepare the base of house +> - Build the walls +> - Add roof +> - Add other floors + +> The order of these steps could never be changed i.e. you can't build the roof before building the walls etc but each of the steps could be modified for example walls can be made of wood or polyester or stone. + +In plain words +> Template method defines the skeleton of how a certain algorithm could be performed, but defers the implementation of those steps to the children classes. + +Wikipedia says +> In software engineering, the template method pattern is a behavioral design pattern that defines the program skeleton of an algorithm in an operation, deferring some steps to subclasses. It lets one redefine certain steps of an algorithm without changing the algorithm's structure. + +**Programmatic Example** + +Imagine we have a build tool that helps us test, lint, build, generate build reports (i.e. code coverage reports, linting report etc) and deploy our app on the test server. + +First of all we have our base class that specifies the skeleton for the build algorithm +```php +abstract class Builder +{ + + // Template method + final public function build() + { + $this->test(); + $this->lint(); + $this->assemble(); + $this->deploy(); + } + + abstract public function test(); + abstract public function lint(); + abstract public function assemble(); + abstract public function deploy(); +} +``` + +Then we can have our implementations + +```php +class AndroidBuilder extends Builder +{ + public function test() + { + echo 'Running android tests'; + } + + public function lint() + { + echo 'Linting the android code'; + } + + public function assemble() + { + echo 'Assembling the android build'; + } + + public function deploy() + { + echo 'Deploying android build to server'; + } +} + +class IosBuilder extends Builder +{ + public function test() + { + echo 'Running ios tests'; + } + + public function lint() + { + echo 'Linting the ios code'; + } + + public function assemble() + { + echo 'Assembling the ios build'; + } + + public function deploy() + { + echo 'Deploying ios build to server'; + } +} +``` +And then it can be used as + +```php +$androidBuilder = new AndroidBuilder(); +$androidBuilder->build(); + +// Output: +// Running android tests +// Linting the android code +// Assembling the android build +// Deploying android build to server + +$iosBuilder = new IosBuilder(); +$iosBuilder->build(); + +// Output: +// Running ios tests +// Linting the ios code +// Assembling the ios build +// Deploying ios build to server +``` + +## Wrap Up Folks + +And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it. diff --git a/src/guides/dhcp-in-one-picture.md b/src/guides/dhcp-in-one-picture.md new file mode 100644 index 000000000..9a542c139 --- /dev/null +++ b/src/guides/dhcp-in-one-picture.md @@ -0,0 +1,24 @@ +--- +title: "DHCP in One Picture" +description: "Here is what happens when a new device joins the network." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "DHCP in One Picture - roadmap.sh" + description: "Here is what happens when a new device joins the network." +isNew: false +type: "visual" +date: 2021-04-28 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/dhcp.png)](/guides/dhcp.png) + diff --git a/src/guides/dns-in-one-picture.md b/src/guides/dns-in-one-picture.md new file mode 100644 index 000000000..6cb594415 --- /dev/null +++ b/src/guides/dns-in-one-picture.md @@ -0,0 +1,27 @@ +--- +title: "DNS in One Picture" +description: "Quick illustrative guide on how a website is found on the internet." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "DNS in One Picture - roadmap.sh" + description: "Quick illustrative guide on how a website is found on the internet." +isNew: false +type: "visual" +date: 2018-12-04 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works. + +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) diff --git a/src/guides/history-of-javascript.md b/src/guides/history-of-javascript.md new file mode 100644 index 000000000..f523579bc --- /dev/null +++ b/src/guides/history-of-javascript.md @@ -0,0 +1,63 @@ +--- +title: "Brief History of JavaScript" +description: "How JavaScript was introduced and evolved over the years" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Brief History of JavaScript - roadmap.sh" + description: "How JavaScript was introduced and evolved over the years" +isNew: false +type: "textual" +date: 2017-10-28 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that *Any application that can be written in JavaScript will eventually be written in JavaScript*. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption. + +### JavaScript is announced +JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initially it was named `Mocha` by the creator, which was later renamed to `LiveScript`. In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript. + +### ES1, ES2 and ES3 +In 1996, Netscape decided to submit it to [ECMA International](https://en.wikipedia.org/wiki/Ecma_International) with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, `ECMAScript` was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999. + +### Decade of Silence and ES4 +After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads — adding polyfills to battle compatibility issues between different browsers. + +### From silence to ES5 +Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn’t much of a splash in the water — it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the “modern” standards. + +### Release of ES6 — ECMAScript 2015 +After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs [etc](http://es6-features.org/#Constants) + +Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don’t have to wait for the full specification to be drafted and approved — thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year. + +### Release of ES7 — ECMAScript 2016 +In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features + +* Exponentiation operator `**` +* `Array.prototype.includes` + +### Release of ES8 — ECMAScript 2017 +The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8 + +* `Object.values()` and `Object.entries()` +* String padding i.e. `String.prototype.padEnd()` and `String.prototype.padStart()` +* `Object.getOwnPropertyDescriptors` +* Trailing commas in function parameter lists and calls +* Async functions + +### What is ESNext then? +ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing `ES2017` or `ES8` is `ESNext`. + +### What does the future hold? +Since the release of ES6, [TC39](https://github.com/tc39) has quite streamlined their process. TC39 operates through a Github organization now and there are [several proposals](https://github.com/tc39/proposals) for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and [submit a proposal](https://github.com/tc39/proposals) thus resulting in increasing the participation from the community. Every proposal goes through [four stages of maturity](https://tc39.github.io/process-document/) before it makes it into the specification. + +And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications [ES6](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/). diff --git a/src/guides/http-basic-authentication.md b/src/guides/http-basic-authentication.md new file mode 100644 index 000000000..93b66e4ff --- /dev/null +++ b/src/guides/http-basic-authentication.md @@ -0,0 +1,115 @@ +--- +title: "HTTP Basic Authentication" +description: "Learn what is HTTP Basic Authentication and how to implement it in Node.js" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "HTTP Basic Authentication - roadmap.sh" + description: "Learn what is HTTP Basic Authentication and how to implement it in Node.js" +isNew: true +type: "textual" +date: 2022-10-03 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +Our last guide was about the [basics of authentication](/guides/basics-of-authentication), where we discussed authentication, authorization, types of authentication, authentication factors, authentication strategies, and so on. + +In this guide today, we will be learning about basic authentication, and we will see how we can implement Basic Authentication in Node.js. We have a [visual guide on the basic authentication](/guides/basic-authentication) and an illustrative video, watch the video below or continue reading: + + + +## What is Basic Authentication? +Given the name "Basic Authentication", you should not confuse Basic Authentication with the standard username and password authentication. Basic authentication is a part of the HTTP specification, and the details can be [found in the RFC7617](https://www.rfc-editor.org/rfc/rfc7617.html). + +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) + + +## How does it Work? +Now that we know what basic authentication is, the question is, how does it work? The answer is: it is controlled by the response of the server. + +### Step 1 +When the browser first requests the server, the server tries to check the availability of the `Authorization` header in the request. Because it is the first request, no `Authorization` header is found in the request. So the server responds with the `401 Unauthorized` response code and also sends the `WWW-Authenticate` header with the value set to `Basic`, which tells the browser that it needs to trigger the basic authentication flow. + +```text +401 Unauthorized +WWW-Authenticate: Basic realm='user_pages' +``` + +If you notice the response, we have an additional parameter called `realm`, which is just a value assigned to a group of pages that share the same credentials. + +The browser might use Realm to cache the credential. In the future, when there is an authentication failure browser will check if it has the credentials in the cache for the given realm of the domain, and it may use the same credentials. + +## Step 2 +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) + +## 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. + +### Step 4 +Upon receiving the request, the server will decode and verify the credentials. If the credentials are valid, the server will send the response to the client. + +So that is how Basic Authentication works. + +## Basic Authentication in Node.js +I have prepared the sample project in Node.js, which can be found on GitHub [kamranahmedse/node-basic-auth-example](https://github.com/kamranahmedse/node-basic-auth-example). If you look at the codebase of the project, we have two files `index.js` with the following content: + +```javascript +// src/index.js + +const express = require('express'); +const authMiddleware = require('./auth'); + +const app = express(); +const port = 3000; + +// This middleware is where we have the +// basic authentication implementation +app.use(authMiddleware); + +app.get('/', (req, res) => { + res.send('Hello World!'); +}); + +app.listen(port, () => { + console.log(`App running @ http://localhost:${port}`); +}) +``` + +As you can see, it's just a regular express server. `authMiddleware` registration is where we have all the code for "Basic Authentication". Here is the content of the middleware: + +```javascript +// src/auth.js +const base64 = require("base-64"); + +function decodeCredentials(authHeader) { + // ... +} + +module.exports = function(req, res, next) { + // Take the header and decode credentials + const [username, password] = decodeCredentials(req.headers.authorization || ''); + + // Verify the credentials + if (username === 'admin' && password === 'admin') { + return next(); + } + + // Respond with authenticate header on auth failure. + res.set('WWW-Authenticate', 'Basic realm="user_pages"'); + res.status(401).send('Authentication required.'); +} +``` + +And that is how the basic authentication is implemented in Node.js. diff --git a/src/guides/http-caching.md b/src/guides/http-caching.md new file mode 100644 index 000000000..97ae0c1c7 --- /dev/null +++ b/src/guides/http-caching.md @@ -0,0 +1,273 @@ +--- +title: "HTTP Caching" +description: "Everything you need to know about web caching" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "HTTP Caching - roadmap.sh" + description: "Everything you need to know about web caching" +isNew: false +type: "textual" +date: 2018-11-29 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +As users, we easily get frustrated by the buffering of videos, the images that take seconds to load, and pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on the server, cuts down the bandwidth costs etc. + +### Introduction + +What is a web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. + +![Web Cache](https://i.imgur.com/mJYVvTh.png) + +> Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later. + +Before we get into further details, let me give you an overview of the terms that will be used, further in the article + +- **Client** could be your browser or any application requesting the server for some resource +- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client's requests. +- **Stale Content** is cached but expired content +- **Fresh Content** is the content available in the cache that hasn't expired yet +- **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 + +![](https://i.imgur.com/9MjlzvW.png) + +### Caching Locations + +Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations + +- [Browser Cache](#browser-cache) +- [Proxy Cache](#proxy-cache) +- [Reverse Proxy Cache](#reverse-proxy-cache) + +#### Browser Cache + +You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it. + +![Web Cache](https://i.imgur.com/mJYVvTh.png) + +A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later. + +#### Proxy Cache + +Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example. + +![Proxy Cache](https://i.imgur.com/3mj6e1O.png) + +#### Reverse Proxy Cache + +A Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on the server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near the origin servers by the server administrators to reduce the load on the server. + +![Reverse Proxy Cache](http://i.imgur.com/Eg4Cru3.png) + +Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever defaults are set on these caches. + +### Caching Headers + +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) +- [Pragma](#pragma) +- [Cache-Control](#cache-control) + - [private](#private) + - [public](#public) + - [no-store](#no-store) + - [no-cache](#no-cache) + - [max-age: seconds](#max-age) + - [s-maxage: seconds](#s-maxage) + - [must-revalidate](#must-revalidate) + - [proxy-revalidate](#proxy-revalidate) + - [Mixing Values](#mixing-values) +- [Validators](#validators) + - [ETag](#etag) + - [Last-Modified](#last-modified) + +#### Expires + +Before HTTP/1.1 and the introduction of `Cache-Control`, there was an `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. A possible value to this header is the absolute expiry date; where a date has to be in GMT. Below is the sample header + +```html +Expires: Mon, 13 Mar 2017 12:22:00 GMT +``` + +It should be noted that the date cannot be more than a year and if the date format is wrong, the content will be considered stale. Also, the clock on the cache has to be in sync with the clock on the server, otherwise, the desired results might not be achieved. + +Although the `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`. + +#### Pragma + +Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, that you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching. + +#### Cache-Control + +Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the `Expires` header. + +Value for the `Cache-Control` header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. + +##### private +Setting the cache to `private` means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser) + +```html +Cache-Control: private +``` + +Having said that, don't let it fool you into thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. + +##### public + +If set to `public`, apart from being cached by the client, it can also be cached by the proxies; serving many other users + +```html +Cache-Control: public +``` + +##### no-store +**`no-store`** specifies that the content is not to be cached by any of the caches + +```html +Cache-Control: no-store +``` + +##### no-cache +**`no-cache`** indicates that the cache can be maintained but the cached content is to be re-validated (using `ETag` for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content. + +```html +Cache-Control: max-age=3600, no-cache, public +``` + +##### max-age: seconds +**`max-age`** specifies the number of seconds for which the content will be cached. For example, if the `cache-control` looks like below: + +```html +Cache-Control: max-age=3600, public +``` +it would mean that the content is publicly cacheable and will be considered stale after 60 minutes + +##### s-maxage: seconds +**`s-maxage`** here `s-` prefix stands for shared. This directive specifically targets the shared caches. Like `max-age` it also gets the number of seconds for which something is to be cached. If present, it will override `max-age` and `expires` headers for shared caching. + +```html +Cache-Control: s-maxage=3600, public +``` + +##### must-revalidate +**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, the browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. + +```html +Cache-Control: max-age=3600, public, must-revalidate +``` + +##### proxy-revalidate +**`proxy-revalidate`** is similar to `must-revalidate` but it specifies the same for shared or proxy caches. In other words `proxy-revalidate` is to `must-revalidate` as `s-maxage` is to `max-age`. But why did they not call it `s-revalidate`?. I have no idea why, if you have any clue please leave a comment below. + +##### Mixing Values +You can combine these directives in different ways to achieve different caching behaviors, however `no-cache/no-store` and `public/private` are mutually exclusive. + +If you specify both `no-store` and `no-cache`, `no-store` will be given precedence over `no-cache`. + +```html +; If specified both +Cache-Control: no-store, no-cache + +; Below will be considered +Cache-Control: no-store +``` + +For `private/public`, for any unauthenticated requests cache is considered `public` and for any authenticated ones cache is considered `private`. + +### Validators + +Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose. + +#### ETag + +Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating `"give me this resource if ETag is not same as the ETag that I have"` and the content is downloaded only if the etags do not match. + +Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak + +```html +ETag: "j82j8232ha7sdh0q2882" - Strong Etag +ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`) +``` + +A strong validating ETag means that two resources are **exactly** same and there is no difference between them at all. While a weak ETag means that two resources although not strictly the same but could be considered the same. Weak etags might be useful for dynamic content, for example. + +Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in `If-None-Match` header. + +Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of `abc123xyz`. After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in `if-none-match` header + +```html +If-None-Match: "abc123xyz" +``` + +Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of `304 Not Modified` which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has. + +#### Last-Modified + +Server might include the `Last-Modified` header indicating the date and time at which some content was last modified on. + +```html +Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT +``` + +When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called `If-Modified-Since` to server to get the updated `Last-Modified` date; if it matches the date that the client has, `Last-Modified` date for the content is updated to be considered fresh for another `n` seconds. If the received `Last-Modified` date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has. + +```html +If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT +``` + +You might be questioning now, what if the cached content has both the `Last-Modified` and `ETag` assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if `ETag` matches the newly retrieved one and so does the `Last-Modified` date. If either the `ETag` does not match or the `Last-Modified` is greater than the one from the server, content has to be downloaded again. + +### Where do I start? + +Now that we have got *everything* covered, let us put everything in perspective and see how you can use this information. + +#### Utilizing Server + +Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. + +**For example**, if you are using Apache and you have your static content placed at `/static`, you can put below `.htaccess` file in the directory to make all the content in it be cached for an year using below + +```html +# Cache everything for an year +Header set Cache-Control "max-age=31536000, public" +``` + +You can further use `filesMatch` directive to add conditionals and use different caching strategy for different kinds of files e.g. + +```html +# Cache any images for one year + + Header set Cache-Control "max-age=31536000, public" + + +# Cache any CSS and JS files for a month + + Header set Cache-Control "max-age=2628000, public" + +``` + +Or if you don't want to use the `.htaccess` file you can modify Apache's configuration file `http.conf`. Same goes for Nginx, you can add the caching information in the location or server block. + +#### Caching Recommendations + +There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea + + - You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. `style.ju2i90.css`) so that the cache is automatically rejected whenever the files are updated. + Also it should be noted that you should not cross the upper limit of one year as it [might not be honored](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9) + - Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP. + - Always add the validators (preferably ETags) in your response. + - Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all. + - Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale. + - Test and monitor the caching headers being served by your site. You can use the browser console or `curl -I http://some-url.com` for that purpose. + +And that about wraps it up. Stay tuned for more! diff --git a/src/guides/journey-to-http2.md b/src/guides/journey-to-http2.md new file mode 100644 index 000000000..9b3c95dac --- /dev/null +++ b/src/guides/journey-to-http2.md @@ -0,0 +1,217 @@ +--- +title: "Journey to HTTP/2" +description: "The evolution of HTTP. How it all started and where we stand today" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Journey to HTTP/2 - roadmap.sh" + description: "The evolution of HTTP. How it all started and where we stand today" +isNew: false +type: "textual" +date: 2018-12-04 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +HTTP is the protocol that every web developer should know as it powers the whole web and knowing it is definitely going to help you develop better applications. In this guide, I am going to be discussing what HTTP is, how it came to be, where it is today and how did we get here. + +### What is HTTP? + +First things first, what is HTTP? HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet. By application layer protocol, I mean it's just an abstraction layer that standardizes how the hosts (clients and servers) communicate and itself it depends upon `TCP/IP` to get request and response between the client and server. By default TCP port `80` is used but other ports can be used as well. HTTPS, however, uses port `443`. + +### HTTP/0.9 – The One Liner (1991) + +The first documented version of HTTP was [`HTTP/0.9`](https://www.w3.org/Protocols/HTTP/AsImplemented.html) which was put forward in 1991. It was the simplest protocol ever; having a single method called `GET`. If a client had to access some webpage on the server, it would have made the simple request like below + +```html +GET /index.html +``` +And the response from server would have looked as follows + +```html +(response body) +(connection closed) +``` + +That is, the server would get the request, reply with the HTML in response and as soon as the content has been transferred, the connection will be closed. There were + +- No headers +- `GET` was the only allowed method +- Response had to be HTML + +As you can see, the protocol really had nothing more than being a stepping stone for what was to come. + +### HTTP/1.0 - 1996 + +In 1996, the next version of HTTP i.e. `HTTP/1.0` evolved that vastly improved over the original version. + +Unlike `HTTP/0.9` which was only designed for HTML response, `HTTP/1.0` could now deal with other response formats i.e. images, video files, plain text or any other content type as well. It added more methods (i.e. `POST` and `HEAD`), request/response formats got changed, HTTP headers got added to both the request and responses, status codes were added to identify the response, character set support was introduced, multi-part types, authorization, caching, content encoding and more was included. + +Here is how a sample `HTTP/1.0` request and response might have looked like: + +```html +GET / HTTP/1.0 +Host: kamranahmed.info +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) +Accept: */* +``` + +As you can see, alongside the request, client has also sent its personal information, required response type etc. While in `HTTP/0.9` client could never send such information because there were no headers. + +Example response to the request above may have looked like below + +```html +HTTP/1.0 200 OK +Content-Type: text/plain +Content-Length: 137582 +Expires: Thu, 05 Dec 1997 16:00:00 GMT +Last-Modified: Wed, 5 August 1996 15:55:28 GMT +Server: Apache 0.84 + +(response body) +(connection closed) +``` + +In the very beginning of the response there is `HTTP/1.0` (HTTP followed by the version number), then there is the status code `200` followed by the reason phrase (or description of the status code, if you will). + +In this newer version, request and response headers were still kept as `ASCII` encoded, but the response body could have been of any type i.e. image, video, HTML, plain text or any other content type. So, now that server could send any content type to the client; not so long after the introduction, the term "Hyper Text" in `HTTP` became misnomer. `HMTP` or Hypermedia transfer protocol might have made more sense but, I guess, we are stuck with the name for life. + +One of the major drawbacks of `HTTP/1.0` were you couldn't have multiple requests per connection. That is, whenever a client will need something from the server, it will have to open a new TCP connection and after that single request has been fulfilled, connection will be closed. And for any next requirement, it will have to be on a new connection. Why is it bad? Well, let's assume that you visit a webpage having `10` images, `5` stylesheets and `5` javascript files, totalling to `20` items that needs to fetched when request to that webpage is made. Since the server closes the connection as soon as the request has been fulfilled, there will be a series of `20` separate connections where each of the items will be served one by one on their separate connections. This large number of connections results in a serious performance hit as requiring a new `TCP` connection imposes a significant performance penalty because of three-way handshake followed by slow-start. + +#### Three-way Handshake + +Three-way handshake in its simplest form is that all the `TCP` connections begin with a three-way handshake in which the client and the server share a series of packets before starting to share the application data. + +- `SYN` - Client picks up a random number, let's say `x`, and sends it to the server. +- `SYN ACK` - Server acknowledges the request by sending an `ACK` packet back to the client which is made up of a random number, let's say `y` picked up by server and the number `x+1` where `x` is the number that was sent by the client +- `ACK` - Client increments the number `y` received from the server and sends an `ACK` packet back with the number `y+1` + +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) + +> 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` + +However, some implementations of `HTTP/1.0` tried to overcome this issue by introducing a new header called `Connection: keep-alive` which was meant to tell the server "Hey server, do not close this connection, I need it again". But still, it wasn't that widely supported and the problem still persisted. + +Apart from being connectionless, `HTTP` also is a stateless protocol i.e. server doesn't maintain the information about the client and so each of the requests has to have the information necessary for the server to fulfill the request on its own without any association with any old requests. And so this adds fuel to the fire i.e. apart from the large number of connections that the client has to open, it also has to send some redundant data on the wire causing increased bandwidth usage. + +### HTTP/1.1 - 1999 + +After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was released in 1999; which made alot of improvements over its predecessor. The major improvements over `HTTP/1.0` included + +- **New HTTP methods** were added, which introduced `PUT`, `PATCH`, `OPTIONS`, `DELETE` + +- **Hostname Identification** In `HTTP/1.0` `Host` header wasn't required but `HTTP/1.1` made it required. + +- **Persistent Connections** As discussed above, in `HTTP/1.0` there was only one request per connection and the connection was closed as soon as the request was fulfilled which resulted in acute performance hit and latency problems. `HTTP/1.1` introduced the persistent connections i.e. **connections weren't closed by default** and were kept open which allowed multiple sequential requests. To close the connections, the header `Connection: close` had to be available on the request. Clients usually send this header in the last request to safely close the connection. + +- **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response. + + > It should be noted that in order to benefit from persistent connections or pipelining, `Content-Length` header must be available on the response, because this would let the client know when the transmission completes and it can send the next request (in normal sequential way of sending requests) or start waiting for the next response (when pipelining is enabled). + + > But there was still an issue with this approach. And that is, what if the data is dynamic and server cannot find the content length before hand? Well in that case, you really can't benefit from persistent connections, could you?! In order to solve this `HTTP/1.1` introduced chunked encoding. In such cases server may omit content-Length in favor of chunked encoding (more to it in a moment). However, if none of them are available, then the connection must be closed at the end of request. + +- **Chunked Transfers** In case of dynamic content, when the server cannot really find out the `Content-Length` when the transmission starts, it may start sending the content in pieces (chunk by chunk) and add the `Content-Length` for each chunk when it is sent. And when all of the chunks are sent i.e. whole transmission has completed, it sends an empty chunk i.e. the one with `Content-Length` set to zero in order to identify the client that transmission has completed. In order to notify the client about the chunked transfer, server includes the header `Transfer-Encoding: chunked` + +- Unlike `HTTP/1.0` which had Basic authentication only, `HTTP/1.1` included digest and proxy authentication +- Caching +- Byte Ranges +- Character sets +- Language negotiation +- Client cookies +- Enhanced compression support +- New status codes +- ..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. + +`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. + +### SPDY - 2009 + +Google went ahead and started experimenting with alternative protocols to make the web faster and improving web security while reducing the latency of web pages. In 2009, they announced `SPDY`. + +> `SPDY` is a trademark of Google and isn't an acronym. + +It was seen that if we keep increasing the bandwidth, the network performance increases in the beginning but a point comes when there is not much of a performance gain. But if you do the same with latency i.e. if we keep dropping the latency, there is a constant performance gain. This was the core idea for performance gain behind `SPDY`, decrease the latency to increase the network performance. + +> For those who don't know the difference, latency is the delay i.e. how long it takes for data to travel between the source and destination (measured in milliseconds) and bandwidth is the amount of data transferred per second (bits per second). + +The features of `SPDY` included, multiplexing, compression, prioritization, security etc. I am not going to get into the details of SPDY, as you will get the idea when we get into the nitty gritty of `HTTP/2` in the next section as I said `HTTP/2` is mostly inspired from SPDY. + +`SPDY` didn't really try to replace HTTP; it was a translation layer over HTTP which existed at the application layer and modified the request before sending it over to the wire. It started to become a defacto standards and majority of browsers started implementing it. + +In 2015, at Google, they didn't want to have two competing standards and so they decided to merge it into HTTP while giving birth to `HTTP/2` and deprecating SPDY. + +### HTTP/2 - 2015 + +By now, you must be convinced that why we needed another revision of the HTTP protocol. `HTTP/2` was designed for low latency transport of content. The key features or differences from the old version of `HTTP/1.1` include + +- Binary instead of Textual +- Multiplexing - Multiple asynchronous HTTP requests over a single connection +- Header compression using HPACK +- Server Push - Multiple responses for single request +- Request Prioritization +- Security + +![](http://i.imgur.com/S85j8gg.png) + + +#### 1. Binary Protocol + +`HTTP/2` tends to address the issue of increased latency that existed in HTTP/1.x by making it a binary protocol. Being a binary protocol, it easier to parse but unlike `HTTP/1.x` it is no longer readable by the human eye. The major building blocks of `HTTP/2` are Frames and Streams + +##### Frames and Streams + +HTTP messages are now composed of one or more frames. There is a `HEADERS` frame for the meta data and `DATA` frame for the payload and there exist several other types of frames (`HEADERS`, `DATA`, `RST_STREAM`, `SETTINGS`, `PRIORITY` etc) that you can check through [the `HTTP/2` specs](https:/http2.github.iohttp2-spec/#FrameTypes). + +Every `HTTP/2` request and response is given a unique stream ID and it is divided into frames. Frames are nothing but binary pieces of data. A collection of frames is called a Stream. Each frame has a stream id that identifies the stream to which it belongs and each frame has a common header. Also, apart from stream ID being unique, it is worth mentioning that, any request initiated by client uses odd numbers and the response from server has even numbers stream IDs. + +Apart from the `HEADERS` and `DATA`, another frame type that I think worth mentioning here is `RST_STREAM` which is a special frame type that is used to abort some stream i.e. client may send this frame to let the server know that I don't need this stream anymore. In `HTTP/1.1` the only way to make the server stop sending the response to client was closing the connection which resulted in increased latency because a new connection had to be opened for any consecutive requests. While in HTTP/2, client can use `RST_STREAM` and stop receiving a specific stream while the connection will still be open and the other streams will still be in play. + + +#### 2. Multiplexing + +Since `HTTP/2` is now a binary protocol and as I said above that it uses frames and streams for requests and responses, once a TCP connection is opened, all the streams are sent asynchronously through the same connection without opening any additional connections. And in turn, the server responds in the same asynchronous way i.e. the response has no order and the client uses the assigned stream id to identify the stream to which a specific packet belongs. This also solves the **head-of-line blocking** issue that existed in HTTP/1.x i.e. the client will not have to wait for the request that is taking time and other requests will still be getting processed. + + +#### 3. HPACK 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) + +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. + +While we are talking headers, let me add here that the headers are still the same as in HTTP/1.1, except for the addition of some pseudo headers i.e. `:method`, `:scheme`, `:host` and `:path` + + +#### 4. Server Push + +Server push is another tremendous feature of `HTTP/2` where the server, knowing that the client is going to ask for a certain resource, can push it to the client without even client asking for it. For example, let's say a browser loads a web page, it parses the whole page to find out the remote content that it has to load from the server and then sends consequent requests to the server to get that content. + +Server push allows the server to decrease the round trips by pushing the data that it knows that client is going to demand. How it is done is, server sends a special frame called `PUSH_PROMISE` notifying the client that, "Hey, I am about to send this resource to you! Do not ask me for it." The `PUSH_PROMISE` frame is associated with the stream that caused the push to happen and it contains the promised stream ID i.e. the stream on which the server will send the resource to be pushed. + +#### 5. Request Prioritization + +A client can assign a priority to a stream by including the prioritization information in the `HEADERS` frame by which a stream is opened. At any other time, client can send a `PRIORITY` frame to change the priority of a stream. + +Without any priority information, server processes the requests asynchronously i.e. without any order. If there is priority assigned to a stream, then based on this prioritization information, server decides how much of the resources need to be given to process which request. + +#### 6. Security + +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. + +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/). + +And that about wraps it up. Until next time! stay tuned. diff --git a/src/guides/jwt-authentication.md b/src/guides/jwt-authentication.md new file mode 100644 index 000000000..3a9569edd --- /dev/null +++ b/src/guides/jwt-authentication.md @@ -0,0 +1,24 @@ +--- +title: "JWT Authentication" +description: "Understand what is JWT authentication and how is it implemented" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "JWT Authentication - roadmap.sh" + description: "Understand what is JWT authentication and how is it implemented" +isNew: false +type: "visual" +date: 2021-06-20 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png) + diff --git a/src/guides/levels-of-seniority.md b/src/guides/levels-of-seniority.md new file mode 100644 index 000000000..8d29a0084 --- /dev/null +++ b/src/guides/levels-of-seniority.md @@ -0,0 +1,94 @@ +--- +title: "Levels of Seniority" +description: "How to Step Up as a Junior, Mid Level or a Senior Developer?" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Levels of Seniority - roadmap.sh" + description: "How to Step Up as a Junior, Mid Level or a Senior Developer?" +isNew: false +type: "textual" +date: 2020-12-03 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +I have been working on redoing the [roadmaps](https://roadmap.sh) – splitting the skillset based on the seniority levels to make them easier to follow and not scare the new developers away. Since the roadmaps are going to be just about the technical knowledge, I thought it would be a good idea to reiterate and have an article on what I think of different seniority roles. + +I have seen many organizations decide the seniority of developers by giving more significance to the years of experience than they should. I have seen developers labeled "Junior" doing the work of Senior Developers and I have seen "Lead" developers who weren't even qualified to be called "Senior". The seniority of a developer cannot just be decided by their age, years of experience or technical knowledge that they have got. There are other factors in play here -- their perception of work, how they interact with their peers and how they approach problems. We discuss these three key factors in detail for each of the seniority levels below. + +### Different Seniority Titles +Different organizations might have different seniority titles but they mainly fall into three categories: + +* Junior Developer +* Mid Level Developer +* Senior Developer + +### Junior Developer +Junior developers are normally fresh graduates and it's either they don't have or they have minimal industry experience. Not only they have weak coding skills but there are also a few other things that give Junior developers away: + +* Their main mantra is "making it work" without giving much attention to how the solution is achieved. To them, a working software and good software are equivalent. +* They usually require very specific and structured directions to achieve something. They suffer from tunnel vision, need supervision and continuous guidance to be effective team members. +* Most of the Junior developers just try to live up to the role and, when stuck, they might leave work for a senior developer instead of at least trying to take a stab at something. +* They don't know about the business side of the company and don't realize how management/sales/marketing/etc think and they don't realize how much rework, wasted effort, and end-user aggravation could be saved by getting to know the business domain. +* Over-engineering is a major problem, often leading to fragility and bugs. +* When given a problem, they often try to fix just the current problem a.k.a. fixing the symptoms instead of fixing the root problem. +* You might notice the "[Somebody Else's Problem](https://en.wikipedia.org/wiki/Somebody_else%27s_problem)" behavior from them. +* They don't know what or how much they don't know, thanks to the [Dunning–Kruger effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect). +* They don't take initiatives and they might be afraid to work on an unfamiliar codebase. +* They don't participate in team discussions. + +Being a Junior developer in the team is not necessarily a bad thing; since you are just starting out, you are not expected to be a know-it-all person. However, it is your responsibility to learn, gain experience, not get stuck with the "Junior" title and improve yourself. Here are a few tips for Junior developers to help move up the ladder of seniority: + +* All sorts of problems can be solved if you work on them long enough. Do not give up if Stack Overflow or an issue on GitHub doesn't have an answer. Saying "I am stuck, but I have tried X, Y, and Z. Do you have any pointers?" to your lead is much better than saying "This is beyond me." +* Read a lot of code, not just code in the projects that you are working on, but reference/framework source code, open-source. Ask your fellow developers, perhaps on Reddit too, about the good open-source examples for the language/tools of your choice. +* Do personal side-projects, share them with people, contribute to the open-source community. Reach out to people for help. You will be surprised how much support you can get from the community. I still remember my first open-source project on GitHub from around 6 years ago which was a small PHP script (a library) that fetched details for a given address from Google's Geocoding API. The codebase was super messy, it did not have any tests, did not have any linters or sniffers, and it did not have any CI because I didn't know about any of this at that time. I am not sure how but one kind soul somehow found the project, forked it, refactored it, "modernized" it, added linting, code sniffing, added CI and opened the pull request. This one pull request taught me so many things that I might have never learned that fast on my own because I was still in college, working for a small service-based company and doing just small websites all on my own without knowing what is right and what is not. This one PR on GitHub was my introduction to open-source and I owe everything to that. +* Avoid what is known as ["Somebody Else's Problem Field"](https://en.wikipedia.org/wiki/Somebody_else%27s_problem) behavior. +* When given a problem to solve, try to identify the root cause and fix that instead of fixing the symptoms. And remember, not being able to reproduce means not solved. It is solved when you understand why it occurred and why it no longer does. +* Have respect for the code that was written before you. Be generous when passing judgment on the architecture or the design decisions made in the codebase. Understand that code is often ugly and weird for a reason other than incompetence. Learning to live with and thrive with legacy code is a great skill. Never assume anybody is stupid. Instead, figure out how these intelligent, well-intentioned and experienced people have come to a decision that is stupid now. Approach inheriting legacy code with an "opportunity mindset" rather than a complaining one. +* It's okay to not know things. You don't need to be ashamed of not knowing things already. There are no stupid questions, ask however many questions that would allow you to work effectively. +* Don't let yourself be limited by the job title that you have. Keep working on your self-improvement. +* Do your homework. Predict what’s coming down the pipe. Be involved in the team discussions. Even if you are wrong, you will learn something. +* Learn about the domain that you are working with. Understand the product end-to-end as an end-user. Do not assume things, ask questions and get things cleared when in doubt. +* Learn to communicate effectively - soft skills matter. Learn how to write good emails, how to present your work, how to phrase your questions in a thoughtful manner. +* Sit with the senior developers, watch them work, find a mentor. No one likes a know-it-all. Get hold of your ego and be humble enough to take lessons from experienced people. +* Don't just blindly follow the advice of "experts", take it with a grain of salt. +* If you are asked to provide an estimate for some work, do not give an answer unless you have all the details to make a reasonable estimate. If you are forced to do that, pad it 2x or more depending on how much you don't know about what needs to be done for the task to be marked 'done'. +* Take some time to learn how to use a debugger. Debuggers are quite beneficial when navigating new, undocumented or poorly documented codebase, or to debug weird issues. +* Avoid saying "it works on my machine" -- yes, I have heard that a lot. +* Try to turn any feelings of inadequacy or imposter syndrome into energy to push yourself forward and increase your skills and knowledge. + +### Mid Level Developers +The next level after the Junior developers is Mid Level developers. They are technically stronger than the Junior developers and can work with minimal supervision. They still have some issues to address in order to jump to Senior level. + +Intermediate developers are more competent than the Junior developer. They start to see the flaws in their old codebase. They gain the knowledge but they get trapped into the next chain i.e. messing things up while trying to do them "the right way" e.g. hasty abstractions, overuse or unnecessary usage of Design Patterns -- they may be able to provide solution faster than the Junior developers but the solution might put you into another rabbit-hole in the long run. Without supervision, they might delay the execution while trying to "do things properly". They don't know when to make tradeoffs and they still don't know when to be dogmatic and when to be pragmatic. They can easily become attached to their solution, become myopic, and be unable to take feedback. + +Mid-level developers are quite common. Most of the organizations wrongly label them as "Senior Developers". However, they need further mentoring in order to become Senior Developers. The next section describes the responsibilities of a senior developer and how you can become one. + +### Senior Developers +Senior developers are the next level after the Mid-level developers. They are the people who can get things done on their own without any supervision and without creating any issues down the road. They are more mature, have gained experience by delivering both good and bad software in the past and have learned from it — they know how to be pragmatic. Here is the list of things that are normally expected of a Senior Developer: + +* With their past experiences, mistakes made, issues faced by over-designed or under-designed software, they can foresee the problems and persuade the direction of the codebase or the architecture. +* They don't have a "Shiny-Toy" syndrome. They are pragmatic in the execution. They can make the tradeoffs when required, and they know why. They know where to be dogmatic and where to be pragmatic. +* They have a good picture of the field, know what the best tool for the job is in most cases (even if they don't know the tool). They have the innate ability to pick up a new tool/language/paradigm/etc in order to solve a problem that requires it. +* They are aware they're on a team. They view it as a part of their responsibility to mentor others. This can range from pair programming with junior devs to taking un-glorious tasks of writing docs or tests or whatever else needs to be done. +* They have a deep understanding of the domain - they know about the business side of the company and realize how management/sales/marketing/etc think and benefit from their knowledge of the business domain during the development. +* They don't make empty complaints, they make judgments based on the empirical evidence and they have suggestions for solutions. +* They think much more than just code - they know that their job is to provide solutions to the problems and not just to write code. +* They have the ability to take on large ill-defined problems, define them, break them up, and execute the pieces. A senior developer can take something big and abstract, and run with it. They will come up with a few options, discuss them with the team and implement them. +* They have respect for the code that was written before them. They are generous when passing judgment on the architecture or the design decisions made in the codebase. They approach inheriting legacy code with an "opportunity mindset" rather than a complaining one. +* They know how to give feedback without hurting anyone. + +### Conclusion +All teams are made up of a mix of all these seniority roles. Being content with your role is a bad thing and you should always strive to improve yourself for the next step. This article is based on my beliefs and observations in the industry. Lots of companies care more for the years of experience to decide the seniority which is a crappy metric -- you don't gain experience just by spending years. You gain it by continuously solving different sorts of problems, irrespective of the number of years you spend in the industry. I have seen fresh graduates having no industry experience get up to speed quickly and producing work of a Senior Engineer and I have seen Senior developers labeled "senior" merely because of their age and "years of experience". + +The most important traits that you need to have in order to step up in your career are: not settling with mediocrity, having an open mindset, being humble, learning from your mistakes, working on the challenging problems and having an opportunity mindset rather than a complaining one. + +With that said, this post comes to an end. What are your thoughts on the levels of seniority of developers? Feel free to send improvements to this guide. Until next time, stay tuned! diff --git a/src/guides/oauth.md b/src/guides/oauth.md new file mode 100644 index 000000000..4e662192f --- /dev/null +++ b/src/guides/oauth.md @@ -0,0 +1,24 @@ +--- +title: "OAuth — Open Authorization" +description: "Learn and understand what is OAuth and how it works" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "OAuth — Open Authorization - roadmap.sh" + description: "Learn and understand what is OAuth and how it works" +isNew: false +type: "visual" +date: 2021-06-28 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/oauth.png)](/guides/oauth.png) + diff --git a/src/guides/proxy-servers.md b/src/guides/proxy-servers.md new file mode 100644 index 000000000..7f45a25b4 --- /dev/null +++ b/src/guides/proxy-servers.md @@ -0,0 +1,69 @@ +--- +title: "Proxy Servers" +description: "How do proxy servers work and what are forward and reverse proxies?" +author: + name: "Ebrahim Bharmal" + url: "https://twitter.com/BharmalEbrahim" + imageUrl: "/authors/ebrahimbharmal007.png" +seo: + title: "Proxy Servers - roadmap.sh" + description: "How do proxy servers work and what are forward and reverse proxies?" +isNew: false +type: "textual" +date: 2017-10-24 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +The Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide, we will talk about **proxies** that play a vital role in mitigating these risks. We will cover the following topics in this guide: + +- [Proxy Server](#proxy-server) +- [Forward Proxy Server](#forward-proxy-server) +- [Reverse Proxy Server](#reverse-proxy-server) +- [Summary](#summary) + +## Proxy Server + +***Every web request which is sent from the client to a web server goes through some type of proxy server.*** A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server. + +![Proxy Server Description](/guides/proxy/proxy-example.png) +> NOTE: This is not an accurate description but rather just an illustration. + +Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing the load on their servers as their website is visited by millions of users every day. + +## Forward Proxy Server + +A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage the internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure the company's network by blocking any request which would pose threat to the company's network. Proxy servers are also used to **bypass geo-restriction** and browse content that might be blocked in the user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. + +![Forward Proxy Description](/guides/proxy/forward-proxy.png) +> NOTE: This is not an accurate description but rather just an illustration + +## Reverse Proxy Server + +Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade the performance of the website by introducing a high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, a reverse proxy server is a gateway to a web-server or group of web-servers. + +![Reverse Proxy Description](/guides/proxy/reverse-proxy.png) +> NOTE: This is not an accurate description but rather just an illustration. Red lines represent the server's response and black lines represent the initial request from client(s). + +## Summary + +A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***. A Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manage the incoming requests by forwarding them to the web servers. + +If all this was too much to take in, I have a simple analogy for you. + +At a restaurant, the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen. + +In this analogy: + +* You are the client +* Your order is the web request +* Waiter/Waitress is your forward proxy server +* Kitchen head chef is the reverse proxy server +* Other chefs working in the kitchen are the web servers + +With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below. diff --git a/src/guides/random-numbers.md b/src/guides/random-numbers.md new file mode 100644 index 000000000..f5675402e --- /dev/null +++ b/src/guides/random-numbers.md @@ -0,0 +1,26 @@ +--- +title: "Random Numbers: Are they?" +description: "Learn how they are generated and why they may not be truly random." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Random Numbers: Are they? - roadmap.sh" + description: "Learn how they are generated and why they may not be truly random." +isNew: false +type: "visual" +date: 2021-03-14 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +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) + diff --git a/src/guides/scaling-databases.md b/src/guides/scaling-databases.md new file mode 100644 index 000000000..c00d43223 --- /dev/null +++ b/src/guides/scaling-databases.md @@ -0,0 +1,26 @@ +--- +title: "Scaling Databases" +description: "Learn the ups and downs of different database scaling strategies" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Scaling Databases - roadmap.sh" + description: "Learn the ups and downs of different database scaling strategies" +isNew: false +type: "visual" +date: 2021-02-18 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +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) + diff --git a/src/guides/session-authentication.md b/src/guides/session-authentication.md new file mode 100644 index 000000000..2d3c4e179 --- /dev/null +++ b/src/guides/session-authentication.md @@ -0,0 +1,24 @@ +--- +title: "Session Based Authentication" +description: "Understand what is session based authentication and how it is implemented" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Session Based Authentication - roadmap.sh" + description: "Understand what is session based authentication and how it is implemented" +isNew: false +type: "visual" +date: 2021-05-26 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/session-authentication.png)](/guides/session-authentication.png) + diff --git a/src/guides/session-based-authentication.md b/src/guides/session-based-authentication.md new file mode 100644 index 000000000..ed6d9b7b7 --- /dev/null +++ b/src/guides/session-based-authentication.md @@ -0,0 +1,221 @@ +--- +title: "Session Based Authentication" +description: "Learn what is Session Based Authentication and how to implement it in Node.js" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Session Based Authentication - roadmap.sh" + description: "Learn what is Session Based Authentication and how to implement it in Node.js" +isNew: true +type: "textual" +date: 2022-11-01 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +HTTP is the internet protocol that standardizes how clients and servers interact with each other. When you open a website, among other things, HTTP is the protocol that helps load the website in the browser. + +## HTTP is Stateless +HTTP is a stateless protocol which means that each request made from the client to the server is treated as a standalone request; neither the client nor the server keeps track of the subsequent requests. Sessions allow you to change that; with sessions, the server has a way to associate some information with the client so that when the same client requests the server, it can retrieve that information. + +In this guide, we will learn what is Session-Based Authentication and how to implement it in Node.js. We also have a separate [visual guide on Session-Based Authentication](/guides/session-authentication) as well that explains the topic visually. + +## What is Session-Based Authentication? +Session-based authentication is a stateful authentication technique where we use sessions to keep track of the authenticated user. Here is how Session Based Authentication works: + +* User submits the login request for authentication. +* Server validates the credentials. If the credentials are valid, the server initiates a session and stores some information about the client. This information can be stored in memory, file system, or database. The server also generates a unique identifier that it can later use to retrieve this session information from the storage. Server sends this unique session identifier to the client. +* Client saves the session id in a cookie and this cookie is sent to the server in each request made after the authentication. +* Server, upon receiving a request, checks if the session id is present in the request and uses this session id to get information about the client. + +And that is how session-based authentication works. + +## Session-Based Authentication in Node.js +Now that we know what session-based authentication is, let's see how we can implement session-based authentication in Node.js. + +Please note that, for the sake of simplicity, I have intentionally kept the project strictly relevant to the Session Based Authentication and have left out a lot of details that a production-ready application may require. Also, if you don't want to follow along, project [codebase can be found on GitHub](https://github.com/kamranahmedse/node-session-auth-example). + +First things first, create an empty directory that will be holding our application. + +```shell +mkdir session-auth-example +``` +Now run the following command to setup a sample `package.json` file: +```shell +npm init -y +``` +Next, we need to install the dependencies: +```shell +npm install express express-session +``` +`Express` is the application framework, and `express-session` is the package that helps work with sessions easily. + +### Setting up the server +Now create an `index.js` file at the root of the project with the following content: + +```javascript +const express = require('express'); +const sessions = require('express-session'); + +const app = express(); + +app.use(sessions({ + secret: "some secret", + cookie: { + maxAge: 1000 * 60 * 60 * 24 // 24 hours + }, + resave: true, + saveUninitialized: false, +})); + +app.use(express.json()); +app.use(express.urlencoded({extended: true})); + +// @todo register routes + +app.listen(3000, () => { + console.log(`Server Running at port 3000`); +}); +``` +The important piece to note here is the `express-session` middleware registration which automatically handles the session initialization, cooking parsing and session data retrieval, and so on. In our example here, we are passing the following configuration options: +* `secret`: This is used to sign the session ID cookie. Using a secret that cannot be guessed will reduce the ability to hijack a session. +* `cookie`: Object containing the configuration for session id cookie. +* `resave`: Forces the session to be saved back to the session store, even if the session data was never modified during the request. +* `saveUninitialized`: Forces an "uninitialized" session to be saved to the store, i.e., saves a session to the store even if the session was not initiated. + +Another important option is `store` which we can configure to change how/where the session data is stored on the server. By default, this data is stored in the memory, i.e., `MemoryStore`. + +Look at the [express-session documentation](https://github.com/expressjs/session) to learn more about the available options. + +### Creating Handlers +Create a directory called the `handlers` at the project's root. This is the directory where we will be placing all the route-handling functions. + +Now let's create the homepage route, which will show the welcome message and a link to log out for the logged-in users and redirect to the login screen for the logged-out users. Create a file at `handlers/home.js` with the following content. + +```javascript +module.exports = function HomeHandler(req, res) { + if (!req.session.userid) { + return res.redirect('/login'); + } + + res.setHeader('Content-Type', 'text/HTML') + res.write(` +

Welcome back ${req.session.userid}

+ Logout + `); + + res.end() +} +``` + +At the top of this function, you will notice the check `req.session.userid`. `req.session` is automatically populated using the session cookie by the `express-session` middleware that we registered earlier. `req.session.userid` is one of the data fields that we will set to store the `userid` of the logged in user. + +Next, we need to register this handler with a route. Open the `index.js` file at the root of the project and register the following route: + +```javascript +const HomeHandler = require('./handlers/home.js'); + +app.get('/', HomeHandler); +``` + +Next, we have the login page, redirecting the user to the home screen if the user is logged in or showing the login form. Create a file at `handlers/login.js` with the following content: + +```javascript +module.exports = function LoginHandler(req, res) { + if (req.session.userid) { + return res.redirect('/'); + } + + res.setHeader('Content-Type', 'text/HTML') + res.write(` +

Login

+
+
+
+ +
+ `); + + res.end(); +} +``` +Again, at the top of the function, we are simply checking if we have `userid` in the session (which means the user is logged in). If the user is logged in, we redirect them to the homepage; if not, we show the login screen. In the login form, we have the method of `post`, and we submit the form to `/process-login`. Please note that, for the sake of simplicity, we have a simple HTML string returned in the response, but in a real-world application, you will probably have a separate view file. + +Let's first register this page and then implement `/process-login` endpoint. Open the `index.js` file from the root of the project and register the following route: + +```javascript +const LoginHandler = require('./handlers/login.js'); + +app.get('/login', LoginHandler); +``` + +Next, we have to implement the functionality to process the login form submissions. Create a file at `handlers/process-login.js` with the following content: + +```javascript +module.exports = function processLogin(req, res) { + if (req.body.username !== 'admin' || req.body.password !== 'admin') { + return res.send('Invalid username or password); + } + + req.session.userid = req.body.username; + + res.redirect('/'); +} +``` + +As you can see, we are simply checking that the username and password should both be `admin` and `admin` for a user to authenticate successfully. Upon finding valid credentials, we set the `userid` in the session by updating `req.session.userid`. Similarly, you can set any data in the session. For example, if we wanted to store the user role, we would do the following: + +```javascript +req.session.role = 'admin' +``` + +And later access this value out of the session anywhere in the subsequent requests. + +Register this route in the `index.js` file at the root of the project: + +```javascript +const ProcessLoginHandler = require('./handlers/process-login.js'); + +app.post('/process-login', ProcessLoginHandler); +``` + +Finally, we have the logout functionality. Create a file at `handlers/logout.js` with the following content: + +```javascript +module.exports = function Logout(req, res) { + req.session.destroy(); + res.redirect('/'); +} +``` + +We reset the session by calling `req.session.destroy()` and then redirecting the user to the homepage. Register the logout handler in the `index.js` file using the following: + +```javascript +const LogoutHandler = require('./handlers/logout.js'); + +app.get('/logout', LogoutHandler); +``` + +## Running the Application +Open the `package.json` file and register the `start` script as follows: + +```javascript +"scripts": { + "start": "node index.js" +}, +``` + +Now you can start the application by running the following command: + +```shell +npm run start +``` + +Now, if you open up your browser and visit the project at `http://localhost:3000` you will be able to see the Session-Based Authentication in action. diff --git a/src/guides/ssl-tls-https-ssh.md b/src/guides/ssl-tls-https-ssh.md new file mode 100644 index 000000000..91e65c85a --- /dev/null +++ b/src/guides/ssl-tls-https-ssh.md @@ -0,0 +1,24 @@ +--- +title: "SSL vs TLS vs SSH" +description: "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "SSL vs TLS vs SSH - roadmap.sh" + description: "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH" +isNew: false +type: "visual" +date: 2021-04-22 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png) + diff --git a/src/guides/sso.md b/src/guides/sso.md new file mode 100644 index 000000000..0883d9b58 --- /dev/null +++ b/src/guides/sso.md @@ -0,0 +1,24 @@ +--- +title: "SSO — Single Sign On" +description: "Learn the basics of SAML and understand how does Single Sign On work." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "SSO — Single Sign On - roadmap.sh" + description: "Learn the basics of SAML and understand how does Single Sign On work." +isNew: false +type: "visual" +date: 2021-07-01 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/sso.png)](/guides/sso.png) + diff --git a/src/guides/token-authentication.md b/src/guides/token-authentication.md new file mode 100644 index 000000000..c65d5b871 --- /dev/null +++ b/src/guides/token-authentication.md @@ -0,0 +1,24 @@ +--- +title: "Token Based Authentication" +description: "Understand what is token based authentication and how it is implemented" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Token Based Authentication - roadmap.sh" + description: "Understand what is token based authentication and how it is implemented" +isNew: false +type: "visual" +date: 2021-06-02 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/token-authentication.png)](/guides/token-authentication.png) + diff --git a/src/guides/torrent-client.md b/src/guides/torrent-client.md new file mode 100644 index 000000000..e6624a8e7 --- /dev/null +++ b/src/guides/torrent-client.md @@ -0,0 +1,586 @@ +--- +title: "Building a BitTorrent Client" +description: "Learn everything you need to know about BitTorrent by writing a client in Go" +author: + name: "Jesse Li" + url: "https://twitter.com/__jesse_li" + imageUrl: "/authors/jesse.png" +seo: + title: "Building a BitTorrent Client - roadmap.sh" + description: "Learn everything you need to know about BitTorrent by writing a client in Go" +isNew: false +type: "textual" +date: 2021-01-17 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +BitTorrent is a protocol for downloading and distributing files across the Internet. In contrast with the traditional client/server relationship, in which downloaders connect to a central server (for example: watching a movie on Netflix, or loading the web page you're reading now), participants in the BitTorrent network, called **peers**, download pieces of files from *each other*—this is what makes it a **peer-to-peer** protocol. In this article we will investigate how this works, and build our own client that can find peers and exchange data between them. + +![diagram showing the difference between client/server (all clients connecting to one server) and peer-to-peer (peers connecting to each other) relationships](/guides/torrent-client/client-server-p2p.png) + +The protocol evolved organically over the past 20 years, and various people and organizations added extensions for features like encryption, private torrents, and new ways of finding peers. We'll be implementing the [original spec](https://www.bittorrent.org/beps/bep_0003.html) from 2001 to keep this a weekend-sized project. + +I'll be using a [Debian ISO](https://cdimage.debian.org/debian-cd/current/amd64/bt-cd/#indexlist) file as my guinea pig because it's big, but not huge, at 350MB. As a popular Linux distribution, there will be lots of fast and cooperative peers for us to connect to. And we'll avoid the legal and ethical issues related to downloading pirated content. + +## Finding peers +Here’s a problem: we want to download a file with BitTorrent, but it’s a peer-to-peer protocol and we have no idea where to find peers to download it from. This is a lot like moving to a new city and trying to make friends—maybe we’ll hit up a local pub or a meetup group! Centralized locations like these are the big idea behind trackers, which are central servers that introduce peers to each other. They’re just web servers running over HTTP, and you can find Debian’s at http://bttracker.debian.org:6969/ + +![illustration of a desktop computer and laptop sitting at a pub](/guides/torrent-client/trackers.png) + +Of course, these central servers are liable to get raided by the feds if they facilitate peers exchanging illegal content. You may remember reading about trackers like TorrentSpy, Popcorn Time, and KickassTorrents getting seized and shut down. New methods cut out the middleman by making even **peer discovery** a distributed process. We won't be implementing them, but if you're interested, some terms you can research are **DHT**, **PEX**, and **magnet links**. + +### Parsing a .torrent file +A .torrent file describes the contents of a torrentable file and information for connecting to a tracker. It's all we need in order to kickstart the process of downloading a torrent. Debian's .torrent file looks like this: + +```markdown +d8:announce41:http://bttracker.debian.org:6969/announce7:comment35:"Debian CD from cdimage.debian.org"13:creation datei1573903810e9:httpseedsl145:https://cdimage.debian.org/cdimage/release/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.iso145:https://cdimage.debian.org/cdimage/archive/10.2.0//srv/cdbuilder.debian.org/dst/deb-cd/weekly-builds/amd64/iso-cd/debian-10.2.0-amd64-netinst.isoe4:infod6:lengthi351272960e4:name31:debian-10.2.0-amd64-netinst.iso12:piece lengthi262144e6:pieces26800:�����PS�^�� (binary blob of the hashes of each piece)ee +``` + +That mess is encoded in a format called **Bencode** (pronounced *bee-encode*), and we'll need to decode it. + +Bencode can encode roughly the same types of structures as JSON—strings, integers, lists, and dictionaries. Bencoded data is not as human-readable/writable as JSON, but it can efficiently handle binary data and it's really simple to parse from a stream. Strings come with a length prefix, and look like `4:spam`. Integers go between *start* and *end* markers, so `7` would encode to `i7e`. Lists and dictionaries work in a similar way: `l4:spami7ee` represents `['spam', 7]`, while `d4:spami7ee` means `{spam: 7}`. + + +In a prettier format, our .torrent file looks like this: + +```markdown +d + 8:announce + 41:http://bttracker.debian.org:6969/announce + 7:comment + 35:"Debian CD from cdimage.debian.org" + 13:creation date + i1573903810e + 4:info + d + 6:length + i351272960e + 4:name + 31:debian-10.2.0-amd64-netinst.iso + 12:piece length + i262144e + 6:pieces + 26800:�����PS�^�� (binary blob of the hashes of each piece) + e +e +``` + +In this file, we can spot the URL of the tracker, the creation date (as a Unix timestamp), the name and size of the file, and a big binary blob containing the SHA-1 hashes of each **piece**, which are equally-sized parts of the file we want to download. The exact size of a piece varies between torrents, but they are usually somewhere between 256KB and 1MB. This means that a large file might be made up of *thousands* of pieces. We'll download these pieces from our peers, check them against the hashes from our torrent file, assemble them together, and boom, we've got a file! + +!["illustration of a file being cut with scissors into multiple pieces, starting with piece 0](/guides/torrent-client/pieces.png) + +This mechanism allows us to verify the integrity of each piece as we go. It makes BitTorrent resistant to accidental corruption or intentional **torrent poisoning**. Unless an attacker is capable of breaking SHA-1 with a preimage attack, we will get exactly the content we asked for. + +It would be really fun to write a bencode parser, but parsing isn't our focus today. But I found Fredrik Lundh's [50 line parser](https://effbot.org/zone/bencode.htm) to be especially illuminating. For this project, I used [github.com/jackpal/bencode-go](https://github.com/jackpal/bencode-go): + +```go +import ( + "github.com/jackpal/bencode-go" +) + +type bencodeInfo struct { + Pieces string `bencode:"pieces"` + PieceLength int `bencode:"piece length"` + Length int `bencode:"length"` + Name string `bencode:"name"` +} + +type bencodeTorrent struct { + Announce string `bencode:"announce"` + Info bencodeInfo `bencode:"info"` +} + +// Open parses a torrent file +func Open(r io.Reader) (*bencodeTorrent, error) { + bto := bencodeTorrent{} + err := bencode.Unmarshal(r, &bto) + if err != nil { + return nil, err + } + return &bto, nil +} +``` + +Because I like to keep my structures relatively flat, and I like to keep my application structs separate from my serialization structs, I exported a different, flatter struct named `TorrentFile` and wrote a few helper functions to convert between the two. + +Notably, I split `pieces` (previously a string) into a slice of hashes (each `[20]byte`) so that I can easily access individual hashes later. I also computed the SHA-1 hash of the entire bencoded `info` dict (the one which contained the name, size, and piece hashes). We know this as the **infohash** and it uniquely identifies files when we talk to trackers and peers. More on this later. + +![a name tag saying 'Hello my name is 86d4c80024a469be4c50bc5a102cf71780310074'](/guides/torrent-client/info-hash.png) + +```go +type TorrentFile struct { + Announce string + InfoHash [20]byte + PieceHashes [][20]byte + PieceLength int + Length int + Name string +} + +func (bto *bencodeTorrent) toTorrentFile() (*TorrentFile, error) { + // ... +} +``` + +### Retrieving peers from the tracker +Now that we have information about the file and its tracker, let's talk to the tracker to **announce** our presence as a peer and to retrieve a list of other peers. We just need to make a GET request to the `announce` URL supplied in the .torrent file, with a few query parameters: + +```go +func (t *TorrentFile) buildTrackerURL(peerID [20]byte, port uint16) (string, error) { + base, err := url.Parse(t.Announce) + if err != nil { + return "", err + } + params := url.Values{ + "info_hash": []string{string(t.InfoHash[:])}, + "peer_id": []string{string(peerID[:])}, + "port": []string{strconv.Itoa(int(Port))}, + "uploaded": []string{"0"}, + "downloaded": []string{"0"}, + "compact": []string{"1"}, + "left": []string{strconv.Itoa(t.Length)}, + } + base.RawQuery = params.Encode() + return base.String(), nil +} +``` + +The important ones: + +* **info_hash**: Identifies the *file* we're trying to download. It's the infohash we calculated earlier from the bencoded `info` dict. The tracker will use this to figure out which peers to show us. +* **peer_id**: A 20 byte name to identify *ourselves* to trackers and peers. We'll just generate 20 random bytes for this. Real BitTorrent clients have IDs like `-TR2940-k8hj0wgej6ch` which identify the client software and version—in this case, TR2940 stands for Transmission client 2.94. + +![a file with a name tag saying 'info_hash' and a person with a name tag 'peer_id'](/guides/torrent-client/info-hash-peer-id.png) + +### Parsing the tracker response +We get back a bencoded response: + +```markdown +d + 8:interval + i900e + 5:peers + 252:(another long binary blob) +e +``` + +`Interval` tells us how often we're supposed to connect to the tracker again to refresh our list of peers. A value of 900 means we should reconnect every 15 minutes (900 seconds). + +`Peers` is another long binary blob containing the IP addresses of each peer. It's made out of **groups of six bytes**. The first four bytes in each group represent the peer's IP address—each byte represents a number in the IP. The last two bytes represent the port, as a big-endian `uint16`. **Big-endian**, or **network order**, means that we can interpret a group of bytes as an integer by just squishing them together left to right. For example, the bytes `0x1A`, `0xE1` make `0x1AE1`, or 6881 in decimal. + +![diagram showing how 192, 0, 2, 123, 0x1A, 0xE1 can be interpreted as 192.0.1.123:6881](/guides/torrent-client/address.png) + +```go +// Peer encodes connection information for a peer +type Peer struct { + IP net.IP + Port uint16 +} + +// Unmarshal parses peer IP addresses and ports from a buffer +func Unmarshal(peersBin []byte) ([]Peer, error) { + const peerSize = 6 // 4 for IP, 2 for port + numPeers := len(peersBin) / peerSize + if len(peersBin)%peerSize != 0 { + err := fmt.Errorf("Received malformed peers") + return nil, err + } + peers := make([]Peer, numPeers) + for i := 0; i < numPeers; i++ { + offset := i * peerSize + peers[i].IP = net.IP(peersBin[offset : offset+4]) + peers[i].Port = binary.BigEndian.Uint16(peersBin[offset+4 : offset+6]) + } + return peers, nil +} +``` + +## Downloading from peers +Now that we have a list of peers, it's time to connect with them and start downloading pieces! We can break down the process into a few steps. For each peer, we want to: + +1. Start a TCP connection with the peer. This is like starting a phone call. +2. Complete a two-way BitTorrent **handshake**. *"Hello?" "Hello."* +3. Exchange **messages** to download **pieces**. *"I'd like piece #231 please."* + +## Start a TCP connection +```go +conn, err := net.DialTimeout("tcp", peer.String(), 3*time.Second) +if err != nil { + return nil, err +} +``` + +I set a timeout so that I don't waste too much time on peers that aren't going to let me connect. For the most part, it's a pretty standard TCP connection. + +### Complete the handshake +We've just set up a connection with a peer, but we want do a handshake to validate our assumptions that the peer + +* can communicate using the BitTorrent protocol +* is able to understand and respond to our messages +* has the file that we want, or at least knows what we're talking about + +![Two computers communicating. One asks 'do you speak BitTorrent and have this file?' and the other replies 'I speak BitTorrent and have that file'](/guides/torrent-client/handshake.png) + +My father told me that the secret to a good handshake is a firm grip and eye contact. The secret to a good BitTorrent handshake is that it's made up of five parts: + +1. The length of the protocol identifier, which is always 19 (0x13 in hex) +2. The protocol identifier, called the **pstr** which is always `BitTorrent protocol` +3. Eight **reserved bytes**, all set to 0. We'd flip some of them to 1 to indicate that we support certain [extensions](http://www.bittorrent.org/beps/bep_0010.html). But we don't, so we'll keep them at 0. +4. The **infohash** that we calculated earlier to identify which file we want +5. The **Peer ID** that we made up to identify ourselves + +Put together, a handshake string might look like this: + +```markdown +\x13BitTorrent protocol\x00\x00\x00\x00\x00\x00\x00\x00\x86\xd4\xc8\x00\x24\xa4\x69\xbe\x4c\x50\xbc\x5a\x10\x2c\xf7\x17\x80\x31\x00\x74-TR2940-k8hj0wgej6ch +``` + +After we send a handshake to our peer, we should receive a handshake back in the same format. The infohash we get back should match the one we sent so that we know that we're talking about the same file. If everything goes as planned, we're good to go. If not, we can sever the connection because there's something wrong. *"Hello?" "这是谁？ 你想要什么？" "Okay, wow, wrong number."* + +In our code, let's make a struct to represent a handshake, and write a few methods for serializing and reading them: + +```go +// A Handshake is a special message that a peer uses to identify itself +type Handshake struct { + Pstr string + InfoHash [20]byte + PeerID [20]byte +} + +// Serialize serializes the handshake to a buffer +func (h *Handshake) Serialize() []byte { + buf := make([]byte, len(h.Pstr)+49) + buf[0] = byte(len(h.Pstr)) + curr := 1 + curr += copy(buf[curr:], h.Pstr) + curr += copy(buf[curr:], make([]byte, 8)) // 8 reserved bytes + curr += copy(buf[curr:], h.InfoHash[:]) + curr += copy(buf[curr:], h.PeerID[:]) + return buf +} + +// Read parses a handshake from a stream +func Read(r io.Reader) (*Handshake, error) { + // Do Serialize(), but backwards + // ... +} +``` + +### Send and receive messages +Once we've completed the initial handshake, we can send and receive **messages**. Well, not quite—if the other peer isn't ready to accept messages, we can't send any until they tell us they're ready. In this state, we're considered **choked** by the other peer. They'll send us an **unchoke** message to let us know that we can begin asking them for data. By default, we assume that we're choked until proven otherwise. + +Once we've been unchoked, we can then begin sending **requests** for pieces, and they can send us messages back containing pieces. + +!["A cartoon in which person 1 says 'hello I would like piece number—' and person 2 grabs him by the neck and says '00 00 00 01 00 (choke)'](/guides/torrent-client/choke.png) + +#### Interpreting messages +A message has a length, an **ID** and a **payload**. On the wire, it looks like: + +![A message with 4 byte for the length, 1 byte for ID, and an optional payload](/guides/torrent-client/message.png) + +A message starts with a length indicator which tells us how many bytes long the message will be. It's a 32-bit integer, meaning it's made out of four bytes smooshed together in big-endian order. The next byte, the **ID**, tells us which type of message we're receiving—for example, a `2` byte means "interested." Finally, the optional **payload** fills out the remaining length of the message. + +```go +type messageID uint8 + +const ( + MsgChoke messageID = 0 + MsgUnchoke messageID = 1 + MsgInterested messageID = 2 + MsgNotInterested messageID = 3 + MsgHave messageID = 4 + MsgBitfield messageID = 5 + MsgRequest messageID = 6 + MsgPiece messageID = 7 + MsgCancel messageID = 8 +) + +// Message stores ID and payload of a message +type Message struct { + ID messageID + Payload []byte +} + +// Serialize serializes a message into a buffer of the form +// +// Interprets `nil` as a keep-alive message +func (m *Message) Serialize() []byte { + if m == nil { + return make([]byte, 4) + } + length := uint32(len(m.Payload) + 1) // +1 for id + buf := make([]byte, 4+length) + binary.BigEndian.PutUint32(buf[0:4], length) + buf[4] = byte(m.ID) + copy(buf[5:], m.Payload) + return buf +} +``` + +To read a message from a stream, we just follow the format of a message. We read four bytes and interpret them as a `uint32` to get the **length** of the message. Then, we read that number of bytes to get the **ID** (the first byte) and the **payload** (the remaining bytes). + +```go +// Read parses a message from a stream. Returns `nil` on keep-alive message +func Read(r io.Reader) (*Message, error) { + lengthBuf := make([]byte, 4) + _, err := io.ReadFull(r, lengthBuf) + if err != nil { + return nil, err + } + length := binary.BigEndian.Uint32(lengthBuf) + + // keep-alive message + if length == 0 { + return nil, nil + } + + messageBuf := make([]byte, length) + _, err = io.ReadFull(r, messageBuf) + if err != nil { + return nil, err + } + + m := Message{ + ID: messageID(messageBuf[0]), + Payload: messageBuf[1:], + } + + return &m, nil +} +``` + +#### Bitfields +One of the most interesting types of message is the **bitfield**, which is a data structure that peers use to efficiently encode which pieces they are able to send us. A bitfield looks like a byte array, and to check which pieces they have, we just need to look at the positions of the *bits* set to 1. You can think of it like the digital equivalent of a coffee shop loyalty card. We start with a blank card of all `0`, and flip bits to `1` to mark their positions as "stamped." + +![a coffee shop loyalty card with eight slots, with stamps on the first four slots and a stamp on the second to last slot, represented as 11110010](/guides/torrent-client/bitfield.png) + +By working with *bits* instead of *bytes*, this data structure is super compact. We can stuff information about eight pieces in the space of a single byte—the size of a `bool`. The tradeoff is that accessing values becomes a little more tricky. The smallest unit of memory that computers can address are bytes, so to get to our bits, we have to do some bitwise manipulation: + +```go +// A Bitfield represents the pieces that a peer has +type Bitfield []byte + +// HasPiece tells if a bitfield has a particular index set +func (bf Bitfield) HasPiece(index int) bool { + byteIndex := index / 8 + offset := index % 8 + return bf[byteIndex]>>(7-offset)&1 != 0 +} + +// SetPiece sets a bit in the bitfield +func (bf Bitfield) SetPiece(index int) { + byteIndex := index / 8 + offset := index % 8 + bf[byteIndex] |= 1 << (7 - offset) +} +``` + +### Putting it all together +We now have all the tools we need to download a torrent: we have a list of peers obtained from the tracker, and we can communicate with them by dialing a TCP connection, initiating a handshake, and sending and receiving messages. Our last big problems are handling the **concurrency** involved in talking to multiple peers at once, and managing the **state** of our peers as we interact with them. These are both classically Hard problems. + +#### Managing concurrency: channels as queues +In Go, we [share memory by communicating](https://blog.golang.org/share-memory-by-communicating), and we can think of a Go channel as a cheap thread-safe queue. + +We'll set up two channels to synchronize our concurrent workers: one for dishing out work (pieces to download) between peers, and another for collecting downloaded pieces. As downloaded pieces come in through the results channel, we can copy them into a buffer to start assembling our complete file. + +```go +// Init queues for workers to retrieve work and send results +workQueue := make(chan *pieceWork, len(t.PieceHashes)) +results := make(chan *pieceResult) +for index, hash := range t.PieceHashes { + length := t.calculatePieceSize(index) + workQueue <- &pieceWork{index, hash, length} +} + +// Start workers +for _, peer := range t.Peers { + go t.startDownloadWorker(peer, workQueue, results) +} + +// Collect results into a buffer until full +buf := make([]byte, t.Length) +donePieces := 0 +for donePieces < len(t.PieceHashes) { + res := <-results + begin, end := t.calculateBoundsForPiece(res.index) + copy(buf[begin:end], res.buf) + donePieces++ +} +close(workQueue) +``` + +We'll spawn a worker goroutine for each peer we've received from the tracker. It'll connect and handshake with the peer, and then start retrieving work from the `workQueue`, attempting to download it, and sending downloaded pieces back through the `results` channel. + +![a flow chart of the download strategy](/guides/torrent-client/download.png) + +```go +func (t *Torrent) startDownloadWorker(peer peers.Peer, workQueue chan *pieceWork, results chan *pieceResult) { + c, err := client.New(peer, t.PeerID, t.InfoHash) + if err != nil { + log.Printf("Could not handshake with %s. Disconnecting\n", peer.IP) + return + } + defer c.Conn.Close() + log.Printf("Completed handshake with %s\n", peer.IP) + + c.SendUnchoke() + c.SendInterested() + + for pw := range workQueue { + if !c.Bitfield.HasPiece(pw.index) { + workQueue <- pw // Put piece back on the queue + continue + } + + // Download the piece + buf, err := attemptDownloadPiece(c, pw) + if err != nil { + log.Println("Exiting", err) + workQueue <- pw // Put piece back on the queue + return + } + + err = checkIntegrity(pw, buf) + if err != nil { + log.Printf("Piece #%d failed integrity check\n", pw.index) + workQueue <- pw // Put piece back on the queue + continue + } + + c.SendHave(pw.index) + results <- &pieceResult{pw.index, buf} + } +} +``` + +#### Managing state +We'll keep track of each peer in a struct, and modify that struct as we read messages. It'll include data like how much we've downloaded from the peer, how much we've requested from them, and whether we're choked. If we wanted to scale this further, we could formalize this as a finite state machine. But a struct and a switch are good enough for now. + +```go +type pieceProgress struct { + index int + client *client.Client + buf []byte + downloaded int + requested int + backlog int +} + +func (state *pieceProgress) readMessage() error { + msg, err := state.client.Read() // this call blocks + switch msg.ID { + case message.MsgUnchoke: + state.client.Choked = false + case message.MsgChoke: + state.client.Choked = true + case message.MsgHave: + index, err := message.ParseHave(msg) + state.client.Bitfield.SetPiece(index) + case message.MsgPiece: + n, err := message.ParsePiece(state.index, state.buf, msg) + state.downloaded += n + state.backlog-- + } + return nil +} +``` + +#### Time to make requests! +Files, pieces, and piece hashes aren't the full story—we can go further by breaking down pieces into **blocks**. A block is a part of a piece, and we can fully define a block by the **index** of the piece it's part of, its byte **offset** within the piece, and its **length**. When we make requests for data from peers, we are actually requesting *blocks*. A block is usually 16KB large, meaning that a single 256 KB piece might actually require 16 requests. + +A peer is supposed to sever the connection if they receive a request for a block larger than 16KB. However, based on my experience, they're often perfectly happy to satisfy requests up to 128KB. I only got moderate gains in overall speed with larger block sizes, so it's probably better to stick with the spec. + +#### Pipelining +Network round-trips are expensive, and requesting each block one by one will absolutely thank the performance of our download. Therefore, it's important to **pipeline** our requests such that we keep up a constant pressure of some number of unfulfilled requests. This can increase the throughput of our connection by an order of magnitude. + +![Two email threads simulating peer connections. The thread on the left shows a request followed by a reply, repeated three times. The thread on the left sends three requests, and receives three replies in quick succession.](/guides/torrent-client/pipelining.png) + +Classically, BitTorrent clients kept a queue of five pipelined requests, and that's the value I'll be using. I found that increasing it can up to double the speed of a download. Newer clients use an [adaptive](https://luminarys.com/posts/writing-a-bittorrent-client.html) queue size to better accommodate modern network speeds and conditions. This is definitely a parameter worth tweaking, and it's pretty low hanging fruit for future performance optimization. + +```go +// MaxBlockSize is the largest number of bytes a request can ask for +const MaxBlockSize = 16384 + +// MaxBacklog is the number of unfulfilled requests a client can have in its pipeline +const MaxBacklog = 5 + +func attemptDownloadPiece(c *client.Client, pw *pieceWork) ([]byte, error) { + state := pieceProgress{ + index: pw.index, + client: c, + buf: make([]byte, pw.length), + } + + // Setting a deadline helps get unresponsive peers unstuck. + // 30 seconds is more than enough time to download a 262 KB piece + c.Conn.SetDeadline(time.Now().Add(30 * time.Second)) + defer c.Conn.SetDeadline(time.Time{}) // Disable the deadline + + for state.downloaded < pw.length { + // If unchoked, send requests until we have enough unfulfilled requests + if !state.client.Choked { + for state.backlog < MaxBacklog && state.requested < pw.length { + blockSize := MaxBlockSize + // Last block might be shorter than the typical block + if pw.length-state.requested < blockSize { + blockSize = pw.length - state.requested + } + + err := c.SendRequest(pw.index, state.requested, blockSize) + if err != nil { + return nil, err + } + state.backlog++ + state.requested += blockSize + } + } + + err := state.readMessage() + if err != nil { + return nil, err + } + } + + return state.buf, nil +} +``` + +#### main.go +This is a short one. We're almost there. + +```go +package main + +import ( + "log" + "os" + + "github.com/veggiedefender/torrent-client/torrentfile" +) + +func main() { + inPath := os.Args[1] + outPath := os.Args[2] + + tf, err := torrentfile.Open(inPath) + if err != nil { + log.Fatal(err) + } + + err = tf.DownloadToFile(outPath) + if err != nil { + log.Fatal(err) + } +} +``` + + + +## This isn't the full story +For brevity, I included only a few of the important snippets of code. Notably, I left out all the glue code, parsing, unit tests, and the boring parts that build character. View my [full implementation](https://github.com/veggiedefender/torrent-client) if you're interested. diff --git a/src/guides/unfamiliar-codebase.md b/src/guides/unfamiliar-codebase.md new file mode 100644 index 000000000..f661e4aa6 --- /dev/null +++ b/src/guides/unfamiliar-codebase.md @@ -0,0 +1,24 @@ +--- +title: "Unfamiliar Codebase" +description: "Tips on getting familiar with an unfamiliar codebase" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "Unfamiliar Codebase - roadmap.sh" + description: "Tips on getting familiar with an unfamiliar codebase" +isNew: false +type: "visual" +date: 2021-05-04 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png) + diff --git a/src/guides/what-are-web-vitals.md b/src/guides/what-are-web-vitals.md new file mode 100644 index 000000000..904ce6dd1 --- /dev/null +++ b/src/guides/what-are-web-vitals.md @@ -0,0 +1,24 @@ +--- +title: "What are Web Vitals?" +description: "Learn what are the core web vitals and how to measure them." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "What are Web Vitals? - roadmap.sh" + description: "Learn what are the core web vitals and how to measure them." +isNew: false +type: "visual" +date: 2021-09-05 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/web-vitals.png)](/guides/web-vitals.png) + diff --git a/src/guides/what-is-internet.md b/src/guides/what-is-internet.md new file mode 100644 index 000000000..e5b9bcf48 --- /dev/null +++ b/src/guides/what-is-internet.md @@ -0,0 +1,84 @@ +--- +title: "How does the internet work?" +description: "Learn the basics of internet and everything involved with this short video series" +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "How does the internet work? - roadmap.sh" + description: "Learn the basics of internet and everything involved with this short video series" +isNew: false +type: "textual" +date: 2021-02-29 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +Since the explosive growth of web-based applications, every developer stands to benefit from understanding how the Internet works. Through this article and its accompanying introductory series of short videos about the Internet from [code.org](https://code.org), you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the following questions: + +* What is the Internet? +* How does the information move on the internet? +* How do the networks talk to each other and the protocols involved? +* What's the relationship between packets, routers, and reliability? +* HTTP and the HTML – How are you viewing this webpage in your browser? +* How is the information transfer on the internet made secure? +* What is cybersecurity and what are some common internet crimes? + +## What is the Internet? + +The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. + +In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it. + + + + +## Wires, Cables, and Wi-Fi + +Information on the Internet moves from one computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves). + +In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each. + + + +## IP Addresses and DNS + +Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers? + +In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work. + + + +## Packets, Routing, and Reliability + +Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors. + +In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination. + + + +## HTTP and HTML + +HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you. + + + +## Encryption and Public Keys + +Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptography, SSL/TLS, and how they help make the communication on the Internet secure. + + + +## Cybersecurity and Crime + +Cybersecurity refers to the protective measures against criminal activity accomplished through using a network, technological devices, and the internet.In this video, you will learn about the basics of cybersecurity and common cybercrimes. + + + +And that wraps it up for this article. To learn more about the Internet, [Kamran Ahmed](https://twitter.com/kamranahmedse) has a nice little guide on [DNS: How a website is found on the Internet](/guides/dns-in-one-picture). Also, go through the episodes of [howdns.works](https://howdns.works/) and read this [cartoon intro to DNS over HTTPS](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/). diff --git a/src/guides/what-is-sli-slo-sla.md b/src/guides/what-is-sli-slo-sla.md new file mode 100644 index 000000000..016ab94e4 --- /dev/null +++ b/src/guides/what-is-sli-slo-sla.md @@ -0,0 +1,24 @@ +--- +title: "SLIs, SLOs and SLAs" +description: "Learn what are different indicators for performance identification of any service." +author: + name: "Kamran Ahmed" + url: "https://twitter.com/kamranahmedse" + imageUrl: "/authors/kamranahmedse.jpeg" +seo: + title: "SLIs, SLOs and SLAs - roadmap.sh" + description: "Learn what are different indicators for performance identification of any service." +isNew: false +type: "visual" +date: 2021-08-31 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "visual-guide" + - "guide-sitemap" +--- + +[![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg) + diff --git a/src/guides/why-build-it-and-they-will-come-wont-work-anymore.md b/src/guides/why-build-it-and-they-will-come-wont-work-anymore.md new file mode 100644 index 000000000..0ee5ed6b3 --- /dev/null +++ b/src/guides/why-build-it-and-they-will-come-wont-work-anymore.md @@ -0,0 +1,91 @@ +--- +title: "Build it and they will come?" +description: "Why “build it and they will come” alone won’t work anymore" +author: + name: "Peter Thaleikis" + url: "https://twitter.com/spekulatius1984" + imageUrl: "/authors/spekulatius.jpg" +seo: + title: "Build it and they will come? - roadmap.sh" + description: "Why “build it and they will come” alone won’t work anymore" +isNew: false +type: "textual" +date: 2021-05-04 +sitemap: + priority: 0.7 + changefreq: "weekly" +tags: + - "guide" + - "textual-guide" + - "guide-sitemap" +--- + +We all have heard the mantra *"build it and they will come"* many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups. + +Before the [Wright brothers](https://en.wikipedia.org/wiki/Wright_brothers) built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea of regularly boarding airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie [Field of Dreams](https://en.wikipedia.org/wiki/Field_of_Dreams), this and similar historic events gave birth to the idea behind it. + +The engineers' and inventors' dreams came true: spend time doing what you love while success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore. + + +Why doesn't "build it and they will come" work anymore? +------------------------------------------------------- + +There are a few reasons for working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed in building a side-project anymore. You've just got to adjust the way you are building it. + +### Building got much easier + +As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as [Laravel](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) are available for anyone to build projects on - for free. + +In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with a less technological background. + +### Too much going on: information overload + +We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice, you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey. + +### Smaller Problems + +Besides building is easier than ever before and attention is in short supply, there is another issue making the life of makers, inventors, and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher of having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed. + +Does sound pretty grim for inventors, developers, and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers. + + +How to market your project nowadays? +------------------------------------ + +The very first step to improving the odds of success is [idea validation](https://peterthaleikis.com/business-idea-validation/). While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time. + +### Build your Audience first and the project after. + +Build your audience before you build your project. Spend your time connecting with potential users, learning from their needs, and talking about their problems. This will help you market your project later on. The audience first, projects second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or [project blog](https://startupnamecheck.com/blog/how-to-start-a-small-business-blog). + +Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnecting in our world of short attention spans. + +### Tool by Tool + +Another approach is the "Tool by Tool" approach. I first noticed this approach being used by Shopify. The team at Shopify is providing little tools such as a [logo generator](https://hatchful.shopify.com/) and releasing these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers, we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time. + +Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects, you will enhance your ranking in Google. An example of a maker following this approach is [Kamban](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). He built FlatGA as phase one of a bigger project currently in development. + +### Join a Maker community + +While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, and keep yourself accountable and they will enhance your reach at the same time. + +### Getting ready to Launch + +Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more new customers. After the launch is before the launch. + +### Marketing Is an On-going Fight + +Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to marketing your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete. + + +Closing Words +------------- + +I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to [my newsletter](https://peterthaleikis.com/newsletter). I'll send out the occasional email about interesting new articles or side-projects. + + +About the author +---------------- + +[Peter Thaleikis](https://peterthaleikis.com/) a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been a Lead Developer for multiple organizations.