Add resouce for cqrs and event sourcing (#1307)

* Resources added for oracle

* Update content/roadmaps/101-backend/content/106-relational-databases/104-oracle.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.github/sponsors/doppler-logo.svg

@@ -1,17 +1 @@
-<svg width="527" height="83" viewBox="0 0 527 83" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M135.783 59.3472C136.392 59.4025 137.083 59.4578 137.858 59.5132C138.688 59.5132 139.656 59.5132 140.763 59.5132C147.237 59.5132 152.023 57.8808 155.122 54.6162C158.276 51.3515 159.853 46.8418 159.853 41.0872C159.853 35.0558 158.359 30.4908 155.371 27.3921C152.383 24.2935 147.652 22.7441 141.178 22.7441C140.293 22.7441 139.38 22.7718 138.439 22.8271C138.068 22.8271 137.705 22.8358 137.351 22.853C136.45 22.8969 135.783 23.6663 135.783 24.5677V59.3472ZM173.216 41.0872C173.216 46.0672 172.441 50.4108 170.892 54.1182C169.343 57.8255 167.129 60.8965 164.252 63.3312C161.43 65.7658 157.972 67.5918 153.877 68.8092C149.782 70.0265 145.19 70.6352 140.099 70.6352C137.775 70.6352 135.064 70.5245 131.965 70.3032C129.364 70.1638 126.801 69.8684 124.278 69.4171C123.436 69.2666 122.835 68.527 122.835 67.6721V13.1161C125.823 12.5628 128.922 12.2031 132.131 12.0371C135.396 11.8158 138.19 11.7051 140.514 11.7051C145.439 11.7051 149.893 12.2585 153.877 13.3651C157.916 14.4718 161.375 16.2148 164.252 18.5941C167.129 20.9735 169.343 24.0168 170.892 27.7241C172.441 31.4315 173.216 35.8858 173.216 41.0872Z" fill="#111111"/>
-<path d="M199.262 41.0872C199.262 43.9092 199.594 46.4545 200.258 48.7232C200.977 50.9918 201.973 52.9562 203.246 54.6162C204.574 56.2208 206.178 57.4658 208.06 58.3512C209.941 59.2365 212.099 59.6792 214.534 59.6792C216.913 59.6792 219.043 59.2365 220.925 58.3512C222.861 57.4658 224.466 56.2208 225.739 54.6162C227.067 52.9562 228.063 50.9918 228.727 48.7232C229.446 46.4545 229.806 43.9092 229.806 41.0872C229.806 38.2652 229.446 35.7198 228.727 33.4511C228.063 31.1271 227.067 29.1628 225.739 27.5581C224.466 25.8981 222.861 24.6255 220.925 23.7401C219.043 22.8548 216.913 22.4121 214.534 22.4121C212.099 22.4121 209.941 22.8825 208.06 23.8231C206.178 24.7085 204.574 25.9811 203.246 27.6411C201.973 29.2458 200.977 31.2101 200.258 33.5341C199.594 35.8028 199.262 38.3205 199.262 41.0872ZM243.169 41.0872C243.169 46.0118 242.422 50.3555 240.928 54.1182C239.489 57.8255 237.497 60.9518 234.952 63.4972C232.406 65.9872 229.363 67.8685 225.822 69.1412C222.336 70.4138 218.573 71.0502 214.534 71.0502C210.605 71.0502 206.898 70.4138 203.412 69.1412C199.926 67.8685 196.882 65.9872 194.282 63.4972C191.681 60.9518 189.634 57.8255 188.14 54.1182C186.646 50.3555 185.899 46.0118 185.899 41.0872C185.899 36.1625 186.673 31.8465 188.223 28.1391C189.772 24.3765 191.847 21.2225 194.448 18.6771C197.104 16.1318 200.147 14.2228 203.578 12.9501C207.064 11.6775 210.716 11.0411 214.534 11.0411C218.462 11.0411 222.17 11.6775 225.656 12.9501C229.142 14.2228 232.185 16.1318 234.786 18.6771C237.386 21.2225 239.434 24.3765 240.928 28.1391C242.422 31.8465 243.169 36.1625 243.169 41.0872Z" fill="#111111"/>
-<path d="M275.584 11.7051C284.16 11.7051 290.745 13.2268 295.338 16.2701C299.93 19.2581 302.227 24.1828 302.227 31.0441C302.227 37.9608 299.903 42.9685 295.255 46.0672C290.607 49.1105 283.967 50.6322 275.335 50.6322H273.066C272.073 50.6322 271.268 51.4373 271.268 52.4306V69.8882H260.118C259.125 69.8882 258.32 69.083 258.32 68.0897V13.1991C261.141 12.6458 264.13 12.2585 267.284 12.0371C270.438 11.8158 273.204 11.7051 275.584 11.7051ZM276.414 22.7441C275.473 22.7441 274.532 22.7718 273.592 22.8271C273.359 22.8417 273.135 22.8562 272.918 22.8707C271.984 22.9331 271.268 23.7126 271.268 24.6479V39.5931H275.335C279.817 39.5931 283.192 38.9845 285.461 37.7671C287.729 36.5498 288.864 34.2811 288.864 30.9611C288.864 29.3565 288.559 28.0285 287.951 26.9771C287.397 25.9258 286.567 25.0958 285.461 24.4871C284.409 23.8231 283.109 23.3805 281.56 23.1591C280.01 22.8825 278.295 22.7441 276.414 22.7441Z" fill="#111111"/>
-<path d="M333.356 11.7051C341.933 11.7051 348.517 13.2268 353.11 16.2701C357.703 19.2581 359.999 24.1828 359.999 31.0441C359.999 37.9608 357.675 42.9685 353.027 46.0672C348.379 49.1105 341.739 50.6322 333.107 50.6322H330.838C329.845 50.6322 329.04 51.4373 329.04 52.4306V69.8882H317.89C316.897 69.8882 316.092 69.083 316.092 68.0897V13.1991C318.914 12.6458 321.902 12.2585 325.056 12.0371C328.21 11.8158 330.977 11.7051 333.356 11.7051ZM334.186 22.7441C333.245 22.7441 332.305 22.7718 331.364 22.8271C331.132 22.8417 330.907 22.8562 330.69 22.8707C329.757 22.9331 329.04 23.7126 329.04 24.6479V39.5931H333.107C337.589 39.5931 340.964 38.9845 343.233 37.7671C345.502 36.5498 346.636 34.2811 346.636 30.9611C346.636 29.3565 346.332 28.0285 345.723 26.9771C345.17 25.9258 344.34 25.0958 343.233 24.4871C342.182 23.8231 340.881 23.3805 339.332 23.1591C337.783 22.8825 336.067 22.7441 334.186 22.7441Z" fill="#111111"/>
-<path d="M410.14 58.7662C410.472 58.7662 410.74 59.0345 410.74 59.3656V69.2887C410.74 69.6198 410.472 69.8882 410.14 69.8882H375.663C374.67 69.8882 373.865 69.083 373.865 68.0897V17.3101C373.865 16.5002 374.405 15.7901 375.186 15.5748L386.813 12.3691V58.7662H410.14Z" fill="#111111"/>
-<path d="M426.789 69.8882C425.796 69.8882 424.991 69.083 424.991 68.0897V12.3691H464.944C465.344 12.3691 465.632 12.753 465.52 13.1367L462.694 22.8107C462.62 23.0664 462.385 23.2421 462.119 23.2421H439.737C438.744 23.2421 437.939 24.0473 437.939 25.0406V34.5301H458.554C458.953 34.5301 459.241 34.9136 459.129 35.2972L456.384 44.7223C456.31 44.9782 456.075 45.1542 455.809 45.1542H439.737C438.744 45.1542 437.939 45.9593 437.939 46.9526V59.0152H466.05C466.449 59.0152 466.737 59.3983 466.626 59.7818L463.817 69.4558C463.743 69.7119 463.508 69.8882 463.242 69.8882H426.789Z" fill="#111111"/>
-<path d="M496.532 11.7051C505.164 11.7051 511.776 13.2545 516.369 16.3531C520.962 19.3965 523.258 24.1551 523.258 30.6291C523.258 34.6685 522.317 37.9608 520.436 40.5061C518.61 42.9961 515.954 44.9605 512.468 46.3992C513.63 47.8378 514.847 49.4978 516.12 51.3792C517.393 53.2052 518.638 55.1418 519.855 57.1892C521.128 59.1812 522.345 61.2838 523.507 63.4972C524.512 65.3633 525.455 67.2088 526.335 69.0336C526.527 69.4299 526.237 69.8882 525.797 69.8882H512.571C512.354 69.8882 512.154 69.7707 512.047 69.5812C511.05 67.7993 510.029 65.9926 508.982 64.1612C507.931 62.2245 506.824 60.3432 505.662 58.5172C504.555 56.6912 503.449 54.9758 502.342 53.3712C501.235 51.7112 500.129 50.2172 499.022 48.8892H494.43C493.436 48.8892 492.631 49.6943 492.631 50.6876V69.8882H481.482C480.488 69.8882 479.683 69.083 479.683 68.0897V13.1991C482.505 12.6458 485.41 12.2585 488.398 12.0371C491.441 11.8158 494.153 11.7051 496.532 11.7051ZM497.279 22.7441C496.338 22.7441 495.481 22.7718 494.706 22.8271C494.563 22.8381 494.421 22.8491 494.281 22.8601C493.348 22.933 492.631 23.7126 492.631 24.6479V38.5972H496.283C501.152 38.5972 504.638 37.9885 506.741 36.7711C508.844 35.5538 509.895 33.4788 509.895 30.5461C509.895 27.7241 508.816 25.7321 506.658 24.5701C504.555 23.3528 501.429 22.7441 497.279 22.7441Z" fill="#111111"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.52378 0C0.860841 0 0.468192 0.732463 0.825109 1.29112L15.7055 24.5822C16.936 26.5083 19.0574 27.6739 21.343 27.6739H41.4698C48.8467 27.6739 53.4585 34.1966 53.4315 41.5C53.4045 48.8034 48.49 55.2611 41.4698 55.2611H19.982C18.7491 55.2611 17.7542 56.2606 17.7542 57.4936V80.7699C17.7542 82.0016 18.747 83 19.9786 83H47.4274C71.1783 83 82.9858 60.4663 83.0002 41.5C83.0146 22.5337 71.3453 0 47.4274 0H1.52378ZM11.2867 55.3259H5.94311C2.66082 55.3259 0 58.4222 0 62.2417V73.2033V82.3895C0 82.7206 0.268396 82.989 0.599478 82.989H5.94311C9.22539 82.989 11.8862 79.8927 11.8862 76.0732V55.9254C11.8862 55.5943 11.6178 55.3259 11.2867 55.3259Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="66.2481" y1="-2.76031" x2="7.59388" y2="75.9105" gradientUnits="userSpaceOnUse">
-<stop offset="0.0364583" stop-color="#409FF8"/>
-<stop offset="0.5" stop-color="#1673FF"/>
-<stop offset="1" stop-color="#516FF7"/>
-</linearGradient>
-</defs>
-</svg>
+<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/workos-logo-white-bg.svg

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

components/custom-ad.tsx

@@ -10,7 +10,7 @@ export const CustomAd = () => {
           >
             <img
               src='/fm-img.png'
-              alt='FM Logo'
+              alt='Custom Logo'
               height='100'
               width='130'
               style={{ maxWidth: '130px', border: 'none' }}

components/footer.tsx

@@ -64,16 +64,6 @@ export function Footer() {
           </Text>
         </Box>
       </Container>
-
-      {/*<CustomAd />*/}
-      {process.env.GA_SECRET && (
-        <script
-          async
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh'
-          id='_carbonads_js'
-        />
-      )}
     </Box>
   );
 }

components/helmet.tsx

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

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

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

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

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

components/opensource-banner.tsx

@@ -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'

components/roadmap/content-drawer.tsx

@@ -3,6 +3,7 @@ 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/utils';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
@@ -52,9 +53,9 @@ export function ContentDrawer(props: ContentDrawerProps) {
               <Button
                 onClick={() => {
                   localStorage.setItem(groupId, 'done');
-                  document
-                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
-                    .forEach((item) => item?.classList?.add('done'));
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.add('done')
+                  );
                   onClose();
                 }}
                 colorScheme="green"
@@ -75,9 +76,9 @@ export function ContentDrawer(props: ContentDrawerProps) {
               <Button
                 onClick={() => {
                   localStorage.removeItem(groupId);
-                  document
-                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
-                    .forEach((item) => item?.classList?.remove('done'));
+                  queryGroupElementsById(groupId).forEach((item) =>
+                    item?.classList?.remove('done')
+                  );
                   onClose();
                 }}
                 colorScheme="red"

components/roadmap/roadmap-page-header.tsx

@@ -1,4 +1,4 @@
-import { RoadmapType } from '../../lib/roadmap';
+import { isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
 import { NewAlertBanner } from './new-alert-banner';
 import {
   Badge,
@@ -90,7 +90,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
             </Button>
           </Stack>
         </Flex>
-        {roadmap.id === 'frontend' && (
+        {isInteractiveRoadmap(roadmap.id) && (
           <Text
             mt="30px"
             mb={['-37px', '-32px', '-47px']}

content/guides/threads-and-concurrency.md

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

content/roadmaps.json

@@ -1,9 +1,12 @@
 [
   {
     "seo": {
-      "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.",
+      "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.",
       "keywords": [
+        "javascript roadmap 2022",
+        "frontend roadmap 2022",
+        "frontend developer roadmap 2022",
         "guide to becoming a developer",
         "guide to becoming a frontend developer",
         "frontend developer",
@@ -29,9 +32,9 @@
       ]
     },
     "title": "Frontend Developer",
-    "description": "Step by step guide to becoming a modern frontend developer in 2021",
+    "description": "Step by step guide to becoming a modern frontend developer in 2022",
     "featuredTitle": "Frontend",
-    "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a frontend developer in 2022",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
@@ -40,7 +43,7 @@
     "imageUrl": "/roadmaps/frontend.png",
     "jsonUrl": "/project/frontend.json",
     "resourcesPath": "/roadmaps/100-frontend/resources.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
+    "pdfUrl": "/pdfs/frontend.pdf",
     "contentPathsFilePath": "/roadmaps/100-frontend/content-paths.json",
     "id": "frontend",
     "metaPath": "/roadmaps/100-frontend/meta.json",
@@ -48,9 +51,11 @@
   },
   {
     "seo": {
-      "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.",
+      "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.",
       "keywords": [
+        "backend roadmap 2022",
+        "backend developer roadmap 2022",
         "guide to becoming a developer",
         "guide to becoming a backend developer",
         "backend roadmap",
@@ -76,18 +81,19 @@
       ]
     },
     "title": "Backend Developer",
-    "description": "Step by step guide to becoming a modern backend developer in 2021",
+    "description": "Step by step guide to becoming a modern backend developer in 2022",
     "featuredTitle": "Backend",
-    "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a backend developer in 2022",
     "featured": true,
     "imageUrl": "/roadmaps/backend.png",
-    "jsonUrl": "/project/frontend.json",
+    "jsonUrl": "/project/backend.json",
     "resourcesPath": "/roadmaps/101-backend/resources.md",
     "author": {
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
+    "pdfUrl": "/pdfs/backend.pdf",
+    "contentPathsFilePath": "/roadmaps/101-backend/content-paths.json",
     "id": "backend",
     "metaPath": "/roadmaps/101-backend/meta.json",
     "isUpcoming": false
@@ -97,6 +103,9 @@
       "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 enginer",
         "devops roadmap",
         "sre roadmap",
@@ -115,9 +124,9 @@
       ]
     },
     "title": "DevOps Roadmap",
-    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
+    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2022",
     "featuredTitle": "DevOps",
-    "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
+    "featuredDescription": "Step by step guide for DevOps or operations role in 2022",
     "featured": true,
     "imageUrl": "/roadmaps/devops.png",
     "jsonUrl": "/project/devops.json",
@@ -131,7 +140,7 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
+    "pdfUrl": "/pdfs/devops.pdf",
     "id": "devops",
     "metaPath": "/roadmaps/102-devops/meta.json",
     "isUpcoming": false
@@ -141,6 +150,8 @@
       "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",
@@ -155,9 +166,9 @@
       ]
     },
     "title": "React Developer",
-    "description": "Everything that is there to learn about React and the ecosystem in 2021.",
+    "description": "Everything that is there to learn about React and the ecosystem in 2022.",
     "featuredTitle": "React",
-    "featuredDescription": "Step by step guide to become a React Developer in 2021",
+    "featuredDescription": "Step by step guide to become a React Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
@@ -173,7 +184,7 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
+    "pdfUrl": "/pdfs/react.pdf",
     "id": "react",
     "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
@@ -197,9 +208,9 @@
       ]
     },
     "title": "Angular Developer",
-    "description": "Everything that is there to learn about Angular and the ecosystem in 2021.",
+    "description": "Everything that is there to learn about Angular and the ecosystem in 2022.",
     "featuredTitle": "Angular",
-    "featuredDescription": "Step by step guide to become a Angular Developer in 2021",
+    "featuredDescription": "Step by step guide to become a Angular Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
@@ -215,7 +226,7 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/angular-roadmap",
+    "pdfUrl": "/pdfs/angular.pdf",
     "id": "angular",
     "metaPath": "/roadmaps/104-angular/meta.json",
     "isUpcoming": false
@@ -239,9 +250,9 @@
       ]
     },
     "title": "Android Developer",
-    "description": "Step by step guide to becoming an Android developer in 2021",
+    "description": "Step by step guide to becoming an Android developer in 2022",
     "featuredTitle": "Android",
-    "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
+    "featuredDescription": "Step by step guide to becoming an Android Developer in 2022",
     "isTextHeavy": true,
     "isCommunity": false,
     "featured": true,
@@ -280,16 +291,16 @@
       ]
     },
     "title": "Python Developer",
-    "description": "Step by step guide to becoming a Python developer in 2021",
+    "description": "Step by step guide to becoming a Python developer in 2022",
     "featuredTitle": "Python",
-    "featuredDescription": "Step by step guide to becoming a Python Developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a Python Developer in 2022",
     "isTextHeavy": true,
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/python.json",
     "resourcesPath": "/roadmaps/106-python/resources.md",
     "landingPath": "/roadmaps/106-python/landscape.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/python-roadmap",
+    "pdfUrl": "/pdfs/python.pdf",
     "versions": [
       "latest"
     ],
@@ -304,7 +315,7 @@
   {
     "seo": {
       "title": "Learn to become a Go 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.",
+      "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",
@@ -330,9 +341,9 @@
       ]
     },
     "title": "Go Developer",
-    "description": "Step by step guide to becoming a Go developer in 2021",
+    "description": "Step by step guide to becoming a Go developer in 2022",
     "featuredTitle": "Go",
-    "featuredDescription": "Step by step guide to becoming a Go developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a Go developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,
@@ -340,7 +351,7 @@
     "jsonUrl": "/project/golang.json",
     "landingPath": "/roadmaps/107-golang/landscape.md",
     "resourcesPath": "/roadmaps/107-golang/resources.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/go-roadmap",
+    "pdfUrl": "/pdfs/go.pdf",
     "versions": [
       "latest",
       "2018",
@@ -356,7 +367,7 @@
   {
     "seo": {
       "title": "Learn to become a modern Java 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.",
+      "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",
@@ -381,9 +392,9 @@
       ]
     },
     "title": "Java Developer",
-    "description": "Step by step guide to becoming a Java developer in 2021",
+    "description": "Step by step guide to becoming a Java developer in 2022",
     "featuredTitle": "Java",
-    "featuredDescription": "Step by step guide to becoming a Java Developer in 2021",
+    "featuredDescription": "Step by step guide to becoming a Java Developer in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": false,
@@ -400,7 +411,7 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/java-roadmap",
+    "pdfUrl": "/pdfs/java.pdf",
     "id": "java",
     "metaPath": "/roadmaps/108-java/meta.json"
   },
@@ -430,9 +441,9 @@
       ]
     },
     "title": "PostgreSQL DBA",
