Update DevOps Roadmap spacing

Update tutorial video from youtube

.github/ISSUE_TEMPLATE.md

@@ -1,36 +0,0 @@
-<!--
-Please do not remove anything written below.
- 
-Fill the details and open the issue. Any issue that 
-doesn't have all of these filled in will be closed, 
-if yours is closed reopen with everything filled in.  
--->
-
-#### What roadmap is this issue about?
-
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-
-#### What is this issue about?
-
-- [ ] Functionality of the website
-- [ ] Discussion for a pull request I would want to open.
-- [ ] Addition of a new item
-- [ ] Removal of some existing item
-- [ ] Changing in arrangement
-- [ ] General suggestion
-- [ ] Sharing an Idea
-- [ ] Something else
-
-#### Please acknowledge the below listed
-
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this issue.
-
-
-#### Enter the details about the issue here
-
-<!-- Please enter the issue details here -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +0,0 @@
-#### What roadmap does this PR target?
-
-- [ ] Code Change
-- [ ] Frontend Roadmap
-- [ ] Backend Roadmap
-- [ ] DevOps Roadmap
-- [ ] All Roadmaps
-- [ ] Guides
-
-#### Please acknowledge the items listed below
-
-- [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request.
-- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
-- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
-- [ ] I have read the [contribution docs](../contributing) before opening this PR.
-
-#### Enter the details about the contribution
-
-<!-- Enter the details here -->

.github/sponsors/doppler-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3473 1069"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#111;}.cls-3{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="658.73" y1="777.7" x2="341.45" y2="352.06" gradientTransform="matrix(1, 0, 0, -1, 0, 1070)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33a9ff"/><stop offset="1" stop-color="#1673ff"/></linearGradient></defs><rect class="cls-1" width="3473" height="1069"/><path class="cls-2" d="M1054.06,633.32q4.93.45,11.23.9H1081q52.55,0,77.7-26.5,25.59-26.49,25.59-73.18,0-48.94-24.25-74.09t-76.79-25.14q-7.18,0-14.82.45-5.78,0-11,.51a3.73,3.73,0,0,0-3.33,3.74Zm202.54-98.78Q1256.6,575,1244,605t-35.92,49.84q-22.9,19.75-56.14,29.63t-74.55,9.88q-18.86,0-44-1.79A338.32,338.32,0,0,1,984,686.3V386.41a3.8,3.8,0,0,1,3.13-3.75,386.34,386.34,0,0,1,47.17-5.27q26.49-1.8,45.36-1.8,40,0,72.3,9,32.79,9,56.14,28.29T1244,462.25Q1256.61,492.33,1256.6,534.54Z"/><path class="cls-2" d="M1397.52,534.54q0,22.89,5.39,41.31a103.13,103.13,0,0,0,16.17,31.87,74.66,74.66,0,0,0,26.05,20.21q15.27,7.19,35,7.18,19.3,0,34.58-7.18a69.47,69.47,0,0,0,26-20.21A91.41,91.41,0,0,0,1557,575.85q5.83-18.42,5.84-41.31T1557,493.23q-5.39-18.86-16.17-31.88a67.73,67.73,0,0,0-26-20.65q-15.27-7.18-34.58-7.19-19.77,0-35,7.64a72.5,72.5,0,0,0-26.05,20.65q-10.33,13-16.17,31.88A145.23,145.23,0,0,0,1397.52,534.54Zm237.57,0q0,40-12.12,70.49-11.68,30.09-32.34,50.74a134.89,134.89,0,0,1-49.4,30.53,176.88,176.88,0,0,1-61.07,10.33A174.23,174.23,0,0,1,1420,686.3a140,140,0,0,1-49.4-30.53q-21.11-20.65-33.23-50.74-12.13-30.53-12.13-70.49t12.58-70q12.57-30.53,33.68-51.18a142,142,0,0,1,49.4-31A171.39,171.39,0,0,1,1480.16,372a174.08,174.08,0,0,1,60.18,10.33,136.87,136.87,0,0,1,49.4,31q21.1,20.65,33.23,51.18Q1635.09,494.58,1635.09,534.54Z"/><path class="cls-2" d="M1810.48,375.59q69.62,0,106.88,24.7,37.28,24.24,37.28,79.92,0,56.13-37.72,81.27-37.73,24.69-107.79,24.69H1791a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.83a3.81,3.81,0,0,1,3.1-3.75,400.76,400.76,0,0,1,45.4-5.69Q1791.18,375.59,1810.48,375.59Zm4.49,59.72q-7.63,0-15.27.45-5,.3-9.06.62a3.8,3.8,0,0,0-3.51,3.8v86.28h22q36.38,0,54.79-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.54-5.39-21.1-7.19A159.75,159.75,0,0,0,1815,435.31Z"/><path class="cls-2" d="M2123.07,375.59q69.61,0,106.89,24.7,37.27,24.24,37.27,79.92,0,56.13-37.72,81.27-37.73,24.69-107.78,24.69h-18.18a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.1-3.74,400.76,400.76,0,0,1,45.4-5.69Q2103.77,375.59,2123.07,375.59Zm4.49,59.72q-7.64,0-15.27.45-5,.3-9.06.62a3.81,3.81,0,0,0-3.51,3.8v86.28h22q36.38,0,54.78-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.52-5.39-21.1-7.19A159.75,159.75,0,0,0,2127.56,435.31Z"/><path class="cls-2" d="M2540.5,630.17a1.29,1.29,0,0,1,1.28,1.28v57.62a1.28,1.28,0,0,1-1.28,1.27H2342.25V401.41a3.83,3.83,0,0,1,2.81-3.69l67.25-18.54v251Z"/><path class="cls-2" d="M2618.88,690.34V383a3.84,3.84,0,0,1,3.83-3.83h215a1.28,1.28,0,0,1,1.23,1.64l-16.44,56.26a1.26,1.26,0,0,1-1.22.92H2692.77a3.83,3.83,0,0,0-3.83,3.83v57.24H2803.1a1.27,1.27,0,0,1,1.23,1.63l-16,54.92a1.28,1.28,0,0,1-1.22.92h-94.34a3.82,3.82,0,0,0-3.83,3.83v71.15h154.72a1.28,1.28,0,0,1,1.23,1.63l-16.34,56.27a1.27,1.27,0,0,1-1.22.92Z"/><path class="cls-2" d="M3006,375.59q70.07,0,107.34,25.15,37.28,24.69,37.27,77.22,0,32.79-15.27,53.44-14.82,20.19-43.11,31.87,9.43,11.68,19.76,26.94,10.34,14.82,20.21,31.43,10.32,16.17,19.76,34.13,8.93,16.58,16.65,32.75a1.28,1.28,0,0,1-1.16,1.82H3091.6a1.27,1.27,0,0,1-1.11-.65q-8.37-15-17.15-30.33-8.53-15.72-18-30.53-9-14.82-18-27.84a286.92,286.92,0,0,0-18-24.25h-30.76a3.83,3.83,0,0,0-3.82,3.83V686.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.09-3.74,400,400,0,0,1,44.06-5.69Q2986.67,375.59,3006,375.59Zm4.05,59.72q-7.64,0-13.93.45-4,.3-7.71.61a3.82,3.82,0,0,0-3.51,3.81v80.89h19.76q39.51,0,56.58-9.88t17.07-33.67q0-22.9-17.52-32.33Q3043.71,435.31,3010,435.31Z"/><path class="cls-3" d="M307.26,310a1.79,1.79,0,0,0-1.5,2.75l89.7,140.38a14.19,14.19,0,0,0,12,6.58H528.38c39.92,0,64.87,35.28,64.72,74.79s-26.74,74.44-64.72,74.44H404.77a4.71,4.71,0,0,0-4.71,4.75V754.25a4.72,4.72,0,0,0,4.72,4.75H560.62C689.12,759,753,637.1,753.09,534.5S690,310,560.62,310ZM367,609.29H336.16C318.4,609.29,304,626,304,646.71V757.66a1.28,1.28,0,0,0,1.28,1.28h30.88c17.76,0,32.15-16.75,32.15-37.41v-111A1.27,1.27,0,0,0,367,609.29Z"/></svg>

.github/sponsors/oss-logo.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 646.6 105.7" style="enable-background:new 0 0 646.6 105.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#104366;}
+	.st1{fill:#4086C6;}
+</style>
+<g>
+	<path class="st0" d="M21.1,79.8c-6.6-3.5-11.7-8.4-15.5-14.6C1.9,59,0,52,0,44.3c0-7.8,1.9-14.7,5.6-20.9
+		c3.7-6.2,8.9-11.1,15.5-14.6c6.6-3.5,14-5.3,22.2-5.3c8.2,0,15.6,1.8,22.1,5.3c6.6,3.5,11.7,8.4,15.5,14.6
+		c3.8,6.2,5.6,13.2,5.6,20.9c0,7.8-1.9,14.7-5.6,20.9c-3.8,6.2-8.9,11.1-15.5,14.6c-6.5,3.5-13.9,5.3-22.1,5.3
+		C35,85.1,27.6,83.4,21.1,79.8z M55.9,66.3c3.8-2.1,6.7-5.1,8.9-9c2.1-3.8,3.2-8.2,3.2-13.1c0-4.9-1.1-9.3-3.2-13.1
+		c-2.1-3.8-5.1-6.8-8.9-9c-3.8-2.1-8-3.2-12.6-3.2c-4.7,0-8.9,1.1-12.6,3.2s-6.7,5.1-8.9,9c-2.1,3.8-3.2,8.2-3.2,13.1
+		c0,4.9,1.1,9.3,3.2,13.1c2.1,3.8,5.1,6.8,8.9,9c3.8,2.1,8,3.2,12.6,3.2C47.9,69.5,52.1,68.5,55.9,66.3z"/>
+	<path class="st0" d="M108.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-11-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		c5-2.2,11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2
+		c-5.1,0-8.9,0.8-11.3,2.5c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,11,2.9,14.8,4.3
+		c3.8,1.4,7.1,3.7,9.9,6.8c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C120,85.1,113.9,84.3,108.1,82.6z"/>
+	<path class="st0" d="M180.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
+		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
+		c-6-1.4-10.9-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
+		s11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2c-5.1,0-8.9,0.8-11.3,2.5
+		c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,10.9,2.9,14.8,4.3s7.1,3.7,9.9,6.8
+		c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
+		C192,85.1,186,84.3,180.1,82.6z"/>
+	<path class="st1" d="M293.2,79.1c-6.2-3.5-11.1-8.2-14.7-14.3c-3.6-6.1-5.4-12.9-5.4-20.5c0-7.6,1.8-14.5,5.4-20.5
+		c3.6-6.1,8.5-10.9,14.7-14.3c6.2-3.5,13.2-5.2,20.9-5.2c5.7,0,11,0.9,15.8,2.8c4.8,1.8,8.9,4.6,12.3,8.2l-3.6,3.7
+		c-6.3-6.2-14.4-9.4-24.3-9.4c-6.6,0-12.6,1.5-18.1,4.5c-5.4,3-9.7,7.2-12.8,12.5s-4.6,11.2-4.6,17.8s1.5,12.5,4.6,17.8
+		c3.1,5.3,7.3,9.5,12.8,12.5c5.4,3,11.4,4.5,18.1,4.5c9.8,0,17.9-3.2,24.3-9.5l3.6,3.7c-3.4,3.6-7.5,6.4-12.4,8.2
+		c-4.9,1.9-10.1,2.8-15.7,2.8C306.3,84.3,299.4,82.6,293.2,79.1z"/>
+	<path class="st1" d="M395.4,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6h20.2v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C385.9,24.4,391.5,26.3,395.4,30z M387.9,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C380.3,79.6,384.5,78.5,387.9,76.2z"/>
+	<path class="st1" d="M469,28.2c4.4,2.6,7.9,6.1,10.4,10.6c2.5,4.5,3.8,9.7,3.8,15.5c0,5.8-1.3,11-3.8,15.5
+		c-2.5,4.6-6,8.1-10.4,10.6c-4.4,2.5-9.4,3.8-14.9,3.8c-5.2,0-9.9-1.2-14.1-3.7c-4.2-2.4-7.5-5.9-9.8-10.2v35.3h-5.6V24.8h5.4v13.9
+		c2.3-4.5,5.6-8,9.9-10.6c4.2-2.5,9-3.8,14.3-3.8C459.6,24.4,464.6,25.7,469,28.2z M465.9,76c3.6-2.1,6.5-5,8.5-8.8
+		c2.1-3.8,3.1-8.1,3.1-12.9c0-4.8-1-9.1-3.1-12.9c-2.1-3.8-4.9-6.7-8.5-8.8c-3.6-2.1-7.7-3.2-12.2-3.2c-4.5,0-8.6,1.1-12.1,3.2
+		c-3.6,2.1-6.4,5-8.5,8.8c-2.1,3.8-3.1,8.1-3.1,12.9c0,4.8,1,9.1,3.1,12.9c2.1,3.8,4.9,6.7,8.5,8.8c3.6,2.1,7.6,3.2,12.1,3.2
+		C458.3,79.1,462.3,78.1,465.9,76z"/>
+	<path class="st1" d="M500.3,9.2c-0.9-0.9-1.4-1.9-1.4-3.2c0-1.3,0.5-2.4,1.4-3.3c0.9-0.9,2-1.4,3.3-1.4c1.3,0,2.4,0.4,3.3,1.3
+		c0.9,0.9,1.4,1.9,1.4,3.2c0,1.3-0.5,2.4-1.4,3.3c-0.9,0.9-2,1.4-3.3,1.4C502.3,10.5,501.2,10.1,500.3,9.2z M500.7,24.8h5.6v58.9
+		h-5.6V24.8z"/>
+	<path class="st1" d="M559.4,80c-1.4,1.4-3.2,2.4-5.4,3.1c-2.1,0.7-4.4,1.1-6.7,1.1c-5.1,0-9.1-1.4-11.9-4.2
+		c-2.8-2.8-4.2-6.8-4.2-11.8V29.7h-10.8v-4.9h10.8V12h5.6v12.9h18.7v4.9H537v37.9c0,3.8,0.9,6.8,2.8,8.8c1.8,2,4.6,3,8.2,3
+		c3.7,0,6.7-1.1,9.1-3.3L559.4,80z"/>
+	<path class="st1" d="M611.8,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
+		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6H612v-4.7
+		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
+		c4.1-1.5,8.5-2.2,13-2.2C602.3,24.4,607.9,26.3,611.8,30z M604.3,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
+		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C596.7,79.6,600.9,78.5,604.3,76.2z"/>
+	<path class="st1" d="M640.9,0h5.6v83.8h-5.6V0z"/>
+</g>
+</svg>

.github/sponsors/workos-logo-white-bg.svg

@@ -0,0 +1,11 @@
+<svg width="1354" height="420" viewBox="0 0 1354 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1354" height="420" rx="20" fill="white"/>
+<path d="M434.751 133.122H466.637L489.595 227.729C493.852 245.585 494.697 256.219 494.697 256.219H495.128C495.128 256.219 496.61 245.808 500.867 227.729L522.757 133.122H558.9L582.066 227.729C586.53 246.223 587.598 256.219 587.598 256.219H588.236C588.236 256.219 588.666 246.223 592.907 227.729L615.02 133.122H646.907L606.523 288.313H571.017L546.576 194.344C541.474 173.936 541.044 164.801 541.044 164.801H540.614C540.614 164.801 540.183 173.936 535.512 194.344L512.553 288.313H475.996L434.751 133.122Z" fill="black"/>
+<path d="M641.583 231.934C641.583 196.428 664.541 173.47 699.202 173.47C733.639 173.47 756.597 196.428 756.597 231.934C756.597 267.647 733.639 290.828 699.202 290.828C664.557 290.812 641.583 267.647 641.583 231.934ZM726.832 231.934C726.832 208.976 715.783 195.998 699.202 195.998C681.346 195.998 671.349 210.458 671.349 231.934C671.349 255.323 682.398 268.284 699.202 268.284C717.058 268.284 726.832 253.824 726.832 231.934Z" fill="black"/>
+<path d="M770.836 175.21H799.103V196.048H799.741C804.635 185.207 816.322 174.365 836.299 174.365C839.695 174.365 841.831 174.796 843.314 175.21V203.478H842.469C842.469 203.478 839.918 202.633 832.903 202.633C811.013 202.633 799.103 215.594 799.103 239.828V288.295H770.836V175.21Z" fill="black"/>
+<path d="M856.5 133.122H884.767V182.865C884.767 212.2 884.336 217.509 884.336 217.509H884.767L926.857 175.212H962.139L912.843 224.11L970.031 288.313H936.646L895.401 241.536L884.767 251.946V288.297H856.5V133.122Z" fill="black"/>
+<path d="M970.444 211.285C970.444 163.455 1000.21 131.569 1044.85 131.569C1089.49 131.569 1119.26 163.455 1119.26 211.285C1119.26 259.114 1089.49 291.001 1044.85 291.001C1000.21 291.001 970.444 259.114 970.444 211.285ZM1088.42 211.285C1088.42 178.761 1071 156.855 1044.84 156.855C1018.67 156.855 1001.26 178.761 1001.26 211.285C1001.26 243.809 1018.69 265.715 1044.84 265.715C1070.98 265.715 1088.42 243.809 1088.42 211.285Z" fill="black"/>
+<path d="M1130.08 236.656H1162.4C1162.4 254.943 1174.95 265.146 1194.08 265.146C1210.23 265.146 1221.29 257.063 1221.29 245.584C1221.29 232.622 1212.79 229.21 1185.79 223.901C1161.12 219.007 1134.98 210.716 1134.98 178.399C1134.98 151.408 1157.93 131 1193.01 131C1229.57 131 1252.11 150.132 1252.11 179.037H1219.79C1219.79 165.007 1208.95 156.286 1193.01 156.286C1176.86 156.286 1166.86 164.146 1166.86 175.625C1166.86 187.742 1173.88 192.413 1195.56 196.878C1227.65 203.685 1254.02 207.288 1254.02 243.001C1254.02 271.3 1229.36 290.432 1193.01 290.432C1156.02 290.432 1130.08 268.957 1130.08 236.656Z" fill="black"/>
+<path d="M100 210C100 214.824 101.269 219.647 103.723 223.793L148.231 300.878C152.8 308.747 159.739 315.178 168.369 318.055C185.377 323.724 202.977 316.447 211.354 301.893L222.1 283.278L179.708 210L224.47 132.408L235.216 113.792C238.431 108.208 242.747 103.638 247.824 100H243.17H178.777C166.677 100 155.508 106.431 149.5 116.923L103.723 196.208C101.269 200.354 100 205.177 100 210Z" fill="#6363F1"/>
+<path d="M353.847 210C353.847 205.177 352.578 200.353 350.124 196.207L305.024 118.107C296.647 103.638 279.047 96.3608 262.039 101.945C253.409 104.822 246.47 111.253 241.901 119.122L231.747 136.638L274.139 210L229.378 287.592L218.632 306.208C215.416 311.708 211.101 316.362 206.024 320H210.678H275.07C287.17 320 298.34 313.569 304.347 303.077L350.124 223.792C352.578 219.646 353.847 214.823 353.847 210Z" fill="#6363F1"/>
+</svg>

.github/workflows/deploy.yml

@@ -1,10 +1,11 @@
-name: Deployment to GitHub Pages
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
 env:
   ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
   CI: true
   NEXT_TELEMETRY_DISABLED: 1
 jobs:
@@ -12,17 +13,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 16
     - name: Setup Environment
       run: |
         npm install
-    - name: Generate meta and builld
+    - name: Generate meta and build
       run: |
         npm run meta
         npm run build
-    - name: Deploy to GitHub Pages
+    - name: Deploy to GH Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"
         git config user.name "Kamran Ahmed"

.gitignore

@@ -5,6 +5,7 @@ out
 /node_modules
 /.pnp
 .pnp.js
+yarn.lock
 
 # testing
 /coverage

README.md

@@ -1,39 +0,0 @@
-<p align="center">
-  <img src="public/brand.png" height="128">
-  <h2 align="center">roadmap.sh</h2>
-  <p align="center">Community driven roadmaps, articles and resources for developers<p>
-  <p align="center">
-    <a href="https://roadmap.sh/guides">
-    	<img src="https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/-Roadmaps-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="./contributing/guide.md">
-    	<img src="https://img.shields.io/badge/%E2%9D%A4-Contribute-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-  </p>
-</p>
-
-[roadmap.sh](https://roadmap.sh) is the community effort to create knowledge that is approachable for the developers.
-
-The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone https://github.com/kamranahmedse/roadmap.sh
-yarn install
-yarn dev
-```
-
-## Contributions
-
-* Add new Roadmap
-* Suggest changes to existing roadmap
-* Write an article
-* Improve the site's codebase
-* Write tests
-

code_of_conduct.md

@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <kamranahmed.se@gmail.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

components/custom-ad.tsx

@@ -1,37 +1,69 @@
+import { Box, Flex, Heading, Image, Link } from '@chakra-ui/react';
+import { event } from '../lib/gtag';
+
+function getPageSlug() {
+  const pathname = (typeof window !== 'undefined' ? window : {} as any)?.location?.pathname || '';
+
+  return pathname?.replace(/\//g, '');
+}
+
 export const CustomAd = () => {
+  const slug = getPageSlug();
+
+  if (slug !== 'devops') {
+    return null;
+  }
+
   return (
-    <div id='carbonads'>
-      <span>
-        <span className='carbon-wrap'>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-img'
-            target='_blank'
-          >
-            <img
-              src='/fm-img.png'
-              alt='FM Logo'
-              height='100'
-              width='130'
-              style={{ maxWidth: '130px', border: 'none' }}
-            />
-          </a>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-text'
-            target='_blank'
-          >
-            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
-          </a>
-        </span>
-        <a
-          href='https://github.com/sponsors/kamranahmedse'
-          className='carbon-poweredby'
-          target='_blank'
+    <Link
+      href='https://www.getambassador.io/edge-stack-guide-v4?utm_source=roadmap.sh&utm_medium=ebook&utm_campaign=edgestack-guide'
+      id='custom-ad'
+      pos='fixed'
+      bottom='15px'
+      right='20px'
+      zIndex={999}
+      display='flex'
+      maxWidth='330px'
+      bg='white'
+      boxShadow='0 1px 4px 1px hsla(0, 0%, 0%, .1)'
+      _hover={{ textDecoration: 'none' }}
+      rel="noopener sponsored"
+      target={'_blank'}
+      onClick={() => {
+        event({
+          category: 'SponsorClick',
+          action: `Ambassador EBook Redirect`,
+          label: `Clicked Ambassador EBook Link`
+        });
+      }}
+    >
+      <Image
+        src='https://i.imgur.com/0bH1Vl6.png'
+        alt='Custom Logo'
+        height={['100px', '100px', '100px', 'auto']}
+        width='130'
+        style={{ maxWidth: '130px', border: 'none' }}
+      />
+      <Flex as='span' flexDirection='column' justifyContent='space-between'>
+        <Box as='span' p='10px'>
+          <Heading as='span' fontSize='14px' mb='5px' display='block'>Free eBook</Heading>
+          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
+            Learn about API Gateways, Microservices, Load Balancing, and more with this free eBook.
+          </Box>
+        </Box>
+        <Box as='span'
+             textAlign='center'
+             fontWeight={600}
+             fontSize='9px'
+             letterSpacing='0.5px'
+             textTransform='uppercase'
+             padding='5px 10px'
+             display={'block'}
+             background='repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4)'
         >
-          Sponsored by
-        </a>
-      </span>
-    </div>
+          Partner Content
+        </Box>
+      </Flex>
+    </Link>
   );
 };

components/footer.tsx

@@ -1,11 +1,14 @@
-import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Container, Flex, Image, Link, SimpleGrid, Stack, Text } from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 import { CustomAd } from './custom-ad';
+import React from 'react';
+import { event } from '../lib/gtag';
 
 function NavigationLinks() {
   return (
     <>
-      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
+      <Stack isInline display={['none', 'none', 'flex']} justifyContent='center' color='gray.400' fontWeight={600}
+             spacing='30px'>
         <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
         <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
         <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
@@ -13,15 +16,13 @@ function NavigationLinks() {
         <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
       </Stack>
 
-      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
+      <Stack display={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
               href='/roadmaps'>Roadmaps</Link>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
               href='/guides'>Guides</Link>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
               href='/watch'>Videos</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/thanks'>Thanks</Link>
         <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
               href='/about'>About</Link>
         <Link py='7px' _hover={{ color: 'white' }} target='_blank'
@@ -33,47 +34,91 @@ function NavigationLinks() {
 
 export function Footer() {
   return (
-    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
+    <Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
       <Container maxW='container.md'>
         <NavigationLinks />
 
-        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
-          <Flex spacing={0} alignItems='center' color='gray.400'>
-            <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
-                  href='/'>
-              <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
-              roadmap.sh
+        <SimpleGrid mt={['40px', '40px', '50px']} mb='40px' gap={['40px', '40px', '75px']} columns={[1, 1, 2, 2]}
+                    justifyContent='space-between'>
+          <Box maxWidth={'550px'}>
+            <Flex gap={0} alignItems='center' color='gray.400'>
+              <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
+                    href='/'>
+                <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
+                roadmap.sh
+              </Link>
+              <Text as='span' mx='7px'>by</Text>
+              <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
+                    _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
+                    target='_blank'>@kamranahmedse</Link>
+            </Flex>
+
+            <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
+              journeys to help you choose your path and grow in your career.</Text>
+
+            <Text fontSize='14px' color='gray.500'>
+              <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
+              <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                    mx='10px'>FAQs</Link>&middot;
+              <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                    mx='10px'>Terms</Link>&middot;
+              <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
+                    mx='10px'>Privacy</Link>
+            </Text>
+          </Box>
+
+          <Box maxWidth={'550px'} textAlign={['left', 'left', 'right']}>
+            <Link display='flex' justifyContent={['flex-start', 'flex-start', 'flex-end']} fontWeight={600}
+                  _hover={{ textDecoration: 'none', color: 'white' }}
+                  href='https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
+                  target='_blank'>
+              <Image alt='' w='195px' src='/tns.png' />
             </Link>
-            <Text as='span' mx='7px'>by</Text>
-            <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
-                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
-                  target='_blank'>@kamranahmedse</Link>
-          </Flex>
 
-          <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
-            journeys to help you choose your path and grow in your career.</Text>
+            <Text my='15px' fontSize='14px' color='gray.500'>The leading DevOps resource for Kubernetes, cloud-native
+              computing, and the latest in at-scale development, deployment, and management.</Text>
 
-          <Text fontSize='14px' color='gray.500'>
-            <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
-            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>FAQs</Link>&middot;
-            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Terms</Link>&middot;
-            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Privacy</Link>
-          </Text>
-        </Box>
+            <Text fontSize='14px' color='gray.500'>
+              <Link
+                href='https://thenewstack.io/category/devops/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
+                target='_blank'
+                _hover={{ textDecoration: 'none', color: 'white' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                color='gray.400' mx='10px' ml={['0', '0', '10px']}>DevOps</Link>&middot;
+              <Link
+                href='https://thenewstack.io/category/kubernetes/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
+                target='_blank' _hover={{ textDecoration: 'none', color: 'white' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                color='gray.400' mx='10px'>Kubernetes</Link>&middot;
+              <Link
+                href='https://thenewstack.io/category/cloud-native/?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Footer'
+                target='_blank' _hover={{ textDecoration: 'none', color: 'white' }}
+                onClick={() => {
+                  event({
+                    category: 'PartnerClick',
+                    action: `TNS Referral`,
+                    label: `TNS Referral - Footer`,
+                  });
+                }}
+                color='gray.400' mx='10px'>Cloud-Native</Link>
+            </Text>
+          </Box>
+        </SimpleGrid>
       </Container>
 
       <CustomAd />
-      {process.env.GA_SECRET && false && (
-        <script
-          async
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh'
-          id='_carbonads_js'
-        />
-      )}
     </Box>
   );
 }

components/global-header.tsx

@@ -1,16 +1,25 @@
 import { useState } from 'react';
 import { HamburgerIcon } from '@chakra-ui/icons';
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, CloseButton, Container, Flex, IconButton, Link, Stack, Text } from '@chakra-ui/react';
 import RoadmapLogo from '../components/icons/roadmap.svg';
-import siteConfig from '../content/site.json';
 
 type MenuLinkProps = {
   text: string;
   link: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  isFancy?: boolean;
 };
 
 function MenuLink(props: MenuLinkProps) {
-  const { text, link } = props;
+  const { text, link, target = '_self', isFancy = false } = props;
+
+  const gradientProp = isFancy ? {
+    bgGradient: 'linear(to-r, yellow.100, teal.100)',
+    bgClip: 'text',
+    _hover: {
+      color: 'yellow.100'
+    }
+  } : {};
 
   return <Link
     borderBottomWidth={0}
@@ -18,6 +27,8 @@ function MenuLink(props: MenuLinkProps) {
     _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
     fontWeight={500}
     href={link}
+    target={target}
+    {...gradientProp}
   >
     {text}
   </Link>;
@@ -29,8 +40,13 @@ function DesktopMenuLinks() {
            fontSize='15px'>
       <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
       <MenuLink text={'Guides'} link={'/guides'} />
-      <MenuLink text={'Videos'} link={'/watch'} />
-      <MenuLink text={'Thanks'} link={'/thanks'} />
+
+      <MenuLink
+        target={'_blank'}
+        text={'Hiring a DevRel'}
+        isFancy
+        link={'https://docs.google.com/forms/d/e/1FAIpQLSesFpPxgKx_8-L5hm7fw6NQpgGixrMGC4Cg3M8NHPQhFfSajQ/viewform'}
+      />
 
       <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
             _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
@@ -72,12 +88,11 @@ function MobileMenuLinks() {
                top={0}
                bg='gray.900'
                spacing='12px'
-               zIndex={1}
+               zIndex={999}
         >
           <Link href='/roadmaps'>Roadmaps</Link>
           <Link href='/guides'>Guides</Link>
           <Link href='/watch'>Videos</Link>
-          <Link href='/thanks'>Thanks</Link>
           <Link href='/signup'>Subscribe</Link>
           <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='40px' right='15px' size='lg' />
         </Stack>
@@ -86,9 +101,15 @@ function MobileMenuLinks() {
   );
 }
 
-export function GlobalHeader() {
+type GlobalHeaderProps = {
+  variant?: 'transparent' | 'solid'
+};
+
+export function GlobalHeader(props: GlobalHeaderProps) {
+  const { variant = 'solid' } = props;
+
   return (
-    <Box bg='gray.900' p='58px 0 20px'>
+    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/guide/guide-grid-item.tsx

@@ -1,4 +1,5 @@
 import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+import { GuideType } from '../../lib/guide';
 
 type GuideGridItemProps = {
   title: string;
@@ -7,6 +8,7 @@ type GuideGridItemProps = {
   date: string;
   isNew?: boolean;
   colorIndex?: number;
+  type?: GuideType['type'];
 };
 
 const bgColorList = [
@@ -15,14 +17,14 @@ const bgColorList = [
 ];
 
 export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, type } = props;
 
   return (
     <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {date}
+      <Text mb='10px' fontSize='13px' color='gray.400' textTransform='capitalize'>
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
+        {type} Guide
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>

components/helmet.tsx

@@ -1,73 +1,167 @@
 import NextHead from 'next/head';
 import siteConfig from '../content/site.json';
+import { RoadmapType } from '../lib/roadmap';
 
 type HelmetProps = {
   title?: string;
   keywords?: string[];
   canonical?: string;
   description?: string;
+  noIndex?: boolean;
+  roadmap?: RoadmapType;
 };
 
-const Helmet = (props: HelmetProps) => (
-  <NextHead>
-    <meta charSet='UTF-8' />
+function getRichSnippetJson(roadmap: RoadmapType) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://roadmap.sh/${roadmap.id}`,
+    },
+    headline: roadmap.seo.title,
+    description: roadmap.seo.description,
+    image: roadmap.jsonUrl
+      ? `https://roadmap.sh/roadmaps/${roadmap.id}.png`
+      : undefined,
+    author: {
+      '@type': 'Person',
+      name: 'Kamran Ahmed',
+      url: 'https://twitter.com/kamranahmedse',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'roadmap.sh',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://roadmap.sh/brand-square.png',
+      },
+    },
+  };
+}
 
