Adding content to 101-typescript-types

* Add typescript roadmap

* Add typescript content

* Add typescript roadmap

readme.md

@@ -38,6 +38,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
+- [TypeScript Roadmap](https://roadmap.sh/typescript)
 - [React Roadmap](https://roadmap.sh/react)
 - [Vue Roadmap](https://roadmap.sh/vue)
 - [Angular Roadmap](https://roadmap.sh/angular)
@@ -53,6 +54,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [DBA Roadmap](https://roadmap.sh/postgresql-dba)
 - [Blockchain Roadmap](https://roadmap.sh/blockchain)
 - [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)
+- [System Design Roadmap](https://roadmap.sh/system-design)
 
 ![](https://i.imgur.com/waxVImv.png)
 

sitemap.mjs

@@ -5,6 +5,10 @@ async function getRoadmapIds() {
   return fs.readdir(path.join(process.cwd(), 'src/roadmaps'));
 }
 
+async function getBestPracticesIds() {
+  return fs.readdir(path.join(process.cwd(), 'src/best-practices'));
+}
+
 export function shouldIndexPage(page) {
   return ![
     'https://roadmap.sh/404',
@@ -19,9 +23,11 @@ export async function serializeSitemap(item) {
     'https://roadmap.sh',
     'https://roadmap.sh/about',
     'https://roadmap.sh/roadmaps',
+    'https://roadmap.sh/best-practices',
     'https://roadmap.sh/guides',
     'https://roadmap.sh/videos',
     ...(await getRoadmapIds()).flatMap((id) => [`https://roadmap.sh/${id}`, `https://roadmap.sh/${id}/topics`]),
+    ...(await getBestPracticesIds()).map((id) => `https://roadmap.sh/best-practices/${id}`),
   ];
 
   // Roadmaps and other high priority pages

src/best-practices/frontend-performance/content/analyse-stylesheets-complexity.md

@@ -1 +1,12 @@
-# Analyse stylesheets complexity
+# Stylesheet Complexity
+
+> Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
+
+Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster).
+
+Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.
+
+- [TestMyCSS | Optimize and Check CSS Performance](http://www.testmycss.com/)
+- [CSS Stats](https://cssstats.com/)
+- [macbre/analyze-css: CSS selectors complexity and performance analyzer](https://github.com/macbre/analyze-css)
+- [Project Wallace](https://www.projectwallace.com/) is like CSS Stats but stores stats over time so you can track your changes

src/best-practices/frontend-performance/content/analyze-js-for-perf-issues.md

@@ -1 +1,13 @@
-# Analyze js for perf issues
+# JavaScript Performance
+
+> Check for performance problems in your JavaScript files (and CSS too)
+
+JavaScript complexity can slow down runtime performance. Identifying these possible issues are essential to offer the smoothest user experience.
+
+Use the Timeline tool in the Chrome Developer Tool to evaluate scripts events and found the one that may take too much time.
+
+- [Speed Up JavaScript Execution | Tools for Web Developers](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution)
+- [JavaScript Profiling With The Chrome Developer Tools](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+- [How to Record Heap Snapshots | Tools for Web Developers](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)
+- [Chapter 22 - Profiling the Frontend - Blackfire](https://blackfire.io/docs/book/22-frontend-profiling)
+- [30 Tips To Improve Javascript Performance](http://www.monitis.com/blog/30-tips-to-improve-javascript-performance/)

src/best-practices/frontend-performance/content/avoid-404-files.md

@@ -1 +1,7 @@
-# Avoid 404 files
+# Serve Reachable Files
+
+> Avoid requesting unreachable files (404)
+
+404 request can slow down the performance of your website and negatively impact the user experience. Additionally, they can also cause search engines to crawl and index non-existent pages, which can negatively impact your search engine rankings. To avoid 404 requests, ensure that all links on your website are valid and that any broken links are fixed promptly.
+
+- [How to avoid Bad Requests?](https://varvy.com/pagespeed/avoid-bad-requests.html)

src/best-practices/frontend-performance/content/avoid-base64-images.md

@@ -1 +1,20 @@
-# Avoid base64 images
+# Avoid Base64 Images
+
+> You could eventually convert tiny images to base64 but it's actually not the best practice.
+
+Using Base64 encoded images in your frontend can have several drawbacks.
+
+First, Base64 encoded images are larger in size than their binary counterparts, which can slow down the loading time of your website.
+
+Second, because Base64 encoded images are embedded directly in the HTML or CSS, they are included in the initial page load, which can cause delays for users with slower internet connections.
+
+Third, Base64 encoded images do not benefit from browser caching, as they are part of the HTML or CSS and not a separate resource. So, every time the page is loaded, the images will be re-downloaded, even if the user has visited the page before.
+
+Fourth, Base64 encoded images are not compatible with some old browser versions.
+
+Instead of using Base64 encoded images, it is generally recommended to use binary image files and reference them using an img tag in HTML, with a standard src attribute. This allows the browser to cache the image and use it for subsequent page loads, resulting in faster loading times and better user experience.
+
+- [Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts](https://csswizardry.com/2017/02/base64-encoding-and-performance/)
+- [A closer look at Base64 image performance – The Page Not Found Blog](http://www.andygup.net/a-closer-look-at-base64-image-performance/)
+- [When to base64 encode images (and when not to) | David Calhoun](https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/)
+- [Base64 encoding images for faster pages | Performance and seo factors](https://varvy.com/pagespeed/base64-images.html)

src/best-practices/frontend-performance/content/avoid-inline-css.md

@@ -1 +1,9 @@
-# Avoid inline css
+# Avoid Inline CSS
+
+> Avoid using embed or inline CSS inside your `<body>` (Not valid for HTTP/2)
+
+One of the first reason it's because it's a good practice to separate content from design. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decreases the file-size of your HTML pages and the load time.
+
+Always use external stylesheets or embed CSS in your `<head>` (and follow the others CSS performance rules)
+
+- [Observe CSS Best Practices: Avoid CSS Inline Styles](https://www.lifewire.com/avoid-inline-styles-for-css-3466846)

src/best-practices/frontend-performance/content/avoid-multiple-inline-js-snippets.md

@@ -1 +1,9 @@
-# Avoid multiple inline js snippets
+# Avoid Inline JavaScript
+
+> Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the `<head>` or at the end of your page (before `</body>`).
+
+Placing JavaScript embedded code directly in your `<body>` can slow down your page because it loads while the DOM is being built. The best option is to use external files with async or defer to avoid blocking the DOM. Another option is to place some scripts inside your `<head>`. Most of the time analytics code or small script that need to load before the DOM gets to main processing.
+
+Ensure that all your files are loaded using `async` or `defer` and decide wisely the code that you will need to inject in your `<head>`.
+
+- [11 Tips to Optimize JavaScript and Improve Website Loading Speeds](https://www.upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/)

src/best-practices/frontend-performance/content/bundlephobia.md

@@ -1 +1,5 @@
-# Bundlephobia
+# Bundlephobia
+
+Bundlephobia is a website and npm package that allows developers to search for the size of any JavaScript package before adding it to their project. It provides information on the size of the package, as well as the size of its dependencies, to help developers make informed decisions about which packages to use and how they may impact the overall size of their application. Bundlephobia also offers badges which can be added to your GitHub README.md file to show the size of your package.
+
+- [Official Website - Bundlephobia](https://bundlephobia.com/)

src/best-practices/frontend-performance/content/check-dependency-size.md

@@ -1 +1,12 @@
-# Check dependency size
+# Check Dependency Size
+
+> Ensure to use wisely external libraries, most of the time, you can use a lighter library for a same functionality.
+
+You may be tempted to use one of the 745 000 packages you can find on npm, but you need to choose the best package for your needs. For example, MomentJS is an awesome library but with a lot of methods you may never use, that's why Day.js was created. It's just 2kB vs 16.4kB gz for Moment.
+
+Always compare and choose the best and lighter library for your needs. You can also use tools like [npm trends](http://www.npmtrends.com/) to compare NPM package downloads counts or [Bundlephobia](https://bundlephobia.com/) to know the size of your dependencies.
+
+- [ai/size-limit: Prevent JS libraries bloat](https://github.com/ai/size-limit)
+- [webpack-bundle-analyzer - npm](https://www.npmjs.com/package/webpack-bundle-analyzer)
+- [js-dependency-viewer - npm](https://www.npmjs.com/package/js-dependency-viewer)
+- [Size Limit: Make the Web lighter](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)

src/best-practices/frontend-performance/content/choose-image-format-approprietly.md

@@ -1 +1,12 @@
-# Choose image format approprietly
+# Image Format
+
+> Choose your image format appropriately
+
+To ensure that your images don't slow your website, choose the format that will correspond to your image. If it's a photo, JPEG is most of the time more appropriate than PNG or GIF. But don't forget to look a the nex-gen formats which can reduce the size of your files. Each image format has pros and cons, it's important to know these to make the best choice possible.
+
+Use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to identify which images can eventually use next-gen formats (like JPEG 2000m JPEG XR or WebP). Compare different formats, sometimes using PNG8 is better than PNG16, sometimes it's not.
+
+- [Serve Images in Next-Gen Formats](https://developers.google.com/web/tools/lighthouse/audits/webp)
+- [What Is the Right Image Format for Your Website?](https://www.sitepoint.com/what-is-the-right-image-format-for-your-website/)
+- [PNG8 - The Clear Winner](https://www.sitepoint.com/png8-the-clear-winner/)
+- [8-bit vs 16-bit - What Color Depth You Should Use And Why It Matters](https://www.diyphotography.net/8-bit-vs-16-bit-color-depth-use-matters/)

src/best-practices/frontend-performance/content/chrome-dev-tools.md

@@ -1 +1,15 @@
-# Chrome dev tools
+# Chrome DevTools
+
+Chrome DevTools is a set of web development tools built into the Google Chrome browser. It allows developers to inspect and debug the front-end of web applications.
+
+Some of the benefits of using Chrome DevTools include:
+
+- Inspecting and editing HTML and CSS in real-time, which can be useful for identifying and fixing layout issues
+- Debugging JavaScript code, including setting breakpoints, stepping through code, and examining the call stack
+- Profiling the performance of web pages, including identifying slow-running JavaScript code and analyzing network requests
+- Inspecting and debugging browser-side storage, including cookies, local storage, and indexedDB
+- Auditing web pages for performance, accessibility, and best practices
+
+Chrome DevTools are a powerful and essential tool for web developers, as it helps to improve debugging, testing, and optimization of the web application.
+
+- [Chrome DevTools Docs](https://developer.chrome.com/docs/devtools/)

src/best-practices/frontend-performance/content/compress-your-images.md

@@ -1 +1,19 @@
-# Compress your images
+# Images Optimization
+
+> Your images are optimized, compressed without direct impact to the end user.
+
+Optimized images load faster in your browser and consume less data.
+
+- Try using CSS3 effects when it's possible (instead of a small image
+- When it's possible, use fonts instead of text encoded in your images
+- Use SVG
+- Use a tool and specify a level compression under 85.
+
+- [Image Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
+- [Essential Image Optimization](https://images.guide/)
+- [TinyJPG – Compress JPEG images intelligently](https://tinyjpg.com/)
+- [Kraken.io - Online Image Optimizer](https://kraken.io/web-interface)
+- [Compressor.io](https://compressor.io/compress)
+- [Cloudinary - Image Analysis Tool](https://webspeedtest.cloudinary.com)
+- [ImageEngine - Image Webpage Loading Test](https://demo.imgeng.in)
+- [SVGOMG - Optimize SVG vector graphics files](https://jakearchibald.github.io/svgomg/)

src/best-practices/frontend-performance/content/concatenate-css-single-file.md

@@ -1 +1,11 @@
-# Concatenate css single file
+# CSS Concatenation
+
+> CSS files are concatenated in a single file (Not always valid for HTTP/2)
+
+If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).
+
+- Use online tool or any plugin before or during your build or your deployment to concatenate your files.
+- Ensure, of course, that concatenation does not break your project
+
+- [HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)](https://hpbn.co/optimizing-application-delivery/#optimizing-for-http2)
+- [Performance Best Practices in the HTTP/2 Era](https://deliciousbrains.com/performance-best-practices-http2/)

src/best-practices/frontend-performance/content/cookie-size-less-4096-bytes.md

@@ -1 +1,11 @@
-# Cookie size less 4096 bytes
+# Cookie Size
+
+> If you are using cookies, be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.
+
+Cookies are exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
+
+- [Cookie specification: RFC 6265](https://tools.ietf.org/html/rfc6265)
+- [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
+- [Browser Cookie Limits](http://browsercookielimits.squawky.net/)
+- [Website Performance: Cookies Don't Taste So Good - Monitis Blog](http://www.monitis.com/blog/website-performance-cookies-dont-taste-so-good/)
+- [Google's Web Performance Best Practices #3: Minimize Request Overhead - GlobalDots Blog](https://www.globaldots.com/googles-web-performance-best-practices-3-minimize-request-overhead/)

src/best-practices/frontend-performance/content/enable-compression.md

@@ -1 +1,7 @@
-# Enable compression
+# Enable Compression
+
+Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.
+
+- [Check GZIP compression](https://checkgzipcompression.com/)
+- [Check Brotli Compression](https://tools.keycdn.com/brotli-test)
+- [Can I use... Brotli](https://caniuse.com/#feat=brotli)

src/best-practices/frontend-performance/content/framework-guides.md

@@ -1 +1,18 @@
-# Framework guides
+# Framework Guides
+
+These guides are intended to help you optimize your application for performance when using a specific framework.
+
+## Angular
+
+- [Angular Performance Checklist](https://github.com/mgechev/angular-performance-checklist)
+
+## React
+
+- [Optimizing Performance - React](https://reactjs.org/docs/optimizing-performance.html)
+- [React image manipulation | Cloudinary](https://cloudinary.com/documentation/react_image_manipulation)
+- [Debugging React performance with React 16 and Chrome Devtools.](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad)
+- [Build Performant - React](https://web.dev/react/)
+
+## Vue
+
+- [Vue - Useful Links|Style Guide and Performance](https://learn-vuejs.github.io/vue-patterns/useful-links/)

src/best-practices/frontend-performance/content/inline-critical-css.md

@@ -1 +1,13 @@
-# Inline critical css
+# Inline Critical CSS
+
+> The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between `<style></style>` in a single line (minified if possible).
+
+Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.
+
+Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.
+
+- [Understanding Critical CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/)
+- [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this.
+- [Inlining critical CSS for better web performance | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/)
+- [Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity](https://www.sitelocity.com/critical-path-css-generator)
+- [Reduce the size of the above-the-fold content](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)

src/best-practices/frontend-performance/content/keep-cookie-count-below-20.md

@@ -1 +1,11 @@
-# Keep cookie count below 20
+# Cookie Size
+
+> If you are using cookies, be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.
+
+Cookies are exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
+
+- [Cookie specification: RFC 6265](https://tools.ietf.org/html/rfc6265)
+- [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
+- [Browser Cookie Limits](http://browsercookielimits.squawky.net/)
+- [Website Performance: Cookies Don't Taste So Good - Monitis Blog](http://www.monitis.com/blog/website-performance-cookies-dont-taste-so-good/)
+- [Google's Web Performance Best Practices #3: Minimize Request Overhead - GlobalDots Blog](https://www.globaldots.com/googles-web-performance-best-practices-3-minimize-request-overhead/)

src/best-practices/frontend-performance/content/keep-dependencies-up-to-date.md

@@ -1 +1,10 @@
-# Keep dependencies up to date
+# Dependency Updates
+
+> All JavaScript libraries used in your project are necessary (prefer Vanilla JavaScript for simple functionalities), updated to their latest version and don't overwhelm your JavaScript with unnecessary methods.
+
+Most of the time, new versions come with optimization and security fix. You should use the most optimized code to speed up your project and ensure that you'll not slow down your website or app without outdated plugin.
+
+If your project use NPM packages, [npm-check](https://www.npmjs.com/package/npm-check) is a pretty interesting library to upgrade / update your libraries. [Greenkeeper](https://greenkeeper.io/) can automatically look for your dependencies and suggest an update every time a new version is out.
+
+
+- [Vanilla JavaScript for building powerful web applications](https://plainjs.com/)

src/best-practices/frontend-performance/content/keep-ttfb-less-1-3s.md

@@ -1 +1,8 @@
-# Keep ttfb less 1 3s
+# Keep TTFB < 1.3s
+
+Reduce as much as you can the time your browser waits before receiving data.
+
+- [What is Waiting (TTFB) in DevTools, and what to do about it](https://scaleyourcode.com/blog/article/27)
+- [Monitoring your servers with free tools is easy](https://scaleyourcode.com/blog/article/7)
+- [Time to First Byte (TTFB)](https://varvy.com/pagespeed/ttfb.html)
+- [Global latency testing tool](https://latency.apex.sh)

src/best-practices/frontend-performance/content/keep-web-font-under-300k.md

@@ -1 +1,7 @@
-# Keep web font under 300k
+# Keep Web Font Size Under 300kb
+
+Web fonts are a great way to add style to your website. However, they can also be a major performance bottleneck. The more fonts you use, the more time it takes for the browser to download and render the page. This can lead to a poor user experience and a high bounce rate.
+
+Webfont sizes shouldn't exceed 300kb (all variants included) and are optimized for performance.
+
+- [Font Bytes - Page Weight](https://httparchive.org/reports/page-weight#bytesFont)

src/best-practices/frontend-performance/content/lighthouse.md

@@ -1 +1,11 @@
-# Lighthouse
+# Lighthouse
+
+Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement.
+
+Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links.
+
+Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools.
+
+Visit the following resources to learn more:
+
+- [Lighthouse - Google Developers](https://developers.google.com/web/tools/lighthouse)

src/best-practices/frontend-performance/content/load-offscreen-images-lazily.md

@@ -1 +1,15 @@
-# Load offscreen images lazily
+# Lazy Loading
+
+> Offscreen images are loaded lazily (A noscript fallback is always provided).
+
+It will improve the response time of the current page and then avoid loading unnecessary images that the user may not need.
+
+- Use Lighthouse to identify how many images are offscreen.
+- Use a JavaScript plugin like the following to lazyload your images. Make sure you target offscreen images only.
+- Also make sure to lazyload alternative images shown at mouseover or upon other user actions.
+
+- [verlok/lazyload: GitHub](https://github.com/verlok/lazyload)
+- [aFarkas/lazysizes: GitHub](https://github.com/aFarkas/lazysizes/)
+- [mfranzke/loading-attribute-polyfill: GitHub](https://github.com/mfranzke/loading-attribute-polyfill/)
+- [Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)
+- [5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog](http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/)

src/best-practices/frontend-performance/content/make-css-files-non-blocking.md

@@ -1 +1,12 @@
-# Make css files non blocking
+# Non-Blocking CSS
+
+> CSS files need to be non-blocking to prevent the DOM from taking time to load.
+
+CSS files can block the page load and delay the rendering of your page. Using `preload` can actually load the CSS files before the browser starts showing the content of the page.
+
+You need to add the `rel` attribute with the preload value and add `as="style"` on the `<link>` element.
+
+- [loadCSS by filament group](https://github.com/filamentgroup/loadCSS)
+- [Example of preload CSS using loadCSS](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf)
+- [Preloading content with rel="preload"](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
+- [Preload: What Is It Good For? — Smashing Magazine](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)

src/best-practices/frontend-performance/content/minify-css.md

@@ -1 +1,12 @@
-# Minify css
+# Minify CSS
+
+> All CSS files are minified, comments, white spaces and new lines are removed from production files.
+
+When CSS files are minified, the content is loaded faster and less data is sent to the client. It's important to always minify CSS files in production. It is beneficial for the user as it is for any business who wants to lower bandwidth costs and lower resource usage.
+
+Use tools to minify your files automatically before or during your build or your deployment.
+
+- [cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano](https://cssnano.co/)
+- [CSS Minfier](https://goonlinetools.com/css-minifier/)
+- [@neutrinojs/style-minify - npm](https://www.npmjs.com/package/@neutrinojs/style-minify)
+- [Online CSS Compressor](http://refresh-sf.com)

src/best-practices/frontend-performance/content/minify-html.md

@@ -1 +1,10 @@
-# Minify html
+# Minify HTML
+> The HTML code is minified, comments, white spaces and new lines are removed from production files.
+
+Removing all unnecessary spaces, comments and attributes will reduce the size of your HTML and speed up your site's page load times and obviously lighten the download for your user.
+
+Most of the frameworks have plugins to facilitate the minification of the webpages. You can use a bunch of NPM modules that can do the job for you automatically.
+
+- [HTML minifier | Minify Code](http://minifycode.com/html-minifier/)
+- [Online HTML Compressor](http://refresh-sf.com)
+- [Experimenting with HTML minifier — Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype)

src/best-practices/frontend-performance/content/minify-your-javascript.md

@@ -1 +1,12 @@
-# Minify your javascript
+# Minify JavaScript
+
+> All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/2).
+
+Removing all unnecessary spaces, comments and break will reduce the size of your JavaScript files and speed up your site's page load times and obviously lighten the download for your user.
+
+Use the tools suggested below to minify your files automatically before or during your build or your deployment.
+
+- [terser - JavaScript parser, mangler and compressor toolkit for ES6+](https://github.com/terser/terser)
+- [uglify-js - npm](https://www.npmjs.com/package/uglify-js)
+- [Online JavaScript Compressor](http://refresh-sf.com)
+- [Short read: How is HTTP/2 different? Should we still minify and concatenate?](https://scaleyourcode.com/blog/article/28)

src/best-practices/frontend-performance/content/minimize-http-requests.md

@@ -1 +1,6 @@
-# Minimize http requests
+# Minimize HTTP Requests
+
+> Always ensure that every file requested are essential for your website or application.
+
+- [Combine external CSS](https://varvy.com/pagespeed/combine-external-css.html)
+- [Combine external JavaScript](https://varvy.com/pagespeed/combine-external-javascript.html)

src/best-practices/frontend-performance/content/page-load-time-below-3s.md

@@ -1 +1,10 @@
-# Page load time below 3s
+# Page Load Time
+> Reduce as much as possible your page load times to quickly deliver your content to your users.
+
+Faster your website or app is, less you have probability of bounce increases, in other terms you have less chances to lose your user or future client. Enough researches on the subject prove that point.
+
+Use online tools like [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/) or [WebPageTest](https://www.webpagetest.org/) to analyze what could be slowing you down and use the Front-End Performance Checklist to improve your load times.
+
+- [Compare your mobile site speed](https://www.thinkwithgoogle.com/feature/mobile/)
+- [Test Your Mobile Website Speed and Performance - Think With Google](https://testmysite.thinkwithgoogle.com/intl/en-us)
+- [Average Page Load Times for 2018 - How does yours compare? - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/)

src/best-practices/frontend-performance/content/page-speed-insights.md

@@ -1 +1,5 @@
-# Page speed insights
+# Page Speed Insights
+
+Page Speed Insights is a free tool from Google that analyzes the performance of a web page and provides suggestions for improvements. 
+
+- [Page Speed Insights](https://pagespeed.web.dev/)

src/best-practices/frontend-performance/content/page-weight-below-1500.md

@@ -1 +1,11 @@
-# Page weight below 1500
+# Page weight below 1500
+
+> Reduce the size of your page + resources as much as you can.
+
+Ideally you should try to target < 500 KB but the state of web shows that the median of Kilobytes is around 1500 KB (even on mobile). Depending on your target users, network connection, devices, it's important to reduce as much as possible your total Kilobytes to have the best user experience possible.
+
+All the listed best practices in this list will help you to reduce as much as possible your resources and your code.
+
+- [Page Weight](https://httparchive.org/reports/page-weight#bytesTotal)
+- [What Does My Site Cost?](https://whatdoesmysitecost.com/)
+- [web - Measure full page size in Chrome DevTools - Stack Overflow](https://stackoverflow.com/questions/38239980/measure-full-page-size-in-chrome-devtools)

src/best-practices/frontend-performance/content/pre-load-urls-where-possible.md

@@ -1 +1,9 @@
-# Pre load urls where possible
+# Preload URLs
+
+> Popular browsers can use directive on `<link>` tag and `"rel"` attribute with certain keywords to pre-load specific URLs
+
+Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served.
+
+- [What Is Prefetching and Why Use It](https://www.keycdn.com/support/prefetching)
+- [Prefetching, preloading, prebrowsing](https://css-tricks.com/prefetching-preloading-prebrowsing/)
+- [What is Preload, Prefetch, and Preconnect](https://www.keycdn.com/blog/resource-hints)

src/best-practices/frontend-performance/content/prefer-vector-images.md

@@ -1 +1,5 @@
-# Prefer vector images
+# Prefer Vector Images
+
+> Prefer using vector image rather than bitmap images (when possible).
+
+Vector images (SVG) tend to be smaller than images and SVG's are responsive and scale perfectly. These images can be animated and modified by CSS.

src/best-practices/frontend-performance/content/prevent-flash-text.md

@@ -1 +1,6 @@
-# Prevent flash text
+# Prevent Flash Text
+
+> Avoid transparent text until the Webfont is loaded
+
+- [`font-display` for the Masses](https://css-tricks.com/font-display-masses/)
+- [CSS font-display: The Future of Font Rendering on the Web](https://www.sitepoint.com/css-font-display-future-font-rendering-web/)

src/best-practices/frontend-performance/content/recommended-guides.md

@@ -1 +1,90 @@
-# Recommended guides
+# Recommended Guides
+
+> Optimize the critical rendering path:
+
+* [Critical CSS? Not So Fast!](https://csswizardry.com/2022/09/critical-css-not-so-fast/)
+* [Priority Hints - What Your Browser Doesn’t Know (Yet)](https://www.etsy.com/codeascraft/priority-hints-what-your-browser-doesnt-know-yet)
+* [Optimizing resource loading with Priority Hints](https://web.dev/priority-hints/)
+* [Chrome Resource Priorities and Scheduling](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit?usp=sharing)
+* [How To Optimize CSS for Peak Site Performance](https://kinsta.com/blog/optimize-css/)
+* [Eliminate render blocking CSS to improve start render time](https://www.jeffreyknox.dev/blog/eliminate-render-blocking-css-to-improve-start-render-time/)
+* [Small Bundles, Fast Pages: What To Do With Too Much JavaScript](https://calibreapp.com/blog/bundle-size-optimization)
+* [How to Eliminate Render-Blocking Resources: a Deep Dive](https://sia.codes/posts/render-blocking-resources/)
+* [The Critical Request: How to Prioritise Requests to Improve Speed](https://calibreapp.com/blog/critical-request)
+* [How to Improve CSS Performance](https://calibreapp.com/blog/css-performance)
+* [The Simplest Way to Load CSS Asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/)
+* [CSS audit](https://css-tricks.com/a-quick-css-audit-and-general-notes-about-design-systems/)
+* [Measuring the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp)
+* [Inlining or Caching? Both Please!](https://www.filamentgroup.com/lab/inlining-cache.html)
+* [CSS and Network Performance](https://csswizardry.com/2018/11/css-and-network-performance/)
+* [Analyzing Critical Rendering Path Performance](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp)
+* [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist)
+* [The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)
+* [Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/)
+* [Optimising the front end for the browser](https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572)
+* [Prefer DEFER Over ASYNC](https://calendar.perfplanet.com/2016/prefer-defer-over-async/)
+* [A comprehensive guide to font loading strategies](https://www.zachleat.com/web/comprehensive-webfonts/)
+* [Understanding the critical rendering path, rendering pages in 1 second](https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a)
+* [More Weight Doesn’t Mean More Wait](https://www.filamentgroup.com/lab/weight-wait.html)
+
+> JavaScript Rendering Performance
+
+* [Five Data-Loading Patterns To Boost Web Performance](https://www.smashingmagazine.com/2022/09/data-loading-patterns-improve-frontend-performance/)
+* [Optimize long tasks](https://web.dev/optimize-long-tasks/)
+* [The impact of removing jQuery on our web performance](https://insidegovuk.blog.gov.uk/2022/08/15/the-impact-of-removing-jquery-on-our-web-performance/)
+* [Profiling & Optimizing the runtime performance with the DevTools Performance tab](iamtk.co/profiling-and-optimizing-the-runtime-performance-with-the-devtools-performance-tab)
+* [Don't fight the browser preload scanner](https://web.dev/preload-scanner/)
+* [The Web Performance impact of jQuery](https://twitter.com/TheRealNooshu/status/1509487050122276864)
+* [Have Single-Page Apps Ruined the Web? | Transitional Apps](https://www.youtube.com/watch?v=860d8usGC0o)
+* [Improve how you architect webapps](https://www.patterns.dev/)
+* [Nuxt SSR Optimizing Tips](https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/, Filip Rakowski
+* [GPU accelerated JavaScript](https://gpu.rocks/#/)
+* [Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp)
+* [Astro: Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.](https://docs.astro.build/getting-started/)
+* [Minimising Layout and Layout thrashing for 60 FPS](https://www.charistheo.io/blog/2021/09/dom-reflow-and-layout-thrashing/)
+* [Does shadow DOM improve style performance?](https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/)
+* [Debugging memory leaks - HTTP 203](https://www.youtube.com/watch?v=YDU_3WdfkxA)
+* [Explore JavaScript Dependencies With Lighthouse Treemap](https://sia.codes/posts/lighthouse-treemap/)
+* [The real cost of Javascript dependencies (and the state of JS package quality)](https://medium.com/voodoo-engineering/the-real-cost-of-javascript-dependencies-and-the-state-of-js-package-quality-a8dacd74c0ec)
+* [The State Of Web Workers In 2021](https://www.smashingmagazine.com/2021/06/web-workers-2021/)
+* [Techniques for developing high-performance animations](https://web.dev/animations/)
+* [Building a Faster Web Experience with the postTask Scheduler](https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91), Callie (Airbnb Engineering & Data Science)
+* [Don’t attach tooltips to document.body – Learn how the browser works – Debug forced reflow](https://atfzl.com/don-t-attach-tooltips-to-document-body)
+* [How to Create and Fix Memory Leaks With Chrome DevTools](https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658)
+* [JavaScript performance beyond bundle size](https://nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/)
+* [The Import On Interaction Pattern](https://addyosmani.com/blog/import-on-interaction/)
+* [The “Live DOM” Is Not “Slow”, “Bad”, Or “Wrong”. Web Developers Are.](https://levelup.gitconnected.com/the-live-dom-is-not-slow-bad-or-wrong-web-developers-are-2bf86c3b9e2e)
+* [Prevent layout shifts with CSS grid stacks](https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/)
+* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)
+* [Preact vs React - Updating React at Etsy](https://github.com/mq2thez/blog/blob/main/upgrade-react-etsy/preact-vs-react.md)
+* [The Cost of Javascript Frameworks](https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/)
+* [Fixing memory leaks in web applications](https://nolanlawson.com/2020/02/19/fixing-memory-leaks-in-web-applications/)
+* [How to load polyfills only when needed](https://3perf.com/blog/polyfills/)
+* [Responsible JavaScript: Part III - Third parties](https://alistapart.com/article/responsible-javascript-part-3/)
+* [The cost of JavaScript in 2019](https://v8.dev/blog/cost-of-javascript-2019)
+* [When should you be using Web Workers?](https://dassur.ma/things/when-workers/)
+* [Responsible Javascript: Part II - Code Bundle](https://alistapart.com/article/responsible-javascript-part-2/)
+* [Faster script loading with BinaryAST?](https://blog.cloudflare.com/binary-ast/)
+* [Svelte 3: Rethinking reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
+* [Responsible Javascript: Part I - Web platform over frameworks](https://alistapart.com/article/responsible-javascript-part-1/)
+* [JavaScript Loading Priorities in Chrome](https://addyosmani.com/blog/script-priorities/)
+* [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/)
+* [Browser painting and considerations for web performance](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/)
+* [The Cost Of JavaScript In 2018](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) ([Video](https://www.youtube.com/watch?v=i5R7giitymk))
+* [Examining Web Worker Performance](https://www.loxodrome.io/post/web-worker-performance/)
+* [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist)
+* [jankfree](http://jankfree.org/)
+* [What forces layout/reflow?](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)
+* [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)
+* [Optimize Javascript Execution](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution)
+* [Why Web Developers Need to Care about Interactivity](https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/)
+* [Improving Performance with the Paint Timing API](https://www.sitepen.com/blog/2017/10/06/improving-performance-with-the-paint-timing-api)
+* [Deploying ES2015+ Code in Production Today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)
+* [Performant Web Animations and Interactions: Achieving 60 FPS](https://blog.algolia.com/performant-web-animations/)
+* [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201)
+* [Performant Parallaxing](https://developers.google.com/web/updates/2016/12/performant-parallaxing)
+* [The Anatomy of a Frame](https://aerotwist.com/blog/the-anatomy-of-a-frame/)
+* [The future of loading CSS](https://jakearchibald.com/2016/link-in-body/)
+* [4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them](https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/)
+* [The cost of frameworks](https://aerotwist.com/blog/the-cost-of-frameworks/)
+* [FLIP Your Animations](https://aerotwist.com/blog/flip-your-animations/)

src/best-practices/frontend-performance/content/remove-unused-css.md

@@ -1 +1,10 @@
-# Remove unused css
+# Remove Unused CSS
+
+Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.
+
+Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.
+
+- [UnCSS Online](https://uncss-online.com/)
+- [PurifyCSS](https://github.com/purifycss/purifycss)
+- [PurgeCSS](https://github.com/FullHuman/purgecss)
+- [Chrome DevTools Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)

src/best-practices/frontend-performance/content/serve-exact-size-images.md

@@ -1 +1,10 @@
-# Serve exact size images
+# Responsive Images
+
+> Ensure to serve images that are close to your display size.
+
+Small devices don't need images bigger than their viewport. It's recommended to have multiple versions of one image on different sizes.
+
+- Create different image sizes for the devices you want to target
+- Use `srcset` and `picture` to deliver multiple variants of each image.
+
+- [Responsive images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

src/best-practices/frontend-performance/content/set-width-height-images.md

@@ -1 +1,5 @@
-# Set width height images
+# Image Dimensions
+
+> Set width and height attributes on `<img>` if the final rendered image size is known.
+
+If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

src/best-practices/frontend-performance/content/squoosh-ap.md

@@ -1 +1,5 @@
-# Squoosh ap
+# Squoosh.app
+
+Squoosh.app is a web app that allows you to compress images using a variety of codecs. It is built by Google Chrome team and is open source.
+
+- [Squoosh.app](https://squoosh.app/)

src/best-practices/frontend-performance/content/use-cdn.md

@@ -1 +1,6 @@
-# Use cdn
+# Use CDN
+
+Use a CDN to serve your static assets. This will reduce the load on your server and improve the performance of your site.
+
+ - [10 Tips to Optimize CDN Performance - CDN Planet](https://www.cdnplanet.com/blog/10-tips-optimize-cdn-performance/)
+ - [HTTP Caching  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)

src/best-practices/frontend-performance/content/use-http-cache-headers.md

@@ -1 +1,5 @@
-# Use http cache headers
+# HTTP Caching
+
+Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
+
+- [Using cache-control for browser caching](https://varvy.com/pagespeed/cache-control.html)

src/best-practices/frontend-performance/content/use-https-on-your-website.md

@@ -1 +1,9 @@
-# Use https on your website
+# Use HTTPs
+
+HTTPS is not only for ecommerce websites, but for all websites that are exchanging data. Data shared by a user or data shared to an external entity. Modern browsers today limit functionalities for sites that are not secure. For example: geolocation, push notifications and service workers don't work if your instance is not using HTTPS. And today is much more easy to setup a project with an SSL certificate than it was before (and for free, thanks to Let's Encrypt).
+
+- [Why Use HTTPS? | Cloudflare](https://www.cloudflare.com/learning/security/why-use-https/)
+- [Enabling HTTPS Without Sacrificing Your Web Performance - Moz](https://moz.com/blog/enabling-https-without-sacrificing-web-performance)
+- [How HTTPS Affects Website Performance](https://wp-rocket.me/blog/https-affects-website-performance/)
+- [HTTP versus HTTPS versus HTTP2 - The real story | Tune The Web](https://www.tunetheweb.com/blog/http-versus-https-versus-http2/)
+- [HTTP vs HTTPS — Test them both yourself](https://www.httpvshttps.com/)

src/best-practices/frontend-performance/content/use-non-blocking-javascript.md

@@ -1 +1,20 @@
-# Use non blocking javascript
+# Non-Blocking JavaScript
+
+JavaScript files are loaded asynchronously using async or deferred using defer attribute.
+
+```javascript
+<!-- Defer Attribute -->
+<script defer src="foo.js"></script>
+
+<!-- Async Attribute -->
+<script async src="foo.js"></script>
+```
+
+JavaScript blocks the normal parsing of the HTML document, so when the parser reaches a `<script>` tag (particularly is inside the `<head>`), it stops to fetch and run it. Adding async or defer are highly recommended if your scripts are placed in the top of your page but less valuable if just before your `</body>` tag. But it's a good practice to always use these attributes to avoid any performance issue.
+
+- Add `async` (if the script don't rely on other scripts) or `defer` (if the script relies upon or relied upon by an async script) as an attribute to your script tag.
+- If you have small scripts, maybe use inline script place above async scripts.
+
+
+- [Remove Render-Blocking JavaScript](https://developers.google.com/speed/docs/insights/BlockingJS)
+- [Defer loading JavaScript](https://varvy.com/pagespeed/defer-loading-javascript.html)

src/best-practices/frontend-performance/content/use-preconnect-to-load-fonts.md

@@ -1 +1,17 @@
-# Use preconnect to load fonts
+# Preconnect on Fonts
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+```
+
+When you arrived on a website, your device needs to find out where your site lives and which server it needs to connect with. Your browser had to contact a DNS server and wait for the lookup complete before fetching the resource (fonts, CSS files...). Prefetches and preconnects allow the browser to lookup the DNS information and start establishing a TCP connection to the server hosting the font file. This provides a performance boost because by the time the browser gets around to parsing the css file with the font information and discovering it needs to request a font file from the server, it will already have pre-resolved the DNS information and have an open connection to the server ready in its connection pool.
+
+- Before prefetching your webfonts, use webpagetest to evaluate your website
+- Look for teal colored DNS lookups and note the host that are being requested
+- Prefetch your webfonts in your `<head>` and add eventually these hostnames that you should prefetch too
+
+- [Faster Google Fonts with Preconnect - CDN Planet](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/)
+- [Make Your Site Faster with Preconnect Hints | Viget](https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/)
+- [Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/)
+- [A Comprehensive Guide to Font Loading Strategies—zachleat.com](https://www.zachleat.com/web/comprehensive-webfonts/#font-face)
+- [typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.](https://github.com/typekit/webfontloader)

src/best-practices/frontend-performance/content/use-same-protocol.md

@@ -1 +1,3 @@
-# Use same protocol
+# Use same Protocol
+
+Avoid having your website serving files coming from source using HTTP on your website which is using HTTPS for example. If your website is using HTTPS, external files should come from the same protocol.

src/best-practices/frontend-performance/content/use-service-workers-for-caching.md

@@ -1 +1,8 @@
-# Use service workers for caching
+# Use Service Workers
+
+You are using Service Workers in your PWA to cache data or execute possible heavy tasks without impacting the user experience of your application.
+
+- [Service Workers: an Introduction  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/primers/service-workers/)
+- [Measuring the Real-world Performance Impact of Service Workers  |  Web  |  Google Developers](https://developers.google.com/web/showcase/2016/service-worker-perf)
+- [What Are Service Workers and How They Help Improve Performance](https://www.keycdn.com/blog/service-workers/)
+- [How does a service worker work? - YouTube](https://www.youtube.com/watch?v=__xAtWgfzvc)

src/best-practices/frontend-performance/content/use-woff2-font-format.md

@@ -1 +1,11 @@
-# Use woff2 font format
+# Use WOFF 2.0 Web Font
+
+According to Google, the WOFF 2.0 Web Font compression format offers 30% average gain over WOFF 1.0. It's then good to use WOFF 2.0, WOFF 1.0 as a fallback and TTF.
+
+Check before buying your new font that the provider gives you the WOFF2 format. If you are using a free font, you can always use Font Squirrel to generate all the formats you need.
+
+- [WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2](https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a)
+- [Create Your Own @font-face Kits » Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator)
+- [IcoMoon App - Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/)
+- [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/?ref=frontendchecklist)
+- [Can I use... WOFF2](https://caniuse.com/#feat=woff2)

src/best-practices/frontend-performance/content/web-page-test.md

@@ -1 +1,3 @@
-# Web page test
+# webpagetest.org
+
+Webpagetest.org is a website performance testing tool that allows users to test the load time and performance of web pages. It provides a wealth of information about the page load, including load time, Speed Index, and filmstrip view of the page load, as well as a breakdown of the page components and their load times. It also allows for testing from multiple locations and browsers. The test results can be shared and compared with others. It is widely used by developers, marketers, and website owners to improve the performance and user experience of their websites.

src/components/RoadmapHeader.astro

@@ -29,7 +29,7 @@ const isRoadmapReady = !isUpcoming;
   <div class='py-5 sm:py-12 container relative'>
     <YouTubeAlert />
 
-    <div class='mt-0 mb-3 sm:mb-6 sm:mt-4'>
+    <div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
       <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
         {title}
       </h1>

src/components/TopicOverlay/TopicOverlay.astro

@@ -47,7 +47,7 @@ const { contentContributionLink } = Astro.props;
 
     <div
       id='topic-content'
-      class='prose prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mt-[10px] prose-h3:mb-[5px]'
+      class='prose prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-quoteless prose-blockquote:font-normal prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mt-[10px] prose-h3:mb-[5px]'
     >
     </div>
 

src/pages/[roadmapId]/[...topicId].astro

@@ -30,7 +30,7 @@ const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as Roadma
   title={`${heading} - roadmap.sh`}
   description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`}
   noIndex={true}
-  permalink={`/${topicId}`}
+  permalink={`/${roadmapId}/${topicId}`}
 >
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
   <div class='bg-gray-50'>

src/pages/best-practices/[bestPracticeId]/[...topicId].astro

@@ -28,7 +28,7 @@ const { file, bestPracticeId, bestPractice, heading } = Astro.props as BestPract
   title={`${heading} - roadmap.sh`}
   description={`Free resources to learn ${heading} in ${bestPractice.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${bestPractice.featuredTitle}.`}
   noIndex={true}
-  permalink={`/${topicId}`}
+  permalink={`/best-practices/${bestPracticeId}/${topicId}`}
 >
   <div class='bg-gray-50'>
     <div class='container py-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'>

src/pages/pdfs.md

@@ -20,6 +20,7 @@ Here is the list of PDF links for each of the roadmaps.
 * **Software Design and Architecture Roadmap** - [Roadmap Link](https://roadmap.sh/software-design-architecture) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/software-design-architecture.pdf)
 * **JavaScript Roadmap** - [Roadmap Link](https://roadmap.sh/javascript) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/javascript.pdf)
 * **Node.js Roadmap** - [Roadmap Link](https://roadmap.sh/nodejs) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/nodejs.pdf)
+* **TypeScript Roadmap** - [Roadmap Link](https://roadmap.sh/typescript) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/typescript.pdf)
 * **GraphQL Roadmap** - [Roadmap Link](https://roadmap.sh/graphql) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/graphql.pdf)
 * **Angular Roadmap** - [Roadmap Link](https://roadmap.sh/angular) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/angular.pdf)
 * **React Roadmap** - [Roadmap Link](https://roadmap.sh/react) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/react.pdf)

src/roadmaps/flutter/content/114-reactive-programming/100-rxdart.md

@@ -1 +1,5 @@
-# Rxdart
+# RxDart
+
+RxDart is a library for Dart that provides additional functionality for working with reactive programming, specifically with the Streams and Observables classes. It extends the standard Dart Streams API and provides additional features such as the ability to transform and combine streams, and to compose and chain streams together. In Flutter, RxDart is commonly used to handle asynchronous data streams and user interactions in a more efficient and elegant way.
+
+- [RxDart Official Docs](https://pub.dev/documentation/rxdart/latest)

src/roadmaps/frontend/frontend.md

@@ -9,7 +9,7 @@ description: "Step by step guide to becoming a modern frontend developer in 2023
 hasTopics: true
 dimensions:
   width: 968
-  height: 2734.48
+  height: 2807.36
 schema:
   headline: "Frontend Developer Roadmap"
   description: "Learn how to become a Frontend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."

src/roadmaps/graphql/content/100-graphql-introduction/100-what-is-graphql.md

@@ -1 +1,10 @@
-# What is graphql
+# What is GraphQL
+
+GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.
+
+A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type.
+
+To learn more, visit the following links:
+
+- [Introduction to graphQL](https://graphql.org/learn/)
+- [Tutorial - What is graphQL?](https://www.howtographql.com/basics/0-introduction/)

src/roadmaps/graphql/content/100-graphql-introduction/101-problems-graphql-solves.md

@@ -1 +1,11 @@
-# Problems graphql solves
+# Problems GraphQL Solves
+
+GraphQL solves several problems commonly faced when building APIs, including:
+
+- **Over-fetching:** With REST APIs, the client often receives more data than it needs, resulting in wasted bandwidth and slow performance. GraphQL allows the client to specify exactly the data it needs, reducing over-fetching.
+
+- **Under-fetching:** With REST, the client often has to make multiple requests to different endpoints to gather all the data it needs, resulting in additional latency and complexity. GraphQL allows the client to request all the necessary data in a single request.
+
+- **Inefficient versioning:** With REST, creating a new endpoint for each version of an API can quickly become cumbersome and hard to maintain. GraphQL allows for seamless versioning by adding new fields and types, rather than creating new endpoints.
+
+- **Lack of flexibility:** REST APIs are typically fixed, meaning that the client has to work with the data structure provided by the API. GraphQL allows the client to request exactly the data it needs and receive it in a predictable format, increasing flexibility.

src/roadmaps/graphql/content/100-graphql-introduction/102-thinking-in-graphs.md

@@ -1 +1,9 @@
-# Thinking in graphs
+# Thinking in Graphs
+
+"Thinking in Graphs" is a mindset or approach when working with GraphQL. It refers to the way that data is organized and queried in GraphQL, which is based on the concept of a graph.
+
+In GraphQL, data is represented as a graph, where nodes represent objects and edges represent relationships between them. This allows for a more flexible and intuitive way of querying data, as the client can specify exactly the data it needs by following the relationships between nodes in the graph.
+
+Learn more from the following links:
+
+- [GraphQL - Thinking in Graphs](https://graphql.org/learn/thinking-in-graphs/)

src/roadmaps/graphql/content/100-graphql-introduction/103-graphql-on-the-frontend.md

@@ -1 +1,11 @@
-# Graphql on the frontend
+# GraphQL on the Frontend
+
+In GraphQL, the frontend refers to the client-side of the application, typically the web or mobile app that the end-user interacts with.
+
+When using GraphQL on the frontend, developers can use a GraphQL client library, such as Apollo Client or Relay, to interact with the GraphQL server. These libraries provide a way to easily send GraphQL queries and mutations to the server and handle the response.
+
+By using GraphQL on the frontend, developers can benefit from the flexibility and efficiency of GraphQL when querying data. Instead of having to make multiple REST API calls or hardcode data into the frontend, the client can specify exactly the data it needs in a single request, and the server will return it in a predictable format.
+
+Learn more from following links:
+
+- [Get started with GraphQL on the frontend](https://www.howtographql.com/react-apollo/0-introduction/)

src/roadmaps/graphql/content/100-graphql-introduction/104-graphql-on-the-backend.md

@@ -1 +1,11 @@
-# Graphql on the backend
+# GraphQL on the Backend
+
+In GraphQL, the backend refers to the server-side of the application, where the data is stored and processed.
+
+When using GraphQL on the backend, developers can create a GraphQL server that handles the incoming GraphQL queries and mutations from the frontend. This can be implemented using a GraphQL library or framework, such as Apollo Server, Express-GraphQL, or GraphQL-Java.
+
+The GraphQL server is responsible for handling the incoming queries and mutations, validating them against a schema, and executing them by fetching data from the database or other data sources. The server then returns the requested data to the client in a predictable format, as defined by the schema.
+
+Learn more from the following links:
+
+- [How to use GraphQL in Backend?](https://www.howtographql.com/)

src/roadmaps/graphql/content/100-graphql-introduction/index.md

@@ -1 +1,12 @@
-# Graphql introduction
+# GraphQL Introduction
+
+GraphQL is a query language and runtime for APIs. It is used to build and consume web service APIs.
+
+GraphQL allows clients to make a single API call to request exactly the data they need, in a predictable format. This allows for more efficient and flexible data retrieval, compared to traditional REST APIs where the client has to make multiple API calls to different endpoints, and may receive more data than it needs.
+
+With GraphQL, the client defines the structure of the data it needs, by sending a query to the server. The server then returns the requested data in the same structure, as defined by the query. The client can also make mutations to update or create data on the server.
+
+To learn more, visit the following links:
+
+- [Introduction to GraphQL](https://graphql.org/learn/)
+- [Getting started with GraphQL](https://graphql.org/)

src/roadmaps/graphql/content/101-graphql-queries/100-what-are-queries.md

@@ -1 +1,7 @@
-# What are queries
+# What are Queries
+
+In GraphQL, a query is a request made by the client to the server to retrieve data. Queries are used to fetch data from the server and are structured as a hierarchical tree of fields, which correspond to the properties of the data being requested.
+
+Learn more from following links:
+
+- [Introduction of GraphQL - Query](https://graphql.org/learn/queries/)

src/roadmaps/graphql/content/101-graphql-queries/101-fields.md

@@ -1 +1,9 @@
-# Fields
+# Fields
+
+In GraphQL, fields are the individual pieces of data that can be queried or modified. They represent the properties of the data being requested or modified, and are the building blocks of queries and mutations.
+
+Fields are defined in the GraphQL schema, which is a blueprint of the data that can be queried and modified. The schema defines the types of data that can be queried, and the fields that are available for each type.
+
+Learn more from the following links:
+
+- [GraphQL: Types and Fields](https://graphql.org/learn/queries/#fields)

src/roadmaps/graphql/content/101-graphql-queries/102-aliases.md

@@ -1 +1,7 @@
-# Aliases
+# Aliases
+
+Aliases in GraphQL are a way to rename fields when they are requested in a query. They are useful in situations where a field is requested multiple times, but with different arguments, or when the field has a name that is not suitable for the client's usage. They make it easy to distinguish and work with fields in the response and make the query more readable.
+
+To learn more, visit the following links:
+
+- [What are GraphQL Aliases?](https://graphql.org/learn/queries/#aliases)

src/roadmaps/graphql/content/101-graphql-queries/103-arguments.md

@@ -1 +1,7 @@
-# Arguments
+# Arguments
+
+Arguments in GraphQL are pieces of information that are passed to a field or a directive to specify additional details about how the field should be executed. They can be used to filter, sort, or paginate data, or to specify additional options when creating, updating, or deleting data. They can be passed as key-value pairs, defined as variables, and can be optional or required.
+
+Learn more from the following links:
+
+- [GraphQL - Arguments](https://graphql.org/learn/queries/#arguments)

src/roadmaps/graphql/content/101-graphql-queries/104-directives.md

@@ -1 +1,7 @@
-# Directives
+# Directives
+
+Directives in GraphQL are a way to modify the execution of a query or a field. They are used to add additional behavior or validation to a query or a field, and can be applied to fields, operations (queries and mutations) and fragments. Directives can take one or more arguments to configure their behavior, and can be defined by the developer or used one of the built-in directives provided by GraphQL.
+
+To learn more, visit the following links:
+
+- [Directives in GraphQL](https://graphql.org/learn/queries/#directives)

src/roadmaps/graphql/content/101-graphql-queries/105-variables.md

@@ -1 +1,8 @@
-# Variables
+# Variables
+
+Variables in GraphQL are a way to pass dynamic values to a query or a mutation. They allow the client to make a query more dynamic and flexible by passing in different values for the same argument. They are defined in the query or mutation using the **$** symbol followed by the variable name and a type, and their values must be passed in a separate JSON object. They also are type-safe, this means that variables must be passed values that are of the same type as defined in the query.
+
+To learn more, visit the following links:
+
+- [GraphQL Variables](https://dgraph.io/docs/graphql/api/variables/)
+- [Intro to Variables in GraphQL](https://graphql.org/learn/queries/#variables)

src/roadmaps/graphql/content/101-graphql-queries/106-fragments.md

@@ -1 +1,7 @@
-# Fragments
+# Fragments
+
+In GraphQL, a fragment is a reusable piece of a GraphQL query that can be used to retrieve specific fields from one or more types of data. A fragment is defined using the "fragment" keyword, followed by the name of the fragment and the type of data it is querying. The fields to be retrieved are then specified within curly braces.
+
+To learn more, visit the following links:
+
+- [Intro to Fragments in GraphQL](https://graphql.org/learn/queries/#fragments)

src/roadmaps/graphql/content/101-graphql-queries/index.md

@@ -1 +1,9 @@
-# Graphql queries
+# GraphQL Queries
+
+GraphQL is a query language for APIs. It provides a simple and flexible syntax for making requests to a server to retrieve specific data. In GraphQL, a query is a request made to the server to fetch data. The query specifies the fields of the data that should be returned, and the server responds with the requested data.
+
+A GraphQL query is structured as a single object, with a "query" or "mutation" field at the top level. The "query" field is used to retrieve data, while the "mutation" field is used to make changes to the data. The query is written in a specific format and is executed by the server to retrieve the requested data.
+
+To learn more, visit the following links:
+
+- [What are GraphQL Queries?](https://graphql.org/learn/queries/)

src/roadmaps/graphql/content/102-mutations/100-what-are-mutations.md

@@ -1 +1,9 @@
-# What are mutations
+# What are Mutations
+
+In GraphQL, a mutation is a type of query used to make changes to data on the server. It is used to create, update, or delete data, and is structured similarly to a query, but with a "mutation" field at the top level instead of a "query" field.
+
+A mutation typically includes fields that specify the data to be changed and the operation to be performed (e.g. "create", "update", or "delete"). It can also include arguments to specify the specific data to be affected.
+
+Learn more from the following resources:
+
+- [Get started with Mutations](https://graphql.org/learn/queries/#mutations)

src/roadmaps/graphql/content/102-mutations/101-multiple-mutation-fields.md

@@ -1 +1,7 @@
-# Multiple mutation fields
+# Multiple Mutation Fields
+
+In GraphQL, it is possible to perform multiple mutations in a single query by including multiple "mutation" fields in the query. This is called "batching" or "chaining" mutations.
+
+Learn more from the following links:
+
+- [Guide to Multiple fields in mutations](https://graphql.org/learn/queries/#multiple-fields-in-mutations)

src/roadmaps/graphql/content/102-mutations/102-operation-name.md

@@ -1 +1,7 @@
-# Operation name
+# Operation Name
+
+In GraphQL, an operation name is an optional identifier that can be used to uniquely identify a query or a mutation in a document containing multiple operations. It can be used to provide more meaningful names for operations, making it easier to understand the purpose of the operation and to identify it in the event of an error.
+
+Learn more from the following resources:
+
+- [Intro to Operation Name](https://graphql.org/learn/queries/#operation-name)

src/roadmaps/graphql/content/102-mutations/index.md

@@ -1 +1,9 @@
-# Mutations
+# Mutations
+
+In GraphQL, a mutation is a type of query used to make changes to the data on the server, such as creating, updating, or deleting data. A mutation is structured similarly to a query, but with a "mutation" field at the top level instead of a "query" field.
+
+The mutation includes fields that specify the data to be changed, the operation to be performed (create, update or delete) and also can include arguments to specify the specific data to be affected.
+
+To learn more, visit the following links:
+
+- [Getting started with Mutations](https://graphql.org/learn/queries/#mutations)

src/roadmaps/graphql/content/103-subscriptions/100-what-are-subscriptions.md

@@ -1 +1,9 @@
-# What are subscriptions
+# What are Subscriptions
+
+In GraphQL, subscriptions are a way to push real-time updates to the client. They allow a client to subscribe to a specific event or data change on the server, and receive updates in real-time as soon as the event occurs or the data changes.
+
+Subscriptions are defined on the server and are structured similar to queries and mutations. They have a "subscription" field at the top level, followed by the fields that define the event or data change to be subscribed to.
+
+To learn more, visit the following links:
+
+- [How GraphQL Subscriptions Work?](https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql)

src/roadmaps/graphql/content/103-subscriptions/101-event-based-subscriptions.md

@@ -1 +1,5 @@
-# Event based subscriptions
+# Event Based Subscriptions
+
+Event-based subscriptions in GraphQL are a way to push real-time updates to the client based on specific events that occur on the server. These events can be triggered by external sources such as user actions, sensor data, or other systems, or by internal actions such as database updates.
+
+With event-based subscriptions, the client can subscribe to a specific event or set of events and receive updates in real-time as soon as the event occurs. This allows the client to receive notifications about important changes in the system without the need to constantly poll the server for updates.

src/roadmaps/graphql/content/103-subscriptions/102-live-queries.md

@@ -1 +1,9 @@
-# Live queries
+# Live Queries
+
+In GraphQL, live queries, also known as "real-time queries" or "subscriptions to queries", is a way to push real-time updates to the client, when the data that is being queried changes on the server. It allows the client to subscribe to a specific query and receive updates in real-time as soon as the data changes.
+
+With live queries, the client can subscribe to a specific query and receive updates when the data that is being queried changes on the server. The client can also specify the fields and arguments of the query, and the server will only send updates for the fields that the client has requested.
+
+Learn more from the following links:
+
+- [GraphQL Live Queries](https://the-guild.dev/blog/collecting-graphql-live-query-resource-identifier-with-graphql-tools)

src/roadmaps/graphql/content/103-subscriptions/103-defer-stream-directives.md

@@ -1 +1,9 @@
-# Defer stream directives
+# Defer Stream Directives
+
+In GraphQL, the "defer" and "stream" directives are used to control the handling of fields and their associated data. These directives allow developers to control how data is fetched and sent over the network, and can be used to optimize the performance of a GraphQL API.
+
+The "defer" directive is used to delay the fetching of a field's data until the data is actually needed by the client. This can be useful for improving the performance of an API by reducing the amount of data that needs to be fetched upfront.
+
+Learn more from the following links:
+
+- [Defer and Stream in GraphQL](https://the-guild.dev/graphql/yoga-server/docs/features/defer-stream)

src/roadmaps/graphql/content/103-subscriptions/index.md

@@ -1 +1,9 @@
-# Subscriptions
+# Subscriptions
+
+In GraphQL, subscriptions are a way to push real-time updates to the client. They allow a client to subscribe to specific events or data changes on the server, and receive updates in real-time as soon as the event occurs or the data changes. Subscriptions are defined on the server and are structured similarly to queries and mutations.
+
+A subscription includes a "subscription" field at the top level, followed by the fields that define the event or data change to be subscribed to. The client can initiate the subscription by sending the subscription query to the server, and the server will keep the connection open, listening for new events or data changes. Once the event occurs, or the data changes, the server will send the updated data to the client through the open connection.
+
+Learn more from following links:
+
+- [Subscriptions and Live Queries - Real Time with GraphQL](https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql)

src/roadmaps/graphql/content/104-schema/100-type-system.md

@@ -1 +1,13 @@
-# Type system
+# Type System
+
+GraphQL is a strongly typed language. Type System defines various data types that can be used in a GraphQL application. The type system helps to define the schema, which is a contract between client and server. The commonly used GraphQL data types are as follows:
+
+- Scalar
+- Object
+- Query
+- Mutation
+- Enum
+
+Learn more from the following links:
+
+- [Get started with Type system](https://graphql.org/learn/schema/#type-system)

src/roadmaps/graphql/content/104-schema/101-fields.md

@@ -1 +1,9 @@
-# Fields
+# Fields
+
+In GraphQL, a field is a unit of data that can be queried or manipulated in a request. Each field has a name, a type, and an optional description. Fields are defined within an object type in a GraphQL schema.
+
+Each field in a GraphQL schema can return a scalar value (such as a string or an integer) or another object, allowing for the creation of complex, nested data structures. The fields can also take arguments, which allows to filter or modify the data being returned.
+
+Learn more from the following links:
+
+- [GraphQL: Types and Fields](https://graphql.org/learn/queries/#fields)

src/roadmaps/graphql/content/104-schema/102-scalars.md

@@ -1 +1,17 @@
-# Scalars
+# Scalars
+
+Scalars are “leaf” values in GraphQL. There are several built-in scalars, and you can define custom scalars, too. (Enums are also leaf values.) The built-in scalars are:
+
+- **String**, like a JSON or Ruby string
+- **Int**, like a JSON or Ruby integer
+- **Float**, like a JSON or Ruby floating point decimal
+- **Boolean**, like a JSON or Ruby boolean (true or false)
+- **ID**, which a specialized String for representing unique object identifiers
+- **ISO8601DateTime**, an ISO 8601-encoded datetime
+- **ISO8601Date**, an ISO 8601-encoded date
+- **JSON**, This returns arbitrary JSON (Ruby hashes, arrays, strings, integers, floats, booleans and nils). Take care: by using this type, you completely lose all GraphQL type safety. Consider building object types for your data instead.
+- **BigInt**, a numeric value which may exceed the size of a 32-bit integer
+
+Learn more from the following links:
+
+- [Get started with Scalars in GraphQL](https://graphql.org/learn/schema/#scalar-types)

src/roadmaps/graphql/content/104-schema/103-enums.md

@@ -1 +1,10 @@
-# Enums
+# Enums
+
+Enums also called as enumeration types are a special kind of scalar that is restricted to a particular set of allowed values. This allows you to:
+
+- Validate that any arguments of this type are one of the allowed values
+- Communicate through the type system that a field will always be one of a finite set of values
+
+Learn more from the following links:
+
+- [What are Enums?](https://graphql.org/learn/schema/#enumeration-types)

src/roadmaps/graphql/content/104-schema/104-objects.md

@@ -1 +1,8 @@
-# Objects
+# Objects
+
+In GraphQL, an object is a type that represents a group of fields. Objects can be used to define the structure of a query or a mutation. Each field of an object can return a scalar value (such as a string or an integer) or another object, allowing for the creation of complex, nested data structures. In a GraphQL schema, objects are defined using the **type** keyword, followed by the object's name and a set of fields in curly braces.
+
+To learn more, visit the following:
+
+- [Object Types and Fields](https://graphql.org/learn/schema/#object-types-and-fields)
+- [Object Types](https://graphql.org/graphql-js/object-types/)

src/roadmaps/graphql/content/104-schema/105-lists.md

@@ -1 +1,9 @@
-# Lists
+# Lists
+
+In GraphQL, a list is a type that represents an ordered collection of items. Lists are defined using square brackets, with the type of the items inside.
+
+Lists are used to represent an array of items in a GraphQL schema, and can be used as the return type for a field in an object type. Lists can contain any type of items, including scalars and other objects, and can also be nested within other lists.
+
+Learn more from the following links:
+
+- [Get started with Lists](https://graphql.org/learn/schema/#lists-and-non-null)

src/roadmaps/graphql/content/104-schema/106-interfaces.md

@@ -1 +1,9 @@
-# Interfaces
+# Interfaces
+
+In GraphQL, an interface is a type that defines a set of fields that a type must implement. Interfaces are defined using the interface keyword, and can be used to define common fields for multiple types.
+
+In GraphQL, lists can also be used within interfaces to define the return type for fields.
+
+Learn more from the following links:
+
+- [Get started with Interfaces](https://graphql.org/learn/schema/#interfaces)

src/roadmaps/graphql/content/104-schema/107-unions.md

@@ -1 +1,9 @@
-# Unions
+# Unions
+
+Unions are useful in cases where a field can return multiple types and you want to handle those types differently in your client. They also allow for more flexibility in how you structure your schema, as you can group types together that share common fields.
+
+Unions don't allow to specify a common set of fields to be queried across multiple types, but it allows to handle multiple types differently in your client.
+
+Learn more from the following links:
+
+- [Get started with Union in GraphQL](https://graphql.org/learn/schema/#union-types)

src/roadmaps/graphql/content/104-schema/108-arguments.md

@@ -1 +1,7 @@
-# Arguments
+# Arguments
+
+In GraphQL, an argument is a value that is passed to a field in a query or mutation. Arguments allow you to filter or modify the data being returned by a field. Arguments are defined within a field in a GraphQL schema, and have a name, a type, and an optional default value.
+
+To learn more, visit the following links:
+
+- [Get started with Arguments in GraphQL](https://graphql.org/learn/schema/#arguments)

src/roadmaps/graphql/content/104-schema/index.md

@@ -1 +1,9 @@
-# Schema
+# Schema
+
+In GraphQL, a schema is a blueprint that defines the types, fields, and operations (queries and mutations) that are available to clients. The schema is the contract between the client and the server, specifying what data can be requested and how it can be modified.
+
+A GraphQL schema is defined using the GraphQL Schema Definition Language (SDL), which is a human-readable syntax for defining the structure of a GraphQL API. The SDL includes keywords such as **type**, **query**, **mutation**, **field**, and **argument** to define the different components of a schema.
+
+Learn more from the following links:
+
+- [Get started with Schema](https://graphql.org/learn/schema/)

src/roadmaps/graphql/content/104-validation.md

@@ -1 +1,7 @@
-# Validation
+# Validation
+
+Validation in GraphQL refers to the process of checking whether a GraphQL query or mutation conforms to the rules and constraints defined in the GraphQL schema. This can include checking that the query or mutation includes the required fields, that the arguments passed to a field are of the correct type, and that the values passed to fields or arguments fall within the expected range.
+
+Learn more from the following links:
+
+- [Get Started with Validation in GraphQL](https://graphql.org/learn/validation/)

src/roadmaps/graphql/content/105-execution/100-root-fields.md

@@ -1 +1,12 @@
-# Root fields
+# Root Fields
+
+In GraphQL, the root fields are the top-level fields that are available to clients in a query or mutation. They are defined in the schema and are the entry point for client requests. The root fields represent the operations that can be performed on the data, such as querying for data or modifying data.
+
+There are two types of root fields in GraphQL:
+
+- **Query:** defines the fields that can be queried to retrieve data from the server.
+- **Mutation:** defines the fields that can be used to create, update, or delete data on the server.
+
+Learn more from the following links:
+
+- [Get Started with Root Feilds](https://graphql.org/learn/execution/#root-fields-resolvers)

src/roadmaps/graphql/content/105-execution/101-resolvers/100-synchronous.md

@@ -1 +1,5 @@
-# Synchronous
+# Synchronous
+
+In GraphQL, a resolver is a function that is responsible for fetching the data for a field in a query or mutation. Resolvers are defined in the schema and are executed by the GraphQL server when a query or mutation is received.
+
+A synchronous resolver is a type of resolver that runs and completes its execution before returning any value. It directly returns the result of the computation, without waiting for any external event such as a database query or a third-party API call.

src/roadmaps/graphql/content/105-execution/101-resolvers/101-asynchronous.md

@@ -1 +1,9 @@
-# Asynchronous
+# Asynchronous
+
+In GraphQL, a resolver is a function that is responsible for fetching the data for a field in a query or mutation. Resolvers are defined in the schema and are executed by the GraphQL server when a query or mutation is received.
+
+An asynchronous resolver is a type of resolver that runs, but instead of returning the final value, it returns a promise that will be resolved with the final value. This allows the resolver to wait for an external event such as a database query or a third-party API call to complete before returning the result.
+
+Learn more from the following links:
+
+- [Get Started with Asynchronous](https://graphql.org/learn/execution/#asynchronous-resolvers)

src/roadmaps/graphql/content/105-execution/101-resolvers/102-scalar-coercion.md

@@ -1 +1,9 @@
-# Scalar coercion
+# Scalar Coercion
+
+In GraphQL, scalar coercion is the process of converting a value from one type to another, as it flows through the resolvers. This is needed when the input value for a field does not match the expected type, but can still be successfully converted to the correct type.
+
+Scalar coercion can be implemented in the resolvers by using the **GraphQLScalarType** constructor to define a custom scalar type and providing a **coerce** function that can convert the input value to the correct type.
+
+Learn more from the following links:
+
+- [Get started with Scalar coercion](https://graphql.org/learn/execution/#scalar-coercion)

src/roadmaps/graphql/content/105-execution/101-resolvers/103-lists.md

@@ -1 +1,9 @@
-# Lists
+# Lists
+
+In GraphQL, a list is a type that represents an ordered collection of items. Lists can be used as the return type for a field in a query or mutation, and can contain any type of items, including scalars and objects.
+
+The resolver function for a list field can retrieve the data from a database or a third-party API and return it as an array. 
+
+Learn more from the following links:
+
+- [Get started with Lists and Non-Null](https://graphql.org/learn/schema/#lists-and-non-null)