-    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
+    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2022",
     "featuredTitle": "DBA",
-    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
+    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
     "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
     "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
     "author": {
@@ -465,9 +476,9 @@
       ]
     },
     "title": "AWS",
-    "description": "Everything that is there to learn about AWS and the ecosystem in 2021.",
+    "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
     "featuredTitle": "AWS",
-    "featuredDescription": "Step by step guide to learn AWS in 2021",
+    "featuredDescription": "Step by step guide to learn AWS in 2022",
     "isTextHeavy": false,
     "isCommunity": false,
     "isUpcoming": true,
@@ -506,9 +517,9 @@
       ]
     },
     "title": "QA Engineer",
-    "description": "Steps to follow in order to become a modern QA Engineer in 2021",
+    "description": "Steps to follow in order to become a modern QA Engineer in 2022",
     "featuredTitle": "QA",
-    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
+    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
     "featured": true,
     "landingPath": "/roadmaps/111-qa/landscape.md",

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

@@ -93,6 +93,10 @@
   "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",

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

@@ -6,5 +6,5 @@ The Internet is a global network of computers connected to each other which comm
 <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 badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</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=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

@@ -6,4 +6,5 @@ HTTP is the `TCP/IP` based application layer communication protocol which standa
 <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://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

@@ -6,3 +6,4 @@ A web browser is a software application that enables a user to access and displa
 <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