-    <title>{props.title || siteConfig.title}</title>
-    <meta name='description' content={props.description || siteConfig.description} />
+const Helmet = (props: HelmetProps) => {
+  const { roadmap, title, canonical, description, keywords, noIndex = false } = props;
 
-    <meta name='author' content={siteConfig.author} />
-    <meta name='keywords' content={props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',')} />
+  return (
+    <NextHead>
+      <meta charSet="UTF-8" />
 
-    <meta name='viewport'
-          content='width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0' />
-    {props.canonical && <link rel='canonical' href={props.canonical} />}
-    <meta httpEquiv='Content-Language' content='en' />
+      <title>{title || siteConfig.title}</title>
+      <meta
+        name="description"
+        content={description || siteConfig.description}
+      />
 
-    <meta property='og:title' content={props.title || siteConfig.title} />
-    <meta property='og:description' content={props.description || siteConfig.description} />
-    <meta property='og:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta property='og:url' content={siteConfig.url.web} />
-    <meta property='og:type' content='website' />
-    <meta property='article:publisher' content={`https://facebook.com/${siteConfig.facebook}`} />
-    <meta property='og:site_name' content={siteConfig.name} />
-    <meta property='article:author' content={siteConfig.author} />
+      <meta name="author" content={siteConfig.author} />
+      <meta
+        name="keywords"
+        content={keywords ? keywords.join(',') : siteConfig.keywords.join(',')}
+      />
 
-    <meta name='twitter:card' content='summary' />
-    <meta name='twitter:site' content={`@${siteConfig.twitter}`} />
-    <meta name='twitter:title' content={props.title || siteConfig.title} />
-    <meta name='twitter:description' content={props.description || siteConfig.description} />
-    <meta name='twitter:image' content={`${siteConfig.url.web}${siteConfig.logoSquare}`} />
-    <meta name='twitter:image:alt' content='roadmap.sh' />
+      {noIndex && <meta name="robots" content="noindex" /> }
 
-    <meta name='mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-capable' content='yes' />
-    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
-    <link rel='apple-touch-icon' sizes='180x180' href='/manifest/apple-touch-icon.png' />
-    <meta name='msapplication-TileColor' content='#101010' />
-    <meta name='theme-color' content='#848a9a' />
+      <meta
+        name="viewport"
+        content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"
+      />
+      {canonical && <link rel="canonical" href={canonical} />}
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta property="og:title" content={title || siteConfig.title} />
+      <meta
+        property="og:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        property="og:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta property="og:url" content={siteConfig.url.web} />
+      <meta property="og:type" content="website" />
+      <meta
+        property="article:publisher"
+        content={`https://facebook.com/${siteConfig.facebook}`}
+      />
+      <meta property="og:site_name" content={siteConfig.name} />
+      <meta property="article:author" content={siteConfig.author} />
 
-    <link rel='manifest' href='/manifest/manifest.json' />
-    <link rel='icon' type='image/png' sizes='32x32' href='/manifest/icon32.png' />
-    <link rel='icon' type='image/png' sizes='16x16' href='/manifest/icon16.png' />
-    <link rel='shortcut icon' href='/manifest/favicon.ico' type='image/x-icon' />
-    <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content={`@${siteConfig.twitter}`} />
+      <meta name="twitter:title" content={title || siteConfig.title} />
+      <meta
+        name="twitter:description"
+        content={description || siteConfig.description}
+      />
+      <meta
+        name="twitter:image"
+        content={`${siteConfig.url.web}${siteConfig.logoSquare}`}
+      />
+      <meta name="twitter:image:alt" content="roadmap.sh" />
 
-    { /* Global Site Tag (gtag.js) - Google Analytics */}
-    {process.env.GA_SECRET && (
-      <>
-        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`} />
-        <script dangerouslySetInnerHTML={{
-          __html: `
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta
+        name="apple-mobile-web-app-status-bar-style"
+        content="black-translucent"
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/manifest/apple-touch-icon.png"
+      />
+      <meta name="msapplication-TileColor" content="#101010" />
+      <meta name="theme-color" content="#848a9a" />
+
+      <link rel="manifest" href="/manifest/manifest.json" />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/manifest/icon32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/manifest/icon16.png"
+      />
+      <link
+        rel="shortcut icon"
+        href="/manifest/favicon.ico"
+        type="image/x-icon"
+      />
+      <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
+
+      {roadmap?.id && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(getRichSnippetJson(roadmap)),
+          }}
+        />
+      )}
+
+      {/* Global Site Tag (gtag.js) - Google Analytics */}
+      {process.env.GA_SECRET && (
+        <>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', '${process.env.GA_SECRET}');
-          `
-        }} />
-      </>
-    )}
-
-  </NextHead>
-);
+          `,
+            }}
+          />
+        </>
+      )}
+    </NextHead>
+  );
+};
 
 export default Helmet;

