Add helmet to thanks page

* Fixing missing 'mailto:'

* Fixing broken link in Terms

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,36 @@
+<!--
+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

@@ -0,0 +1,19 @@
+#### 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

@@ -1 +0,0 @@
-<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

@@ -1,59 +0,0 @@
-<?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

@@ -1,11 +0,0 @@
-<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,11 +1,10 @@
-name: Deployment to GH Pages
+name: Deployment to GitHub 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:
@@ -13,19 +12,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-      with:
-        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 16
+        node-version: 14
     - name: Setup Environment
       run: |
         npm install
-    - name: Generate meta and build
+    - name: Generate meta and builld
       run: |
         npm run meta
         npm run build
-    - name: Deploy to GH Pages
+    - name: Deploy to GitHub Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"
         git config user.name "Kamran Ahmed"

README.md

@@ -0,0 +1,39 @@
+<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

@@ -1,76 +0,0 @@
-# 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,68 +1,37 @@
-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 (
-    <Link
-      href='https://thenewstack.io/ebooks/devops/cloud-native-devops-2019/?utm_source=Roadmap.sh&utm_medium=Banner&utm_campaign=Roadmap+DevOps+Ebook'
-      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: `TNS EBook Redirect`,
-          label: `Clicked TNS EBook Link`
-        });
-      }}
-    >
-      <Image
-        src='https://i.imgur.com/fEKq19S.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 DevOps eBook</Heading>
-          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
-            Learn all about doing DevOps the Cloud Native way with this free ebook from our partner, The New Stack
-          </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)'
+    <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'
         >
-          Partner Content
-        </Box>
-      </Flex>
-    </Link>
+          Sponsored by
+        </a>
+      </span>
+    </div>
   );
 };

components/footer.tsx

@@ -1,7 +1,6 @@
 import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 import { CustomAd } from './custom-ad';