@@ -5,3 +5,5 @@ The Domain Name System (DNS) is the phonebook of the Internet. Humans access inf
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</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 colorScheme='green' badgeText='Visit' href='https://messwithdns.net/'>Miss with DNS - DNS Playground</BadgeLink>

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

@@ -1 +1,9 @@
-# Learn the basics
+# 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' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>

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

@@ -1 +1,9 @@
-# Writing semantic html
+# 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 +1,6 @@
-# Forms and validations
+# 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>

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

@@ -1 +1,7 @@
-# Conventions and best practices
+# 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 +1,8 @@
-# Accessibility
+# 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='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</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>

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

@@ -1 +1,12 @@
 # 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://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,8 +1,10 @@
 # HTML
 
-HTML stands for Hyper Text 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.
+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' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</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>

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

@@ -1,5 +1,12 @@
 # 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 +1,9 @@
-# Responsive Design
+# 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

@@ -4,8 +4,12 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 
 <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='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' 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 +1,9 @@
-# Syntax and basic constructs
+# 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 +1,11 @@
-# Learn dom manipulation
+# DOM Manipulation
+
+The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<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://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='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 +1,7 @@
-# Learn fetch api ajax xhr
+# Fetch API
+
+Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch 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='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 +1,9 @@
-# Es6 and modular javascript
+# 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>
+

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

