Add typescript roadmap

* 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

.gitignore

@@ -20,3 +20,7 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/
+tests-examples

astro.config.mjs

@@ -9,6 +9,9 @@ import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
 export default defineConfig({
   site: 'https://roadmap.sh',
   markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+    },
     rehypePlugins: [
       [
         rehypeExternalLinks,
@@ -18,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/compress-jsons.cjs

@@ -2,13 +2,18 @@ const fs = require('node:fs');
 const path = require('node:path');
 
 const jsonsDir = path.join(process.cwd(), 'public/jsons');
-const jsonFiles = fs.readdirSync(jsonsDir);
+const childJsonDirs = fs.readdirSync(jsonsDir);
 
-jsonFiles.forEach((jsonFileName) => {
-  console.log(`Compressing ${jsonFileName}...`);
+childJsonDirs.forEach((childJsonDir) => {
+  const fullChildJsonDirPath = path.join(jsonsDir, childJsonDir);
+  const jsonFiles = fs.readdirSync(fullChildJsonDirPath);
 
-  const jsonFilePath = path.join(jsonsDir, jsonFileName);
-  const json = require(jsonFilePath);
+  jsonFiles.forEach((jsonFileName) => {
+    console.log(`Compressing ${jsonFileName}...`);
 
-  fs.writeFileSync(jsonFilePath, JSON.stringify(json));
+    const jsonFilePath = path.join(fullChildJsonDirPath, jsonFileName);
+    const json = require(jsonFilePath);
+
+    fs.writeFileSync(jsonFilePath, JSON.stringify(json));
+  });
 });

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`.
+
+

bin/roadmap-content.cjs

@@ -82,7 +82,7 @@ function prepareDirTree(control, dirTree, dirSortOrders) {
   return { dirTree, dirSortOrders };
 }
 
-const roadmap = require(path.join(__dirname, `../public/jsons/${roadmapId}`));
+const roadmap = require(path.join(__dirname, `../public/jsons/roadmaps/${roadmapId}`));
 const controls = roadmap.mockup.controls.control;
 
 // Prepare the dir tree that we will be creating and also calculate the sort orders

contributing.md

@@ -3,10 +3,10 @@
 First of all thank you for considering to contribute. Please look at the details below:
 
 - [Contribution](#contribution)
-- [New Roadmaps](#new-roadmaps)
-- [Existing Roadmaps](#existing-roadmaps)
-- [Adding Content](#adding-content)
-- [Guidelines](#guidelines)
+  - [New Roadmaps](#new-roadmaps)
+  - [Existing Roadmaps](#existing-roadmaps)
+  - [Adding Content](#adding-content)
+  - [Guidelines](#guidelines)
 
 ## New Roadmaps
 
@@ -23,7 +23,7 @@ For the existing roadmaps, please follow the details listed for the nature of co
 
 ## Adding Content
 
-Find [the content directory inside the relevant roadmap](https://github.com/kamranahmedse/roadmap-astro/tree/master/src/roadmaps). Please keep the following guidelines in mind when submitting content:
+Find [the content directory inside the relevant roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/roadmaps). Please keep the following guidelines in mind when submitting content:
 
 - Content must be in English.
 - Put a brief description about the topic on top of the file and the a list of links below with each link having title of the URL.

package.json

@@ -13,25 +13,28 @@
     "compress:jsons": "node bin/compress-jsons.cjs",
     "upgrade": "ncu -u",
     "roadmap-links": "node bin/roadmap-links.cjs",
-    "roadmap-content": "node bin/roadmap-content.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.8.0",
-    "astro-compress": "^1.1.24",
-    "astro-critters": "^1.1.24",
+    "astro": "^1.9.2",
+    "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": {
-    "@tailwindcss/typography": "^0.5.8",
-    "gh-pages": "^4.0.0",
+    "@playwright/test": "^1.29.2",
+    "@tailwindcss/typography": "^0.5.9",
+    "gh-pages": "^5.0.0",
     "json-to-pretty-yaml": "^1.2.2",
-    "prettier": "^2.8.1",
-    "prettier-plugin-astro": "^0.7.0"
+    "markdown-it": "^13.0.1",
+    "prettier": "^2.8.3",
+    "prettier-plugin-astro": "^0.7.2"
   }
 }

playwright.config.ts

@@ -0,0 +1,108 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+};
+
+export default config;

pnpm-lock.yaml

@@ -3,38 +3,40 @@ lockfileVersion: 5.4
 specifiers:
   '@astrojs/sitemap': ^1.0.0
   '@astrojs/tailwind': ^2.1.3
-  '@tailwindcss/typography': ^0.5.8
-  astro: ^1.8.0
-  astro-compress: ^1.1.24
-  astro-critters: ^1.1.24
-  gh-pages: ^4.0.0
+  '@playwright/test': ^1.29.2
+  '@tailwindcss/typography': ^0.5.9
+  astro: ^1.9.2
+  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
   npm-check-updates: ^16.6.2
-  prettier: ^2.8.1
-  prettier-plugin-astro: ^0.7.0
+  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.8.0
-  astro-compress: 1.1.24
-  astro-critters: 1.1.24
+  astro: 1.9.2
+  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:
-  '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
-  gh-pages: 4.0.0
+  '@playwright/test': 1.29.2
+  '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.4
+  gh-pages: 5.0.0
   json-to-pretty-yaml: 1.2.2
-  prettier: 2.8.1
-  prettier-plugin-astro: 0.7.0
+  markdown-it: 13.0.1
+  prettier: 2.8.3
+  prettier-plugin-astro: 0.7.2
 
 packages:
 
@@ -46,12 +48,8 @@ packages:
       '@jridgewell/trace-mapping': 0.3.17
     dev: false
 
-  /@astrojs/compiler/0.29.19:
-    resolution: {integrity: sha512-lvPpoOA6Fc1NpJrPT65ZOhhFieYkiBds9wzOhWX55lXMUpNPu5CUxqzgDAkNSTIoXHZxkxHfi+6EpFNnRZBBYQ==}
-
   /@astrojs/compiler/0.31.3:
     resolution: {integrity: sha512-WbA05QH5xkdaJ3XtzDuYOjtqsip2InW5rk156sSdaHs5qN2NroUHbzWZthHJwmNAAjQSGXVIj+O6jQj81zzX/Q==}
-    dev: false
 
   /@astrojs/language-server/0.28.3:
     resolution: {integrity: sha512-fPovAX/X46eE2w03jNRMpQ7W9m2mAvNt4Ay65lD9wl1Z5vIQYxlg7Enp9qP225muTr4jSVB5QiLumFJmZMAaVA==}
@@ -59,8 +57,8 @@ packages:
     dependencies:
       '@vscode/emmet-helper': 2.8.6
       events: 3.3.0
-      prettier: 2.8.1
-      prettier-plugin-astro: 0.7.0
+      prettier: 2.8.3
+      prettier-plugin-astro: 0.7.2
       source-map: 0.7.4
       vscode-css-languageservice: 6.2.1
       vscode-html-languageservice: 5.0.3
@@ -586,6 +584,15 @@ packages:
       tiny-glob: 0.2.9
       tslib: 2.4.1
 
+  /@playwright/test/1.29.2:
+    resolution: {integrity: sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@types/node': 17.0.45
+      playwright-core: 1.29.2
+    dev: true
+
   /@pnpm/network.ca-file/1.0.2:
     resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
     engines: {node: '>=12.22.0'}
@@ -633,8 +640,8 @@ packages:
       defer-to-connect: 2.0.1
     dev: false
 
-  /@tailwindcss/typography/0.5.8_tailwindcss@3.2.4:
-    resolution: {integrity: sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==}
+  /@tailwindcss/typography/0.5.9_tailwindcss@3.2.4:
+    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
@@ -762,7 +769,6 @@ packages:
 
   /@types/node/17.0.45:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
-    dev: false
 
   /@types/parse5/6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@@ -778,8 +784,8 @@ packages:
       '@types/node': 17.0.45
     dev: false
 
-  /@types/sharp/0.31.0:
-    resolution: {integrity: sha512-nwivOU101fYInCwdDcH/0/Ru6yIRXOpORx25ynEOc6/IakuCmjOAGpaO5VfUl4QkDtUC6hj+Z2eCQvgXOioknw==}
+  /@types/sharp/0.31.1:
+    resolution: {integrity: sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==}
     dependencies:
       '@types/node': 17.0.45
     dev: false
@@ -933,7 +939,6 @@ packages:
 
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: false
 
   /array-iterate/2.0.1:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
@@ -963,29 +968,22 @@ packages:
       tslib: 2.4.1
     dev: false
 
-  /astro-compress/1.1.24:
-    resolution: {integrity: sha512-S7yzhmYdHxMPn8N3E7XJFKhTuHFrwLovPyhMJAuReVmhISvR0cxubGxaYnSJZrE67vFePj5Y8Gkd82GJIjFS2A==}
+  /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
-      '@types/sharp': 0.31.0
+      '@types/sharp': 0.31.1
       csso: 5.0.5
       files-pipeline: 0.0.2
       html-minifier-terser: 7.1.0
-      sharp: 0.31.2
+      sharp: 0.31.3
       svgo: 3.0.2
       terser: 5.16.1
     dev: false
 
-  /astro-critters/1.1.24:
-    resolution: {integrity: sha512-yyvAka+LeWO0LToHSc53yTjI1eUQqBDBg6uDbjEJ4vvaKegF6z122VPCFQzLe2dPeJiyYLUMUs3W5CIErZEBqQ==}
-    dependencies:
-      critters: 0.0.16
-      files-pipeline: 0.0.2
-    dev: false
-
-  /astro/1.8.0:
-    resolution: {integrity: sha512-MZIJveOC1OCIA0w2XmxjDtKviAEuYdF142DVq0VApInE1lm+CvAoyMgJs0a1h4mydD2vgQZpTjPhYKJIdxDjOA==}
+  /astro/1.9.2:
+    resolution: {integrity: sha512-L+Ma0eR0Aa6QZg7RF0lEs+106Ye1/zukvtq3KtsYIogAojltlwllwU9X5CwMBzFwA55NxpNp4gSRh5US/xb+8Q==}
     engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'}
     hasBin: true
     dependencies:
@@ -1018,7 +1016,7 @@ packages:
       estree-walker: 3.0.1
       execa: 6.1.0
       fast-glob: 3.2.12
-      github-slugger: 1.5.0
+      github-slugger: 2.0.0
       gray-matter: 4.0.3
       html-entities: 2.3.3
       html-escaper: 3.0.3
@@ -1063,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:
@@ -1510,17 +1506,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /critters/0.0.16:
-    resolution: {integrity: sha512-JwjgmO6i3y6RWtLYmXwO5jMd+maZt8Tnfu7VVISmEWyQqfLpB8soBswf8/2bu6SBXxtKA68Al3c+qIG1ApT68A==}
-    dependencies:
-      chalk: 4.1.2
-      css-select: 4.3.0
-      parse5: 6.0.1
-      parse5-htmlparser2-tree-adapter: 6.0.1
-      postcss: 8.4.20
-      pretty-bytes: 5.6.0
-    dev: false
-
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -1536,16 +1521,6 @@ packages:
       type-fest: 1.4.0
     dev: false
 
-  /css-select/4.3.0:
-    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 4.3.1
-      domutils: 2.8.0
-      nth-check: 2.1.1
-    dev: false
-
   /css-select/5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
     dependencies:
@@ -1714,14 +1689,6 @@ packages:
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  /dom-serializer/1.4.1:
-    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 4.3.1
-      entities: 2.2.0
-    dev: false
-
   /dom-serializer/2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
@@ -1734,13 +1701,6 @@ packages:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: false
 
-  /domhandler/4.3.1:
-    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
-    engines: {node: '>= 4'}
-    dependencies:
-      domelementtype: 2.3.0
-    dev: false
-
   /domhandler/5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -1748,14 +1708,6 @@ packages:
       domelementtype: 2.3.0
     dev: false
 
-  /domutils/2.8.0:
-    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
-    dependencies:
-      dom-serializer: 1.4.1
-      domelementtype: 2.3.0
-      domhandler: 4.3.1
-    dev: false
-
   /domutils/3.0.1:
     resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
     dependencies:
@@ -1791,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:
@@ -1824,9 +1776,10 @@ packages:
       once: 1.4.0
     dev: false
 
-  /entities/2.2.0:
-    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
-    dev: false
+  /entities/3.0.1:
+    resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
+    engines: {node: '>=0.12'}
+    dev: true
 
   /entities/4.4.0:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
@@ -2324,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
@@ -2346,6 +2299,10 @@ packages:
     resolution: {integrity: sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==}
     dev: false
 
+  /github-slugger/2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+    dev: false
+
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -3040,6 +2997,12 @@ packages:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
 
+  /linkify-it/4.0.1:
+    resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
   /load-yaml-file/0.2.0:
     resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
     engines: {node: '>=6'}
@@ -3077,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==}
@@ -3183,6 +3147,17 @@ packages:
       - supports-color
     dev: false
 
+  /markdown-it/13.0.1:
+    resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 3.0.1
+      linkify-it: 4.0.1
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
   /markdown-table/3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: false
@@ -3348,6 +3323,10 @@ packages:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
     dev: false
 
+  /mdurl/1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: true
+
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: false
@@ -4207,12 +4186,6 @@ packages:
       unist-util-visit-children: 2.0.1
     dev: false
 
-  /parse5-htmlparser2-tree-adapter/6.0.1:
-    resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
-    dependencies:
-      parse5: 6.0.1
-    dev: false
-
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: false
@@ -4291,6 +4264,12 @@ packages:
     dependencies:
       find-up: 4.1.0
 
+  /playwright-core/1.29.2:
+    resolution: {integrity: sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /postcss-import/14.1.0_postcss@8.4.20:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -4391,25 +4370,20 @@ packages:
       which-pm: 2.0.0
     dev: false
 
-  /prettier-plugin-astro/0.7.0:
-    resolution: {integrity: sha512-ehCUx7MqHWvkHwUmxxAWLsL35pFaCTM5YXQ8xjG/1W6dY2yBhvEks+2aCfjeI5zmMrZNCXkiMQtpznSlLSLrxw==}
-    engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'}
+  /prettier-plugin-astro/0.7.2:
+    resolution: {integrity: sha512-mmifnkG160BtC727gqoimoxnZT/dwr8ASxpoGGl6EHevhfblSOeu+pwH1LAm5Qu1MynizktztFujHHaijLCkww==}
+    engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
     dependencies:
-      '@astrojs/compiler': 0.29.19
-      prettier: 2.8.1
+      '@astrojs/compiler': 0.31.3
+      prettier: 2.8.3
       sass-formatter: 0.7.5
       synckit: 0.8.4
 
-  /prettier/2.8.1:
-    resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==}
+  /prettier/2.8.3:
+    resolution: {integrity: sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  /pretty-bytes/5.6.0:
-    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
-    engines: {node: '>=6'}
-    dev: false
-
   /prismjs/1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -4755,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:
@@ -4858,8 +4832,8 @@ packages:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: false
 
-  /sharp/0.31.2:
-    resolution: {integrity: sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==}
+  /sharp/0.31.3:
+    resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==}
     engines: {node: '>=14.15.0'}
     requiresBuild: true
     dependencies:
@@ -5345,6 +5319,10 @@ packages:
     hasBin: true
     dev: false
 
+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
   /unherit/3.0.1:
     resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==}
     dev: false

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)