components/home/featured-roadmaps-list.tsx

@@ -0,0 +1,73 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { SimpleGrid, Tag } from '@chakra-ui/react';
+import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
+
+type FeaturedRoadmapsListProps = {
+  roadmaps: RoadmapType[];
+  title: string;
+};
+
+export const upcomingRoadmaps = [
+  {
+    type: 'Role Based',
+    title: 'React Native',
+    description: 'Step by step guide to become a React Native Developer',
+    id: 'react-native'
+  },
+  {
+    type: 'Role Based',
+    title: 'Cyber Security',
+    description: 'Step by step guide to become a Cyber Security Expert',
+    id: 'cyber-security'
+  },
+  // {
+  //   type: 'Skill Based',
+  //   title: 'TypeScript',
+  //   description: 'Step by step guide to learn TypeScript in 2022',
+  //   id: 'typescript'
+  // },
+  // {
+  //   type: 'Skill Based',
+  //   title: 'Rust',
+  //   description: 'Step by step guide to learn Rust in 2022',
+  //   id: 'rust'
+  // },
+];
+
+export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
+  const { roadmaps, title } = props;
+
+  return (
+    <>
+      <Tag bg='gray.400' mb={4}>{title}</Tag>
+      <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+        <>
+          {roadmaps.map((roadmap: RoadmapType, counter: number) => (
+            <HomeRoadmapItem
+              isUpcoming={roadmap.isUpcoming}
+              url={`/${roadmap.id}`}
+              key={roadmap.id}
+              colorIndex={counter}
+              title={roadmap.featuredTitle === 'Software Design and Architecture' ? 'Software Design' : roadmap.featuredTitle}
+              isCommunity={roadmap.isCommunity}
+              isNew={roadmap.isNew}
+              subtitle={roadmap.featuredDescription}
+            />
+          ))}
+          {upcomingRoadmaps
+            .filter(roadmap => roadmap.type === title)
+            .map((roadmap, counter) => (
+              <HomeRoadmapItem
+                isUpcoming={true}
+                url={`/upcoming?id=${roadmap.id}`}
+                key={`upcoming-${roadmap.id}`}
+                colorIndex={9}
+                title={roadmap.title}
+                subtitle={roadmap.description}
+              />
+            ))}
+        </>
+      </SimpleGrid>
+    </>
+  );
+}

components/icons/facebook-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>

components/icons/hackernews-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM21.2 229.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"/></svg>

components/icons/reddit-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"/></svg>

components/icons/tree.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></svg>

components/icons/twitter-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg>

components/links-list-item.tsx

