Instead of RaisedButton, we can use ElevatedButton because it is deprecated (#3827)

* Add content to Frontend Best Practices

* Add content to frontend performance best practices

.github/workflows/aws-costs.yml

@@ -0,0 +1,21 @@
+name: Sends Daily AWS Costs to Slack
+on:
+  # Allow manual Run
+  workflow_dispatch:
+  # Run at 7:00 UTC every day
+  schedule:
+    - cron: "0 7 * * *"
+jobs:
+  aws_costs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Costs
+        env:
+          AWS_KEY: ${{ secrets.COST_AWS_ACCESS_KEY }}
+          AWS_SECRET: ${{ secrets.COST_AWS_SECRET_KEY }}
+          AWS_REGION: ${{ secrets.COST_AWS_REGION }}
+          SLACK_CHANNEL: ${{ secrets.SLACK_COST_CHANNEL }}
+          SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
+        run: |
+          npm install -g aws-cost-cli
+          aws-cost -k $AWS_KEY -s $AWS_SECRET -r $AWS_REGION -S $SLACK_TOKEN -C $SLACK_CHANNEL

astro.config.mjs

@@ -10,7 +10,7 @@ export default defineConfig({
   site: 'https://roadmap.sh',
   markdown: {
     shikiConfig: {
-      theme: 'dracula'
+      theme: 'dracula',
     },
     rehypePlugins: [
       [
@@ -21,6 +21,9 @@ export default defineConfig({
       ],
     ],
   },
+  build: {
+    format: 'file',
+  },
   integrations: [
     tailwind({
       config: {

bin/best-practice-content.cjs

@@ -0,0 +1,144 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONTENT_DIR = path.join(__dirname, '../content');
+// Directory containing the best-practices
+const BEST_PRACTICE_CONTENT_DIR = path.join(__dirname, '../src/best-practices');
+const bestPracticeId = process.argv[2];
+
+const allowedBestPracticeId = fs.readdirSync(BEST_PRACTICE_CONTENT_DIR);
+if (!bestPracticeId) {
+  console.error('bestPractice is required');
+  process.exit(1);
+}
+
+if (!allowedBestPracticeId.includes(bestPracticeId)) {
+  console.error(`Invalid best practice key ${bestPracticeId}`);
+  console.error(`Allowed keys are ${allowedBestPracticeId.join(', ')}`);
+  process.exit(1);
+}
+
+// Directory holding the best parctice content files
+const bestPracticeDirName = fs
+  .readdirSync(BEST_PRACTICE_CONTENT_DIR)
+  .find((dirName) => dirName.replace(/\d+-/, '') === bestPracticeId);
+
+if (!bestPracticeDirName) {
+  console.error('Best practice directory not found');
+  process.exit(1);
+}
+
+const bestPracticeDirPath = path.join(BEST_PRACTICE_CONTENT_DIR, bestPracticeDirName);
+const bestPracticeContentDirPath = path.join(
+  BEST_PRACTICE_CONTENT_DIR,
+  bestPracticeDirName,
+  'content'
+);
+
+// If best practice content already exists do not proceed as it would override the files
+if (fs.existsSync(bestPracticeContentDirPath)) {
+  console.error(`Best Practice content already exists @ ${bestPracticeContentDirPath}`);
+  process.exit(1);
+}
+
+function prepareDirTree(control, dirTree) {
+  // Directories are only created for groups
+  if (control.typeID !== '__group__') {
+    return;
+  }
+
+  // e.g. 104-testing-your-apps:other-options
+  const controlName = control?.properties?.controlName || '';
+
+  // No directory for a group without control name
+  if (!controlName || controlName.startsWith('check:') || controlName.startsWith('ext_link:')) {
+    return;
+  }
+
+  // e.g. ['testing-your-apps', 'other-options']
+  const dirParts = controlName.split(':');
+
+  // Nest the dir path in the dirTree
+  let currDirTree = dirTree;
+  dirParts.forEach((dirPart) => {
+    currDirTree[dirPart] = currDirTree[dirPart] || {};
+    currDirTree = currDirTree[dirPart];
+  });
+
+  const childrenControls = control.children.controls.control;
+  // No more children
+  if (childrenControls.length) {
+    childrenControls.forEach((childControl) => {
+      prepareDirTree(childControl, dirTree);
+    });
+  }
+
+  return { dirTree };
+}
+
+const bestPractice = require(path.join(__dirname, `../public/jsons/best-practices/${bestPracticeId}`));
+const controls = bestPractice.mockup.controls.control;
+
+// Prepare the dir tree that we will be creating
+const dirTree = {};
+
+controls.forEach((control) => {
+  prepareDirTree(control, dirTree);
+});
+
+/**
+ * @param parentDir Parent directory in which directory is to be created
+ * @param dirTree Nested dir tree to be created
+ * @param filePaths The mapping from groupName to file path
+ */
+function createDirTree(parentDir, dirTree, filePaths = {}) {
+  const childrenDirNames = Object.keys(dirTree);
+  const hasChildren = childrenDirNames.length !== 0;
+
+  // @todo write test for this, yolo for now
+  const groupName = parentDir
+    .replace(bestPracticeContentDirPath, '') // Remove base dir path
+    .replace(/(^\/)|(\/$)/g, '') // Remove trailing slashes
+    .replaceAll('/', ':') // Replace slashes with `:`
+    .replace(/:\d+-/, ':');
+
+  const humanizedGroupName = groupName
+    .split(':')
+    .pop()
+    ?.replaceAll('-', ' ')
+    .replace(/^\w/, ($0) => $0.toUpperCase());
+
+  // If no children, create a file for this under the parent directory
+  if (!hasChildren) {
+    let fileName = `${parentDir}.md`;
+    fs.writeFileSync(fileName, `# ${humanizedGroupName}`);
+
+    filePaths[groupName || 'home'] = fileName.replace(CONTENT_DIR, '');
+    return filePaths;
+  }
+
+  // There *are* children, so create the parent as a directory
+  // and create `index.md` as the content file for this
+  fs.mkdirSync(parentDir);
+
+  let readmeFilePath = path.join(parentDir, 'index.md');
+  fs.writeFileSync(readmeFilePath, `# ${humanizedGroupName}`);
+
+  filePaths[groupName || 'home'] = readmeFilePath.replace(CONTENT_DIR, '');
+
+  // For each of the directory names, create a
+  // directory inside the given directory
+  childrenDirNames.forEach((dirName) => {
+    createDirTree(
+      path.join(parentDir, dirName),
+      dirTree[dirName],
+      filePaths
+    );
+  });
+
+  return filePaths;
+}
+
+// Create directories and get back the paths for created directories
+createDirTree(bestPracticeContentDirPath, dirTree);
+console.log('Created best practice content directory structure');

bin/readme.md

@@ -0,0 +1,28 @@
+## CLI Tools
+> A bunch of CLI scripts to make the development easier
+
+## `roadmap-links.cjs`
+
+Generates a list of all the resources links in any roadmap file.
+
+## `compress-jsons.cjs`
+
+Compresses all the JSON files in the `public/jsons` folder
+
+## `roadmap-content.cjs`
+
+This command is used to create the content folders and files for the interactivity of the roadmap. You can use the below command to generate the roadmap skeletons inside a roadmap directory:
+
+```bash
+npm run roadmap-content [frontend|backend|devops|...]
+```
+
+For the content skeleton to be generated, we should have proper grouping, and the group names in the project files. You can follow the steps listed below in order to add the meta information to the roadmap.
+
+- Remove all the groups from the roadmaps through the project editor. Select all and press `cmd+shift+g`
+- Identify the boxes that should be clickable and group them together with `cmd+shift+g`
+- Assign the name to the groups.
+  - Group names have the format of `[sort]-[slug]` e.g. `100-internet`. Each group name should start with a number starting from 100 which helps with sorting of the directories and the files. Groups at the same level have the sequential sorting information.
+  - Each groups children have a separate group and have the name similar to `[sort]-[parent-slug]:[child-slug]` where sort refers to the sorting of the `child-slug` and not the parent. Also parent-slug does not need to have the sorting information as a part of slug e.g. if parent was `100-internet` the children would be `100-internet:how-does-the-internet-work`, `101-internet:what-is-http`, `102-internet:browsers`.
+
+

package.json

@@ -14,23 +14,24 @@
     "upgrade": "ncu -u",
     "roadmap-links": "node bin/roadmap-links.cjs",
     "roadmap-content": "node bin/roadmap-content.cjs",
+    "best-practice-content": "node bin/best-practice-content.cjs",
     "test:e2e": "playwright test"
   },
   "dependencies": {
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.9.2",
-    "astro-compress": "^1.1.27",
+    "astro-compress": "^1.1.28",
     "node-html-parser": "^6.1.4",
     "npm-check-updates": "^16.6.2",
     "rehype-external-links": "^2.0.1",
-    "roadmap-renderer": "^1.0.1",
+    "roadmap-renderer": "^1.0.4",
     "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.29.2",
     "@tailwindcss/typography": "^0.5.9",
-    "gh-pages": "^4.0.0",
+    "gh-pages": "^5.0.0",
     "json-to-pretty-yaml": "^1.2.2",
     "markdown-it": "^13.0.1",
     "prettier": "^2.8.3",

pnpm-lock.yaml

@@ -6,8 +6,8 @@ specifiers:
   '@playwright/test': ^1.29.2
   '@tailwindcss/typography': ^0.5.9
   astro: ^1.9.2
-  astro-compress: ^1.1.27
-  gh-pages: ^4.0.0
+  astro-compress: ^1.1.28
+  gh-pages: ^5.0.0
   json-to-pretty-yaml: ^1.2.2
   markdown-it: ^13.0.1
   node-html-parser: ^6.1.4
@@ -15,24 +15,24 @@ specifiers:
   prettier: ^2.8.3
   prettier-plugin-astro: ^0.7.2
   rehype-external-links: ^2.0.1
-  roadmap-renderer: ^1.0.1
+  roadmap-renderer: ^1.0.4
   tailwindcss: ^3.2.4
 
 dependencies:
   '@astrojs/sitemap': 1.0.0
   '@astrojs/tailwind': 2.1.3_tailwindcss@3.2.4
   astro: 1.9.2
-  astro-compress: 1.1.27
+  astro-compress: 1.1.28
   node-html-parser: 6.1.4
   npm-check-updates: 16.6.2
   rehype-external-links: 2.0.1
-  roadmap-renderer: 1.0.1
+  roadmap-renderer: 1.0.4
   tailwindcss: 3.2.4
 
 devDependencies:
   '@playwright/test': 1.29.2
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.4
-  gh-pages: 4.0.0
+  gh-pages: 5.0.0
   json-to-pretty-yaml: 1.2.2
   markdown-it: 13.0.1
   prettier: 2.8.3
@@ -968,8 +968,8 @@ packages:
       tslib: 2.4.1
     dev: false
 
-  /astro-compress/1.1.27:
-    resolution: {integrity: sha512-7H7mfp4/BECckQGtyNJVYBI9jwWYX3rBcbL1EbhlgyDRbs3/thtJKDwW8xEaUvxox4R2bnNyzIET4XF/zGbozg==}
+  /astro-compress/1.1.28:
+    resolution: {integrity: sha512-uk4lZHug/A276T/jdtEscCFbWVI78UqlvDg4ujRL5UUcIs+nd8gJOipSagkzdGswjNkd482zFysQ9YS5/u7xVw==}
     dependencies:
       '@types/csso': 5.0.0
       '@types/html-minifier-terser': 7.0.0
@@ -1061,10 +1061,8 @@ packages:
       - ts-node
     dev: false
 
-  /async/2.6.4:
-    resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
-    dependencies:
-      lodash: 4.17.21
+  /async/3.2.4:
+    resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
     dev: true
 
   /autoprefixer/10.4.13_postcss@8.4.20:
@@ -1745,8 +1743,8 @@ packages:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: false
 
-  /email-addresses/3.1.0:
-    resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==}
+  /email-addresses/5.0.0:
+    resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
     dev: true
 
   /emmet/2.3.6:
@@ -2279,14 +2277,14 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /gh-pages/4.0.0:
-    resolution: {integrity: sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==}
+  /gh-pages/5.0.0:
+    resolution: {integrity: sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      async: 2.6.4
+      async: 3.2.4
       commander: 2.20.3
-      email-addresses: 3.1.0
+      email-addresses: 5.0.0
       filenamify: 4.3.0
       find-cache-dir: 3.3.2
       fs-extra: 8.1.0
@@ -3042,6 +3040,7 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
 
   /log-symbols/5.1.0:
     resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
@@ -4730,8 +4729,8 @@ packages:
       glob: 7.2.3
     dev: false
 
-  /roadmap-renderer/1.0.1:
-    resolution: {integrity: sha512-f71DLNMfBNtwNwa5ffkXVRBL24loYJ7YMcyyeAUhbJMzEQYp9vWaArVGualylBIw95APy/UIgBZ9KuqiW1Y4UA==}
+  /roadmap-renderer/1.0.4:
+    resolution: {integrity: sha512-TS9jDZu/CzTqxv7QWnMZHgB89WzgLpaExXKcBIWQEKtXm9g9E45t7gijZst9qtRQ2E2+iplAxQz/eMuttq4wAQ==}
     dev: false
 
   /roarr/2.15.4:

readme.md

@@ -53,6 +53,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,23 +5,29 @@ 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/',
-    'https://roadmap.sh/terms/',
-    'https://roadmap.sh/privacy/',
-    'https://roadmap.sh/pdfs/',
+    'https://roadmap.sh/404',
+    'https://roadmap.sh/terms',
+    'https://roadmap.sh/privacy',
+    'https://roadmap.sh/pdfs',
   ].includes(page);
 }
 
 export async function serializeSitemap(item) {
   const highPriorityPages = [
-    'https://roadmap.sh/',
-    'https://roadmap.sh/about/',
-    'https://roadmap.sh/roadmaps/',
-    'https://roadmap.sh/guides/',
-    'https://roadmap.sh/videos/',
-    ...(await getRoadmapIds()).map((id) => `https://roadmap.sh/${id}/`),
+    '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
@@ -32,22 +38,17 @@ export async function serializeSitemap(item) {
         // @ts-ignore
         changefreq: 'monthly',
         priority: 1,
-        lastmod: new Date().toISOString(),
       };
     }
   }
 
   // Guide and video pages
-  if (
-    item.url.startsWith('https://roadmap.sh/guides/') ||
-    item.url.startsWith('https://roadmap.sh/videos/')
-  ) {
+  if (item.url.startsWith('https://roadmap.sh/guides') || item.url.startsWith('https://roadmap.sh/videos')) {
     return {
       ...item,
       // @ts-ignore
       changefreq: 'monthly',
       priority: 0.9,
-      lastmod: new Date().toISOString(),
     };
   }
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+# 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/index.md

@@ -0,0 +1 @@
+# 

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+# 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/minimize-iframe-count.md

@@ -0,0 +1,3 @@
+# Avoid iframes
+
+Use iframes only if you don't have any other technical possibility. Try to avoid iframes as much as you can. Iframes are not only bad for performance, but also for accessibility and usability. Iframes are also not indexed by search engines. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+# 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/best-practices/frontend-performance/frontend-performance.md

@@ -0,0 +1,29 @@
+---
+jsonUrl: "/jsons/best-practices/frontend-performance.json"
+pdfUrl: "/pdfs/best-practices/frontend-performance.pdf"
+order: 1
+featuredTitle: "Frontend Performance"
+featuredDescription: "Frontend Performance Best Practices"
+isNew: true
+isUpcoming: false
+title: "Frontend Performance"
+description: "Detailed list of best practices to improve your frontend performance"
+dimensions:
+  width: 968
+  height: 1270.89
+schema:
+  headline: "Frontend Performance Best Practices"
+  description: "Detailed list of best practices to improve the frontend performance of your website. Each best practice carries further details and how to implement that best practice."
+  imageUrl: "https://roadmap.sh/best-practices/frontend-performance.png"
+  datePublished: "2023-01-23"
+  dateModified: "2023-01-23"
+seo:
+  title: "Frontend Performance Best Practices"
+  description: "Detailed list of best practices to improve the frontend performance of your website. Each best practice carries further details and how to implement that best practice."
+  keywords:
+    - "frontend performance"
+    - "frontend performance best practices"
+    - "frontend performance checklist"
+    - "frontend checklist"
+    - "make performant frontends"
+---

src/components/BestPracticeHeader.astro

@@ -0,0 +1,87 @@
+---
+import BestPracticeHint from './BestPracticeHint.astro';
+import DownloadPopup from './DownloadPopup.astro';
+import Icon from './Icon.astro';
+import SubscribePopup from './SubscribePopup.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+  bestPracticeId: string;
+  isUpcoming?: boolean;
+}
+
+const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
+const isBestPracticeReady = !isUpcoming;
+---
+
+<DownloadPopup />
+<SubscribePopup />
+
+<div class='border-b'>
+  <div class='py-5 sm:py-12 container relative'>
+    <div class='mt-0 mb-3 sm:mb-6'>
+      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
+        {title}
+      </h1>
+      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
+    </div>
+
+    <div class='flex justify-between'>
+      <div class='flex gap-1 sm:gap-2'>
+        <a
+          href='/best-practices'
+          class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+          aria-label='Back to All Best Practices'
+        >
+          &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
+        </a>
+
+        {
+          isBestPracticeReady && (
+            <button
+              data-popup='download-popup'
+              class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+              aria-label='Download Best Practice'
+              ga-category='Subscription'
+              ga-action='Clicked Popup Opener'
+              ga-label='Download Best Practice Popup'
+            >
+              <Icon icon='download' />
+              <span class='hidden sm:inline ml-2'>Download</span>
+            </button>
+          )
+        }
+
+        <button
+          data-popup='subscribe-popup'
+          class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+          aria-label='Subscribe for Updates'
+          ga-category='Subscription'
+          ga-action='Clicked Popup Opener'
+          ga-label='Subscribe Best Practice Popup'
+        >
+          <Icon icon='email' />
+          <span class='ml-2'>Subscribe</span>
+        </button>
+      </div>
+
+      {
+        isBestPracticeReady && (
+          <a
+            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+            target='_blank'
+            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
+            aria-label='Suggest Changes'
+          >
+            <Icon icon='comment' class='h-3 w-3' />
+            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
+            <span class='ml-2 inline sm:hidden'>Suggest</span>
+          </a>
+        )
+      }
+    </div>
+
+    <BestPracticeHint bestPracticeId={bestPracticeId} />
+  </div>
+</div>

src/components/BestPracticeHint.astro

@@ -0,0 +1,20 @@
+---
+export interface Props {
+  bestPracticeId: string;
+}
+---
+
+<div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
+  <!-- Desktop: Roadmap Resources - Alert -->
+  <div class='hidden sm:flex justify-between px-2 bg-white items-center rounded-md p-1.5'>
+    <p class='text-sm'>
+      <span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>Tip</span>
+      Click the best practices for details and resources
+    </p>
+  </div>
+
+  <!-- Mobile - Roadmap resources alert -->
+  <p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
+    Click the best practices for details and resources
+  </p>
+</div>

src/components/Breadcrumbs.astro

@@ -1,5 +1,5 @@
 ---
-import type { BreadcrumbItem } from '../lib/topic';
+import type { BreadcrumbItem } from '../lib/roadmap-topic';
 
 export interface Props {
   breadcrumbs: BreadcrumbItem[];
@@ -10,28 +10,35 @@ const { breadcrumbs, roadmapId } = Astro.props;
 ---
 
 <div class='py-7 pb-6'>
-    <!-- Desktop breadcrums -->
-    <p class='text-gray-500 container hidden sm:block'>
-      { breadcrumbs.map((breadcrumb, counter) => {
+  <!-- Desktop breadcrums -->
+  <p class='text-gray-500 container hidden sm:block'>
+    {
+      breadcrumbs.map((breadcrumb, counter) => {
         const isLast = counter === breadcrumbs.length - 1;
-        
+
         if (!isLast) {
           return (
             <>
-              <a class='hover:text-gray-800' href={`${breadcrumb.url}/`}>{ breadcrumb.title }</a>
+              <a class='hover:text-gray-800' href={`${breadcrumb.url}`}>
+                {breadcrumb.title}
+              </a>
               <span>&nbsp;&middot;&nbsp;</span>
             </>
           );
         }
-        
-        return <span class='text-gray-400'>{ breadcrumb.title }</span>
-      })}
-    </p>
 
-    <!-- Mobile breadcrums -->
-    <p class='container block sm:hidden'>
-      <a class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' href={`/${roadmapId}/`}>
-        &larr; Back to Topics List
-      </a>
-    </p>
-  </div>
+        return <span class='text-gray-400'>{breadcrumb.title}</span>;
+      })
+    }
+  </p>
+
+  <!-- Mobile breadcrums -->
+  <p class='container block sm:hidden'>
+    <a
+      class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+      href={`/${roadmapId}`}
+    >
+      &larr; Back to Topics List
+    </a>
+  </p>
+</div>

src/components/DownloadPopup.astro

@@ -5,7 +5,7 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
 
 <Popup
   id='download-popup'
-  title='Download Roadmap'
+  title='Download'
   subtitle='Enter your email below to receive the download link.'
 >
   <form

src/components/FeaturedGuides.astro

@@ -18,7 +18,7 @@ const { heading, guides } = Astro.props;
   </div>
 
   <a
-    href='/guides/'
+    href='/guides'
     class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Guides &rarr;
@@ -26,7 +26,7 @@ const { heading, guides } = Astro.props;
 
   <div class='block sm:hidden mt-3'>
     <a
-      href='/guides/'
+      href='/guides'
       class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
     >
       View All Guides &nbsp;&rarr;

src/components/FeaturedItems/FeaturedItem.astro

@@ -0,0 +1,50 @@
+---
+export interface FeaturedItemType {
+  isUpcoming?: boolean;
+  isNew?: boolean;
+  url: string;
+  text: string;
+}
+
+export interface Props extends FeaturedItemType {}
+
+const { isUpcoming = false, isNew = false, text, url } = Astro.props;
+---
+
+<a
+  class:list={[
+    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
+    {
+      'opacity-50': isUpcoming,
+    },
+  ]}
+  href={url}
+>
+  <span class='text-slate-400'>
+    {text}
+  </span>
+
+  {
+    isNew && (
+      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center'>
+        <span class='flex h-2 w-2 mr-1.5'>
+          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75' />
+          <span class='relative inline-flex rounded-full h-2 w-2 bg-purple-500' />
+        </span>
+        New
+      </span>
+    )
+  }
+
+  {
+    isUpcoming && (
+      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center'>
+        <span class='flex h-2 w-2 mr-1.5'>
+          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75' />
+          <span class='relative inline-flex rounded-full h-2 w-2 bg-slate-600' />
+        </span>
+        Upcoming
+      </span>
+    )
+  }
+</a>

src/components/FeaturedItems/FeaturedItems.astro

@@ -0,0 +1,33 @@
+---
+import FeaturedItem, { FeaturedItemType } from './FeaturedItem.astro';
+
+export interface Props {
+  featuredItems: FeaturedItemType[];
+  heading: string;
+}
+
+const { featuredItems, heading } = Astro.props;
+---
+
+<div class='py-4 sm:py-14 border-b border-b-[#1e293c] relative'>
+  <div class='container'>
+    <h2 class='hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-[#1e293c] text-md text-slate-400 font-regular'>
+      {heading}
+    </h2>
+
+    <ul class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2'>
+      {
+        featuredItems.map((featuredItem) => (
+          <li>
+            <FeaturedItem
+              text={featuredItem.text}
+              url={featuredItem.url}
+              isNew={featuredItem.isNew}
+              isUpcoming={featuredItem.isUpcoming}
+            />
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</div>

src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro

@@ -1,56 +0,0 @@
----
-import type { RoadmapFileType } from '../../lib/roadmap';
-
-export interface Props {
-  roadmap: RoadmapFileType;
-}
-
-const { roadmap } = Astro.props;
-const frontmatter = roadmap.frontmatter;
-
-let roadmapTitle = frontmatter.featuredTitle;
-
-// Lighthouse considers "Go" as a non-descriptive text such as "Submit" etc.
-// Adding "Roadmap" as a postfix to make it not complain  ¯\_(ツ)_/¯
-if (roadmapTitle === 'Go') {
-  roadmapTitle = 'Go Roadmap';
-}
----
-
-<a
-  class:list={[
-    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
-    {
-      'opacity-50': roadmap.frontmatter.isUpcoming,
-    },
-  ]}
-  href={`/${roadmap.id}/`}
->
-  <span class="text-slate-400">
-    {roadmapTitle}
-  </span>
-
-  {
-    frontmatter.isNew && (
-      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center">
-        <span class="flex h-2 w-2 mr-1.5">
-          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75" />
-          <span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500" />
-        </span>
-        New
-      </span>
-    )
-  }
-
-  {
-    frontmatter.isUpcoming && (
-      <span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center">
-        <span class="flex h-2 w-2 mr-1.5">
-          <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75" />
-          <span class="relative inline-flex rounded-full h-2 w-2 bg-slate-600" />
-        </span>
-        Upcoming
-      </span>
-    )
-  }
-</a>

src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro

@@ -1,31 +0,0 @@
----
-import type { RoadmapFileType } from '../../lib/roadmap';
-import FeaturedRoadmapItem from './FeaturedRoadmapItem.astro';
-
-export interface Props {
-  roadmaps: RoadmapFileType[];
-  heading: string;
-}
-
-const { roadmaps, heading } = Astro.props;
----
-
-<div class="py-4 sm:py-14 border-b border-b-slate-900 relative">
-  <div class="container">
-    <h2
-      class="hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-slate-900 text-md text-slate-400 font-regular"
-    >
-      {heading}
-    </h2>
-
-    <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
-      {
-        roadmaps.map((roadmap) => (
-          <li>
-            <FeaturedRoadmapItem roadmap={roadmap} />
-          </li>
-        ))
-      }
-    </ul>
-  </div>
-</div>

src/components/FeaturedVideos.astro

@@ -18,7 +18,7 @@ const { heading, videos } = Astro.props;
   </div>
 
   <a
-    href='/videos/'
+    href='/videos'
     class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Videos &rarr;
@@ -26,7 +26,7 @@ const { heading, videos } = Astro.props;
 
   <div class='block sm:hidden mt-3'>
     <a
-      href='/videos/'
+      href='/videos'
       class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
     >
       View All Videos &nbsp;&rarr;

src/components/Footer.astro

@@ -4,24 +4,22 @@ import Icon from './Icon.astro';
 
 <div class='py-6 sm:py-16 pb-10 bg-slate-900 text-white'>
   <div class='container'>
-    <p
-      class='text-gray-400 font-medium flex flex-col sm:flex-row gap-0 sm:gap-4 mb-8 sm:mb-16 justify-center'
-    >
+    <p class='text-gray-400 font-medium flex flex-col sm:flex-row gap-0 sm:gap-4 mb-8 sm:mb-16 justify-center'>
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/roadmaps/'>Roadmaps</a
+        href='/roadmaps'>Roadmaps</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/guides/'>Guides</a
+        href='/guides'>Guides</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/videos/'>Videos</a
+        href='/videos'>Videos</a
       >
       <a
         class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
-        href='/about/'>About</a
+        href='/about'>About</a
       >
       <a
         class='transition-colors px-2 py-1.5 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
@@ -51,18 +49,18 @@ import Icon from './Icon.astro';
           </a>
         </p>
         <p class='text-slate-300/60 my-4'>
-          Community created roadmaps, articles, resources and journeys to help
-          you choose your path and grow in your career.
+          Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your
+          career.
         </p>
         <div class='text-gray-400 text-sm'>
           <p>
             &copy; roadmap.sh
             <span class='mx-1.5'>&middot;</span>
-            <a href='/about/' class='hover:text-white'>FAQs</a>
+            <a href='/about' class='hover:text-white'>FAQs</a>
             <span class='mx-1.5'>&middot;</span>
-            <a href='/terms/' class='hover:text-white'>Terms</a>
+            <a href='/terms' class='hover:text-white'>Terms</a>
             <span class='mx-1.5'>&middot;</span>
-            <a href='/privacy/' class='hover:text-white'>Privacy</a>
+            <a href='/privacy' class='hover:text-white'>Privacy</a>
           </p>
         </div>
       </div>
@@ -78,8 +76,8 @@ import Icon from './Icon.astro';
           />
         </a>
         <p class='text-slate-300/60 my-4'>
-          The leading DevOps resource for Kubernetes, cloud-native computing,
-          and the latest in at-scale development, deployment, and management.
+          The leading DevOps resource for Kubernetes, cloud-native computing, and the latest in at-scale development,
+          deployment, and management.
         </p>
         <div class='text-gray-400 text-sm'>
           <p>

src/components/FrameRenderer/FrameRenderer.astro

@@ -0,0 +1,29 @@
+---
+import Loader from '../Loader.astro';
+import TopicOverlay from '../TopicOverlay/TopicOverlay.astro';
+import './FrameRenderer.css';
+
+export interface Props {
+  resourceType: 'roadmap' | 'best-practice';
+  resourceId: string;
+  jsonUrl: string;
+  dimensions?: {
+    width: number;
+    height: number;
+  };
+}
+
+const { resourceId, resourceType, jsonUrl, dimensions = null } = Astro.props;
+---
+
+<div
+  id='resource-svg'
+  style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
+  data-resource-type={resourceType}
+  data-resource-id={resourceId}
+  data-json-url={jsonUrl}
+>
+  <Loader />
+</div>
+
+<script src='./renderer.js'></script>

src/components/FrameRenderer/FrameRenderer.css

@@ -0,0 +1,94 @@
+svg text tspan {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
+}
+
+code {
+  background: #1e1e3f;
+  color: #9efeff;
+  padding: 3px 5px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+svg .clickable-group {
+  cursor: pointer;
+}
+
+svg .clickable-group:hover > [fill='rgb(65,53,214)'] {
+  fill: #232381;
+  stroke: #232381;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,0)'] {
+  fill: #d6d700;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,229,153)'] {
+  fill: #f3c950;
+}
+
+svg .clickable-group:hover > [fill='rgb(153,153,153)'] {
+  fill: #646464;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,255)'] {
+  fill: #d7d7d7;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,221)'] {
+  fill: #e5e5be;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,217,102)'] {
+  fill: #d9b443;
+}
+
+svg .done rect {
+  fill: #cbcbcb !important;
+}
+
+svg .done text {
+  text-decoration: line-through;
+}
+
+svg .clickable-group.done[data-group-id^='check:'] rect {
+  fill: gray !important;
+  stroke: gray;
+}
+
+.clickable-group rect {
+  user-select: none;
+}
+
+/************************************
+    Aspect ratio implementation
+  *************************************/
+[style*='--aspect-ratio'] > :first-child {
+  width: 100%;
+}
+
+[style*='--aspect-ratio'] > img {
+  height: auto;
+}
+
+@supports (--custom: property) {
+  [style*='--aspect-ratio'] {
+    position: relative;
+  }
+
+  [style*='--aspect-ratio']::before {
+    content: '';
+    display: block;
+    /*noinspection CssUnresolvedCustomProperty*/
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
+  }
+
+  [style*='--aspect-ratio'] > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+}