@@ -1 +1,13 @@
-# Concepts
+# 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' 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 +1,10 @@
-# Javascript
+# 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>
+<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 +1,8 @@
-# Basic usage of git
+# 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 +1,8 @@
-# Version control systems
+# 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>

content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md

@@ -1,4 +1,4 @@
-# Github
+# GitHub
 
 [GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
 

content/roadmaps/100-frontend/content/105-repo-hosting-services/101-gitlab.md

@@ -1 +1,8 @@
-# Gitlab
+# GitLab
+
+[GitLab](https://gitlab.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://gitlab.com/'>GitLab Website</BadgeLink>
+<BadgeLink badgeText='Read' href='https://docs.gitlab.com/'>GitLab Documentation</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md

@@ -1 +1,8 @@
-# Bitbucket
+# BitBucket
+
+[BitBucket](https://bitbucket.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://bitbucket.com/'>BitBucket Website</BadgeLink>
+<BadgeLink badgeText='Read' href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>

content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md

@@ -1 +1,8 @@
-# Repo hosting services
+# Repo Hosting Services
+
+There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
+
+<ResourceGroupTitle>Services Links</ResourceGroupTitle>
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
+<BadgeLink badgeText='Visit' href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
+<BadgeLink badgeText='Visit' href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>

content/roadmaps/100-frontend/content/106-web-security-knowledge/100-https.md

@@ -1 +1,12 @@
-# Https
+# HTTPS
+
+HTTPS is a secure way to send data between a web server and a browser.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hExRDVZHhig'>SSL, TLS, HTTP, HTTPS Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GoXgl9r0Kjk'>HTTPS — Stories from the field</BadgeLink>
+
+

content/roadmaps/100-frontend/content/106-web-security-knowledge/101-content-security-policy.md

@@ -1 +1,8 @@
-# Content security policy
+# Content Security Policy
+
+Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP'>MDN — Content Security Policy (CSP)</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/csp'>Google Devs — Content Security Policy (CSP)</BadgeLink>
+

content/roadmaps/100-frontend/content/106-web-security-knowledge/102-cors.md

@@ -1 +1,6 @@
-# Cors
+# CORS
+
+Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS'>CORS — Cross-Origin Resource Sharing</BadgeLink>

content/roadmaps/100-frontend/content/106-web-security-knowledge/103-owasp-security-risks.md

@@ -1 +1,9 @@
-# Owasp security risks
+# OWASP Security Risks
+
+OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://en.wikipedia.org/wiki/OWASP'>Wikipedia - OWASP</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/0xRadi/OWASP-Web-Checklist'>OWASP Web Application Security Testing Checklist</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>

content/roadmaps/100-frontend/content/106-web-security-knowledge/readme.md

@@ -1 +1,11 @@
-# Web security knowledge
+# Web Security Knowledge
+
+Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://en.wikipedia.org/wiki/OWASP'>Wikipedia - OWASP</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://github.com/0xRadi/OWASP-Web-Checklist'>OWASP Web Application Security Testing Checklist</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/'>OWASP Top 10 Security Risks</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html'>OWASP Cheatsheets</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP'>Content Security Policy (CSP)</BadgeLink>

content/roadmaps/100-frontend/content/107-package-managers/100-npm.md

@@ -1 +1,10 @@
-# Npm
+# npm
+
+npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/how-to-npm'>How to NPM</BadgeLink>

content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md

@@ -1 +1,8 @@
-# Yarn
+# Yarn
+
+Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/107-package-managers/readme.md

@@ -1 +1,13 @@
-# Package managers
+# Package Managers
+
+Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>
+
+

content/roadmaps/100-frontend/content/108-css-architecture/100-bem.md

@@ -1 +1,9 @@
-# Bem
+# BEM
+
+The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://en.bem.info/methodology/quick-start'>BEM Documentation</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://css-tricks.com/bem-101'>BEM 101</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.bem.info/tutorials/'>BEM Tutorials</BadgeLink>

content/roadmaps/100-frontend/content/108-css-architecture/101-oocss.md

@@ -1 +1,7 @@
-# Oocss
+# OOCSS
+
+As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://oocss.org/'>OOCSS Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/'>Introduction to Object Oriented CSS</BadgeLink>

content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md

@@ -1 +1,6 @@
-# Smacss
+# SMACSS
+
+SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>

content/roadmaps/100-frontend/content/108-css-architecture/readme.md

@@ -1 +1,10 @@
-# Css architecture
+# CSS Architecture
+
+CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.webfx.com/blog/web-design/css-methodologies/'>A Look at Some CSS Methodologies</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://oocss.org/'>OOCSS Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>
+

content/roadmaps/100-frontend/content/109-css-preprocessors/100-sass.md

@@ -1 +1,8 @@
-# Sass
+# Sass
+
+Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://sass-lang.com/'>Sass Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://sass-lang.com/documentation'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=_a5j7KoflTs'> Sass Tutorial for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/109-css-preprocessors/101-postcss.md

@@ -1 +1,6 @@
-# Postcss
+# PostCSS
+
+PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://postcss.org/'>Official Website</BadgeLink>

content/roadmaps/100-frontend/content/109-css-preprocessors/102-less.md

@@ -1 +1,8 @@
-# Less
+# Less
+
+Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://lesscss.org/usage/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YD91G8DdUsw'> Less CSS Pre-Processor Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md

@@ -1 +1,7 @@
-# Css preprocessors
+# CSS Preprocessors
+
+CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS%20Preprocessors%20compile%20the%20code,preprocessor%20were%20not%20in%20place.'>CSS Preprocessors Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/'>Why Use Preprocessors?</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md

@@ -1 +1,8 @@
-# Npm scripts
+# npm Scripts
+
+npm scripts are the entries in the scripts field of the package.json file. The scripts field holds an object where you can specify various commands and scripts that you want to expose.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.geeksforgeeks.org/introduction-to-npm-scripts/'>Introduction to npm scripts</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hHt3oVk3XVk'>Codevolution: npm scripts</BadgeLink>
+

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md

@@ -1 +1,8 @@
-# Webpack
+# Webpack
+
+Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://webpack.js.org/'>Webpack Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://webpack.js.org/concepts/'>Webpack Documentation</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md

@@ -1 +1,7 @@
-# Esbuild
+# esbuild
+
+Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://esbuild.github.io/'>Esbuild Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://esbuild.github.io/api/'>Esbuild Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=9XS_RA6zyyU'>Why are People Obsessed with esbuild?</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/102-rollup.md

@@ -1 +1,8 @@
-# Rollup
+# Rollup
+
+Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://rollupjs.org/'>Official Website and Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=ICYLOZuFMz8'>How to Set Up JavaScript Bundling Using Rollup</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/103-parcel.md

@@ -1 +1,8 @@
-# Parcel
+# Parcel
+
+Parcel is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://parceljs.org/plugin-system/bundler/'>Official Website and Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hCxvp3_o0gM'>Using Parcel Bundler with React</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/104-vite.md

@@ -1 +1,8 @@
-# Vite
+# Vite
+
+Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitejs.dev'>Vite Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://youtu.be/LQQ3CR2JTX8'>Vite Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/100-prettier.md

@@ -1 +1,6 @@
-# Prettier
+# Prettier
+
+Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://prettier.io'>Prettier Website</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md

@@ -1 +1,8 @@
-# Eslint
+# ESLint
+
+With ESLint you can impose the coding standard using a certain set of standalone rules.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://eslint.org/'>ESLint Official Website</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d'>Introduction to ESLint</BadgeLink>
+<BadgeLink badgeText='Watch' colorScheme="red" href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md

@@ -1 +1,9 @@
-# Standardjs
+# StandardJS
+
+Standardjs is a Style guide, with linter & automatic code fixer. It is a way to enforce consistent style in your project. It automatically formats code.
+Standard JS is a tool in the Code Review category of a tech stack.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bqho-uAnNJk'>Standard JS Tutorial with React, Prettier
+</BadgeLink>

content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md

@@ -1 +1,5 @@
-# Linters formatters
+# Linters formatters
+
+A linter is a tool used to analyze code and discover bugs, syntax errors, stylistic inconsistencies, and suspicious constructs. Popular linters for JavaScript include ESLint, JSLint, and JSHint.
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/'>What Is a Linter?</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/100-redux.md

@@ -1 +1,9 @@
-# Redux
+# Redux
+
+Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://redux.js.org/tutorials/essentials/part-1-overview-concepts'>Official Tutorial to Learn Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867'>Fundamentals of Redux Course from Dan Abramov</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/101-mobx.md

@@ -1 +1,8 @@
-# Mobx
+# MobX
+
+MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mobx.js.org/'>MobX Official Website</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WQQq1QbYlAw'>Intro to MobX Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/102-recoil.md

@@ -1 +1,9 @@
-# Recoil
+# Recoil
+
+Recoil is a new state management library built by the Facebook team that simplifies global state management.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://recoiljs.org/'>Recoil Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://recoiljs.org/docs/introduction/getting-started'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=BchtCWxs7sA'>Learn the basics of Recoil.js</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md

@@ -7,4 +7,5 @@ React is the most popular front-end JavaScript library for building user interfa
 <BadgeLink colorScheme='blue' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md

@@ -1 +1,10 @@
-# Rxjs
+# RxJS
+
+RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/overview'>RxJS Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://angular.io/guide/rx-library'>RxJS Angular Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>RxJS Quick Start</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=PhggNGsSQyg'>RxJS Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md

@@ -1 +1,9 @@
-# Ngrx
+# NgRx
+
+NgRx is an open source library that provides reactive state management for your Angular applications
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>Angular NgRx Redux Quick Start Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md

@@ -1 +1,6 @@
-# Angular
+# Angular
+
+Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/100-vuex.md

@@ -1 +1,7 @@
-# Vuex
+# Vuex
+
+Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://vuex.vuejs.org/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=5lVQgZzLMHc'>Vuex Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md

@@ -1 +1,9 @@
-# Vue js
+# Vue.js
+
+Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>

content/roadmaps/100-frontend/content/111-pick-a-framework/readme.md

@@ -1 +1,7 @@
-# Pick a framework
+# Pick a Framework
+
+Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D_MO9vIRBcA'>What is the difference between a framework and a library?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=cuHDQhDhvPE'> Which JS Framework is best?</BadgeLink>

content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md

@@ -1 +1,9 @@
-# Styled components
+# Styled components
+
+Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>

content/roadmaps/100-frontend/content/112-modern-css/101-css-modules.md

@@ -1 +1,9 @@
-# Css modules
+# CSS Modules
+
+CSS files in which all class names and animation names are scoped locally by default.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://github.com/css-modules/css-modules'>Project GitHub Repository</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87'>Using CSS Modules In React App</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pKMWU9OrA2s'>CSS Modules: Why are they great?</BadgeLink>
+

content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md

@@ -1 +1,8 @@
-# Styled jsx
+# Styled JSX
+
+Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://github.com/vercel/styled-jsx'>Getting started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SM5uVbfgfdo'>Styled JSX in Next.js: Master Next.js</BadgeLink>

content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md

@@ -1 +1,8 @@
-# Emotion
+# Emotion
+
+Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md

@@ -1 +1,8 @@
-# Bootstrap
+# Bootstrap
+
+Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://getbootstrap.com'>Bootstrap Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://getbootstrap.com/docs/5.2/getting-started/introduction/'>Bootstrap Official Documentation</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=-qfEOE4vtxE'>Bootstrap CSS Framework - Full Course for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md

@@ -1 +1,9 @@
-# Bulma
+# Bulma
+
+Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a'>Bulma CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/bulma'>Learn Bulma CSS</BadgeLink>
+<BadgeLink badgeText='Read' href='https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b'>How To Build A ? Responsive Blog Design With Bulma CSS</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md

@@ -1 +1,11 @@
-# Chakra ui
+# Chakra UI
+
+Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md

@@ -1 +1,8 @@
-# Material ui
+# Material UI
+
+Material-UI is an open-source framework that features React components that implement Google’s Material Design.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md

@@ -1 +1,7 @@
-# Radix ui
+# Radix UI
+
+An open-source UI component library for building high-quality, accessible design systems and web apps.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.radix-ui.com/docs/primitives/overview/introduction'>Official Documentation</BadgeLink>

content/roadmaps/100-frontend/content/114-css-frameworks/readme.md

@@ -1 +1,7 @@
-# Css frameworks
+# CSS frameworks
+
+A CSS framework provides the user with a fully functional CSS stylesheet, allowing them to create a web page by simply coding the HTML with appropriate classes, structure, and IDs. Classes for popular website features like as the footer, slider, navigation bar, hamburger menu, column-based layouts, and so on are already included in the framework.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://en.wikipedia.org/wiki/CSS_framework'>CSS Frameworks Introduction</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Benefits' href='https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/'>What are the benefits of using a css framework</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md

@@ -1 +1,6 @@
-# Jest
+# Jest
+Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
+It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jestjs.io/'>Jest Website</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md

@@ -1 +1,6 @@
-# React testing library
+# React Testing Library
+
+The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/' />

content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md

@@ -1 +1,8 @@
-# Cypress
+# Cypress
+
+Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/103-enzyme.md

@@ -1 +1,6 @@
-# Enzyme
+# Enzyme
+
+Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://enzymejs.github.io/enzyme/'>Enzyme Website</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md

@@ -0,0 +1,7 @@
+# Mocha
+
+Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mochajs.org/'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=Bs68k6xfR3E'>Testing Node.js with Mocha</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md

@@ -0,0 +1,8 @@
+# Chai
+
+Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.chaijs.com/'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.chaijs.com/guide/'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=MLTRHc5dk6s'>Intro To JavaScript Unit Testing With Mocha JS & Chai</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md

@@ -0,0 +1,8 @@
+# Ava
+
+Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/avajs/ava'>Official Repository</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/'>Testing your Node.js applications with Ava.js</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=RxLW6-3dk5A'>AVA Tutorial</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md

@@ -0,0 +1,9 @@
+# Jasmine
+
+Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://jasmine.github.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://jasmine.github.io/pages/docs_home.html'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/jasmine/jasmine'>Official Repository</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=rw4KlxKEENQ'>Javascript Unit Testing with Jasmine</BadgeLink>

content/roadmaps/100-frontend/content/115-testing-your-apps/readme.md

@@ -1 +1,7 @@
-# Testing your apps
+# Testing your apps
+Before delivering your application to users, you need to be sure that your app meets the requirements it was designed for, and that it doesn't do any weird, unintended things (called 'bugs'). To accomplish this, we 'test' our applications in different ways.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.softwaretestingmaterial.com/software-testing/'>A comprehensive dive into software testing.</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.atlassian.com/continuous-delivery/software-testing/types-of-software-testing'>The different types of software tests</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://jestjs.io/docs/tutorial-react'>Testing React apps with Jest</BadgeLink>

content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md

@@ -1 +1,10 @@
-# Typescript
+# TypeScript
+
+TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.typescriptlang.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.typescriptlang.org/docs/'>Official Docs for Deep Dives</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Handbook' href='https://www.typescriptlang.org/docs/handbook/intro.html'>The TypeScript Handbook</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/typescript/index.htm'>TypeScript Tutorial</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md

@@ -1 +1,8 @@
-# Flow
+# Flow
+
+Flow is a static type checker, designed to find type errors in JavaScript programs.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://flow.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://flow.org/en/docs/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=0HlqX4lQZas'>Flow for Beginners</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md

@@ -1 +1,11 @@
-# Performance
+# Performance
+
+Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Tools like Lighthouse and Devtools highlight performance metrics and help improve performance of PWAs.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/fast/'> Fast load times: Techniques for improving site performance.</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.patterns.dev/posts/prpl/'>PRPL pattern</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/apply-instant-loading-with-prpl/'>Apply instant loading with PRPL</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool'>Lighthouse PWA Analysis Tool</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>

content/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md

@@ -1 +1,9 @@
-# Progressive web apps
+# Progressive Web Apps
+
+Progressive Web Apps (PWAs) are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-are-progressive-web-apps/'>Progressive Web Apps for Beginners</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://web.dev/learn/pwa/'>Learn PWA</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/'>MDN Web Docs: Progressive Web Apps </BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=sFsRylCQblw'>Build a Progressive Web App</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md

@@ -1 +1,12 @@
-# Next js
+# Next.js
+
+Next.js is an open-source development framework built on top of Node.js
+enabling React based web applications functionalities such as server-side
+rendering and generating static websites.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md

@@ -1 +1,7 @@
-# After js
+# After.js
+
+After.js is an open-source JavaScript framework for developing SSR (Server Side Rendering) based applications. It is similar to the Next.js framework for server-rendered React apps but uses React Router instead of a folder structure based router like Next.js
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='GitHub' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documetation</BadgeLink>