@@ -6,15 +6,17 @@ type LinksListItemProps = {
   title: string;
   subtitle: string;
   badgeText?: string;
+  target?: string;
   icon?: React.ReactChild;
   hideSubtitleOnMobile?: boolean;
 };
 
 export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
 
   return (
     <Link
+      target={target || '_self'}
       href={href}
       fontSize={['14px', '14px', '15px']}
       py='9px'
@@ -24,6 +26,15 @@ export function LinksListItem(props: LinksListItemProps) {
       color='gray.600'
       alignItems={['flex-start', 'center']}
       justifyContent={'space-between'}
+      sx={{
+        '@media (hover: none)': {
+          '&:hover': {
+            '& .list-item-title': {
+              transform: 'none'
+            }
+          }
+        }
+      }}
       _hover={{
         textDecoration: 'none',
         color: 'blue.400',
@@ -38,7 +49,7 @@ export function LinksListItem(props: LinksListItemProps) {
         {icon}
         <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='green' ml='10px'>{badgeText}</Badge>}
       </Flex>
       <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
             fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>

components/md-renderer/mdx-components/a.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 type EnrichedLinkProps = {
   href: string;
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 const Link = styled.a`
   font-weight: 600;
@@ -13,14 +13,25 @@ const Link = styled.a`
 
 const EnrichedLink = (props: EnrichedLinkProps) => {
   // Is external URL or is a media URL
-  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    target: '_self',
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+          target: '_blank',
+        }
+      : {}),
+  };
 
   return (
-    <Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
+    <Link href={props.href} {...linkProps}>
       {props.children}
     </Link>
   );
 };
 
 export default EnrichedLink;
-

components/md-renderer/mdx-components/badge-link.tsx

@@ -5,16 +5,48 @@ type BadgeLinkType = {
   target: string;
   badgeText: string;
   href: string;
-  children: React.ReactNode
+  colorScheme?: string;
+  children: React.ReactNode;
 };
 
 export function BadgeLink(props: BadgeLinkType) {
-  const { target = '_blank', badgeText, href, children } = props;
+  const {
+    target = '_blank',
+    colorScheme = 'purple',
+    badgeText,
+    href,
+    children,
+  } = props;
+
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
+    props.href
+  );
+
+  const linkProps: Record<string, string> = {
+    ...(isExternalUrl
+      ? {
+          rel: 'nofollow',
+        }
+      : {}),
+  };
 
   return (
-    <Text mb={0}>
-      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
-        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
+    <Text mb={'0px'}>
+      <Link
+        fontSize="14px"
+        color="blue.700"
+        fontWeight={500}
+        textDecoration="none"
+        href={href}
+        target={target}
+        _hover={{ textDecoration: 'none', color: 'purple.400' }}
+        {...linkProps}
+      >
+        <Badge fontSize="11px" mr="7px" colorScheme={colorScheme}>
+          {badgeText}
+        </Badge>
+        {children}
       </Link>
     </Text>
   );

components/md-renderer/mdx-components/dedicated-roadmap.tsx

@@ -0,0 +1,22 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import TreeIcon from '../../icons/tree.svg';
+
+type DedicatedRoadmapProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
+  const { href, title, description } = props;
+
+  return (
+    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
+      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
+      <Box as='span'>
+        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
+        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
+      </Box>
+    </Flex>
+  );
+}

components/md-renderer/mdx-components/heading.tsx

@@ -5,7 +5,7 @@ import LinkIcon from 'components/icons/link.svg';
 const linkify = (Component: React.FunctionComponent<any>) => {
   return function EnrichedHeading(props: { children: string }): React.ReactNode {
     const text = props.children;
-    const id = text.toLowerCase && text
+    const id = text?.toLowerCase && text
       .toLowerCase()
       .replace(/[^\x00-\x7F]/g, '')
       .replace(/\s+/g, '-')
@@ -35,10 +35,10 @@ const HeaderLink = styled.a`
 
 const H1 = styled.h1`
   position: relative;
-  font-size: 42px;
+  font-size: 32px;
   line-height: 40px;
   font-weight: 700;
-  margin: 32px 0 10px !important;
+  margin: 20px 0 10px !important;
 
   &:hover ${HeaderLink} {
     display: flex;
@@ -46,12 +46,12 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 32px;
+  font-size: 30px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`
   margin: 22px 0 8px;
-  font-size: 30px;
+  font-size: 28px;
 `;
 
 const H4 = styled(H1).attrs({ as: 'h4' })`
@@ -70,12 +70,12 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
 `;
 
 const Headings = {
-  h1: linkify(H1),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6)
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6
 };
 
 export default Headings;

components/md-renderer/mdx-components/index.tsx

@@ -10,6 +10,8 @@ import EnrichedLink from './a';
 import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
+import { ResourceGroupTitle } from './resource-group-title';
+import { DedicatedRoadmap } from './dedicated-roadmap';
 
 const MdxComponents = {
   p: P,
@@ -17,11 +19,13 @@ const MdxComponents = {
   pre: Pre,
   blockquote: BlockQuote,
   a: EnrichedLink,
+  DedicatedRoadmap,
   table: Table,
   iframe: IFrame,
   img: Img,
   code: Code,
   BadgeLink: BadgeLink,
+  ResourceGroupTitle: ResourceGroupTitle,
   PremiumBlock: PremiumBlock,
   ul: Ul,
   li: Li

components/md-renderer/mdx-components/resource-group-title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Heading } from '@chakra-ui/react';
+
+type ResourceGroupTitleProps = {
+  children: React.ReactNode;
+};
+
+export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
+  const { children } = props;
+
+  return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
+}

components/md-renderer/mdx-components/ul.tsx

@@ -5,6 +5,10 @@ import styled from 'styled-components';
 export const Ul = styled.ul`
   margin-left: 40px;
   margin-bottom: 18px;
+  
+  ul {
+    margin-top: 18px;
+  }
 `;
 
 export const Li = styled.li`

components/opensource-banner.tsx

@@ -2,8 +2,8 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
-      <Container maxW='container.md'>
+    <Box bg='white' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
+      <Container maxW='container.sm'>
         <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
         <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
           <Link
@@ -12,7 +12,7 @@ export function OpensourceBanner() {
             target='_blank'
             borderBottomWidth={1}
             fontWeight={600}
-          >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+          >6th most starred project on GitHub</Link> and is visited by hundreds of thousands of
           developers every month.</Text>
         <iframe
           src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
@@ -20,26 +20,9 @@ export function OpensourceBanner() {
           scrolling='0'
           width='170'
           height='30'
-          style={{ margin: 'auto', marginBottom: '30px' }}
+          style={{ margin: 'auto' }}
           title='GitHub'
         />
-
-        <Text lineHeight={['25px', '25px', '26px']} fontSize={['15px', '15px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
-          community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
-          produce more open-source and free educational material consumed by hundreds of thousands of developers every
-          month.</Text>
-
-        <Box>
-          <iframe
-            src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
-            frameBorder='0'
-            scrolling='0'
-            width='260'
-            height='30'
-            title='GitHub'
-            style={{ margin: 'auto' }}
-          />
-        </Box>
       </Container>
     </Box>
   );

components/page-header.tsx

@@ -5,14 +5,16 @@ type PageHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
+  beforeTitle?: React.ReactNode;
 };
 
 export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children } = props;
+  const { title, subtitle, children, beforeTitle = null } = props;
 
   return (
     <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
       <Container maxW='container.md' position='relative'>
+        {beforeTitle}
         <Heading
           as='h1'
           color='black'

components/page-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+type PageWrapperProps = {
+  children: React.ReactNode;
+}
+
+export function PageWrapper(props: PageWrapperProps) {
+  const { children } = props;
+
+  return (
+    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
+      { children }
+    </Box>
+  );
+}

components/related-roadmaps.tsx

@@ -0,0 +1,80 @@
+import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react';
+import { RoadmapType } from '../lib/roadmap';
+
+type RelatedRoadmapsProps = {
+  roadmaps: RoadmapType[];
+};
+
+const colorsList = [
+  'gray.700',
+  'purple.700',
+  'blue.700',
+  'red.700',
+  'green.700',
+  'teal.700',
+  'yellow.700',
+  'cyan.700',
+  'pink.700'
+];
+
+const roadmapTitleMapping: Record<string, string> = {
+  "Software Design and Architecture": "Software Design",
+}
+
+export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
+  const { roadmaps } = props;
+  if (!roadmaps.length) {
+    return null;
+  }
+
+  return (
+    <Box borderTopWidth={1} bgColor='gray.50' pb='35px' pt='5px'>
+      <Container maxW='container.md'>
+        <Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
+          <Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
+            Related Roadmaps
+          </Text>
+
+          <Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }}
+                  href='/'>
+            <Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
+            <Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
+          </Button>
+        </Box>
+
+        <Stack spacing='5px'>
+          {roadmaps.map((roadmap, counter) => (
+            <Link
+              href={`/${roadmap.id}`}
+              key={roadmap.id}
+              borderWidth={1}
+              borderColor='blue.100'
+              py='7px'
+              px='14px'
+              rounded='md'
+              bg='white'
+              textDecoration={'none'}
+              _hover={{ bg: 'gray.100', borderColor: 'blue.200' }}
+              bgGradient='linear(to-r, white, gray.50)'
+              display='flex'
+              alignItems='center'
+              flexDir={['column', 'row', 'row']}
+            >
+              <Text
+                color={colorsList[counter]}
+                as='span'
+                fontWeight='bold'
+                display={['inline-block']}
+                minWidth='150px'
+                mr='10px'
+              >
+                {roadmapTitleMapping[roadmap.featuredTitle] || roadmap.featuredTitle}
+              </Text>
+              <Text as='span' display={['block', 'inline']} isTruncated maxWidth='100%' fontSize={['sm', 'sm', 'md']} color='gray.700'>{roadmap.featuredDescription}</Text>
+            </Link>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

components/roadmap/content-drawer.tsx

@@ -0,0 +1,131 @@
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { RemoveScroll } from 'react-remove-scroll';
+import { RoadmapType } from '../../lib/roadmap';
+import RoadmapGroup from '../../pages/[roadmap]/[group]';
+import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
+import { queryGroupElementsById } from '../../lib/renderer';
+
+type ContentDrawerProps = {
+  roadmap: RoadmapType;
+  groupId: string;
+  onClose?: () => void;
+};
+
+export function markTopicDone(groupId: string) {
+  localStorage.setItem(groupId, 'done');
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.add('done')
+  );
+}
+
+export function markTopicPending(groupId: string) {
+  localStorage.removeItem(groupId);
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.remove('done')
+  );
+}
+
+export function isTopicDone(groupId: string) {
+  return localStorage.getItem(groupId) === 'done';
+}
+
+export function ContentDrawer(props: ContentDrawerProps) {
+  const { roadmap, groupId, onClose = () => null } = props;
+  if (!groupId) {
+    return null;
+  }
+
+  const isDone = isTopicDone(groupId);
+
+  return (
+    <Box zIndex={99999} pos="relative">
+      <Box
+        onClick={onClose}
+        pos="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        bg="black"
+        opacity={0.4}
+      />
+      <RemoveScroll allowPinchZoom>
+        <Box
+          p="0px 30px 30px"
+          position="fixed"
+          w={['100%', '60%', '40%']}
+          bg="white"
+          top={0}
+          right={0}
+          bottom={0}
+          borderLeftWidth={'1px'}
+          overflowY="scroll"
+        >
+          <Flex
+            mt="20px"
+            justifyContent="space-between"
+            alignItems="center"
+            zIndex={1}
+          >
+            {!isDone && (
+              <Button
+                onClick={() => {
+                  markTopicDone(groupId);
+                  onClose();
+                }}
+                colorScheme="green"
+                leftIcon={<CheckIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Done
+                </Text>
+              </Button>
+            )}
+            {isDone && (
+              <Button
+                onClick={() => {
+                  markTopicPending(groupId);
+                  onClose();
+                }}
+                colorScheme="red"
+                leftIcon={<RepeatIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
+                  Mark as Pending
+                </Text>
+              </Button>
+            )}
+            <Button
+              onClick={onClose}
+              colorScheme="yellow"
+              ml="5px"
+              leftIcon={<CloseIcon width="8px" />}
+              iconSpacing={0}
+              size="xs"
+            >
+              <Text as="span" d={['none', 'none', 'none', 'block']} ml="10px">
+                Close
+              </Text>
+            </Button>
+          </Flex>
+
+          <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
+        </Box>
+      </RemoveScroll>
+    </Box>
+  );
+}

components/roadmap/edit-content-page-link.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
+
+type EditContentPageLinkProps = {
+  href: string;
+};
+
+export function EditContentPageLink(props: EditContentPageLinkProps) {
+  const { href } = props;
+
+  return (
+    <Box my='30px'>
+      <Divider mb="15px" orientation="horizontal" />
+      <Text
+        lineHeight="23px"
+        fontWeight={500}
+        fontSize="14px"
+        color="gray.500"
+        mb="10px"
+      >
+        This page is a work in progress. Help us by writing a small
+        introduction to the topic and suggesting a few links to read more
+        about this topic.
+      </Text>
+      <Button
+        size="sm"
+        py="20px"
+        as={Link}
+        href={href}
+        target="_blank"
+        isFullWidth
+        colorScheme={'gray'}
+        _hover={{ textDecoration: 'none', bg: 'gray.200' }}
+      >
+        Edit this Page
+      </Button>
+    </Box>
+  );
+}

components/roadmap/home-roadmap-item.tsx

@@ -1,34 +1,62 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
   title: string;
   subtitle: string;
   isCommunity?: boolean;
+  isUpcoming?: boolean;
   colorIndex?: number;
+  isNew?: boolean;
   url: string;
 };
 
 const bgColorList = [
-  'blue.900',
-  'red.800',
-  'green.800',
-  'teal.800',
-  'gray.800',
-  'red.900'
+  'red.100',
+  'yellow.100',
+  'green.200',
+  'teal.200',
+  'blue.200',
+  'red.200',
+  'gray.200',
+  'teal.200',
+  'yellow.100',
+  'green.200',
+  'red.200'
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
+  const {
+    title,
+    subtitle,
+    isCommunity,
+    isNew,
+    colorIndex = 0,
+    url,
+    isUpcoming
+  } = props;
 
   return (
     <Box
+      position='relative'
       as={Link}
       href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
+      _hover={{
+        textDecoration: 'none',
+        bg: 'rgba(255,255,255,.10)'
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            bg: 'rgba(255,255,255,.05)'
+          }
+        }
+      }}
       flex={1}
       shadow='2xl'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
+      className={'home-roadmap-item'}
+      bg={'rgba(255,255,255,.05)'}
       color='white'
       p='15px'
       rounded='10px'
@@ -40,8 +68,54 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
         </Tooltip>
       )}
 
-      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
+      <Heading
+        fontSize={['17px', '17px', '22px']}
+        color={bgColorList[colorIndex]}
+        mb='5px'
+        d='flex'
+        alignItems='center'
+      >
+        {title}
+
+        { isNew && <Badge position='absolute' bottom={0} right={0} colorScheme='yellow' ml='10px'>New</Badge> }
+      </Heading>
+      <Text color='gray.200' fontSize={['13px']}>
+        {subtitle}
+      </Text>
+
+      {isUpcoming && (
+        <Flex
+          alignItems='center'
+          justifyContent='center'
+          pos='absolute'
+          left={0}
+          right={0}
+          top={0}
+          bottom={0}
+          rounded='10px'
+        >
+          <Text
+            color='white'
+            bg='gray.600'
+            zIndex={1}
+            fontWeight={600}
+            p={'5px 10px'}
+            rounded='10px'
+          >
+            Upcoming
+          </Text>
+          <Box
+            bg={'black'}
+            pos='absolute'
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            rounded={'10px'}
+            opacity={0.5}
+          />
+        </Flex>
+      )}
     </Box>
   );
 }

components/roadmap/new-alert-banner.tsx

@@ -0,0 +1,50 @@
+import { Badge, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+import { event } from '../../lib/gtag';
+import React from 'react';
+
+export function NewAlertBanner() {
+  return (
+    <Text
+      _hover={{
+        textDecoration: 'none',
+        color: 'blue.700',
+        '& .new-badge': { bg: 'blue.700' },
+      }}
+      as={Link}
+      href={siteConfig.url.youtube}
+      d="block"
+      target="_blank"
+      color="red.700"
+      fontSize="sm"
+      mb="10px"
+      fontWeight={500}
+      onClick={() =>
+        event({
+          category: 'Subscription',
+          action: 'Clicked the YouTube banner',
+          label: 'YouTube Alert on Roadmap',
+        })
+      }
+    >
+      <Badge
+        transition={'all 300ms'}
+        className="new-badge"
+        mr="7px"
+        colorScheme="red"
+        variant="solid"
+      >
+        New
+      </Badge>
+      <Text textDecoration="underline" as="span" d={['none', 'inline']}>
+        Roadmap topics to be covered on our YouTube Channel
+      </Text>
+      <Text textDecoration="underline" as="span" d={['inline', 'none']}>
+        Topic videos being made on YouTube
+      </Text>
+      <Text as="span" ml="5px">
+        &raquo;
+      </Text>
+    </Text>
+  );
+}

components/roadmap/roadmap-error.tsx

@@ -0,0 +1,26 @@
+import { RoadmapType } from '../../lib/roadmap';
+import { Container, Heading, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+
+type RoadmapProps = {
+  roadmap: RoadmapType;
+};
+
+export function RoadmapError(props: RoadmapProps) {
+  const { roadmap } = props;
+
+  return (
+    <Container
+      bg={'red.600'}
+      maxW={'container.md'}
+      position="relative"
+      mt="50px"
+      p='20px'
+      rounded='5px'
+      color='white'
+    >
+      <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
+      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/roadmaps/${roadmap.id}.png`}>non-interactive version</Link></Text>
+    </Container>
+  );
+}