-import React from 'react';
 
 function NavigationLinks() {
   return (
@@ -21,6 +20,8 @@ function NavigationLinks() {
               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'
@@ -32,7 +33,7 @@ function NavigationLinks() {
 
 export function Footer() {
   return (
-    <Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
+    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
       <Container maxW='container.md'>
         <NavigationLinks />
 
@@ -65,6 +66,14 @@ export function Footer() {
       </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

@@ -30,6 +30,7 @@ function DesktopMenuLinks() {
       <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
       <MenuLink text={'Guides'} link={'/guides'} />
       <MenuLink text={'Videos'} link={'/watch'} />
+      <MenuLink text={'Thanks'} link={'/thanks'} />
 
       <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)' }}
@@ -71,11 +72,12 @@ function MobileMenuLinks() {
                top={0}
                bg='gray.900'
                spacing='12px'
-               zIndex={999}
+               zIndex={1}
         >
           <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>
@@ -84,15 +86,9 @@ function MobileMenuLinks() {
   );
 }
 
-type GlobalHeaderProps = {
-  variant?: 'transparent' | 'solid'
-};
-
-export function GlobalHeader(props: GlobalHeaderProps) {
-  const { variant = 'solid' } = props;
-
+export function GlobalHeader() {
   return (
-    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
+    <Box bg='gray.900' p='58px 0 20px'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/guide/guide-grid-item.tsx

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

components/helmet.tsx

@@ -1,167 +1,73 @@
 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;
 };
 
-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',
-      },
-    },
-  };
-}
+const Helmet = (props: HelmetProps) => (
+  <NextHead>
+    <meta charSet='UTF-8' />
 
-const Helmet = (props: HelmetProps) => {
-  const { roadmap, title, canonical, description, keywords, noIndex = false } = props;
+    <title>{props.title || siteConfig.title}</title>
+    <meta name='description' content={props.description || siteConfig.description} />
 
-  return (
-    <NextHead>
-      <meta charSet="UTF-8" />
+    <meta name='author' content={siteConfig.author} />
+    <meta name='keywords' content={props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',')} />
 
-      <title>{title || siteConfig.title}</title>
-      <meta
-        name="description"
-        content={description || siteConfig.description}
-      />
+    <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' />
 
-      <meta name="author" content={siteConfig.author} />
-      <meta
-        name="keywords"
-        content={keywords ? keywords.join(',') : siteConfig.keywords.join(',')}
-      />
+    <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} />
 
-      {noIndex && <meta name="robots" content="noindex" /> }
+    <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' />
 
-      <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} />
+    <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="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" />
+    <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="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: `
+    { /* 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

@@ -1,67 +0,0 @@
-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: '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/tree.svg

@@ -1 +0,0 @@
-<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/links-list-item.tsx

@@ -6,17 +6,15 @@ 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, target } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
 
   return (
     <Link
-      target={target || '_self'}
       href={href}
       fontSize={['14px', '14px', '15px']}
       py='9px'
@@ -26,15 +24,6 @@ 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',
@@ -49,7 +38,7 @@ export function LinksListItem(props: LinksListItemProps) {
         {icon}
         <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='green' ml='10px'>{badgeText}</Badge>}
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' 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,25 +13,14 @@ 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 linkProps: Record<string, string> = {
-    target: '_self',
-    ...(isExternalUrl
-      ? {
-          rel: 'nofollow',
-          target: '_blank',
-        }
-      : {}),
-  };
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
 
   return (
-    <Link href={props.href} {...linkProps}>
+    <Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
       {props.children}
     </Link>
   );
 };
 
 export default EnrichedLink;
+

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

@@ -5,48 +5,16 @@ type BadgeLinkType = {
   target: string;
   badgeText: string;
   href: string;
-  colorScheme?: string;
-  children: React.ReactNode;
+  children: React.ReactNode
 };
 
 export function BadgeLink(props: BadgeLinkType) {
-  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',
-        }
-      : {}),
-  };
+  const { target = '_blank', badgeText, href, children } = props;
 
   return (
-    <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}
+    <Text mb={0}>
+      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
+        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
       </Link>
     </Text>
   );

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

@@ -1,22 +0,0 @@
-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: 32px;
+  font-size: 42px;
   line-height: 40px;
   font-weight: 700;
-  margin: 20px 0 10px !important;
+  margin: 32px 0 10px !important;
 
   &:hover ${HeaderLink} {
     display: flex;
@@ -46,12 +46,12 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 30px;
+  font-size: 32px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`
   margin: 22px 0 8px;
-  font-size: 28px;
+  font-size: 30px;
 `;
 
 const H4 = styled(H1).attrs({ as: 'h4' })`
@@ -70,12 +70,12 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
 `;
 
 const Headings = {
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6
+  h1: linkify(H1),
+  h2: linkify(H2),
+  h3: linkify(H3),
+  h4: linkify(H4),
+  h5: linkify(H5),
+  h6: linkify(H6)
 };
 
 export default Headings;

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

@@ -10,8 +10,6 @@ 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,
@@ -19,13 +17,11 @@ 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

@@ -1,12 +0,0 @@
-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,10 +5,6 @@ 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 bg='white' borderTopWidth={1} py={['45px', '45px', '70px']} textAlign='center'>
-      <Container maxW='container.sm'>
+    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
+      <Container maxW='container.md'>
         <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}
-          >6th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+          >7th 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,9 +20,26 @@ export function OpensourceBanner() {
           scrolling='0'
           width='170'
           height='30'
-          style={{ margin: 'auto' }}
+          style={{ margin: 'auto', marginBottom: '30px' }}
           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,16 +5,14 @@ type PageHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
-  beforeTitle?: React.ReactNode;
 };
 
 export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children, beforeTitle = null } = props;
+  const { title, subtitle, children } = 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

@@ -1,16 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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 ContentDrawer(props: ContentDrawerProps) {
-  const { roadmap, groupId, onClose = () => null } = props;
-  if (!groupId) {
-    return null;
-  }
-
-  const isDone = localStorage.getItem(groupId) === 'done';
-
-  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={() => {
-                  localStorage.setItem(groupId, 'done');
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.add('done')
-                  );
-                  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={() => {
-                  localStorage.removeItem(groupId);
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.remove('done')
-                  );
-                  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

@@ -1,39 +0,0 @@
-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,62 +1,34 @@
-import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, 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 = [
-  'red.100',
-  'yellow.100',
-  'green.200',
-  'teal.200',
-  'blue.200',
-  'red.200',
-  'gray.200',
-  'teal.200',
-  'yellow.100',
-  'green.200',
-  'red.200'
+  'blue.900',
+  'red.800',
+  'green.800',
+  'teal.800',
+  'gray.800',
+  'red.900'
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const {
-    title,
-    subtitle,
-    isCommunity,
-    isNew,
-    colorIndex = 0,
-    url,
-    isUpcoming
-  } = props;
+  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
 
   return (
     <Box
-      position='relative'
       as={Link}
       href={url}
-      _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)'
-          }
-        }
-      }}
+      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
       flex={1}
       shadow='2xl'
-      className={'home-roadmap-item'}
-      bg={'rgba(255,255,255,.05)'}
+      bg={bgColorList[colorIndex] ?? bgColorList[0]}
       color='white'
       p='15px'
       rounded='10px'
@@ -68,54 +40,8 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
         </Tooltip>
       )}
 
-      <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>
-      )}
+      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
+      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
     </Box>
   );
 }

components/roadmap/new-alert-banner.tsx

@@ -1,50 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,220 +0,0 @@
-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';
-
-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 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;
-
-  return (
-    <Box
-      pt={['25px', '20px', '45px']}
-      pb={['20px', '15px', '30px']}
-      borderBottomWidth={1}
-      mb='30px'
-    >
-      <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
-              d={['flex', 'flex']}
-              as={Link}
-              href={'/roadmaps'}
-              size='xs'
-              py='14px'
-              px='10px'
-              colorScheme='teal'
-              variant='solid'
-              _hover={{ textDecoration: 'none' }}
-            >
-              &larr;
-              <Text as='span' d={['none', 'inline']} ml='5px'>
-                All Roadmaps
-              </Text>
-            </Button>
-
-            <RoadmapDownloader roadmapTitle={roadmap.featuredTitle} />
-            <RoadmapSubscriber roadmapTitle={roadmap.featuredTitle} />
-
-            <Box flex={1} justifyContent='flex-end' d='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) && (
-          <Text
-            mt='30px'
-            mb={['-37px', '-32px', '-47px']}
-            fontWeight={500}
-            fontSize='14px'
-            bg='white'
-            borderWidth={1}
-            p='5px 7px'
-            rounded='3px'
-          >
-            <Badge pos='relative' top={'-1px'} mr='6px' colorScheme='yellow'>
-              New
-            </Badge>
-            Resources are here, try clicking any nodes.
-          </Text>
-        )}
-      </Container>
-    </Box>
-  );
-}

components/sticky-banner.tsx

@@ -1,27 +1,25 @@
 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.200'}
+          bg={'yellow.300'}
           color='gray.900'
+      // bg={'teal.900'}
+      // color='gray.300'
           alignItems='center'
-          position='sticky'
-          top={0}
+          position='fixed'
+          left={0}
+          right={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

@@ -1,20 +0,0 @@
-import { Box, Button, Container, Heading, Link, Text } from '@chakra-ui/react';
-import { event } from '../lib/gtag';
-
-export function TeamsBanner() {
-  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

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

content/authors.json

@@ -39,11 +39,5 @@
     "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,40 +1,9 @@
 [
-  {
-    "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": true,
-    "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.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -43,8 +12,7 @@
     "id": "what-is-sli-slo-sla",
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -53,199 +21,179 @@
     "id": "ci-cd",
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-07-09T19:59:14.191Z",
-    "createdAt": "2021-07-09T19:59:14.191Z"
+    "updatedAt": "2020-07-09T19:59:14.191Z",
+    "createdAt": "2020-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.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-07-01T19:59:14.191Z",
-    "createdAt": "2021-07-01T19:59:14.191Z"
+    "updatedAt": "2020-07-01T19:59:14.191Z",
+    "createdAt": "2020-07-01T19:59:14.191Z"
   },
   {
     "id": "oauth",
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-28T19:59:14.191Z",
-    "createdAt": "2021-06-28T19:59:14.191Z"
+    "updatedAt": "2020-06-28T19:59:14.191Z",
+    "createdAt": "2020-06-28T19:59:14.191Z"
   },
   {
     "id": "jwt-authentication",
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-20T19:59:14.191Z",
-    "createdAt": "2021-06-20T19:59:14.191Z"
+    "updatedAt": "2020-06-20T19:59:14.191Z",
+    "createdAt": "2020-06-20T19:59:14.191Z"
   },
   {
     "id": "token-authentication",
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-02T20:59:14.191Z",
-    "createdAt": "2021-06-02T20:59:14.191Z"
+    "updatedAt": "2020-06-02T20:59:14.191Z",
+    "createdAt": "2020-06-02T20:59:14.191Z"
   },
   {
     "id": "session-authentication",
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-26T20:59:14.191Z",
-    "createdAt": "2021-05-26T20:59:14.191Z"
+    "updatedAt": "2020-05-26T20:59:14.191Z",
+    "createdAt": "2020-05-26T20:59:14.191Z"
   },
   {
     "id": "basic-authentication",
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-19T20:59:14.191Z",
-    "createdAt": "2021-05-19T20:59:14.191Z"
+    "updatedAt": "2020-05-19T20:59:14.191Z",
+    "createdAt": "2020-05-19T20:59:14.191Z"
   },
   {
     "id": "character-encodings",
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-14T20:59:14.191Z",
-    "createdAt": "2021-05-14T20:59:14.191Z"
+    "updatedAt": "2020-05-14T20:59:14.191Z",
+    "createdAt": "2020-05-14T20:59:14.191Z"
   },
   {
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
     "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-04T20:59:14.191Z",
-    "createdAt": "2021-05-04T20:59:14.191Z"
+    "updatedAt": "2020-05-04T20:59:14.191Z",
+    "createdAt": "2020-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",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "spekulatius",
-    "updatedAt": "2021-05-04T12:59:14.191Z",
-    "createdAt": "2021-05-04T12:59:14.191Z"
+    "updatedAt": "2020-05-04T12:59:14.191Z",
+    "createdAt": "2020-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.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-28T15:48:21.191Z",
-    "createdAt": "2021-04-28T15:48:21.191Z"
+    "updatedAt": "2020-04-28T15:48:21.191Z",
+    "createdAt": "2020-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",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-22T15:48:21.191Z",
-    "createdAt": "2021-04-22T15:48:21.191Z"
+    "updatedAt": "2020-04-22T15:48:21.191Z",
+    "createdAt": "2020-04-22T15:48:21.191Z"
   },
   {
     "id": "asymptotic-notation",
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-03T15:48:21.191Z",
-    "createdAt": "2021-04-03T15:48:21.191Z"
+    "updatedAt": "2020-04-03T15:48:21.191Z",
+    "createdAt": "2020-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",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-03-15T15:48:21.191Z",
-    "createdAt": "2021-03-15T15:48:21.191Z"
+    "updatedAt": "2020-03-15T15:48:21.191Z",
+    "createdAt": "2020-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.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-03-14T15:48:21.191Z",
-    "createdAt": "2021-03-14T15:48:21.191Z"
+    "updatedAt": "2020-03-14T15:48:21.191Z",
+    "createdAt": "2020-03-14T15:48:21.191Z"
   },
   {
     "id": "scaling-databases",
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-02-18T15:48:21.191Z",
-    "createdAt": "2021-02-18T15:48:21.191Z"
+    "updatedAt": "2020-02-18T15:48:21.191Z",
+    "createdAt": "2020-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",
-    "isNew": false,
-    "type":  "textual",
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-02-29T15:48:21.191Z",
-    "createdAt": "2021-02-29T15:48:21.191Z"
+    "isPro": false,
+    "authorUsername": "dmytrobol",
+    "updatedAt": "2020-02-29T15:48:21.191Z",
+    "createdAt": "2020-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",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "jesse",
-    "updatedAt": "2021-01-17T15:48:21.191Z",
-    "createdAt": "2021-01-17T15:48:21.191Z",
+    "updatedAt": "2020-01-17T15:48:21.191Z",
+    "createdAt": "2020-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?",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-12-03T12:13:00.860Z",
-    "createdAt": "2020-12-03T12:13:00.860Z"
+    "updatedAt": "2019-12-03T12:13:00.860Z",
+    "createdAt": "2019-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",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -254,8 +202,7 @@
     "id": "journey-to-http2",
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -265,8 +212,7 @@
     "id": "dns-in-one-picture",
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
-    "isNew": false,
-    "type":  "visual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -275,8 +221,7 @@
     "id": "http-caching",
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -285,8 +230,7 @@
     "id": "history-of-javascript",
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -295,10 +239,9 @@
     "id": "proxy-servers",
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
-    "isNew": false,
-    "type":  "textual",
+    "isPro": false,
     "authorUsername": "ebrahimbharmal007",
-    "createdAt": "2017-10-24T17:00:00.860Z",
-    "updatedAt": "2017-10-24T17:00:00.860Z"
+    "createdAt": "2020-07-24T12:40:18",
+    "updatedAt": "2020-07-24T12:40:18"
   }
 ]

content/guides/asymptotic-notation.md

@@ -13,3 +13,4 @@ Asymptotic notation is the standard way of measuring the time and space that an
 
 [![](/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

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

content/guides/basic-authentication.md

@@ -1,2 +1,3 @@
 [![](/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

@@ -1,83 +0,0 @@
-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,3 +2,4 @@ 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,2 +1,3 @@
 [![](/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,3 +2,4 @@ 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,2 +1,3 @@
 [![](/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; 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.
+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.
 
 ### 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

@@ -1,93 +0,0 @@
-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
-WWWW-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 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. 
+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. 
 
 ### Introduction
 
-What is a web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. 
+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. 
 
 ![Web Cache](https://i.imgur.com/mJYVvTh.png)
 
@@ -11,9 +11,9 @@ What is a web cache? It is something that sits somewhere between the client and
 Before we get into further details, let me give you an overview of the terms that will be used, further in the article
 
 - **Client** could be your browser or any application requesting the server for some resource
-- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client's requests.
-- **Stale Content** is cached but expired content
-- **Fresh Content** is the content available in the cache that hasn't expired yet
+- **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
 - **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
 
-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 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.
 
 ![Reverse Proxy Cache](http://i.imgur.com/Eg4Cru3.png)
  
-Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever defaults are set on these caches.
+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.
 
 ### Caching Headers
 
-So, how do we control the web cache? Whenever the server emits some response, it is accompanied by some HTTP headers to guide the caches on whether and how to cache this response. The content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
+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.
 
 - [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 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
+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
 
 ```html
 Expires: Mon, 13 Mar 2017 12:22:00 GMT
 ```
 
-It should be noted that the date cannot be more than a year and if the date format is wrong, the content will be considered stale. Also, the clock on the cache has to be in sync with the clock on the server, otherwise, the desired results might not be achieved. 
+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. 
 
-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`.  
+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`.  
 
 #### Pragma
 
-Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, that you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching.
+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.
 
 #### 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 into 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 in to 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, 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. 
+**`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. 
 
 ```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 although not strictly the same but could be considered the 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 are although not strictly same but could be considered 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 received in order to fulfill the request.
+Once the three-way handshake is completed, the data sharing between the client and server may begin. It should be noted that the client may start sending the application data as soon as it dispatches the last `ACK` packet but the server will still have to wait for the `ACK` packet to be recieved in order to fulfill the request.
 
 ![](http://i.imgur.com/uERG2G2.png)
 
@@ -93,7 +93,7 @@ After merely 3 years of `HTTP/1.0`, the next version i.e. `HTTP/1.1` was release
 
 - **Pipelining** It also introduced the support for pipelining, where the client could send multiple requests to the server without waiting for the response from server on the same connection and server had to send the response in the same sequence in which requests were received. But how does the client know that this is the point where first response download completes and the content for next response starts, you may ask! Well, to solve this, there must be `Content-Length` header present which clients can use to identify where the response ends and it can start waiting for the next response.
 
-  > It should be noted that in order to benefit from persistent connections or pipelining, `Content-Length` header must be available on the response, because this would let the client know when the transmission completes and it can send the next request (in normal sequential way of sending requests) or start waiting for the next response (when pipelining is enabled). 
+  > 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). 
 
   > 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.
 
@@ -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 transferred 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 transfered 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.
 

content/guides/jwt-authentication.md

@@ -1,2 +1,3 @@
 [![](/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,2 +1,3 @@
 [![](/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 @@
-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:    
+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:    
 
 - [Proxy Server](#proxy-server)
 - [Forward Proxy Server](#forward-proxy-server)
@@ -7,34 +7,34 @@ The Internet has connected people across the world using social media and audio/
 
 ## 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 but rather just an illustration.    
+> NOTE: This is not an accurate description rather just an illustration.    
 
-Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing the load on their servers as their website is visited by millions of users every day.
+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.
      
 ## 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 the 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 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. 
+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. 
 
 ![Forward Proxy Description](/guides/proxy/forward-proxy.png)    
-> NOTE: This is not an accurate description but rather just an illustration
+> NOTE: This is not an accurate description 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 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 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 Description](/guides/proxy/reverse-proxy.png)    
-> NOTE: This is not an accurate description but 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 rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
 
 ## Summary   
 
-A proxy server acts as a gateway between client *(you)* and the internet and separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    A Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and 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***.    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. 
 
 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,3 +2,4 @@ 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,3 +2,4 @@ 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,2 +1,3 @@
 [![](/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/ssl-tls-https-ssh.md

@@ -1,2 +1,3 @@
 [![](/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,2 +1,3 @@
 [![](/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

@@ -1,8 +0,0 @@
-# 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,2 +1,3 @@
 [![](/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/unfamiliar-codebase.md

@@ -1,2 +1,3 @@
 [![](/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,2 +1,3 @@
 [![](/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 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:
+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:
 
 * 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 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).
+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).
 
 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. 
 

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

@@ -1,2 +1,3 @@
 [![](/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 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.
+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.
 
-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.
+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.
 
 
 Why doesn't "build it and they will come" work anymore?
 -------------------------------------------------------
 
-There are a few reasons for working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed in building a side-project anymore. You've just got to adjust the way you are building it.
+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.
 
 ### Building got much easier
 
 As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as [Laravel](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) are available for anyone to build projects on - for free.
 
-In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with a less technological background.
+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.
 
 ### 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 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.
+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.
 
-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, 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).
+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).
 
-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.
+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.
 
 ### Tool by Tool
 
-Another approach is the "Tool by Tool" approach. I first noticed this approach being used by Shopify. The team at Shopify is providing little tools such as a [logo generator](https://hatchful.shopify.com/) and releasing these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers, we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.
+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.
 
-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.
+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.
 
 ### Join a Maker community
 
-While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, and keep yourself accountable and they will enhance your reach at the same time.
+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.
 
 ### Getting ready to Launch
 
-Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more new customers. After the launch is before the launch.
+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.
 
 ### Marketing Is an On-going Fight
 
-Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to marketing your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete.
+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.
 
 
 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 a Lead Developer for multiple organizations.
+[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.

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/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.
+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.
 
 ## 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 adding content that
+continue growing the site however I can. My focus at the moment is not making money from it and just add 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/developer-roadmap). Your contributions can
+source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). 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/developer-roadmap/tree/master/contributing) when you
+to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
 decide to contribute.
 
 ## Can I redistribute the content?

content/pages/pdfs.md

@@ -1,22 +0,0 @@
-<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)
-* **QA Roadmap** - [Roadmap Link](https://roadmap.sh/qa) / [PDF Link](https://roadmap.sh/pdfs/qa.pdf)
-* **Software Architect Roadmap** - [Roadmap Link](https://roadmap.sh/software-architect) / [PDF Link](https://roadmap.sh/pdfs/software-architect.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)
-* **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/go) / [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.json

@@ -1,12 +1,13 @@
 [
   {
     "seo": {
-      "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
-      "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
+      "title": "Learn to become a modern frontend developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "javascript roadmap 2022",
-        "frontend roadmap 2022",
-        "frontend developer roadmap 2022",
+        "frontend roadmap",
+        "javascript roadmap",
+        "frontend roadmap 2021",
+        "javascript roadmap 2021",
         "guide to becoming a developer",
         "guide to becoming a frontend developer",
         "frontend developer",
@@ -16,7 +17,6 @@
         "javascript developer",
         "frontend development skills",
         "frontend development skills test",
-        "frontend roadmap",
         "frontend engineer roadmap",
         "frontend developer roadmap",
         "become a frontend developer",
@@ -32,42 +32,27 @@
       ]
     },
     "title": "Frontend Developer",
-    "description": "Step by step guide to becoming a modern frontend developer in 2022",
+    "description": "Step by step guide to becoming a modern frontend developer in 2021",
     "featuredTitle": "Frontend",
-    "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
-    "type": "role",
+    "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
     "featured": true,
-    "imageUrl": "/roadmaps/frontend.png",
-    "jsonUrl": "/project/frontend.json",
-    "resourcesPath": "/roadmaps/100-frontend/resources.md",
-    "pdfUrl": "/pdfs/frontend.pdf",
-    "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
-    "relatedRoadmaps": [
-      "javascript",
-      "nodejs",
-      "react",
-      "angular",
-      "vue",
-      "design-system"
-    ],
+    "imagePath": "/roadmaps/frontend.png",
+    "resourcesPath": "/roadmaps/1-frontend/resources.md",
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
     "id": "frontend",
-    "metaPath": "/roadmaps/100-frontend/meta.json",
     "isUpcoming": false
   },
   {
     "seo": {
-      "title": "Backend Developer Roadmap: Learn to become a modern backend developer",
-      "description": "Learn to become a modern backend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
+      "title": "Learn to become a modern backend developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "backend roadmap 2022",
-        "backend developer roadmap 2022",
         "guide to becoming a developer",
         "guide to becoming a backend developer",
-        "backend roadmap",
         "backend developer",
         "backend engineer",
         "backend skills",
@@ -90,31 +75,18 @@
       ]
     },
     "title": "Backend Developer",
-    "description": "Step by step guide to becoming a modern backend developer in 2022",
-    "type": "role",
+    "description": "Step by step guide to becoming a modern backend developer in 2021",
     "featuredTitle": "Backend",
-    "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
+    "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
     "featured": true,
-    "imageUrl": "/roadmaps/backend.png",
-    "jsonUrl": "/project/backend.json",
-    "resourcesPath": "/roadmaps/101-backend/resources.md",
+    "imagePath": "/roadmaps/backend.png",
+    "resourcesPath": "/roadmaps/2-backend/resources.md",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "/pdfs/backend.pdf",
-    "contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
-    "relatedRoadmaps": [
-      "python",
-      "java",
-      "golang",
-      "devops",
-      "javascript",
-      "nodejs",
-      "postgresql-dba"
-    ],
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
     "id": "backend",
-    "metaPath": "/roadmaps/101-backend/meta.json",
     "isUpcoming": false
   },
   {
@@ -122,10 +94,7 @@
       "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "devops roadmap 2022",
-        "sre roadmap 2022",
-        "operations roadmap 2022",
-        "guide to becoming a devops engineer",
+        "guide to becoming a devops enginer",
         "devops roadmap",
         "sre roadmap",
         "site reliability engineer roadmap",
@@ -143,14 +112,12 @@
       ]
     },
     "title": "DevOps Roadmap",
-    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
+    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
     "featuredTitle": "DevOps",
-    "type": "role",
-    "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
+    "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
     "featured": true,
-    "imageUrl": "/roadmaps/devops.png",
-    "jsonUrl": "/project/devops.json",
-    "resourcesPath": "/roadmaps/102-devops/resources.md",
+    "imagePath": "/roadmaps/devops.png",
+    "resourcesPath": "/roadmaps/3-devops/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -160,18 +127,8 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "/pdfs/devops.pdf",
-    "contentPathsFilePath": "/roadmaps/102-devops/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "python",
-      "java",
-      "golang",
-      "javascript",
-      "nodejs"
-    ],
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
     "id": "devops",
-    "metaPath": "/roadmaps/102-devops/meta.json",
     "isUpcoming": false
   },
   {
@@ -179,8 +136,6 @@
       "title": "React Developer Roadmap: Learn to become a React developer",
       "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "react roadmap 2022",
-        "react developer roadmap 2022",
         "guide to becoming a react developer",
         "react developer roadmap",
         "react roadmap",
@@ -195,15 +150,14 @@
       ]
     },
     "title": "React Developer",
-    "description": "Everything that is there to learn about React and the ecosystem in 2022.",
+    "description": "Everything that is there to learn about React and the ecosystem in 2021.",
     "featuredTitle": "React",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to become a React Developer in 2022",
+    "featuredDescription": "Step by step guide to become a React Developer in 2021",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "resourcesPath": "/roadmaps/103-react/resources.md",
-    "jsonUrl": "/project/react.json",
+    "contentPath": "/roadmaps/4-react/landscape.md",
+    "resourcesPath": "/roadmaps/4-react/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -213,540 +167,10 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "/pdfs/react.pdf",
-    "contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "angular",
-      "vue",
-      "nodejs",
-      "design-system"
-    ],
+    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
     "id": "react",
-    "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
   },
-  {
-    "seo": {
-      "title": "Angular Developer Roadmap: Learn to become a Angular developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a angular developer",
-        "angular developer roadmap",
-        "angular roadmap",
-        "become angular developer",
-        "angular developer skills",
-        "angular skills test",
-        "skills for angular development",
-        "learn angular development",
-        "what is angular",
-        "angular quiz",
-        "angular interview questions"
-      ]
-    },
-    "title": "Angular Developer",
-    "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
-    "featuredTitle": "Angular",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "featured": true,
-    "jsonUrl": "/project/angular.json",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/angular.pdf",
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "react",
-      "vue",
-      "nodejs"
-    ],
-    "contentPathsFilePath": "/roadmaps/104-angular/content-paths.json",
-    "id": "angular",
-    "metaPath": "/roadmaps/104-angular/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Vue Developer Roadmap: Learn to become a Vue developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for vue development. Learn to become a modern Vue developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a vue developer",
-        "guide to becoming a vue.js developer",
-        "vue developer roadmap",
-        "vue.js developer roadmap",
-        "vue roadmap",
-        "vue.js roadmap",
-        "become vue developer",
-        "become vue.js developer",
-        "vue developer skills",
-        "vue.js developer skills",
-        "vue skills test",
-        "vue.js skills test",
-        "skills for vue development",
-        "skills for vue.js development",
-        "learn vue development",
-        "learn vue.js development",
-        "what is vue",
-        "what is vue.js",
-        "vue quiz",
-        "vue.js quiz",
-        "vue interview questions",
-        "vue.js interview questions"
-      ]
-    },
-    "title": "Vue Developer",
-    "description": "Everything that is there to learn about Vue and the ecosystem in 2022.",
-    "featuredTitle": "Vue",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isNew": true,
-    "featured": true,
-    "jsonUrl": "/project/vue.json",
-    "resourcesPath": "/roadmaps/105-vue/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/vue.pdf",
-    "contentPathsFilePath": "/roadmaps/105-vue/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "react",
-      "angular",
-      "nodejs"
-    ],
-    "id": "vue",
-    "metaPath": "/roadmaps/105-vue/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "JavaScript Developer Roadmap: Step by step guide to learn JavaScript",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for javascript development. Learn to become a modern JavaScript developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "javascript guide 2022",
-        "learn javascript",
-        "step by step javascript guide",
-        "javascript roadmap 2022",
-        "javascript developer roadmap 2022",
-        "guide to becoming a javascript developer",
-        "javascript developer roadmap",
-        "javascript roadmap",
-        "become javascript developer",
-        "javascript developer skills",
-        "javascript skills test",
-        "skills for javascript development",
-        "learn javascript development",
-        "what is javascript",
-        "javascript quiz",
-        "javascript interview questions"
-      ]
-    },
-    "title": "JavaScript Roadmap",
-    "description": "Step by step guide to learn JavaScript in 2022",
-    "featuredTitle": "JavaScript",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to learn JavaScript in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isNew": true,
-    "featured": true,
-    "jsonUrl": "/project/javascript.json",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/javascript.pdf",
-    "contentPathsFilePath": "/roadmaps/106-javascript/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "javascript",
-      "react",
-      "angular",
-      "vue",
-      "nodejs"
-    ],
-    "id": "javascript",
-    "metaPath": "/roadmaps/106-javascript/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Android Developer Roadmap: Learn to become an Android developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming an android developer",
-        "android developer roadmap",
-        "android roadmap",
-        "become android developer",
-        "android developer skills",
-        "android skills test",
-        "skills for android development",
-        "learn android development",
-        "what is android",
-        "android quiz",
-        "android interview questions"
-      ]
-    },
-    "title": "Android Developer",
-    "description": "Step by step guide to becoming an Android developer in 2022",
-    "featuredTitle": "Android",
-    "type": "role",
-    "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
-    "isTextHeavy": true,
-    "isCommunity": false,
-    "featured": true,
-    "jsonUrl": "/project/android.json",
-    "landingPath": "/roadmaps/107-android/landscape.md",
-    "resourcesPath": "/roadmaps/107-android/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "react",
-      "nodejs"
-    ],
-    "id": "android",
-    "metaPath": "/roadmaps/107-android/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Node.js Developer Roadmap: Learn to become a modern node.js developer",
-      "description": "Learn to become a modern node.js developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern node.js development.",
-      "keywords": [
-        "node.js roadmap 2022",
-        "nodejs roadmap 2022",
-        "node.js roadmap 2022",
-        "nodejs roadmap 2022",
-        "node.js developer roadmap 2022",
-        "nodejs developer roadmap 2022",
-        "guide to becoming a developer",
-        "guide to becoming a node.js developer",
-        "guid to becoming a node.js developer",
-        "node.js developer",
-        "nodejs developer",
-        "node.js engineer",
-        "nodejs engineer",
-        "node.js skills",
-        "nodejs skills",
-        "node.js development",
-        "nodejs development",
-        "node.js developer",
-        "nodejs developer",
-        "node.js development skills",
-        "nodejs development skills",
-        "node.js development skills test",
-        "nodejs development skills test",
-        "node.js roadmap",
-        "nodejs roadmap",
-        "node.js engineer roadmap",
-        "nodejs engineer roadmap",
-        "node.js developer roadmap",
-        "nodejs developer roadmap",
-        "become a node.js developer",
-        "become a node.js developer",
-        "node.js developer career path",
-        "nodejs developer career path",
-        "node.js developer",
-        "nodejs developer",
-        "modern node.js developer",
-        "modern node.js developer",
-        "node developer",
-        "skills for node.js development",
-        "skills for nodejs development",
-        "learn node.js development",
-        "lear node.js development",
-        "node.js developer quiz",
-        "nodejs developer quiz",
-        "node.js developer interview questions",
-        "nodejs developer interview questions"
-      ]
-    },
-    "title": "Node.js Developer",
-    "description": "Step by step guide to becoming a modern Node.js developer in 2022",
-    "featuredTitle": "Node.js",
-    "featuredDescription": "Step by step guide to becoming a Node.js developer in 2022",
-    "type": "tool",
-    "isNew": true,
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "featured": true,
-    "imageUrl": "/roadmaps/nodejs.png",
-    "jsonUrl": "/project/nodejs.json",
-    "pdfUrl": "/pdfs/nodejs.pdf",
-    "contentPathsFilePath": "/roadmaps/107-nodejs/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "javascript",
-      "react",
-      "angular",
-      "vue"
-    ],
-    "id": "nodejs",
-    "metaPath": "/roadmaps/107-nodejs/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Learn to become a modern Python developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for python development. Learn to become a modern Python developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming an python developer",
-        "python developer roadmap",
-        "python roadmap",
-        "become python developer",
-        "python developer skills",
-        "python skills test",
-        "skills for python development",
-        "learn python development",
-        "what is python",
-        "python quiz",
-        "python interview questions"
-      ]
-    },
-    "title": "Python Developer",
-    "description": "Step by step guide to becoming a Python developer in 2022",
-    "featuredTitle": "Python",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
-    "isTextHeavy": true,
-    "isCommunity": false,
-    "featured": true,
-    "jsonUrl": "/project/python.json",
-    "resourcesPath": "/roadmaps/108-python/resources.md",
-    "pdfUrl": "/pdfs/python.pdf",
-    "versions": [
-      "latest"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "contentPathsFilePath": "/roadmaps/108-python/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "golang",
-      "java",
-      "javascript",
-      "nodejs"
-    ],
-    "id": "python",
-    "metaPath": "/roadmaps/108-python/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Learn to become a Go developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for Go development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a golang developer",
-        "guide to becoming a go developer",
-        "golang developer",
-        "go developer",
-        "guide to golang",
-        "guide to go",
-        "golang roadmap",
-        "go roadmap",
-        "golang skills",
-        "go skills",
-        "golang skills test",
-        "go skills test",
-        "skills for golang",
-        "skills for go",
-        "cloud development",
-        "what is golang",
-        "what is go",
-        "golang quiz",
-        "go quiz",
-        "golang interview questions",
-        "go interview questions"
-      ]
-    },
-    "title": "Go Developer",
-    "description": "Step by step guide to becoming a Go developer in 2022",
-    "featuredTitle": "Go",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isUpcoming": false,
-    "featured": true,
-    "jsonUrl": "/project/golang.json",
-    "resourcesPath": "/roadmaps/109-golang/resources.md",
-    "pdfUrl": "/pdfs/go.pdf",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "contentPathsFilePath": "/roadmaps/109-golang/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "java",
-      "javascript",
-      "nodejs"
-    ],
-    "id": "golang",
-    "metaPath": "/roadmaps/109-golang/meta.json"
-  },
-  {
-    "seo": {
-      "title": "Learn to become a modern Java developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for java development. Learn to become a modern Java developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a developer",
-        "guide to becoming a java developer",
-        "java developer",
-        "java engineer",
-        "java skills",
-        "guide to java",
-        "java roadmap",
-        "java skills",
-        "java skills test",
-        "skills for java",
-        "cloud development",
-        "what is java",
-        "java quiz",
-        "java interview questions",
-        "java engineer roadmap",
-        "java developer roadmap",
-        "become a java developer",
-        "java developer career path",
-        "java developer",
-        "modern java developer"
-      ]
-    },
-    "title": "Java Developer",
-    "description": "Step by step guide to becoming a Java developer in 2022",
-    "featuredTitle": "Java",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isUpcoming": false,
-    "featured": true,
-    "jsonUrl": "/project/java.json",
-    "resourcesPath": "/roadmaps/110-java/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/java.pdf",
-    "contentPathsFilePath": "/roadmaps/110-java/content-paths.json",
-    "relatedRoadmaps": [
-      "backend",
-      "devops",
-      "python",
-      "golang",
-      "javascript",
-      "nodejs"
-    ],
-    "id": "java",
-    "metaPath": "/roadmaps/110-java/meta.json"
-  },
-  {
-    "seo": {
-      "title": "How to Create a Design System",
-      "description": "Learn how to create a design system or become a design system engineer with this step by step guide with resources.",
-      "keywords": [
-        "guide to create a design system",
-        "guide to becoming a design system engineer",
-        "design system engineer",
-        "design system engineer",
-        "design system skills",
-        "guide to design system",
-        "design system roadmap",
-        "design system skills",
-        "design system skills test",
-        "skills for design system",
-        "what is design system",
-        "design system quiz",
-        "design system interview questions",
-        "design system engineer roadmap",
-        "design system engineer roadmap",
-        "become a design system engineer",
-        "design system engineer career path",
-        "design system engineer",
-        "modern design system engineer"
-      ]
-    },
-    "title": "Design System",
-    "description": "Learn how to create a design system with this step by step guide",
-    "featuredTitle": "Design System",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to building a modern Design System",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isNew": true,
-    "isUpcoming": false,
-    "featured": true,
-    "jsonUrl": "/project/design-system.json",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/design-system.pdf",
-    "contentPathsFilePath": "/roadmaps/111-design-system/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "javascript",
-      "react",
-      "vue",
-      "angular",
-      "nodejs"
-    ],
-    "id": "design-system",
-    "metaPath": "/roadmaps/111-design-system/meta.json"
-  },
   {
     "seo": {
       "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
@@ -773,89 +197,60 @@
       ]
     },
     "title": "PostgreSQL DBA",
-    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
+    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
     "featuredTitle": "DBA",
-    "type": "role",
-    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
-    "landingPath": "/roadmaps/111-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/111-postgresql-dba/resources.md",
+    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
+    "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
+    "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
     "author": {
       "name": "Alexey Lesovsky",
       "url": "https://github.com/lesovsky"
     },
-    "isCommunity": false,
+    "isCommunity": true,
     "isTextHeavy": true,
     "featured": true,
     "detailed": false,
     "versions": [],
-    "relatedRoadmaps": [
-      "backend",
-      "devops"
-    ],
     "id": "postgresql-dba",
-    "metaPath": "/roadmaps/111-postgresql-dba/meta.json",
     "isUpcoming": false
   },
   {
     "seo": {
-      "title": "Blockchain Developer Roadmap: Learn to become a blockchain developer",
-      "description": "Learn to become a blockchain developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.",
+      "title": "Android Developer Roadmap: Learn to become an Android developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
       "keywords": [
-        "blockchain roadmap 2022",
-        "web3 developer roadmap",
-        "web3 developer roadmap 2022",
-        "web3 roadmap",
-        "blockchain developer roadmap 2022",
-        "guide to becoming a blockchain developer",
-        "guide to becoming a blockchain developer",
-        "blockchain roadmap",
-        "blockchain developer",
-        "blockchain engineer",
-        "blockchain skills",
-        "blockchain development",
-        "javascript developer",
-        "blockchain development skills",
-        "blockchain development skills test",
-        "blockchain engineer roadmap",
-        "blockchain developer roadmap",
-        "become a blockchain developer",
-        "blockchain developer career path",
-        "javascript developer",
-        "modern javascript developer",
-        "node developer",
-        "skills for blockchain development",
-        "learn blockchain development",
-        "what is blockchain development",
-        "blockchain developer quiz",
-        "blockchain developer interview questions"
+        "guide to becoming an android developer",
+        "android developer roadmap",
+        "android roadmap",
+        "become android developer",
+        "android developer skills",
+        "android skills test",
+        "skills for android development",
+        "learn android development",
+        "what is android",
+        "android quiz",
+        "android interview questions"
       ]
     },
-    "title": "Blockchain Developer",
-    "description": "Step by step guide to becoming a blockchain developer in 2022.",
-    "featuredTitle": "Blockchain",
-    "featuredDescription": "Step by step guide to becoming a blockchain developer in 2022",
+    "title": "Android Developer",
+    "description": "Step by step guide to becoming an Android developer in 2021",
+    "featuredTitle": "Android",
+    "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
+    "isTextHeavy": true,
+    "isCommunity": true,
     "featured": true,
-    "type": "role",
-    "isNew": true,
-    "imageUrl": "/roadmaps/blockchain.png",
-    "jsonUrl": "/project/blockchain.json",
-    "author": {
-      "name": "Daniel Gruesso",
-      "url": "https://twitter.com/danielgruesso"
-    },
-    "pdfUrl": "/pdfs/blockchain.pdf",
-    "contentPathsFilePath": "/roadmaps/112-blockchain/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "javascript",
-      "nodejs",
-      "react",
-      "vue",
-      "angular"
+    "contentPath": "/roadmaps/6-android/landscape.md",
+    "resourcesPath": "/roadmaps/6-android/resources.md",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
     ],
-    "id": "blockchain",
-    "metaPath": "/roadmaps/112-blockchain/meta.json",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "id": "android",
     "isUpcoming": false
   },
   {
@@ -878,129 +273,16 @@
       ]
     },
     "title": "QA Engineer",
-    "description": "Steps to follow in order to become a modern QA Engineer in 2022",
+    "description": "Steps to follow in order to become a modern QA Engineer in 2021",
     "featuredTitle": "QA",
-    "type": "role",
-    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
-    "featured": true,
-    "isNew": true,
-    "resourcesPath": "/roadmaps/113-qa/resources.md",
-    "imageUrl": "/roadmaps/qa.png",
-    "jsonUrl": "/project/qa.json",
-    "pdfUrl": "/pdfs/qa.pdf",
+    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
+    "isUpcoming": true,
+    "contentPath": "/roadmaps/7-qa/landscape.md",
+    "resourcesPath": "/roadmaps/7-qa/resources.md",
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
-    "contentPathsFilePath": "/roadmaps/113-qa/content-paths.json",
-    "relatedRoadmaps": [
-      "frontend",
-      "backend",
-      "devops",
-      "javascript",
-      "nodejs"
-    ],
-    "id": "qa",
-    "metaPath": "/roadmaps/113-qa/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Software Architect Roadmap: Learn to become a modern Software Architect",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "solution architect roadmap",
-        "enterprise architect roadmap",
-        "guide to becoming a software architect",
-        "guide to becoming a Software Architect",
-        "software architect roadmap",
-        "db administrator roadmap",
-        "software architect roadmap",
-        "software architect skills",
-        "db administrator skills",
-        "become software architect",
-        "modern software architect skills",
-        "software architect skills test",
-        "skills for software architect",
-        "skills for software architect",
-        "learn software architect",
-        "what is software architect",
-        "software architect quiz",
-        "software architect interview questions"
-      ]
-    },
-    "title": "Software Architect",
-    "description": "Step by step guide to becoming a Software Architect in 2022",
-    "featuredTitle": "Software Architect",
-    "isNew": true,
-    "type": "role",
-    "jsonUrl": "/project/software-architect.json",
-    "featuredDescription": "Step by step guide to become a Software Architect in 2022",
-    "isCommunity": false,
-    "featured": true,
-    "detailed": false,
-    "versions": [],
-    "relatedRoadmaps": [
-      "backend",
-      "software-design-architecture",
-      "python",
-      "python",
-      "nodejs",
-      "golang",
-      "java",
-      "devops"
-    ],
-    "contentPathsFilePath": "/roadmaps/114-software-architect/content-paths.json",
-    "id": "software-architect",
-    "metaPath": "/roadmaps/114-software-architect/meta.json",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Software Design and Architecture Roadmap",
-      "description": "Learn software design and architecture with this step by step guide and resources.",
-      "keywords": [
-        "guide to learn software design and architecture",
-        "software design roadmap",
-        "software architecture roadmap",
-        "software design and architecture roadmap",
-        "modern software design and architecture roadmap",
-        "fullstack software design and architecture roadmap",
-        "design and architecture roadmap",
-        "scalable design roadmap",
-        "software design patterns roadmap",
-        "software architecture patterns roadmap",
-        "design architecture patterns roadmap",
-        "application architectures",
-        "software architecture guide"
-      ]
-    },
-    "title": "Software Design and Architecture",
-    "description": "Step by step guide to learn software design and architecture",
-    "featuredTitle": "Software Design and Architecture",
-    "type": "tool",
-    "featuredDescription": "Guide to learn software design and architecture",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isNew": true,
-    "isUpcoming": false,
-    "featured": true,
-    "jsonUrl": "/project/software-design-architecture.json",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "/pdfs/software-design-architecture.pdf",
-    "relatedRoadmaps": [
-      "backend",
-      "software-architect",
-      "devops",
-      "python",
-      "java",
-      "nodejs",
-      "golang"
-    ],
-    "id": "software-design-architecture",
-    "metaPath": "/roadmaps/115-software-design-architecture/meta.json"
+    "id": "qa"
   }
 ]

content/roadmaps/1-frontend/meta.json

@@ -1,11 +1,8 @@
 {
   "seo": {
-    "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
-    "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
+    "title": "Learn to become a modern frontend developer",
+    "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
     "keywords": [
-      "javascript roadmap 2022",
-      "frontend roadmap 2022",
-      "frontend developer roadmap 2022",
       "guide to becoming a developer",
       "guide to becoming a frontend developer",
       "frontend developer",
@@ -15,7 +12,6 @@
       "javascript developer",
       "frontend development skills",
       "frontend development skills test",
-      "frontend roadmap",
       "frontend engineer roadmap",
       "frontend developer roadmap",
       "become a frontend developer",
@@ -31,26 +27,15 @@
     ]
   },
   "title": "Frontend Developer",
-  "description": "Step by step guide to becoming a modern frontend developer in 2022",
+  "description": "Step by step guide to becoming a modern frontend developer in 2021",
   "featuredTitle": "Frontend",
-  "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
-  "type": "role",
+  "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
   "author": {
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
   },
   "featured": true,
-  "imageUrl": "/roadmaps/frontend.png",
-  "jsonUrl": "/project/frontend.json",
+  "imagePath": "/roadmaps/frontend.png",
   "resourcesPath": "./resources.md",
-  "pdfUrl": "/pdfs/frontend.pdf",
-  "contentPathsFilePath": "./content-paths.json",
-  "relatedRoadmaps": [
-    "javascript",
-    "nodejs",
-    "react",
-    "angular",
-    "vue",
-    "design-system"
-  ]
+  "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap"
 }

content/roadmaps/1-frontend/resources.md

@@ -0,0 +1,76 @@
+<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

@@ -1,144 +0,0 @@
-{
-  "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:enzyme": "/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.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",
-  "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:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md",
-  "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.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",
-  "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:gridsome": "/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.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:proton-native": "/roadmaps/100-frontend/content/122-desktop-applications/102-proton-native.md",
-  "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md"
-}

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

@@ -1,11 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-# 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 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

@@ -1,9 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-# 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 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

@@ -1,8 +0,0 @@
-# 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 DNS system.
-
-<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

@@ -1,8 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-# 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

@@ -1,8 +0,0 @@
-# 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='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/101-html/101-writing-semantic-html.md

@@ -1,9 +0,0 @@
-# Semantic HTML
-
-Semantic element clearly describes its meaning to both the browser and the developer.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<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>
-
-

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

@@ -1,7 +0,0 @@
-# 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>

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

@@ -1,7 +0,0 @@
-# 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

@@ -1,10 +0,0 @@
-# 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>

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

@@ -1,13 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-# 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='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://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

@@ -1,11 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-# 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>

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

@@ -1,9 +0,0 @@
-# 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 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

@@ -1,16 +0,0 @@
-# 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='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</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 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='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>

content/roadmaps/100-frontend/content/103-javascript/100-syntax-and-basic-constructs.md

@@ -1,9 +0,0 @@
-# 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.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern 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>

content/roadmaps/100-frontend/content/103-javascript/101-learn-dom-manipulation.md

@@ -1,15 +0,0 @@
-# DOM Manipulation
-
-The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc.  
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/dom-nodes'>DOM Treee</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.geeksforgeeks.org/dom-document-object-model/'>GeeksForGeeks - DOM (Document Object Model)</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/'>What is the DOM?</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/14_dom.html'>Eloquent JavaScript, 3rd Edition: The Document Object Model</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/js_htmldom.asp'>JavaScript HTML DOM</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/javascript-dom/'>JavaScript DOM</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.codeguage.com/courses/js/html-dom-introduction'>Learn the HTML DOM with Exercises - CodeGuage</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>What is DOM, Shadow DOM and Virtual DOM?</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0ik6X4DJKCc'>JavaScript DOM Crash Course</BadgeLink>
-

content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md

@@ -1,9 +0,0 @@
-# Fetch API
-
-Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updating the user profile or asynchronously fetching the list of searched products without reloading the page.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>Fetch API MDN Docs</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.javascripttutorial.net/javascript-fetch-api/'>A Simple Guide to JavaScript Fetch API</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/introduction-to-fetch/'>Introduction to Fetch</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-ZI0ea5O2oA'>JavaScript Fetch API</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md

@@ -1,9 +0,0 @@
-# Modern JavaScript
-
-ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/es6/'>ES6 Tutorial</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=NCwa_xi0Uuc'>Learn Modern JavaScript in 1 Hour</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nZ1DMMsyVyI'>JavaScript ES6, ES7, ES8</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/104-concepts.md

@@ -1,13 +0,0 @@
-# JavaScript Concepts
-
-Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Glossary/Hoisting'>JavaScript Hoisting</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/bubbling-and-capturing'>Event Bubbling and Capturing</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Glossary/Scope'>Scope in JavaScript</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/'>Var, Let and Const — What's the difference?</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain'>Inheritance and Prototype Chain</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode'>JavaScript Strict Mode</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>DOM vs Shadow DOM vs Virtual DOM</BadgeLink>

content/roadmaps/100-frontend/content/103-javascript/readme.md

@@ -1,17 +0,0 @@
-<DedicatedRoadmap
-  href='/javascript'
-  title='JavaScript Roadmap'
-  description='Click to check the detailed JavaScript Roadmap.'
-/>
-
-# 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.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
-<BadgeLink badgeText='Read' colorScheme="yellow" href='https://eloquentjavascript.net/'>Eloquent JavaScript textbook</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>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>

content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md

@@ -1,8 +0,0 @@
-# Git
-
-[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<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>

content/roadmaps/100-frontend/content/104-version-control-systems/readme.md

@@ -1,8 +0,0 @@
-# Version Control Systems
-
-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.
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<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>