components/roadmap/roadmap-loader.tsx

@@ -0,0 +1,20 @@
+import { Container, Spinner } from '@chakra-ui/react';
+
+export function RoadmapLoader() {
+  return (
+    <Container
+      maxW={'container.md'}
+      position="relative"
+      mt="60px"
+      textAlign="center"
+    >
+      <Spinner
+        thickness="7px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="gray.500"
+        size="xl"
+      />
+    </Container>
+  );
+}

components/roadmap/roadmap-page-header.tsx

@@ -0,0 +1,223 @@
+import siteConfig from '../../content/site.json';
+import { isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
+import { NewAlertBanner } from './new-alert-banner';
+import {
+  Badge,
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Input,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Stack,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react';
+import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons';
+import React from 'react';
+import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
+import { event } from '../../lib/gtag';
+import { TNSAlert } from './tns-alert';
+
+type RoadmapPageHeaderType = {
+  roadmap: RoadmapType;
+};
+
+function RoadmapDownloader({ roadmapTitle }: { roadmapTitle: string }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Button
+        onClick={(e) => {
+          event({
+            category: 'Subscription',
+            action: `Clicked Download ${roadmapTitle} Roadmap`,
+            label: `Download ${roadmapTitle} Roadmap Button`
+          });
+          onOpen();
+        }}
+        size='xs'
+        py='14px'
+        px='10px'
+        leftIcon={<DownloadIcon />}
+        display={['none', 'flex']}
+        colorScheme='yellow'
+        variant='solid'
+        _hover={{ textDecoration: 'none' }}
+        _focus={{ boxShadow: 'none' }}
+      >
+        Download
+      </Button>
+
+      <Modal initialFocusRef={initialRef} closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose} isCentered motionPreset='none'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody p={6}>
+            <Heading mb='5px' fontSize='2xl'>Download Roadmap</Heading>
+            <Text fontSize={'md'} color='gray.700'>Enter your email below to receive the download link.</Text>
+            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={() => {
+              event({
+                category: 'Subscription',
+                action: `Submitted Download ${roadmapTitle} Roadmap Email`,
+                label: `PDF / Subscribe ${roadmapTitle} Roadmap`
+              });
+
+              onClose();
+            }}>
+              <Input required ref={initialRef} size='md' my='10px' type='email' placeholder='Email address' name={SIGNUP_EMAIL_INPUT_NAME}  />
+              <Button type='submit' colorScheme='green' size='md' width={'full'}>Send Link</Button>
+            </form>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+function RoadmapSubscriber({ roadmapTitle }: { roadmapTitle: string }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Button
+        onClick={(e) => {
+          event({
+            category: 'Subscription',
+            action: `Clicked Subscribe ${roadmapTitle} Roadmap`,
+            label: `Subscribe ${roadmapTitle} Roadmap Button`
+          });
+          onOpen();
+        }}
+        size='xs'
+        py='14px'
+        px='10px'
+        leftIcon={<AtSignIcon />}
+        display={'flex'}
+        colorScheme='yellow'
+        variant='solid'
+        _hover={{ textDecoration: 'none' }}
+        _focus={{ boxShadow: 'none' }}
+      >
+        Subscribe
+      </Button>
+
+      <Modal initialFocusRef={initialRef} closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose} isCentered motionPreset='none'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody p={6}>
+            <Heading mb='5px' fontSize='2xl'>Subscribe</Heading>
+            <Text fontSize={'md'} color='gray.700'>Enter your email below to receive updates to this roadmap.</Text>
+            <form action={SIGNUP_FORM_ACTION} method='post' target='_blank' onSubmit={() => {
+              event({
+                category: 'Subscription',
+                action: `Submitted Subscribe ${roadmapTitle} Roadmap Email`,
+                label: `Email / Subscribe ${roadmapTitle} Roadmap`
+              });
+
+              onClose();
+            }}>
+              <Input required ref={initialRef} size='md' my='10px' type='email' placeholder='Email address' name={SIGNUP_EMAIL_INPUT_NAME}  />
+              <Button type='submit' colorScheme='green' size='md' width={'full'}>Subscribe</Button>
+            </form>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
+  const { roadmap } = props;
+
+  const hasTNSAlert = ['frontend', 'backend', 'devops'].includes(roadmap.id);
+
+  return (
+    <Box
+      pt={['25px', '20px', '45px']}
+      pb={['20px', '15px', '30px']}
+      borderBottomWidth={1}
+      mb='50px'
+    >
+      <Container maxW='container.md' position='relative'>
+        <NewAlertBanner />
+        <Heading
+          as='h1'
+          color='black'
+          fontSize={['28px', '33px', '40px']}
+          fontWeight={700}
+          mb={['2px', '2px', '5px']}
+        >
+          {roadmap.title}
+        </Heading>
+        <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
+        <Flex justifyContent='space-between' alignItems={'center'} mt='20px'>
+          <Stack isInline flex={1}>
+            <Button
+              display={['flex', 'flex']}
+              as={Link}
+              href={'/roadmaps'}
+              size='xs'
+              py='14px'
+              px='10px'
+              colorScheme='teal'
+              variant='solid'
+              _hover={{ textDecoration: 'none' }}
+            >
+              &larr;
+              <Text as='span' display={['none', 'inline']} ml='5px'>
+                All Roadmaps
+              </Text>
+            </Button>
+
+            <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
+            <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
+
+            <Box flex={1} justifyContent='flex-end' display='flex'>
+              <Button
+                as={Link}
+                href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
+                target='_blank'
+                size='xs'
+                py='14px'
+                px='10px'
+                colorScheme='green'
+                leftIcon={<ChatIcon />}
+                _hover={{ textDecoration: 'none' }}
+              >
+                Suggest Changes
+              </Button>
+            </Box>
+          </Stack>
+        </Flex>
+        {isInteractiveRoadmap(roadmap.id) && (
+          <Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'>
+            { hasTNSAlert && <TNSAlert roadmapName={roadmap.featuredTitle} />}
+            <Text
+              fontWeight={500}
+              fontSize='14px'
+              bg='white'
+              p='5px 7px'
+              rounded='3px'
+            >
+              <Badge pos='relative' top={'-1px'} mr='6px' colorScheme='yellow'>
+                New
+              </Badge>
+              Resources are here, try clicking any nodes.
+            </Text>
+          </Box>
+        )}
+      </Container>
+    </Box>
+  );
+}

components/roadmap/tns-alert.tsx

@@ -0,0 +1,52 @@
+import { Box, Link, Text } from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import React from 'react';
+import { event } from '../../lib/gtag';
+
+type TNSAlertProps = {
+  roadmapName: string;
+};
+
+export function TNSAlert(props: TNSAlertProps) {
+  const { roadmapName } = props;
+
+  return (
+    <Text
+      fontWeight={500}
+      fontSize='14px'
+      bg='gray.100'
+      p='5px 7px'
+      rounded='2px 2px 0 0'
+      borderBottomWidth={1}
+    >
+      <Box as='span' display={['none', 'none', 'inline']}>Get the latest {roadmapName} news from our sister site&nbsp;
+        <Link
+          href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
+          target='_blank' textDecoration='underline'
+          onClick={() => {
+            event({
+              category: 'PartnerClick',
+              action: `TNS Referral`,
+              label: `TNS Referral - ${roadmapName}`,
+            });
+          }}
+          fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
+        </Link>
+      </Box>
+      <Box as='span' display={['inline', 'inline', 'none']}>Get latest {roadmapName} news on &nbsp;
+        <Link
+          href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'}
+          target='_blank' textDecoration='underline'
+          onClick={() => {
+            event({
+              category: 'PartnerClick',
+              action: `TNS Referral`,
+              label: `TNS Referral - ${roadmapName}`,
+            });
+          }}
+          fontWeight={600}>TheNewStack.io <ExternalLinkIcon />
+        </Link>
+      </Box>
+    </Text>
+  );
+}

components/share-icons.tsx

@@ -0,0 +1,43 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import HackerNewsIcon from 'components/icons/hackernews-square.svg';
+import FacebookIcon from 'components/icons/facebook-square.svg';
+import TwitterIcon from 'components/icons/twitter-square.svg';
+import RedditIcon from 'components/icons/reddit-square.svg';
+import { Icon } from '@chakra-ui/icons';
+import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url';
+import { useEffect, useState } from 'react';
+
+type ShareIconProps = {
+  text: string;
+  url: string;
+}
+
+export function ShareIcons(props: ShareIconProps) {
+  const { text, url } = props;
+
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => setOffset(window.scrollY);
+
+    window.removeEventListener('scroll', onScroll);
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (offset <= 100) {
+    return null;
+  }
+
+  return (
+    <Box pos='absolute' left={'-15px'} top={'190px'} height='100%' display={['none', 'none', 'none', 'block']}>
+      <Flex pos='sticky' top='100px' flexDir='column'>
+        <Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link>
+        <Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link>
+        <Link target='_blank' color='gray.500' href={getHnShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={HackerNewsIcon} /></Link>
+        <Link target='_blank' color='gray.500' href={getRedditShareUrl({ text, url })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={RedditIcon} /></Link>
+      </Flex>
+    </Box>
+  );
+}

components/sticky-banner.tsx

@@ -1,25 +1,27 @@
 import { Flex, Link, Text } from '@chakra-ui/react';
 import YouTubeLogo from '../components/icons/youtube.svg';
 import siteConfig from '../content/site.json';
+import { event } from '../lib/gtag';
 
 export function StickyBanner() {
   return (
     <Flex as={Link}
           href={siteConfig.url.youtube}
-          bg={'yellow.300'}
+          bg={'yellow.200'}
           color='gray.900'
-      // bg={'teal.900'}
-      // color='gray.300'
           alignItems='center'
-          position='fixed'
-          left={0}
-          right={0}
+          position='sticky'
+          top={0}
           zIndex={999}
           justifyContent='center'
           py='8px'
           _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
-      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
+          onClick={() => event({
+            category: 'Subscription',
+            action: 'Clicked the YouTube banner',
+            label: 'Sticky YouTube banner on Top'
+          })}
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
       <Text as='span' fontWeight={500} fontSize='14px'>

components/teams-banner.tsx

@@ -0,0 +1,22 @@
+import { Box, Button, Container, Heading, Link, Text } from '@chakra-ui/react';
+import { event } from '../lib/gtag';
+
+export function TeamsBanner() {
+  return null;
+
+  return (
+    <Box bg='teal.500' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
+      <Container maxW='container.sm'>
+        <Heading as='h4' color={'white'} fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Roadmaps for Teams</Heading>
+        <Text lineHeight='26px' color={'white'} fontSize={['15px', '15px', '18px']} mb='20px'>We are working on a solution for teams. Help us shape the platform!</Text>
+        <Button onClick={() => {
+          event({
+            category: 'UpcomingFeatureClick',
+            action: `Teams Form Redirect`,
+            label: `Click Teams Footer Link`
+          });
+        }} target={'_blank'} as={Link} href='https://forms.gle/6X2matbCmjmvYGGt6' _hover={{textDecoration: 'none', bg: 'gray.300'}}>Take a Survey</Button>
+      </Container>
+    </Box>
+  );
+}

components/updates-banner.tsx

@@ -1,40 +0,0 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
-import siteConfig from '../content/site.json';
-
-export function UpdatesBanner() {
-  return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
-         bg='gray.800'>
-      <Container maxW='container.md'>
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
-          Informed</Heading>
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
-          updates, new
-          guides, videos and roadmaps in your inbox.</Text>
-
-        <Flex flexDirection={['column', 'column', 'row']}>
-          <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
-                    variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
-              Subscribe to Updates
-            </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
-          </Box>
-          <Box>
-            <Button as={Link}
-                    href={siteConfig.url.sponsor}
-                    target='_blank'
-                    width={['full', 'auto']}
-                    fontSize={['14px', '14px', '16px']}
-                    _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
-                                                                                                             fontWeight={600}>5$
-              per month</Text></Text>
-          </Box>
-        </Flex>
-      </Container>
-    </Box>
-  );
-}

components/watch/video-grid-item.tsx

@@ -5,8 +5,8 @@ type VideoGridItemProps = {
   title: string;
   subtitle: string;
   date: string;
+  target?: string;
   isNew?: boolean;
-  isPro?: boolean;
   colorIndex?: number;
 };
 
@@ -53,14 +53,13 @@ const bgColorList = [
 ];
 
 export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, target } = props;
 
   return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
           rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>

content/authors.json

@@ -39,5 +39,11 @@
     "name": "Alexey Lesovsky",
     "bio": "Linux system administrator and PostgreSQL DBA at DataEgret.",
     "picture": "/authors/lesovsky.jpeg"
+  },
+  {
+    "username": "danielgruesso",
+    "name": "Daniel Gruesso",
+    "bio": "Product manager working on blockchain and smart contracts developer tools",
+    "picture": "/authors/danielgruesso.jpg"
   }
 ]

content/guides.json

@@ -1,9 +1,50 @@
 [
+  {
+    "id": "session-based-authentication",
+    "title": "Session Based Authentication",
+    "description": "Learn what is Session Based Authentication and how to implement it in Node.js",
+    "isNew": true,
+    "type": "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2022-11-01T19:59:14.191Z",
+    "createdAt": "2022-11-01T19:59:14.191Z"
+  },
+  {
+    "id": "http-basic-authentication",
+    "title": "HTTP Basic Authentication",
+    "description": "Learn what is HTTP Basic Authentication and how to implement it in Node.js",
+    "isNew": true,
+    "type": "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2022-10-03T19:59:14.191Z",
+    "createdAt": "2022-10-03T19:59:14.191Z"
+  },
+  {
+    "id": "basics-of-authentication",
+    "title": "Basics of Authentication",
+    "description": "Learn the basics of Authentication and Authorization",
+    "isNew": false,
+    "type": "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2022-09-21T19:59:14.191Z",
+    "createdAt": "2022-09-21T19:59:14.191Z"
+  },
+  {
+    "id": "avoid-render-blocking-javascript-with-async-defer",
+    "title": "Async and Defer Script Loading",
+    "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
+    "isNew": false,
+    "type": "visual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2021-09-10T19:59:14.191Z",
+    "createdAt": "2021-09-10T19:59:14.191Z"
+  },
   {
     "id": "what-are-web-vitals",
     "title": "What are Web Vitals?",
     "description": "Learn what are the core web vitals and how to measure them.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -12,7 +53,8 @@
     "id": "what-is-sli-slo-sla",
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -21,179 +63,199 @@
     "id": "ci-cd",
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-07-09T19:59:14.191Z",
-    "createdAt": "2020-07-09T19:59:14.191Z"
+    "updatedAt": "2021-07-09T19:59:14.191Z",
+    "createdAt": "2021-07-09T19:59:14.191Z"
   },
   {
     "id": "sso",
     "title": "SSO — Single Sign On",
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-07-01T19:59:14.191Z",
-    "createdAt": "2020-07-01T19:59:14.191Z"
+    "updatedAt": "2021-07-01T19:59:14.191Z",
+    "createdAt": "2021-07-01T19:59:14.191Z"
   },
   {
     "id": "oauth",
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-28T19:59:14.191Z",
-    "createdAt": "2020-06-28T19:59:14.191Z"
+    "updatedAt": "2021-06-28T19:59:14.191Z",
+    "createdAt": "2021-06-28T19:59:14.191Z"
   },
   {
     "id": "jwt-authentication",
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-20T19:59:14.191Z",
-    "createdAt": "2020-06-20T19:59:14.191Z"
+    "updatedAt": "2021-06-20T19:59:14.191Z",
+    "createdAt": "2021-06-20T19:59:14.191Z"
   },
   {
     "id": "token-authentication",
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-06-02T20:59:14.191Z",
-    "createdAt": "2020-06-02T20:59:14.191Z"
+    "updatedAt": "2021-06-02T20:59:14.191Z",
+    "createdAt": "2021-06-02T20:59:14.191Z"
   },
   {
     "id": "session-authentication",
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-26T20:59:14.191Z",
-    "createdAt": "2020-05-26T20:59:14.191Z"
+    "updatedAt": "2021-05-26T20:59:14.191Z",
+    "createdAt": "2021-05-26T20:59:14.191Z"
   },
   {
     "id": "basic-authentication",
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-19T20:59:14.191Z",
-    "createdAt": "2020-05-19T20:59:14.191Z"
+    "updatedAt": "2021-05-19T20:59:14.191Z",
+    "createdAt": "2021-05-19T20:59:14.191Z"
   },
   {
     "id": "character-encodings",
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-14T20:59:14.191Z",
-    "createdAt": "2020-05-14T20:59:14.191Z"
+    "updatedAt": "2021-05-14T20:59:14.191Z",
+    "createdAt": "2021-05-14T20:59:14.191Z"
   },
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
-    "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isPro": false,
+    "description": "Tips on getting familiar with an unfamiliar codebase",
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-05-04T20:59:14.191Z",
-    "createdAt": "2020-05-04T20:59:14.191Z"
+    "updatedAt": "2021-05-04T20:59:14.191Z",
+    "createdAt": "2021-05-04T20:59:14.191Z"
   },
   {
     "id": "why-build-it-and-they-will-come-wont-work-anymore",
     "title": "Build it and they will come?",
     "description": "Why “build it and they will come” alone won’t work anymore",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "spekulatius",
-    "updatedAt": "2020-05-04T12:59:14.191Z",
-    "createdAt": "2020-05-04T12:59:14.191Z"
+    "updatedAt": "2021-05-04T12:59:14.191Z",
+    "createdAt": "2021-05-04T12:59:14.191Z"
   },
   {
     "id": "dhcp-in-one-picture",
     "title": "DHCP in One Picture",
     "description": "Here is what happens when a new device joins the network.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-28T15:48:21.191Z",
-    "createdAt": "2020-04-28T15:48:21.191Z"
+    "updatedAt": "2021-04-28T15:48:21.191Z",
+    "createdAt": "2021-04-28T15:48:21.191Z"
   },
   {
     "id": "ssl-tls-https-ssh",
     "title": "SSL vs TLS vs SSH",
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-22T15:48:21.191Z",
-    "createdAt": "2020-04-22T15:48:21.191Z"
+    "updatedAt": "2021-04-22T15:48:21.191Z",
+    "createdAt": "2021-04-22T15:48:21.191Z"
   },
   {
     "id": "asymptotic-notation",
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-04-03T15:48:21.191Z",
-    "createdAt": "2020-04-03T15:48:21.191Z"
+    "updatedAt": "2021-04-03T15:48:21.191Z",
+    "createdAt": "2021-04-03T15:48:21.191Z"
   },
   {
     "id": "big-o-notation",
     "title": "Big-O Notation",
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-03-15T15:48:21.191Z",
-    "createdAt": "2020-03-15T15:48:21.191Z"
+    "updatedAt": "2021-03-15T15:48:21.191Z",
+    "createdAt": "2021-03-15T15:48:21.191Z"
   },
   {
     "id": "random-numbers",
     "title": "Random Numbers: Are they?",
     "description": "Learn how they are generated and why they may not be truly random.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-03-14T15:48:21.191Z",
-    "createdAt": "2020-03-14T15:48:21.191Z"
+    "updatedAt": "2021-03-14T15:48:21.191Z",
+    "createdAt": "2021-03-14T15:48:21.191Z"
   },
   {
     "id": "scaling-databases",
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-02-18T15:48:21.191Z",
-    "createdAt": "2020-02-18T15:48:21.191Z"
+    "updatedAt": "2021-02-18T15:48:21.191Z",
+    "createdAt": "2021-02-18T15:48:21.191Z"
   },
   {
     "id": "what-is-internet",
     "title": "How does the internet work?",
     "description": "Learn the basics of internet and everything involved with this short video series",
-    "isPro": false,
-    "authorUsername": "dmytrobol",
-    "updatedAt": "2020-02-29T15:48:21.191Z",
-    "createdAt": "2020-02-29T15:48:21.191Z"
+    "isNew": false,
+    "type":  "textual",
+    "authorUsername": "kamranahmedse",
+    "updatedAt": "2021-02-29T15:48:21.191Z",
+    "createdAt": "2021-02-29T15:48:21.191Z"
   },
   {
     "id": "torrent-client",
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "jesse",
-    "updatedAt": "2020-01-17T15:48:21.191Z",
-    "createdAt": "2020-01-17T15:48:21.191Z",
+    "updatedAt": "2021-01-17T15:48:21.191Z",
+    "createdAt": "2021-01-17T15:48:21.191Z",
     "canonical": "https://blog.jse.li/posts/torrent/"
   },
   {
     "id": "levels-of-seniority",
     "title": "Levels of Seniority",
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2019-12-03T12:13:00.860Z",
-    "createdAt": "2019-12-03T12:13:00.860Z"
+    "updatedAt": "2020-12-03T12:13:00.860Z",
+    "createdAt": "2020-12-03T12:13:00.860Z"
   },
   {
     "id": "design-patterns-for-humans",
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -202,7 +264,8 @@
     "id": "journey-to-http2",
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -212,7 +275,8 @@
     "id": "dns-in-one-picture",
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
-    "isPro": false,
+    "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -221,7 +285,8 @@
     "id": "http-caching",
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -230,7 +295,8 @@
     "id": "history-of-javascript",
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -239,9 +305,10 @@
     "id": "proxy-servers",
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
-    "isPro": false,
+    "isNew": false,
+    "type":  "textual",
     "authorUsername": "ebrahimbharmal007",
-    "createdAt": "2020-07-24T12:40:18",
-    "updatedAt": "2020-07-24T12:40:18"
+    "createdAt": "2017-10-24T17:00:00.860Z",
+    "updatedAt": "2017-10-24T17:00:00.860Z"
   }
 ]

content/guides/asymptotic-notation.md

@@ -1,16 +1,4 @@
-export const guideMeta = {
-    "title": "WebStorm — Project History",
-    "description": "Learn how to peek through the history of any git repository to learn how it grew.",
-    "url": "/guides/project-history",
-    "fileName": "project-history",
-    "featured": true,
-    "author": "kamranahmedse",
-    "updatedAt": "2020-07-16T19:59:14.191Z",
-    "createdAt": "2020-07-16T19:59:14.191Z"
-};
-
 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)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted.

content/guides/avoid-render-blocking-javascript-with-async-defer.md

@@ -0,0 +1,2 @@
+[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png)
+

content/guides/basic-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted.

content/guides/basics-of-authentication.md

@@ -0,0 +1,83 @@
+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.
+
+<iframe src="https://www.youtube.com/embed/Mcyt9SrZT6g" title="Basics of Authentication" />
+
+## 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.

content/guides/big-o-notation.md

@@ -2,4 +2,3 @@ Big-O notation is the mathematical notation that helps analyse the algorithms to
 
 [![](/guides/big-o-notation.png)](/guides/big-o-notation.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted.

content/guides/character-encodings.md

@@ -1,3 +1,2 @@
 [![](/guides/character-encodings.png)](/guides/character-encodings.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted.

content/guides/ci-cd.md

@@ -2,4 +2,3 @@ The image below details the differences between the continuous integration and c
 
 [![](/guides/ci-cd.png)](/guides/ci-cd.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted.

content/guides/dhcp-in-one-picture.md

@@ -1,3 +1,2 @@
 [![](/guides/dhcp.png)](/guides/dhcp.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted.

content/guides/history-of-javascript.md

@@ -1,7 +1,7 @@
 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; initally 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.
+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.

content/guides/http-basic-authentication.md

@@ -0,0 +1,93 @@
+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:
+
+<iframe src="https://www.youtube.com/embed/mwccHwUn7Gc" title="HTTP Basic Authentication" />
+
+## 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.

content/guides/http-caching.md

@@ -1,8 +1,8 @@
-As users, we easily get frustrated by the buffering videos, the images that take seconds to load, 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 server, cuts down the bandwidth costs etc. 
+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 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. 
+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)
 
@@ -11,9 +11,9 @@ What is web cache? It is something that sits somewhere between the client and th
 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 requests.
-- **Stale Content** is the cached but expired content
-- **Fresh Content** is the content available in cache that hasn't expired yet
+- **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
 
@@ -43,15 +43,15 @@ Unlike browser cache which serves a single user, proxy caches may serve hundreds
 
 #### Reverse Proxy Cache
 
-Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on 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 to the origin servers by the server administrators to reduce the load on server.
+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 the defaults are set on these caches.
+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 with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
+So, how do we control the web cache? Whenever the server emits some response, it is accompanied by some HTTP headers to guide the caches on whether and how to cache this response. The content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
 
 - [Expires](#expires)
 - [Pragma](#pragma)
@@ -71,19 +71,19 @@ So, how do we control the web cache? Whenever the server emits some response, it
 
 #### Expires
 
-Before HTTP/1.1 and introduction of `Cache-Control`, there was `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header
+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, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. 
+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, `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`.  
+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, 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.
+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
 
@@ -98,7 +98,7 @@ Setting the cache to `private` means that the content will not be cached in any
 Cache-Control: private
 ```
 
-Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. 
+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
 
@@ -138,7 +138,7 @@ 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, 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. 
+**`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
@@ -177,7 +177,7 @@ 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 are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example.
+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.
 

content/guides/journey-to-http2.md

@@ -71,7 +71,7 @@ Three-way handshake in its simplest form is that all the `TCP` connections begin
 - `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 recieved in order to fulfill the request.
+Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be received in order to fulfill the request.
 
 ![](http://i.imgur.com/uERG2G2.png)
 
@@ -89,11 +89,11 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 - **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 accute 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.
+- **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 the next response (when pipelining is enabled). 
+  > 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.
 
@@ -111,7 +111,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 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 humungous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
+`HTTP/1.1` was introduced in 1999 and it had been a standard for many years. Although, it improved alot over its predecessor; with the web changing everyday, it started to show its age. Loading a web page these days is more resource-intensive than it ever was. A simple webpage these days has to open more than 30 connections. Well `HTTP/1.1` has persistent connections, then why so many connections? you say! The reason is, in `HTTP/1.1` it can only have one outstanding connection at any moment of time. `HTTP/1.1` tried to fix this by introducing pipelining but it didn't completely address the issue because of the **head-of-line blocking** where a slow or heavy request may block the requests behind and once a request gets stuck in a pipeline, it will have to wait for the next requests to be fulfilled. To overcome these shortcomings of `HTTP/1.1`, the developers started implementing the workarounds, for example use of spritesheets, encoded images in CSS, single humongous CSS/Javascript files, [domain sharding](https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/) etc.
 
 ### SPDY - 2009
 
@@ -121,7 +121,7 @@ Google went ahead and started experimenting with alternative protocols to make t
 
 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 transfered per second (bits per second).
+> 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.
 
@@ -176,7 +176,7 @@ While we are talking headers, let me add here that the headers are still the sam
 
 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 roundtrips 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.
+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
 
@@ -186,7 +186,7 @@ Without any priority information, server processes the requests asynchronously i
 
 #### 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 requirementsi.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum keysizes, ephemeral keys are required etc.
+There was extensive discussion on whether security (through `TLS`) should be made mandatory for `HTTP/2` or not. In the end, it was decided not to make it mandatory. However, most vendors stated that they will only support `HTTP/2` when it is used over `TLS`. So, although `HTTP/2` doesn't require encryption by specs but it has kind of become mandatory by default anyway. With that out of the way, `HTTP/2` when implemented over `TLS` does impose some requirements i.e. `TLS` version `1.2` or higher must be used, there must be a certain level of minimum key sizes, ephemeral keys are required etc.
 
 `HTTP/2` is here and it has already [surpassed SPDY in adaption](http://caniuse.com/#search=http2) which is gradually increasing. `HTTP/2` has alot to offer in terms of performance gain and it is about time we should start using it. 
 

content/guides/jwt-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1273375903511465990) where this image was posted.

content/guides/oauth.md

@@ -1,3 +1,2 @@
 [![](/guides/oauth.png)](/guides/oauth.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1276994010423361540) where this image was posted.

content/guides/proxy-servers.md

@@ -1,4 +1,4 @@
-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** which play a vital role in mitigating these risks. We will cover the following topics in this guide:    
+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)
@@ -7,34 +7,34 @@ Internet has connected people across the world using social media and audio/vide
 
 ## 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.    
+***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 rather just an illustration.    
+> 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 load on their servers as their website is visited by millions of users every day.
+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 internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content which might be blocked in user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. 
+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 rather just an illustration
+> 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 the 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 performance of the website by introducing 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, reverse proxy server is a gateway to a web-server or group of web-servers. 
+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 rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
+> 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***.    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 manages the incoming requests by forwarding them to the web servers. 
+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.    
+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: 
 

content/guides/random-numbers.md

@@ -2,4 +2,3 @@ Random numbers are everywhere from computer games to lottery systems, graphics s
 
 [![](/guides/random-numbers.png)](/guides/random-numbers.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted.

content/guides/scaling-databases.md

@@ -2,4 +2,3 @@ The chart below aims to give you a really basic understanding of how the capabil
 
 [![](/guides/scaling-databases.svg)](/guides/scaling-databases.svg)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted.

content/guides/session-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/session-authentication.png)](/guides/session-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1264113498520465410) where this image was posted.

content/guides/session-based-authentication.md

@@ -0,0 +1,199 @@
+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(`
+    <h1>Welcome back ${req.session.userid}</h1>
+    <a href="/logout">Logout</a>
+  `);
+
+  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(`
+    <h1>Login</h1>
+    <form method="post" action="/process-login">
+      <input type="text" name="username" placeholder="Username" /> <br>
+      <input type="password" name="password" placeholder="Password" /> <br>
+      <button type="submit">Login</button>
+    </form>
+  `);
+
+  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.

content/guides/ssl-tls-https-ssh.md

@@ -1,3 +1,2 @@
 [![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1252717722724642822) where this image was posted.

content/guides/sso.md

@@ -1,3 +1,2 @@
 [![](/guides/sso.png)](/guides/sso.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1280266408434302979) where this image was posted.

content/guides/threads-and-concurrency.md

@@ -0,0 +1,8 @@
+# Threads and Concurrency
+
+A thread is an execution context in which the instructions to the CPU can be scheduled and executed independently of the parent process. Concurrency is the concept of multiple threads in a shared memory space being computed simultaneously (or intermittently executed in succession to provide that illusion). Concurrency allows multiple processes to execute at once and can apply to programming languages as well as operating systems. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=olYdb0DdGtM'>Threading Tutorial #1 - Concurrency, Threading and Parallelism</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@akhandmishra/operating-system-threads-and-concurrency-aec2036b90f8'>Operating System: Threads and Concurrency</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.mit.edu/6.005/www/fa14/classes/17-concurrency/'>Reading 17: Concurrency</BadgeLink>

content/guides/token-authentication.md

@@ -1,3 +1,2 @@
 [![](/guides/token-authentication.png)](/guides/token-authentication.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1266832006782103552) where this image was posted.

content/guides/torrent-client.md

@@ -475,7 +475,7 @@ Files, pieces, and piece hashes aren't the full story—we can go further by bre
 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 tank 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.
+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)
 

content/guides/unfamiliar-codebase.md

@@ -1,3 +1,2 @@
 [![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1256340163573231616) where this image was posted.

content/guides/what-are-web-vitals.md

@@ -1,3 +1,2 @@
 [![](/guides/web-vitals.png)](/guides/web-vitals.png)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1425476526770987012) where this image was posted.

content/guides/what-is-internet.md

@@ -1,4 +1,4 @@
-Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an 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 below questions:
+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?
@@ -19,7 +19,7 @@ In the video below, Vint Cerf, one of the "fathers of the internet," explains th
 
 ## Wires, Cables, and Wi-Fi
 
-Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).
+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. 
 
@@ -49,13 +49,13 @@ HTTP is the standard protocol by which webpages are transferred over the Interne
 
 ## Encryption and Public Keys
 
-Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.
+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.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Cybersecurity and Crime
 
-In this video, you will learn about the basics of cybersecurity and common cybercrimes
+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.
 
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

content/guides/what-is-sli-slo-sla.md

@@ -1,3 +1,2 @@
 [![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg)
 
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1421778722865229824) where this image was posted.

content/guides/why-build-it-and-they-will-come-wont-work-anymore.md

@@ -1,30 +1,30 @@
 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 to regularly board 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.
+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 the 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.
+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 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 building a side-project anymore. You've just got to adjust the way you are building it.
+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 less technological background.
+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.
+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 being easier than ever before and attention being 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 for 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.
+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.
+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?
@@ -34,27 +34,27 @@ The very first step to improving the odds of success is [idea validation](https:
 
 ### Build your Audience first and the project after.
 
-Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project 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).
+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 reconnect in our world of short attention spans.
+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've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a [logo generator](https://hatchful.shopify.com/) and release 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.
+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 for 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.
+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, keep yourself accountable and they will enhance your reach at the same time.
+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 and new customers. After the launch is before the 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 market 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.
+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
@@ -66,4 +66,4 @@ I hope the article helped you to wrap your head around the idea that building si
 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 Lead Developer for multiple organisations.
+[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.

content/pages/about.md

@@ -19,8 +19,8 @@ learnings, get feedbacks on their projects etc.
 ## How did you build roadmap.sh?
 
 The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
-be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
+be found on [github](https://github.com/kamranahmedse/developer-roadmap). It was hastily done to get it out in front of the
+people and get people to start contributing, so it might be rough on the edges, but that is where we need your help.
 
 ## How does it make money?
 
@@ -29,7 +29,7 @@ any intentions of monetization but as a good will, to help the people get out of
 
 Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to
 make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll
-continue growing the site however I can. My focus at the moment is not making money from it and just add content that
+continue growing the site however I can. My focus at the moment is not making money from it and just adding content that
 creates value for the people.
 
 > Sponsor the efforts by [paying as little as 5$ per month](https://github.com/sponsors/kamranahmedse) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com).
@@ -37,7 +37,7 @@ creates value for the people.
 ## Can I contribute?
 
 You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
-source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
+source code of the website can be [found on Github](https://github.com/kamranahmedse/developer-roadmap). Your contributions can
 be:
 
 * Adding a new roadmap
@@ -51,7 +51,7 @@ be:
 * Becoming a sponsor
 
 Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing.md) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/pages/pdfs.md

@@ -0,0 +1,27 @@
+<br />
+<br />
+
+# Download Roadmap PDFs
+
+Here is the list of PDF links for each of the roadmaps.
+
+* **Frontend Roadmap** - [Roadmap Link](https://roadmap.sh/frontend) / [PDF Link](https://roadmap.sh/pdfs/frontend.pdf)
+* **Backend Roadmap** - [Roadmap Link](https://roadmap.sh/backend) / [PDF Link](https://roadmap.sh/pdfs/backend.pdf)
+* **DevOps Roadmap** - [Roadmap Link](https://roadmap.sh/devops) / [PDF Link](https://roadmap.sh/pdfs/devops.pdf)
+* **Computer Science Roadmap** - [Roadmap Link](https://roadmap.sh/computer-science) / [PDF Link](https://roadmap.sh/pdfs/computer-science.pdf)
+* **QA Roadmap** - [Roadmap Link](https://roadmap.sh/qa) / [PDF Link](https://roadmap.sh/pdfs/qa.pdf)
+* **ASP.NET Core Roadmap** - [Roadmap Link](https://roadmap.sh/aspnet-core) / [PDF Link](https://roadmap.sh/pdfs/aspnet-core.pdf)
+* **Flutter Roadmap** - [Roadmap Link](https://roadmap.sh/flutter) / [PDF Link](https://roadmap.sh/pdfs/flutter.pdf)
+* **Software Architect Roadmap** - [Roadmap Link](https://roadmap.sh/software-architect) / [PDF Link](https://roadmap.sh/pdfs/software-architect.pdf)
+* **Software Design and Architecture Roadmap** - [Roadmap Link](https://roadmap.sh/software-design-architecture) / [PDF Link](https://roadmap.sh/pdfs/software-design-architecture.pdf)
+* **JavaScript Roadmap** - [Roadmap Link](https://roadmap.sh/javascript) / [PDF Link](https://roadmap.sh/pdfs/javascript.pdf)
+* **Node.js Roadmap** - [Roadmap Link](https://roadmap.sh/nodejs) / [PDF Link](https://roadmap.sh/pdfs/nodejs.pdf)
+* **GraphQL Roadmap** - [Roadmap Link](https://roadmap.sh/graphql) / [PDF Link](https://roadmap.sh/pdfs/graphql.pdf)
+* **Angular Roadmap** - [Roadmap Link](https://roadmap.sh/angular) / [PDF Link](https://roadmap.sh/pdfs/angular.pdf)
+* **React Roadmap** - [Roadmap Link](https://roadmap.sh/react) / [PDF Link](https://roadmap.sh/pdfs/react.pdf)
+* **Vue Roadmap** - [Roadmap Link](https://roadmap.sh/vue) / [PDF Link](https://roadmap.sh/pdfs/vue.pdf)
+* **Design System Roadmap** - [Roadmap Link](https://roadmap.sh/design-system) / [PDF Link](https://roadmap.sh/pdfs/design-system.pdf)
+* **Blockchain Roadmap** - [Roadmap Link](https://roadmap.sh/blockchain) / [PDF Link](https://roadmap.sh/pdfs/blockchain.pdf)
+* **Go Roadmap** - [Roadmap Link](https://roadmap.sh/golang) / [PDF Link](https://roadmap.sh/pdfs/go.pdf)
+* **Java Roadmap** - [Roadmap Link](https://roadmap.sh/java) / [PDF Link](https://roadmap.sh/pdfs/java.pdf)
+* **Python Roadmap** - [Roadmap Link](https://roadmap.sh/python) / [PDF Link](https://roadmap.sh/pdfs/python.pdf)

content/roadmaps/1-frontend/resources.md

@@ -1,76 +0,0 @@
-<div className='alert alert-primary' style={{ marginBottom: '-10px'}}>
-  This page is incomplete and is being worked upon. Please check back later or <a href='/signup'>subscribe</a> / <a href='https://twitter.com/kamranahmedse'>follow me on twitter</a> to get notified. Also, feel free to contribute by suggesting the resources in <a href='https://github.com/kamranahmedse/developer-roadmap'>the issues</a>.
-</div>
-
-# Become a Frontend Developer
-Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. 
-
-## Internet and how it works?
-
-Get the basic understanding of internet, browsers, networks and other relevant knowledge. 
-
-* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
-* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
-
-## Learn HTML
-HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. 
-
-Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
- 
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> 
-* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
-
-## Style your pages with CSS
-With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
-
-## Basics of JavaScript
-JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
-
-## Version Control Systems and Git
-
-Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
-
-In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.  
-
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
-
-## Modern JavaScript
-
-In this section you will learn how to use package managers and get started with the "modern JavaScript".
-
-* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
-* <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />

content/roadmaps/100-frontend/content-paths.json

@@ -0,0 +1,158 @@
+{
+  "home": "/roadmaps/100-frontend/content/readme.md",
+  "internet": "/roadmaps/100-frontend/content/100-internet/readme.md",
+  "internet:how-does-the-internet-work": "/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md",
+  "internet:what-is-http": "/roadmaps/100-frontend/content/100-internet/101-what-is-http.md",
+  "internet:browsers-and-how-they-work": "/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md",
+  "internet:dns-and-how-it-works": "/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md",
+  "internet:what-is-domain-name": "/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md",
+  "internet:what-is-hosting": "/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md",
+  "html": "/roadmaps/100-frontend/content/101-html/readme.md",
+  "html:learn-the-basics": "/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md",
+  "html:writing-semantic-html": "/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md",
+  "html:forms-and-validations": "/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md",
+  "html:conventions-and-best-practices": "/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md",
+  "html:accessibility": "/roadmaps/100-frontend/content/101-html/104-accessibility.md",
+  "html:seo-basics": "/roadmaps/100-frontend/content/101-html/105-seo-basics.md",
+  "css": "/roadmaps/100-frontend/content/102-css/readme.md",
+  "css:learn-the-basics": "/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md",
+  "css:making-layouts": "/roadmaps/100-frontend/content/102-css/101-making-layouts.md",
+  "css:responsive-design-and-media-queries": "/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md",
+  "javascript": "/roadmaps/100-frontend/content/103-javascript/readme.md",
+  "javascript:syntax-and-basic-constructs": "/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md",
+  "javascript:learn-dom-manipulation": "/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md",
+  "javascript:learn-fetch-api-ajax-xhr": "/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md",
+  "javascript:es6-and-modular-javascript": "/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md",
+  "javascript:concepts": "/roadmaps/100-frontend/content/103-javascript/104-concepts.md",
+  "version-control-systems": "/roadmaps/100-frontend/content/104-version-control-systems/readme.md",
+  "version-control-systems:basic-usage-of-git": "/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md",
+  "repo-hosting-services": "/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md",
+  "repo-hosting-services:github": "/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md",
+  "repo-hosting-services:gitlab": "/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md",
+  "repo-hosting-services:bitbucket": "/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md",
+  "web-security-knowledge": "/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md",
+  "web-security-knowledge:cors": "/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md",
+  "web-security-knowledge:https": "/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md",
+  "web-security-knowledge:content-security-policy": "/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md",
+  "web-security-knowledge:owasp-security-risks": "/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md",
+  "package-managers": "/roadmaps/100-frontend/content/107-package-managers/readme.md",
+  "package-managers:npm": "/roadmaps/100-frontend/content/107-package-managers/100-npm.md",
+  "package-managers:yarn": "/roadmaps/100-frontend/content/107-package-managers/101-yarn.md",
+  "package-managers:pnpm": "/roadmaps/100-frontend/content/107-package-managers/102-pnpm.md",
+  "css-architecture": "/roadmaps/100-frontend/content/108-css-architecture/readme.md",
+  "css-architecture:bem": "/roadmaps/100-frontend/content/108-css-architecture/100-bem.md",
+  "css-architecture:oocss": "/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md",
+  "css-architecture:smacss": "/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md",
+  "css-preprocessors": "/roadmaps/100-frontend/content/109-css-preprocessors/readme.md",
+  "css-preprocessors:sass": "/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md",
+  "css-preprocessors:postcss": "/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md",
+  "css-preprocessors:less": "/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md",
+  "build-tools": "/roadmaps/100-frontend/content/110-build-tools/readme.md",
+  "build-tools:task-runners": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/readme.md",
+  "build-tools:task-runners:npm-scripts": "/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md",
+  "build-tools:linters-formatters": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md",
+  "build-tools:linters-formatters:prettier": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md",
+  "build-tools:linters-formatters:eslint": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md",
+  "build-tools:linters-formatters:standardjs": "/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md",
+  "build-tools:module-bundlers": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/readme.md",
+  "build-tools:module-bundlers:webpack": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md",
+  "build-tools:module-bundlers:esbuild": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md",
+  "build-tools:module-bundlers:rollup": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md",
+  "build-tools:module-bundlers:parcel": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md",
+  "build-tools:module-bundlers:vite": "/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md",
+  "pick-a-framework": "/roadmaps/100-frontend/content/111-pick-a-framework/readme.md",
+  "pick-a-framework:react-js": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md",
+  "pick-a-framework:svelte": "/roadmaps/100-frontend/content/111-pick-a-framework/103-svelte.md",
+  "pick-a-framework:solid-js": "/roadmaps/100-frontend/content/111-pick-a-framework/104-solid-js.md",
+  "pick-a-framework:react-js:recoil": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md",
+  "pick-a-framework:react-js:redux": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md",
+  "pick-a-framework:react-js:mobx": "/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md",
+  "pick-a-framework:angular": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md",
+  "pick-a-framework:angular:rxjs": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md",
+  "pick-a-framework:angular:ngrx": "/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md",
+  "pick-a-framework:vue-js": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md",
+  "pick-a-framework:vue-js:pinia": "/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md",
+  "modern-css": "/roadmaps/100-frontend/content/112-modern-css/readme.md",
+  "modern-css:styled-components": "/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md",
+  "modern-css:css-modules": "/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md",
+  "modern-css:styled-jsx": "/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md",
+  "modern-css:emotion": "/roadmaps/100-frontend/content/112-modern-css/103-emotion.md",
+  "web-components": "/roadmaps/100-frontend/content/113-web-components/readme.md",
+  "web-components:html-templates": "/roadmaps/100-frontend/content/113-web-components/100-html-templates.md",
+  "web-components:custom-elements": "/roadmaps/100-frontend/content/113-web-components/101-custom-elements.md",
+  "web-components:shadow-dom": "/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md",
+  "css-frameworks": "/roadmaps/100-frontend/content/114-css-frameworks/readme.md",
+  "css-frameworks:js-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/readme.md",
+  "css-frameworks:js-first:chakra-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md",
+  "css-frameworks:js-first:mantine": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/104-mantine.md",
+  "css-frameworks:js-first:material-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md",
+  "css-frameworks:js-first:radix-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md",
+  "css-frameworks:js-first:daisy-ui": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/105-daisy-ui.md",
+  "css-frameworks:js-first:tailwind-css": "/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md",
+  "css-frameworks:css-first": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/readme.md",
+  "css-frameworks:css-first:bootstrap": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md",
+  "css-frameworks:css-first:bulma": "/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md",
+  "testing-your-apps": "/roadmaps/100-frontend/content/115-testing-your-apps/readme.md",
+  "testing-your-apps:jest": "/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md",
+  "testing-your-apps:playwright": "/roadmaps/100-frontend/content/115-testing-your-apps/104-playwright.md",
+  "testing-your-apps:react-testing-library": "/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md",
+  "testing-your-apps:cypress": "/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md",
+  "testing-your-apps:other-options": "/roadmaps/100-frontend/content/115-testing-your-apps/104-other-options.md",
+  "testing-your-apps:mocha": "/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md",
+  "testing-your-apps:chai": "/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md",
+  "testing-your-apps:ava": "/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md",
+  "testing-your-apps:jasmine": "/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md",
+  "auth-strategies": "/roadmaps/100-frontend/content/116-auth-strategies/readme.md",
+  "type-checkers": "/roadmaps/100-frontend/content/116-type-checkers/readme.md",
+  "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md",
+  "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md",
+  "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md",
+  "progressive-web-apps:storage": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md",
+  "progressive-web-apps:web-sockets": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md",
+  "progressive-web-apps:server-sent-events": "/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md",
+  "progressive-web-apps:service-workers": "/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md",
+  "progressive-web-apps:location": "/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md",
+  "progressive-web-apps:notifications": "/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md",
+  "progressive-web-apps:device-orientation": "/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md",
+  "progressive-web-apps:payments": "/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md",
+  "progressive-web-apps:credentials": "/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md",
+  "progressive-web-apps:prpl-pattern": "/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md",
+  "progressive-web-apps:rail-model": "/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md",
+  "progressive-web-apps:performance-metrics": "/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md",
+  "progressive-web-apps:lighthouse": "/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md",
+  "progressive-web-apps:browser-devtools": "/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md",
+  "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md",
+  "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md",
+  "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md",
+  "server-side-rendering:react-js:remix": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-remix.md",
+  "server-side-rendering:react-js:after-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md",
+  "server-side-rendering:angular": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md",
+  "server-side-rendering:angular:universal": "/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md",
+  "server-side-rendering:vue-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/readme.md",
+  "server-side-rendering:vue-js:nuxt-js": "/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md",
+  "server-side-rendering:svelte": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/readme.md",
+  "server-side-rendering:svelte:svelte-kit": "/roadmaps/100-frontend/content/118-server-side-rendering/103-svelte/100-svelte-kit.md",
+  "graphql": "/roadmaps/100-frontend/content/119-graphql/readme.md",
+  "graphql:apollo": "/roadmaps/100-frontend/content/119-graphql/100-apollo.md",
+  "graphql:relay-modern": "/roadmaps/100-frontend/content/119-graphql/101-relay-modern.md",
+  "static-site-generators": "/roadmaps/100-frontend/content/120-static-site-generators/readme.md",
+  "static-site-generators:next-js": "/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md",
+  "static-site-generators:remix": "/roadmaps/100-frontend/content/120-static-site-generators/108-remix.md",
+  "static-site-generators:gatsbyjs": "/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md",
+  "static-site-generators:nuxt-js": "/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md",
+  "static-site-generators:vuepress": "/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md",
+  "static-site-generators:jekyll": "/roadmaps/100-frontend/content/120-static-site-generators/104-jekyll.md",
+  "static-site-generators:hugo": "/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md",
+  "static-site-generators:astro": "/roadmaps/100-frontend/content/120-static-site-generators/106-astro.md",
+  "static-site-generators:eleventy": "/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md",
+  "mobile-applications": "/roadmaps/100-frontend/content/121-mobile-applications/readme.md",
+  "mobile-applications:react-native": "/roadmaps/100-frontend/content/121-mobile-applications/100-react-native.md",
+  "mobile-applications:nativescript": "/roadmaps/100-frontend/content/121-mobile-applications/101-nativescript.md",
+  "mobile-applications:flutter": "/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md",
+  "mobile-applications:ionic": "/roadmaps/100-frontend/content/121-mobile-applications/103-ionic.md",
+  "desktop-applications": "/roadmaps/100-frontend/content/122-desktop-applications/readme.md",
+  "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md",
+  "desktop-applications:tauri": "/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md",
+  "desktop-applications:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md",
+  "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md"
+}

content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md

@@ -0,0 +1,11 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work'>How Does the Internet Work? MDN Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=TNQsmPf24go'>How does the Internet work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md

@@ -0,0 +1,12 @@
+# What is HTTP?
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical "Client-Server model" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://howhttps.works'>How HTTPS Works ...in a comic!</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth'>Journey to HTTP/2</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/'>HTTP/3 Is Now a Standard: Why Use It and How to Get Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md

@@ -0,0 +1,9 @@
+# Browsers
+
+A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/browser-rendering-engine'>Role of Rendering Engine in Browsers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work'>Populating the Page: How Browsers Work</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WjDrMKZWCt0'>How Do Web Browsers Work?</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md

@@ -0,0 +1,12 @@
+# DNS
+
+The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://messwithdns.net/'>Mess with DNS - DNS Playground</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://howdns.works/'>How DNS works (comic)</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=e48AyJOA9W8'>When to add glue records to DNS settings</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YV5tkQYcvfg'>DNS Records for Newbies - How To Manage Website Records</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md

@@ -0,0 +1,8 @@
+# Domain Name
+
+A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the Domain Name System (DNS).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/'>What is a Domain Name? | Domain name vs. URL</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Y4cRx19nhJk'>A Beginners Guide to How Domain Names Work</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md

@@ -0,0 +1,8 @@
+# Hosting
+
+Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=htbY9-yggB0'>What Is Web Hosting? Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AXVZYzw8geg'>Different Types of Web Hosting Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Kx_1NYYJS7Q'>Where to Host a Fullstack Project on a Budget</BadgeLink>

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -0,0 +1,12 @@
+# Internet
+
+The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://internetfundamentals.com'>Learn How the Web Works</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>
+

content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md

@@ -0,0 +1,11 @@
+# HTML Basics
+
+HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started'>MDN Docs: Getting Started with HTML </BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlcheatsheet.com'>HTML Cheatsheet</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.scaler.com/topics/html'>Scaler: HTML</BadgeLink>

content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md

@@ -0,0 +1,11 @@
+# Semantic HTML
+
+Semantic element clearly describes its meaning to both the browser and the developer. In HTML, semantic element are the type of elements that can be used to define different parts of a web page such as `<form>`, `<table>`, `<article>`, `<header>`, `<footer>`, etc.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Glossary/Semantics'>Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>W3Schools: Semantic HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/html-best-practices/'>HTML Best Practices – How to Build a Better HTML-Based Website</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.hubspot.com/website/semantic-html'>Semantic HTML: What It Is and How It Improves Your Site</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://html.com/semantic-markup'>Semantic Markup</BadgeLink>

content/roadmaps/100-frontend/content/101-html/102-forms-and-validations.md

@@ -0,0 +1,9 @@
+# Forms and Validations
+
+Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation'>MDN Web Docs: Client-side form validation</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/learn/forms/'>Learn Forms by web.dev</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/js/js_validation.asp'>W3Schools: JavaScript Form Validation</BadgeLink>
+

content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md

@@ -0,0 +1,7 @@
+# Best Practices
+
+Learn to follow the best practices for writing maintainable and scalable HTML documents.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://github.com/hail2u/html-best-practices'>HTML Best Practices</BadgeLink>
+

content/roadmaps/100-frontend/content/101-html/104-accessibility.md

@@ -0,0 +1,13 @@
+# Accessibility
+
+Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3.org/WAI/tips/developing/'>Developing for Web Accessibility by W3C WAI</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/accessibility/index.php'>Accessibility Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/'>A Complete Guide To Accessible Front-End Components</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/Accessibility'>MDN Accessibility</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/accessibility'>Accessibility for Developers by Google</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.udacity.com/course/web-accessibility--ud891'>Web Accessibility by Udacity</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/'>Accessibility as an Essential Part of the Inclusive Developer Experience</BadgeLink>

content/roadmaps/100-frontend/content/101-html/105-seo-basics.md

@@ -0,0 +1,13 @@
+# Basics of SEO
+
+SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/search/docs'>Google Search Central — SEO Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/seo/guide'>SEO Guide</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://neilpatel.com/blog/seo-developers/'>8 Must-Know SEO Best Practices For Developers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679'>SEO for Developers</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=xsVTqzratPs'>Complete SEO Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SnxeXZpZkI0'>SEO Expert Course</BadgeLink>

content/roadmaps/100-frontend/content/101-html/readme.md

@@ -0,0 +1,14 @@
+# HTML
+
+HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlreference.io/'>htmlreference.io: All HTML elements at a glance</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://html.com'>HTML For Beginners The Easy Way</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.internetingishard.com/html-and-css/'>Web Development Basics</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.codecademy.com/learn/learn-html'>Codecademy - Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/denysdovhan/learnyouhtml'>Interactive HTML Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/mJgBOIoGihA'>HTML Full Course for Beginners | Complete All-in-One Tutorial </BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md

@@ -0,0 +1,11 @@
+# CSS Basics
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/102-css/101-making-layouts.md

@@ -0,0 +1,17 @@
+# Making layouts
+
+Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics:
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://cssgridgarden.com/'>Game for learning CSS Grid</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/all-about-floats/'>All about Floats</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/a-guide-to-flexbox'>A Complete Guide to Flexbox</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/complete-guide-grid'>A Complete Guide to Grid</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://cssgrid.io/'>Learn CSS Grid - Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://scrimba.com/learn/cssgrid'>Learn CSS Grid for free</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://thenewstack.io/get-grid-last-css-grid-template-markup/'>Get on the Grid at Last with the CSS Grid Layout Module</BadgeLink>

content/roadmaps/100-frontend/content/102-css/102-responsive-design-and-media-queries.md

@@ -0,0 +1,12 @@
+# Responsive Web Design
+
+Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/css_rwd_intro.asp'>Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/design/'>Learn Responsive Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kinsta.com/blog/responsive-web-design/'>The Beginner’s Guide to Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://webflow.com/blog/responsive-web-design'>The guide to responsive web design in 2022</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=VQraviuwbzU'>5 simple tips to making responsive layouts the easy way</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=srvUrASNj0s'>Introduction To Responsive Web Design</BadgeLink>

content/roadmaps/100-frontend/content/102-css/readme.md

@@ -0,0 +1,22 @@
+# CSS
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.theodinproject.com//'>The Odin Project</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/n4R2E7O-Ngo'>CSS Complete Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://cssreference.io/'>cssreference.io: All CSS properties at a glance</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/learn/css/'>Web.dev by Google — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.joshwcomeau.com/'>Joshw Comeau's CSS Hack Blog Posts</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://100dayscss.com'>100 Days CSS Challenge</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/css'>CSS Tutorial | Scaler</BadgeLink>