Deploy details

3:39:28 AM: Build ready to start

3:39:42 AM: build-image version: 3d3c7e8b4321e2c1a54a2c4584fb46ba742b1630 (focal)

3:39:42 AM: buildbot version: 3d3c7e8b4321e2c1a54a2c4584fb46ba742b1630

3:39:42 AM: Fetching cached dependencies

3:39:42 AM: Starting to download cache of 261.5MB

3:39:44 AM: Finished downloading cache in 2.322s

3:39:44 AM: Starting to extract cache

3:39:47 AM: Finished extracting cache in 2.886s

3:39:47 AM: Finished fetching cache in 5.282s

3:39:47 AM: Starting to prepare the repo for build

3:39:47 AM: Preparing Git Reference refs/heads/master

3:39:49 AM: Starting to install dependencies

3:39:49 AM: Python version set to 3.8

3:39:49 AM: Attempting Ruby version 2.7.1, read from environment

3:39:49 AM: Started restoring cached Ruby version

3:39:49 AM: Finished restoring cached Ruby version

3:39:50 AM: Using Ruby version 2.7.1

3:39:50 AM: Started restoring cached go cache

3:39:50 AM: Finished restoring cached go cache

3:39:51 AM: Installing Go version 1.14.4 (requested 1.14.4)

3:39:54 AM: go version go1.14.4 linux/amd64

3:39:55 AM: Using PHP version 8.0

3:39:56 AM: Started restoring cached Node.js version

3:39:58 AM: Finished restoring cached Node.js version

3:39:58 AM: v12.18.0 is already installed.

3:39:59 AM: Now using node v12.18.0 (npm v6.14.4)

3:39:59 AM: Started restoring cached build plugins

3:39:59 AM: Finished restoring cached build plugins

3:39:59 AM: Started restoring cached corepack dependencies

3:39:59 AM: Finished restoring cached corepack dependencies

3:39:59 AM: No npm workspaces detected

3:39:59 AM: Started restoring cached node modules

3:39:59 AM: Finished restoring cached node modules

3:39:59 AM: Installing npm packages using npm version 6.14.4

3:40:04 AM: npm WARN @apideck/better-ajv-errors@0.2.6 requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself.

3:40:04 AM: npm WARN miayam@1.0.0 No repository field.

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/browser-sync/node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/@11ty/eleventy/node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/@nicolo-ribaudo/chokidar-2/node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/rollup/node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):

3:40:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

3:40:04 AM: audited 1988 packages in 5.426s

3:40:05 AM: 92 packages are looking for funding

3:40:05 AM: run `npm fund` for details

3:40:05 AM: found 503 vulnerabilities (15 low, 378 moderate, 86 high, 24 critical)

3:40:05 AM: run `npm audit fix` to fix them, or `npm audit` for details

3:40:05 AM: npm packages installed

3:40:05 AM: Successfully installed dependencies

3:40:05 AM: Starting build script

3:40:07 AM: Detected 1 framework(s)

3:40:07 AM: "eleventy" at version "0.12.1"

3:40:07 AM: Section completed: initializing

3:40:08 AM: Netlify Build

3:40:08 AM: ────────────────────────────────────────────────────────────────

3:40:08 AM: ​

3:40:08 AM: ❯ Version

3:40:08 AM: @netlify/build 29.39.2

3:40:08 AM: ​

3:40:08 AM: ❯ Flags

3:40:08 AM: baseRelDir: true

3:40:08 AM: buildId: 66287ef067657a0008c3f239

3:40:08 AM: deployId: 66287ef067657a0008c3f23b

3:40:08 AM: ​

3:40:08 AM: ❯ Current directory

3:40:08 AM: /opt/build/repo

3:40:08 AM: ​

3:40:08 AM: ❯ Config file

3:40:08 AM: No config file was defined: using default values.

3:40:08 AM: ​

3:40:08 AM: ❯ Context

3:40:08 AM: production

3:40:08 AM: ​

3:40:08 AM: Build command from Netlify app

3:40:08 AM: ────────────────────────────────────────────────────────────────

3:40:08 AM: ​

3:40:08 AM: $ npm run build

3:40:08 AM: > miayam@1.0.0 build /opt/build/repo

3:40:08 AM: > cross-env NODE_ENV=prod run-s -l clean build:*

3:40:09 AM: [clean ]

3:40:09 AM: [clean ] > miayam@1.0.0 clean /opt/build/repo

3:40:09 AM: [clean ] > rm -rf _site

3:40:09 AM: [clean ]

3:40:09 AM: [build:webpack ]

3:40:09 AM: [build:webpack ] > miayam@1.0.0 build:webpack /opt/build/repo

3:40:09 AM: [build:webpack ] > webpack $npm_package_config_webpack_args

3:40:09 AM: [build:webpack ]

3:40:11 AM: [build:webpack ] Browserslist: caniuse-lite is outdated. Please run:

3:40:11 AM: [build:webpack ] npx browserslist@latest --update-db

3:40:11 AM: [build:webpack ]

3:40:11 AM: [build:webpack ] Why you should do it regularly:

3:40:11 AM: [build:webpack ] https://github.com/browserslist/browserslist#browsers-data-updating

3:40:13 AM: [build:webpack ] Hash: 9590563304968d5f8c0c

3:40:13 AM: [build:webpack ] Version: webpack 4.44.2

3:40:13 AM: [build:webpack ] Time: 2597ms

3:40:13 AM: [build:webpack ] Built at: 04/24/2024 3:40:13 AM

3:40:13 AM: [build:webpack ] Asset Size Chunks Chunk Names

3:40:13 AM: [build:webpack ] ../src/components/templates/404/index.pug 453 bytes [emitted]

3:40:13 AM: [build:webpack ] ../src/components/templates/about/index.pug 457 bytes [emitted]

3:40:13 AM: [build:webpack ] ../src/components/templates/blog/index.pug 455 bytes [emitted]

3:40:13 AM: [build:webpack ] ../src/components/templates/home/index.pug 455 bytes [emitted]

3:40:13 AM: [build:webpack ] assets/fonts/icomoon-tags.eot 2.41 KiB [emitted]

3:40:13 AM: [build:webpack ] assets/fonts/icomoon-tags.svg 3.68 KiB [emitted]

3:40:13 AM: [build:webpack ] assets/fonts/icomoon-tags.ttf 2.25 KiB [emitted]

3:40:13 AM: [build:webpack ] assets/fonts/icomoon-tags.woff 2.33 KiB [emitted]

3:40:13 AM: [build:webpack ] assets/fonts/icomoon-tags.woff2 1.13 KiB [emitted]

3:40:13 AM: [build:webpack ] scripts-404-e4bcebf058bcbc09fed8.js 993 bytes 0 [emitted] [immutable] 404

3:40:13 AM: [build:webpack ] scripts-about-4d030cbb301e69fecf26.js 8.39 KiB 1 [emitted] [immutable] about

3:40:13 AM: [build:webpack ] scripts-about-4d030cbb301e69fecf26.js.LICENSE.txt 131 bytes [emitted]

3:40:13 AM: [build:webpack ] scripts-article-af0ab42dc07f67a02e97.js 1.75 KiB 2 [emitted] [immutable] article

3:40:13 AM: [build:webpack ] scripts-blog-e28bfbe6305e5e02a020.js 8.39 KiB 3 [emitted] [immutable] blog

3:40:13 AM: [build:webpack ] scripts-blog-e28bfbe6305e5e02a020.js.LICENSE.txt 131 bytes [emitted]

3:40:13 AM: [build:webpack ] scripts-home-8d03090afd07bd25188e.js 14.8 KiB 4 [emitted] [immutable] home

3:40:13 AM: [build:webpack ] scripts-home-8d03090afd07bd25188e.js.LICENSE.txt 131 bytes [emitted]

3:40:13 AM: [build:webpack ] scripts-iterator-89b271cfe9d901ba1a4f.js 924 bytes 5 [emitted] [immutable] iterator

3:40:13 AM: [build:webpack ] scripts-share-291e8fe8f4388a2b562a.js 8.99 KiB 6 [emitted] [immutable] share

3:40:13 AM: [build:webpack ] styles-404.css 2 KiB 0 [emitted] 404

3:40:13 AM: [build:webpack ] styles-about.css 12.9 KiB 1 [emitted] about

3:40:13 AM: [build:webpack ] styles-blog.css 12.8 KiB 3 [emitted] blog

3:40:13 AM: [build:webpack ] styles-home.css 18.4 KiB 4 [emitted] home

3:40:13 AM: [build:webpack ] Entrypoint 404 = styles-404.css scripts-404-e4bcebf058bcbc09fed8.js

3:40:13 AM: [build:webpack ] Entrypoint about = styles-about.css scripts-about-4d030cbb301e69fecf26.js

3:40:13 AM: [build:webpack ] Entrypoint blog = styles-blog.css scripts-blog-e28bfbe6305e5e02a020.js

3:40:13 AM: [build:webpack ] Entrypoint home = styles-home.css scripts-home-8d03090afd07bd25188e.js

3:40:13 AM: [build:webpack ] [4] ./src/scripts/utilities/bring.js 441 bytes {2} {4} [built]

3:40:13 AM: [build:webpack ] [20] ./src/constants/share.js 206 bytes {6} [built]

3:40:13 AM: [build:webpack ] + 23 hidden modules

3:40:13 AM: [build:webpack ] Child HtmlWebpackCompiler:

3:40:13 AM: [build:webpack ] 1 asset

3:40:13 AM: [build:webpack ] Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0

3:40:13 AM: [build:webpack ] 1 module

3:40:13 AM: [build:webpack ] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js!src/components/templates/404/_index.scss:

3:40:13 AM: [build:webpack ] Entrypoint mini-css-extract-plugin = *

3:40:13 AM: [build:webpack ] 2 modules

3:40:13 AM: [build:webpack ] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js!src/components/templates/about/_index.scss:

3:40:13 AM: [build:webpack ] Entrypoint mini-css-extract-plugin = *

3:40:13 AM: [build:webpack ] 2 modules

3:40:13 AM: [build:webpack ] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js!src/components/templates/blog/_index.scss:

3:40:13 AM: [build:webpack ] Entrypoint mini-css-extract-plugin = *

3:40:13 AM: [build:webpack ] 2 modules

3:40:13 AM: [build:webpack ] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js!src/components/templates/home/_index.scss:

3:40:13 AM: [build:webpack ] Entrypoint mini-css-extract-plugin = *

3:40:13 AM: [build:webpack ] [1] ./src/assets/fonts/icomoon-tags.eot?k1c4xv 73 bytes {0} [built]

3:40:13 AM: [build:webpack ] [3] ./src/assets/fonts/icomoon-tags.woff2?k1c4xv 75 bytes {0} [built]

3:40:13 AM: [build:webpack ] [4] ./src/assets/fonts/icomoon-tags.ttf?k1c4xv 73 bytes {0} [built]

3:40:13 AM: [build:webpack ] [5] ./src/assets/fonts/icomoon-tags.woff?k1c4xv 74 bytes {0} [built]

3:40:13 AM: [build:webpack ] [6] ./src/assets/fonts/icomoon-tags.svg?k1c4xv 73 bytes {0} [built]

3:40:13 AM: [build:webpack ] + 3 hidden modules

3:40:13 AM: [build:eleventy ]

3:40:13 AM: [build:eleventy ] > miayam@1.0.0 build:eleventy /opt/build/repo

3:40:13 AM: [build:eleventy ] > eleventy

3:40:13 AM: [build:eleventy ]

3:40:15 AM: [build:eleventy ] Caching: https://cms.miayam.io/wp-json/wp/v2/tags

3:40:16 AM: [build:eleventy ] Caching: https://cms.miayam.io/wp-json/wp/v2/posts?orderby=date&order=desc&page=2

3:40:17 AM: [build:eleventy ] Caching: https://cms.miayam.io/wp-json/wp/v2/posts?orderby=date&order=desc&page=1

3:40:18 AM: [build:eleventy ] Writing _site/about/index.html from ./src/pages/about.md.

3:40:18 AM: [build:eleventy ] Writing _site/articles/intermediate-typescript/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/now/index.html from ./src/pages/now.md.

3:40:18 AM: [build:eleventy ] Writing _site/index.html from ./src/pages/home.pug.

3:40:18 AM: [build:eleventy ] Writing _site/now/id/index.html from ./src/pages/sekarang.md.

3:40:18 AM: [build:eleventy ] Writing _site/tags/art/index.html from ./src/pages/tags.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/typescript-fundamental/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/2/index.html from ./src/pages/home.pug.

3:40:18 AM: [build:eleventy ] Writing _site/tags/love/index.html from ./src/pages/tags.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/analisa-pasar-saham/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/tags/slant/index.html from ./src/pages/tags.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/benzema/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/tags/story/index.html from ./src/pages/tags.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/miayam-cms-under-the-hood/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/tags/web/index.html from ./src/pages/tags.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/templat-surat-permohonan-doa/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/responsive/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/melodramatis/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/thomas-muller/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/yu-aoi/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/fida/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/sofie/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/naoko-suzuki-mother-superior/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Writing _site/articles/mely/index.html from ./src/pages/articles.pug.

3:40:18 AM: [build:eleventy ] Benchmark (Data): `./src/_data/articles.js` took 3668ms (70.0%)

3:40:18 AM: [build:eleventy ] Copied 25 files / Wrote 24 files in 4.84 seconds (201.7ms each, v0.12.1)

3:40:18 AM: [build:split-css ]

3:40:18 AM: [build:split-css ] > miayam@1.0.0 build:split-css /opt/build/repo

3:40:18 AM: [build:split-css ] > node src/scripts/tasks/splitCSS.js

3:40:18 AM: [build:split-css ]

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/2/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/about/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/analisa-pasar-saham/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/benzema/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/fida/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/intermediate-typescript/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/melodramatis/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/mely/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/miayam-cms-under-the-hood/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/naoko-suzuki-mother-superior/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/responsive/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/sofie/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/templat-surat-permohonan-doa/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/thomas-muller/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/typescript-fundamental/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/articles/yu-aoi/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/tags/art/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/tags/love/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/tags/slant/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/tags/story/index.html

3:40:19 AM: [build:split-css ] Creating CSS chunk for: /opt/build/repo/_site/tags/web/index.html

3:40:20 AM: [build:split-css ] CSS chunk named 2-2.css for HTML on path /opt/build/repo/_site/2/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-analisa-pasar-saham.css for HTML on path /opt/build/repo/_site/articles/analisa-pasar-saham/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-benzema.css for HTML on path /opt/build/repo/_site/articles/benzema/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-fida.css for HTML on path /opt/build/repo/_site/articles/fida/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-naoko-suzuki-mother-superior.css for HTML on path /opt/build/repo/_site/articles/naoko-suzuki-mother-superior/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-melodramatis.css for HTML on path /opt/build/repo/_site/articles/melodramatis/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-miayam-cms-under-the-hood.css for HTML on path /opt/build/repo/_site/articles/miayam-cms-under-the-hood/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-mely.css for HTML on path /opt/build/repo/_site/articles/mely/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-sofie.css for HTML on path /opt/build/repo/_site/articles/sofie/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-templat-surat-permohonan-doa.css for HTML on path /opt/build/repo/_site/articles/templat-surat-permohonan-doa/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-thomas-muller.css for HTML on path /opt/build/repo/_site/articles/thomas-muller/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-yu-aoi.css for HTML on path /opt/build/repo/_site/articles/yu-aoi/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named tags-art.css for HTML on path /opt/build/repo/_site/tags/art/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named index.css for HTML on path /opt/build/repo/_site/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named tags-story.css for HTML on path /opt/build/repo/_site/tags/story/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named tags-love.css for HTML on path /opt/build/repo/_site/tags/love/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named tags-slant.css for HTML on path /opt/build/repo/_site/tags/slant/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named tags-web.css for HTML on path /opt/build/repo/_site/tags/web/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named about-about.css for HTML on path /opt/build/repo/_site/about/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-responsive.css for HTML on path /opt/build/repo/_site/articles/responsive/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-intermediate-typescript.css for HTML on path /opt/build/repo/_site/articles/intermediate-typescript/index.html created successfully.

3:40:20 AM: [build:split-css ] CSS chunk named articles-typescript-fundamental.css for HTML on path /opt/build/repo/_site/articles/typescript-fundamental/index.html created successfully.

3:40:20 AM: [build:critical-path]

3:40:20 AM: [build:critical-path] > miayam@1.0.0 build:critical-path /opt/build/repo

3:40:20 AM: [build:critical-path] > node src/scripts/tasks/criticalPath.js

3:40:20 AM: [build:critical-path]

3:40:20 AM: [build:critical-path] postcss-discard: postcss.plugin was deprecated. Migration guide:

3:40:20 AM: [build:critical-path] https://evilmartians.com/chronicles/postcss-8-plugin-migration

3:40:22 AM: [build:critical-path] Critical path for 2/index.html {

3:40:22 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}',

3:40:22 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Miayam page 2 | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Miayam page 2 | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}</style>\n' +

3:40:22 AM: [build:critical-path] `<link href="/2-2.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="2" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/2/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="all" style="display:none"><span class="icon-all" aria-label="all" role="img"></span><strong>All</strong><span data-description="Not knowing is Buddha. The Aha! moment is waiting for you.">All</span></p><section class="m-card"><a href="/articles/yu-aoi/"><div class="m-card__header"><h2>Yu Aoi</h2><time datetime="2021-09-05T14:31:56">— Sep 5, 2021</time></div><p>Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/fida/"><div class="m-card__header"><h2>Fida</h2><time datetime="2021-07-20T14:40:54">— Jul 20, 2021</time></div><p>Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/sofie/"><div class="m-card__header"><h2>Sofie</h2><time datetime="2021-06-09T14:39:39">— Jun 9, 2021</time></div><p>Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/naoko-suzuki-mother-superior/"><div class="m-card__header"><h2>Naoko Suzuki (Mother Superior)</h2><time datetime="2021-05-14T15:41:00">— May 14, 2021</time></div><p>Keseluruhan. Optimal. Mencakup semua kualitas. Pewarta paling cantik di NHK News. Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/mely/"><div class="m-card__header"><h2>Mely</h2><time datetime="2021-05-05T16:55:49">— May 5, 2021</time></div><p>Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah. Demi Tuhan, saya tidak kecewa. Saya […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="" data-total="2"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/">1</option><option value="/2/">2</option></select> of 2</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:22 AM: [build:critical-path] }

3:40:23 AM: [build:critical-path] Critical path for about/index.html {

3:40:23 AM: [build:critical-path] css: 'a{word-wrap:break-word}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}',

3:40:23 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>About</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/about/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="About" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/about/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." property="og:description"><meta content="Eleventy" name="generator"><style>a{word-wrap:break-word}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}</style>\n' +

3:40:23 AM: [build:critical-path] `<link href="/about-about.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-about" data-router-view="about"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><h1>About</h1><hr><h2>The Brutalist Blog Site Built &amp; Designed By Muhamad D. R.</h2><p>A blog site to store thoughts and ideas. Built and designed solely by yours truly. It stays true to itself. An entity that is an inhabitant of the web. HTML, CSS, JavaScript, and everything in between bundled together. It's ugly, brutal, a dead simple site, a sore to the eyes, but having no more than is really needed.</p><h2>Table of Contents</h2><ul><li><a href="#introduction">Introduction</a></li><li><a href="#usage">Usage</a></li><li><a href="#special-thanks">Special Thanks</a></li><li><a href="#the-reason-why-i-migrate-from-jekyll">The Reason Why I Migrate From Jekyll To Eleventy</a></li><li><a href="#the-author">The Author</a></li></ul><h2 id="introduction">Introduction</h2><p>A starter project to rebuild <a href="https://miayam.github.io">miayam.github.io</a> from the ground up using <code>Eleventy</code> and friends. It is a foundation on which new <a href="https://miayam.io">miayam.io</a> will be built. Removing Jekyll entirely from the code base 💩.</p><p>What do I need more of in a brutalist website?</p><ul><li>A simple design, component based design that's easy to change and work with. It doesn't have to be <code>React</code>, <code>Angular</code>, <code>Vue</code>, or <code>Svelte</code></li><li>Performance. A super fast jellyfish. 100% lighthouse score</li><li>SEO</li></ul><p>Therefore, this starter project must be:</p><ul><li><a href="#boring">Boring</a></li><li><a href="#atomic">Atomic</a></li><li><a href="#as-few-assets-as-possible">As Few Assets As Possible</a></li></ul><h2 id="boring">Boring</h2><p>I believe in boring technology. Shiny new technology will be obselete in no time, but boring tech will not. <code>Pug</code> for building presentational component. <code>SCSS</code> for styling. <code>Vanilla JS</code> for manipulating the DOM, scripting repetitive tasks, and configuration.</p><h2 id="atomic">Atomic</h2><p><a href="https://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a> is a way to go. It makes the design <strong>modular</strong> that can be easily <strong>managed and updated</strong>. Thanks to Daniel Tonon for <a href="https://css-tricks.com/abem-useful-adaptation-bem/">this great article</a>. He encourages us to combine modified <a href="https://www.smashingmagazine.com/2018/06/bem-for-beginners/"><code>BEM</code></a> naming convention with atomic design methodology. He also wrote pros and cons for his approach and let us decide and manage the trade-off.</p><p>Here's the file structure:</p><pre><code>src\n` +

3:40:23 AM: [build:critical-path] '└── components\n' +

3:40:23 AM: [build:critical-path] ' ├── atoms\n' +

3:40:23 AM: [build:critical-path] ' | └── button\n' +

3:40:23 AM: [build:critical-path] ' | ├── index.pug\n' +

3:40:23 AM: [build:critical-path] ' | ├── _index.scss\n' +

3:40:23 AM: [build:critical-path] ' | └── index.js\n' +

3:40:23 AM: [build:critical-path] ' |── molecules\n' +

3:40:23 AM: [build:critical-path] ' |── organisms\n' +

3:40:23 AM: [build:critical-path] ' └── templates\n' +

3:40:23 AM: [build:critical-path] `</code></pre><p><code>components</code> is an entry point in which <code>Eleventy</code> looks for layouts.</p><h2 id="as-few-assets-as-possible">As Few Assets As Possible</h2><p><code>Webpack</code> is a bundle manager for this project. Any changes to <code>components/templates/**/*/index.js</code> or <code>components/templates/**/*/_index.scss</code> is watched and rebuilt by <code>Webpack</code>. <code>Webpack</code> bundles <code>JavaScript</code> and <code>SCSS</code> code in multiple entry points reside in <code>components/templates</code> which will be injected on every template by <code>HtmlWebpackPlugin</code>. <code>Eleventy</code> will do the rest.</p><p>Here's the file structure:</p><pre><code>src\n` +

3:40:23 AM: [build:critical-path] '└── components \n' +

3:40:23 AM: [build:critical-path] ' ├── atoms\n' +

3:40:23 AM: [build:critical-path] ' ├── molecules\n' +

3:40:23 AM: [build:critical-path] ' ├── organisms\n' +

3:40:23 AM: [build:critical-path] ' └── templates\n' +

3:40:23 AM: [build:critical-path] ' ├── base\n' +

3:40:23 AM: [build:critical-path] ' | └── index.pug\n' +

3:40:23 AM: [build:critical-path] ' ├── 404\n' +

3:40:23 AM: [build:critical-path] ' | ├── index.pug\n' +

3:40:23 AM: [build:critical-path] ' | ├── _index.scss\n' +

3:40:23 AM: [build:critical-path] ' | └── index.js\n' +

3:40:23 AM: [build:critical-path] ' └── home\n' +

3:40:23 AM: [build:critical-path] ' ├── index.pug\n' +

3:40:23 AM: [build:critical-path] ' ├── _index.scss\n' +

3:40:23 AM: [build:critical-path] ' └── index.js\n' +

3:40:23 AM: [build:critical-path] '</code></pre><p>Here\'s the snippet from <code>webpack.common.js</code>:</p><pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> <span class="token constant">ENTRY_POINTS</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span><br><span class="highlight-line"> <span class="token string">\'home\'</span><span class="token punctuation">,</span></span><br><span class="highlight-line"> <span class="token string">\'404\'</span></span><br><span class="highlight-line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">const</span> multipleHtmlPlugins <span class="token operator">=</span> <span class="token constant">ENTRY_POINTS</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span><br><span class="highlight-line"> template<span class="token operator">:</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>basePath<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">/components/templates/base/index.pug</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">,</span></span><br><span class="highlight-line"> filename<span class="token operator">:</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>basePath<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">/components/templates/</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>name<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">/index.pug</span><span class="token string template-punctuation">`</span></span><span class="token punctuation">,</span></span><br><span class="highlight-line"> chunks<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>name<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">]</span><span class="token punctuation">,</span></span><br><span class="highlight-line"> inject<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span><br><span class="highlight-line"> hash<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span><br><span class="highlight-line"> templateParameters<span class="token operator">:</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token comment">// For now, disable analytics for</span></span><br><span class="highlight-line"> <span class="token comment">// starter project landing page</span></span><br><span class="highlight-line"> analytics<span class="token operator">:</span> name <span class="token operator">!==</span> <span class="token string">\'home\'</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> entry<span class="token operator">:</span> <span class="token constant">ENTRY_POINTS</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span> curr</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token operator">...</span>prev<span class="token punctuation">,</span></span><br><span class="highlight-line"> <span class="token punctuation">[</span>curr<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">./src/components/templates/</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>curr<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">/index.js</span><span class="token string template-punctuation">`</span></span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span><br><span class="highlight-line"> plugins<span class="token operator">:</span> <span class="token punctuation">[</span></span><br><span class="highlight-line"> <span class="token operator">...</span>multipleHtmlPlugins<span class="token punctuation">,</span></span><br><span class="highlight-line"> <span class="token operator">...</span> <span class="token comment">// The rest.</span></span><br><span class="highlight-line"> <span class="token punctuation">]</span></span><br><span class="highlight-line"> <span class="token operator">...</span> <span class="token comment">// The rest.</span></span><br><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span></code></pre><p>Here\'s how we inject assets on base template (<code>components/templates/base/index.pug</code>):</p><pre class="language-pug"><code class="language-pug"><span class="highlight-line"><span class="token tag">body</span></span><br><span class="highlight-line"> <span class="token comment">//- Inject assets. 6 spaces is necessary, so that `HtmlWebpackPugPlugin` can</span></span><br><span class="highlight-line"> <span class="token comment">//- translate this snippet to proper pug syntax.</span></span><br><span class="highlight-line"> <span class="token markup">&lt;%= htmlWebpackPlugin.files.css.map((css) =&gt; (</span></span><br><span class="highlight-line"> `link(href<span class="token punctuation">=</span>\\\'${css}\\\', rel<span class="token punctuation">=</span>\'stylesheet\')`)<span class="token punctuation">.</span>join(\'\\n \')`</span><br><span class="highlight-line"> )) %&gt;</span><br><span class="highlight-line"> <span class="token markup">&lt;%= htmlWebpackPlugin.files.js.map((js) =&gt; (</span></span><br><span class="highlight-line"> `script(src<span class="token punctuation">=</span>\\\'${js}\\\', type<span class="token punctuation">=</span>\'text/javascript\', async)`)<span class="token punctuation">.</span>join(\'\\n \')`</span><br><span class="highlight-line"> )) %&gt;</span></code></pre><p>As a result, each template will have distinct minified, production-ready assets that are only required by pages that include it. The assets required by the <em>Home</em> page will not be loaded by the <em>About</em> page. As few assets as possible.</p><h2 id="usage">Usage</h2><ul><li><a href="#requirement">Requirement</a></li><li><a href="#development">Development</a></li><li><a href="#production">Production</a></li></ul><h2 id="requirement">Requirement</h2><p>You must install <a href="https://volta.sh/">volta</a>. You will be using Node.js version <code>12.18.4</code>.</p><p>Run this command to make sure <a href="https://volta.sh/">volta</a> can detect <code>package.json</code>:</p><pre><code>$ source ~/.bashrc\n' +

3:40:23 AM: [build:critical-path] '</code></pre><h2 id="development">Development</h2><p>Install all dependencies:</p><pre><code>$ npm run install\n' +

3:40:23 AM: [build:critical-path] '</code></pre><p>After that, run this command:</p><pre><code>$ npm run start\n' +

3:40:23 AM: [build:critical-path] '</code></pre><p><code>Webpack</code> bundles the assets, <code>Eleventy</code> will do the rest.</p><p>Open <code>localhost:1992</code> to see the result.</p><h2 id="production">Production</h2><p>To build production-ready bundle, run this command:</p><pre><code>$ npm run build\n' +

3:40:23 AM: [build:critical-path] `</code></pre><p>You can host it on <code>Github Pages</code>, <code>Netlify</code>, or else.</p><h2 id="special-thanks">Special Thanks</h2><ul><li>Almighty God</li><li><a href="https://github.com/clenemt/eleventy-webpack">https://github.com/clenemt/eleventy-webpack&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="https://pustelto.com">https://pustelto.com&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2 id="the-reason-why-i-migrate-from-jekyll">The Reason Why I Migrate From Jekyll to Eleventy</h2><p>At first, <a href="https://miayam.io">miayam.io</a> was a personal blog site built with <a href="https://jekyllrb.com/">Jekyll</a> using a theme I picked carelessly without thinking. Two years later, I almost forgot half of the code. Ruby seemed foreign to me. The more I tinkered with it, the more befuddled I was. So, I decided to burn it down and rebuild it from the ground up.</p><p>I was looking for an alternative to <a href="https://jekyllrb.com/">Jekyll</a> written in <code>JavaScript</code> because I am a boring web developer—the kind you can find anywhere else. I tried <a href="https://www.gatsbyjs.com/">Gatsby</a> and wound up getting bored. All those shiny new technologies <a href="https://www.gatsbyjs.com/">Gatsby</a> has to offer were not really what I need. I tried <a href="https://hexo.io/">Hexo</a>. It had a similar ambiance to <a href="https://jekyllrb.com/">Jekyll</a> but it didn't spark joy.</p><p>And then, there was <a href="https://www.11ty.dev/">Eleventy</a>.</p><p>It really was like a magical glove that just fit my brain perfectly. It did one thing, and did it well. A simple SSG (Static Site Generator) that helped provide the barebones of the next generation of <a href="https://miayam.io">miayam.io</a>. And for good reason, the batteries were not included.</p><h2 id="the-author">The Author</h2><p>You can find me on <a href="https://github.com/miayam">GitHub</a>, <a href="https://www.instagram.com/miayamin/">Instagram</a>, <a href="https://twitter.com/___miayam___">Twitter</a>, and <a href="https://www.linkedin.com/in/miayam/">LinkedIn</a>.</p></article></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-about-4d030cbb301e69fecf26.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:23 AM: [build:critical-path] }

3:40:24 AM: [build:critical-path] Critical path for articles/analisa-pasar-saham/index.html {

3:40:24 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:24 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Analisa Pasar Saham</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi.\n' +

3:40:24 AM: [build:critical-path] ' […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/analisa-pasar-saham/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Analisa Pasar Saham" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/analisa-pasar-saham/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi.\n' +

3:40:24 AM: [build:critical-path] ' […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:24 AM: [build:critical-path] ` <link href="/articles-analisa-pasar-saham.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Analisa Pasar Saham</h1><time datetime="2022-08-18T20:51:36">Aug 18, 2022</time></div><div class="m-article__content"><p>Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi.</p><h2>1. Fundamental</h2><p>Analisa berdasarkan logika: "Jika perusahaan bagus maka insyaallah harga saham akan naik.” <em>In fundamental, we trust!</em></p><p><strong>Kelebihan:</strong></p><ul><li>Warren Buffet dan Lo Kheng Hong menggunakan metode ini. Disiplin menyicil dalam jangka waktu panjang seperti Andy Dufresne yang bertahun-tahun melubangi sel penjara menggunakan palu kecil.</li></ul><p><strong>Kelemahan:</strong></p><ul><li>Informasi yang didapat ritel lambat dan terbatas (media gratisan). <a href="https://www.bloomberg.com/professional/solution/bloomberg-terminal/" rel="noreferrer noopener" target="_blank">Bloomberg Terminal</a> harganya mahal.</li><li>Mencocok-cocokkan berita hari ini untuk memproyeksi harga saham di masa depan dengan asumsi semuanya berkorelasi. Perang di Ukraina, keputusan <em>The Fed</em>, resesi, inflasi, dan lain-lain.</li><li>Menguras waktu dan merepotkan. Membaca prospektus, laporan keuangan dan sebagainya.</li><li>Kalau sudah yakin dengan emiten pilihan, maka harus cari-cari pembenaran bilamana harga terus turun. Akumulasi, <em>average down</em>, serok, hajar kanan, membayangkan BBRI dan Bitcoin di tahun 2010. Sulit, sulit.</li></ul><h2>2. Teknikal</h2><p>Harga mencerminkan segalanya. Begitulah yang dikatakan Mario Puguh.</p><p><strong>Kelebihan</strong>:</p><ul><li>Gampang dipelajari. Tinggal tarik-tarik garis dengan ratusan indikator yang dirasa cocok.</li></ul><p><strong>Kelemahan</strong>:</p><ul><li>Tebak-tebak buah manggis. Apa yang terjadi di masa lalu belum tentu akan terulang di masa depan. Sejarah kadang terulang tapi apakah pola-polanya senaif itu?</li><li>Ini seni meyakinkan diri. Tarik garis sini, tarik garis sana. Mau ke sini, eh malah ke sana. Yaaaah!</li><li>Grafik yang sama di waktu yang sama bisa menghasilkan kesimpulan berbeda sesuai emosi dan tendensi. Hmmm, ini pasti naik! Eh, ini sepertinya turun deh. Ah, <em>kumaha sia weh!</em></li><li>Ini metode yang dipakai afiliator <em>binary option</em>. Kenal <a href="https://www.tempo.co/tag/doni-salmanan" rel="noreferrer noopener" target="_blank">Doni Salmanan</a>?</li></ul><h2>3. Bandarmologi</h2><p>Pasar saham adalah ekosistem. Investor culun seperti kamu diibaratkan sebagai <a href="https://id.wikipedia.org/wiki/Plankton" rel="noreferrer noopener" target="_blank">plankton</a> dan para bandar dengan modal raksasa adalah pausnya. Nah, perilaku merekalah yang kita analisa habis-habisan semata-mata untuk melindungi diri agar tidak disantap atau bisa sekalian ikut melahap <a href="https://id.wikipedia.org/wiki/Plankton" rel="noreferrer noopener" target="_blank">plankton</a> yang lebih kecil ketika mereka sedang asyik distribusi.</p><p><strong>Kelebihan:</strong></p><ul><li>Bandar adalah entitas yang hampir selalu untung. Di kasino atau pasar saham sama saja. Jadi, tidak ada salahnya mengikuti pergerakan mereka, bukan? Bukan!</li></ul><p><strong>Kelemahan:</strong></p><ul><li>Sulit dipelajari. Tidak tarik-tarik garis. Tidak akan kaya dalam sekejap.</li><li>Telat masuk atau terlalu cepat keluar (ejakulasi dini).</li><li>Kadang harus <em>cut-loss</em> demi menjaga kewarasan.</li><li>Bandar <em>mah</em> bebas. Seperti psikopat, mereka sulit ditebak.</li><li>Kode broker dihapus. Makin sulit. Eh, tapi bisa diakali <em>atuh</em>.</li><li>Harus punya psikologi dan manajemen keuangan yang baik seperti Mario Puguh.</li></ul><p>Begitulah. Bermanfaat sekali, bukan?</p><p>Sekadar info, Mario Puguh adalah karakter imajiner yang hobinya memotivasi orang lain tapi dirinya sendiri pesimistis. Menceritakan kiat-kiat sukses di pasar saham padahal belum buka akun di sekuritas manapun. Dasar Mario Puguh! <em>Teu puguh, maneh!</em></p></div></article><div class="m-share" data-description="Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi.\n` +

3:40:24 AM: [build:critical-path] ' […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Analisa Pasar Saham" data-url="/articles/analisa-pasar-saham/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/benzema/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Benzema</span></a><a href="/articles/benzema/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/typescript-fundamental/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">TypeScript Fundamentals</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/typescript-fundamental/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="slant"></li><li class="m-iterator__next" data-tag="slant"></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>'

3:40:24 AM: [build:critical-path] }

3:40:25 AM: [build:critical-path] Critical path for articles/benzema/index.html {

3:40:25 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:25 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Benzema</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di Lauhulmahfuz (Arab: لَوْحُ المَحْفُوظٍ) […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/benzema/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Benzema" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/benzema/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di Lauhulmahfuz (Arab: لَوْحُ المَحْفُوظٍ) […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:25 AM: [build:critical-path] `<link href="/articles-benzema.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Benzema</h1><time datetime="2022-06-04T09:19:15">Jun 4, 2022</time></div><div class="m-article__content"><figure class="size-large wp-block-image"><img alt="" data-src="https://miayam.io/assets/images/benzema-1024x685.jpg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="><figcaption>"<em>Aku suka Pop Mie!</em>” — Benzema</figcaption></figure><p>Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di <em>Lauhulmahfuz </em>(Arab: <strong>لَوْحُ المَحْفُوظٍ</strong>) pena telah diangkat, telah mengering tinta, sudah tertera di sana dan Malaikat juga tahu kalau Real Madrid yang jadi juaranya.</p><p>Saya mengenal Benzema sejak beliau masih di Lyon. Tidak terlalu mengikutinya karena memang bukan penggemarnya. Ketika diboyong ke Madrid, media Eropa bilang kalau Benzema adalah hasil kawin silang antara Zidane dan Ronaldo Nazario. Bagi saya, dia adalah Inzaghi yang jarang puasa Senin-Kamis. Saya suka sekali tipe penyerang seperti beliau. Gocek-gocek tipis, lari-lari kecil, nongkrong di kotak penalti lawan sambil menyeduh Pop Mie. Jika kalian ingat Luca Toni, kira-kira gaya permainannya mirip Benzema dewasa ini.</p><p>Apa yang membuat dia begitu spesial? Apa yang bisa kita pelajari dari beliau?</p><p>Dari musim 2009 sampai sekarang, hilir-mudik manajer bergantian dan Benzema selalu jadi pilihan utama—<em>kecuali di awal musim dan saat bersama Morinho</em>. Ketika trio BBC (Bale, Benzema, Cristiano Ronaldo) merajai Eropa, dia memposisikan diri sebagai badan kapal yang menyangga dua roket berkecepatan suara di sayap kiri dan kanan. Di sayap kiri dan kanan, Bale dan Ronaldo sedang asyik menyikat dan menyisir bek-bek mutakhir Eropa. Sementara itu, bisa kita lihat Benzema sedang nongkrong santai di kotak penalti lawan sambil menyeduh Pop Mie. Terkadang beliau mengobrol dengan kiper lawan untuk mengisi waktu. Di kotak sakral itu, beliau menunggu momen paling pas untuk melakukan rangkaian prosedur yang menjadi alasan kenapa ia dibayar mahal—menerima umpan matang atau menyodorkan bola dari Bale ke Ronaldo atau sebaliknya. Dia sangat mengerti peran dan posisinya di lapangan.</p><p>Sebagai pekerja kasar yang ditempatkan di berbagai macam proyek, saya mengenal orang seperti Benzema di pekerjaan saya. Biasanya orang ini berpenampilan tidak menarik, berwajah culun, bertampang cabul tapi punya etos kerja sebesar dunia. Orang ini sangat disiplin dan saat berkata "Okeh Mang, hajar!” dia akan melaksanakan pekerjaannya seperti setan. Saat dua ego raksasa saling silang pendapat, dia akan memberikan masukan secukupnya agar tim tetap waras atau sekadar menyuapi ego ke masing-masing pihak. Dia paham tidak semua orang membaca <em><strong><a href="https://www.goodreads.com/book/show/27036528-ego-is-the-enemy" rel="noreferrer noopener" target="_blank">Ego Is the Enemy</a></strong></em> karya Ryan Holyday.</p><p>Orang-orang hebat terkadang berprilaku eksentrik dan bebal (<em>rieweuh, teu ngawaro jeung hese dibere nyahona</em>). Perlu penyeimbang agar tim tetap solid. Orang-orang seperti Benzema adalah contoh karakter dengan ego tipis yang membawa Real Madrid ke puncak Spanyol dan Eropa meski mulut kotor <strong><em><a href="https://www.youtube.com/c/JustinusLhaksana28">Couch Justin</a></em></strong> terus-menerus memberitakan kebohongan. Dasar pelatih gadungan! Jelek! Botak! Wahai <a href="https://www.youtube.com/c/JustinusLhaksana28"><strong><em>Couch Justin</em></strong></a> yang berwajah kampungan, kembalilah kamu ke pangkuan Yesus. Ikuti ajarannya dan berkata yang baik atau diam!</p><p>Demikian. Wasalam.</p></div></article><div class="m-share" data-description="Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di Lauhulmahfuz (Arab: لَوْحُ المَحْفُوظٍ) […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Benzema" data-url="/articles/benzema/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/miayam-cms-under-the-hood/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Miayam CMS Under The Hood</span></a><a href="/articles/miayam-cms-under-the-hood/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/analisa-pasar-saham/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Analisa Pasar Saham</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/analisa-pasar-saham/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="story"><a href="/articles/templat-surat-permohonan-doa/?tag=story" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Templat Surat Permohonan Doa</span></a><a href="/articles/templat-surat-permohonan-doa/?tag=story" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="story"></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:25 AM: [build:critical-path] }

3:40:26 AM: [build:critical-path] Critical path for articles/fida/index.html {

3:40:26 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:26 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Fida</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/fida/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Fida" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/fida/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:26 AM: [build:critical-path] `<link href="/articles-fida.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a class="a-anchor js-a-anchor m-navigation__back" href="#"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Fida</h1><time datetime="2021-07-20T14:40:54">Jul 20, 2021</time></div><div class="m-article__content"><p>Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, namun beberapa kali dihinggapi ide mengikuti ujian masuk STAN karena diimingi jaminan kesejahteraan setelah lulus. Ekonomi keluarga saya sedang kacau pada waktu itu.</p><p>Di tengah tekanan dari masa depan, munculah cinta baru ke permukaan. Dialah cewek sok cantik yang wangi parfumnya begitu menyengat sampai-sampai tercium oleh saya yang duduk paling belakang di ujung sebelah kanan kelas XII IPA 4. Kami hanya terpisah 2 meja. Saking terganggunya dengan wangi parfumnya, saya menjuluki 2 sekat yang menghimpit mejanya sebagai "Jalur Gazza”.</p><p>Suaranya lemah lembut dan parasnya lumayan. Awalnya terganggu, lama-lama jadi kerasan. Saya jadi sering mencuri pandang menyaksikan dia bersenda gurau dengan teman-temannya. Manis sekali ketika dia tertawa lepas.</p><p>Tahun 2010, Raisa masih belum terkenal seperti sekarang. Kira-kira wajahnya agak mirip Raisa yang sedang sakit tifus. Masih enak dilihat, namun tidak begitu memikat.</p><p>Terus terang, saya enggan mendekatinya karena banyak cowok-cowok udik yang jatuh hati padanya. Bagi saya, bersaing untuk memperebutkan perempuan seperti dia hanya akan meninggalkan selera buruk di mulut.</p><p>Akhirnya, saya memberitahu perasaan saya kepada teman saya yang juga temannya yang saya yakin telah membocorkannya begitu saja. Sepertinya Fida sudah tahu perasaan saya dan mengejek saya dalam hati.</p><p>"Ih, najis!”, begitu katanya dalam hati.</p></div></article><div class="m-share" data-description="Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Fida" data-url="/articles/fida/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/sofie/"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Sofie</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/sofie/"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/yu-aoi/"><span class="m-iterator__wording">Yu Aoi</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/yu-aoi/">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="love"><a class="a-anchor m-iterator__link" href="/articles/sofie/?tag=love"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Sofie</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/sofie/?tag=love"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="love"><a class="a-anchor m-iterator__link" href="/articles/yu-aoi/?tag=love"><span class="m-iterator__wording">Yu Aoi</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/yu-aoi/?tag=love">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:26 AM: [build:critical-path] }

3:40:27 AM: [build:critical-path] Critical path for articles/intermediate-typescript/index.html {

3:40:27 AM: [build:critical-path] css: 'a{word-wrap:break-word}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}html code[class*=language-],html pre[class*=language-]{font-size:16px}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}pre{overflow:auto;background:#111b27;padding:20px}pre code{color:#ebebeb;background-color:#111b27;padding:0}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}pre[class*=language-]{padding:1em 0;margin:.5em 0;overflow:auto}pre[class*=language-]{background:#111b27}.token.comment{color:#8da1b9}.token.punctuation{color:#e3eaf2}.token.constant{color:#e6d37a}.token.class-name{color:#6cb8e6}.token.keyword,.token.operator{color:#e9ae7e}.line-numbers-rows>span:before{color:rgba(141,161,185,.8549019607843137)}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}pre{counter-reset:lineNumber;position:relative}code .highlight-line:before{border-right:1px solid #404040;color:#858585;content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;padding-right:1.2em;text-align:right;width:2.4em}code .code-wrapper{padding-left:80px;max-width:580px;scrollbar-width:thin;-ms-overflow-style:none}code .code-wrapper::-webkit-scrollbar{scrollbar-width:10px}code .code-wrapper::-webkit-scrollbar-track{background:#f1f1f1}code .code-wrapper::-webkit-scrollbar-thumb{background:#888}.line-numbers-rows{position:absolute;background:#111b27;top:50%;transform:translateY(-50%)}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html code[class*=language-],html pre[class*=language-]{font-size:15px}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:27 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Intermediate TypeScript</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="This is a summary of Intermediate TypeScript on Frontend Masters\n' +

3:40:27 AM: [build:critical-path] ' […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/intermediate-typescript/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Intermediate TypeScript" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/intermediate-typescript/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="This is a summary of Intermediate TypeScript on Frontend Masters\n' +

3:40:27 AM: [build:critical-path] ' […]" property="og:description"><meta content="Eleventy" name="generator"><style>a{word-wrap:break-word}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}html code[class*=language-],html pre[class*=language-]{font-size:16px}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}pre{overflow:auto;background:#111b27;padding:20px}pre code{color:#ebebeb;background-color:#111b27;padding:0}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}pre[class*=language-]{padding:1em 0;margin:.5em 0;overflow:auto}pre[class*=language-]{background:#111b27}.token.comment{color:#8da1b9}.token.punctuation{color:#e3eaf2}.token.constant{color:#e6d37a}.token.class-name{color:#6cb8e6}.token.keyword,.token.operator{color:#e9ae7e}.line-numbers-rows>span:before{color:rgba(141,161,185,.8549019607843137)}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}pre{counter-reset:lineNumber;position:relative}code .highlight-line:before{border-right:1px solid #404040;color:#858585;content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;padding-right:1.2em;text-align:right;width:2.4em}code .code-wrapper{padding-left:80px;max-width:580px;scrollbar-width:thin;-ms-overflow-style:none}code .code-wrapper::-webkit-scrollbar{scrollbar-width:10px}code .code-wrapper::-webkit-scrollbar-track{background:#f1f1f1}code .code-wrapper::-webkit-scrollbar-thumb{background:#888}.line-numbers-rows{position:absolute;background:#111b27;top:50%;transform:translateY(-50%)}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html code[class*=language-],html pre[class*=language-]{font-size:15px}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:27 AM: [build:critical-path] ` <link href="/articles-intermediate-typescript.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Intermediate TypeScript</h1><time datetime="2023-07-16T14:49:04">Jul 16, 2023</time></div><div class="m-article__content"><p>This is a summary of <a href="https://frontendmasters.com/courses/intermediate-typescript/" rel="noreferrer noopener" target="_blank">https://frontendmasters.com/courses/intermediate-typescript/&lt;/a&gt;.&lt;/p&gt;&lt;h2&gt;Table of Contents</h2><ul><li><a href="#intro">Intro</a></li><li><a href="#declaration-merging">Declaration Merging</a></li><li><a href="#module-cjs">Module and CJS Interop</a></li><li><a href="#type-queries">Type Queries</a></li><li><a href="#conditional-types">Conditional Types</a></li><li><a href="#extract-and-exclude">Extract and Exclude</a></li><li><a href="#inference">Inference With Conditional Types</a></li><li><a href="#indexed-types">Indexed Accessed Types</a></li><li><a href="#mapped-types">Mapped Types</a></li></ul><h2 id="intro">Intro</h2><p>By the end of the course, we will understand the snippet below:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// Get keys of type T whose values are assignable to type U</span>\n` +

3:40:27 AM: [build:critical-path] 'type FilteredKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">[</span>keyof <span class="token constant">T</span><span class="token punctuation">]</span> <span class="token operator">&amp;</span>\n' +

3:40:27 AM: [build:critical-path] ' keyof <span class="token constant">T</span>\n' +

3:40:27 AM: [build:critical-path] ' \n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * get a subset of Document, consisting only of methods\n' +

3:40:27 AM: [build:critical-path] ' * returning an Element (e.g., querySelector) or an\n' +

3:40:27 AM: [build:critical-path] ' * Element[] (e.g., querySelectorAll)\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type ValueFilteredDoc <span class="token operator">=</span> Pick<span class="token operator">&lt;</span>\n' +

3:40:27 AM: [build:critical-path] ' Document<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' FilteredKeys<span class="token operator">&lt;</span>\n' +

3:40:27 AM: [build:critical-path] ' Document<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Element <span class="token operator">|</span> Element<span class="token punctuation">[</span><span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">&gt;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token operator">&gt;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We must have already completed <a href="https://frontendmasters.com/courses/typescript-v3/" rel="noreferrer noopener" target="_blank" data-id="https://frontendmasters.com/courses/typescript-v3/" data-type="URL">TypeScript Fundamentals</a>.</p><h2 id="declaration-merging">Declaration Merging</h2><p>Type and value can be identified by a single name. What does that mean?</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Fruit</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> string\n' +

3:40:27 AM: [build:critical-path] ' mass<span class="token operator">:</span> number\n' +

3:40:27 AM: [build:critical-path] ' color<span class="token operator">:</span> string\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> Fruit<span class="token operator">:</span> Fruit <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> <span class="token string">"Apple"</span>\n' +

3:40:27 AM: [build:critical-path] ' mass<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' color<span class="token operator">:</span> <span class="token string">"red"</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">export</span> <span class="token punctuation">{</span> Fruit <span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Class can be thought of as a type or a value:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token parameter"><span class="token keyword">public</span> name<span class="token operator">:</span> string<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">public</span> age<span class="token operator">:</span> number<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">public</span> address<span class="token operator">:</span> string<span class="token punctuation">,</span></span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">static</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">public</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">Hi, </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>name<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `<span class="token keyword">const</span> person1<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Tatang'</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'New York'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] 'person1<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> bluePrint <span class="token operator">=</span> Person<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'bluePrint<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="module-cjs">Modules &amp; CJS Interop</h2><p>The JS ecosystem was without an "official” module specification until 2015. There are:</p><ul><li><code>CommonJS</code></li><li><code>AMD</code> (<code>RequireJS</code>)</li><li><code>UMD</code></li></ul><p><code>Node.js</code> still use <code>CommonJS</code>.</p><p>The way TypeScript and JavaScript imports and exports modules are the same:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">export</span> <span class="token keyword">default</span> Share<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] `<span class="token keyword">export</span> <span class="token punctuation">{</span> json <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./promise'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">'./hello'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function function-variable">hi</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hi!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">as</span> greeting <span class="token keyword">from</span> <span class="token string">'./greeting'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `<span class="token keyword">import</span> Share <span class="token keyword">from</span> <span class="token string">'./share'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> greeting <span class="token keyword">from</span> <span class="token string">'./greeting'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">import</span> <span class="token punctuation">{</span> json <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./promise'</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Sometimes we want to import <code>CommonJS</code> module to our project:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// Turn this:</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Into this:</span>\n' +

3:40:27 AM: [build:critical-path] `<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fs <span class="token keyword">from</span> <span class="token string">'fs'</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>But occasionally, you’ll run into a rare situation where the <code>CommonJS</code> module you’re importing from, exports a single thing that’s&nbsp;<em>incompatible</em>&nbsp;with this&nbsp;<em>namespace import</em>&nbsp;technique:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// @filename 'greeting.ts'</span>\n` +

3:40:27 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello there!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">export</span> <span class="token operator">=</span> greeting<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `<span class="token comment">// @filename 'index.ts'</span>\n` +

3:40:27 AM: [build:critical-path] `<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> greeting <span class="token keyword">from</span> <span class="token string">'./greeting'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `<span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>The workaround is to enable <code>esModuleInterop</code> and <code>allowSyntheticDefaultImports</code>.</p><p>To overcome that without enabling <code>esModuleInterop</code> and <code>allowSyntheticDefaultImpots</code>, we must import the module this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">import</span> greeting <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./greeting'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `<span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>With Webpack (or other bundlers), we can import image file this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">import</span> logo <span class="token keyword">from</span> <span class="token string">'./logo.png'</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>But TypeScript will complain about it. So, we must write module declaration for that:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">declare module <span class="token string">'*.png'</span> <span class="token punctuation">{</span>\n` +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">const</span> imageUrl<span class="token operator">:</span> string\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">export</span> <span class="token keyword">default</span> imageUrl\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="type-queries">Type Queries</h2><p>If we want to obtain a type representing properties of an object, we can use <code>keyof</code> operator:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type keys <span class="token operator">=</span> keyof Person<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>If we hover over <code>keys</code>, it’s still <code>keyof Person</code>. Try to append <code>&amp; string</code> and it will display a union of <code>Person</code>‘s properties (<code>"name" | "age"</code>):</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type keys <span class="token operator">=</span> keyof Person <span class="token operator">&amp;</span> string<span class="token punctuation">;</span> <span class="token comment">// "name" | "age" </span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p><code>keyof</code>&nbsp;types become especially useful when combined with mapped types.</p><p><code>typeof</code> will return the type of a value. Remember, in JavaScript you can ask the type of a value with <code>typeof</code> too:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>\n' +

3:40:27 AM: [build:critical-path] ` <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://github.com'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n` +

3:40:27 AM: [build:critical-path] ' Promise<span class="token punctuation">.</span><span class="token function">resove</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' type ResponseType <span class="token operator">=</span> <span class="token keyword">typeof</span> response<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>typeof</code> also represents the blueprint of an object (the class itself):</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">public</span> name<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">static</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ` console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> theClassItself<span class="token operator">:</span> <span class="token keyword">typeof</span> Person <span class="token operator">=</span> Person<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] `<span class="token keyword">const</span> person<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Tatang'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] `theClassItself<span class="token punctuation">.</span><span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="conditional-types">Conditional Types</h2><p>We are used to ternary operation in JavaScript:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">const</span> bla <span class="token operator">=</span> <span class="token function">ifTrue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'bla'</span> <span class="token operator">:</span> <span class="token string">'boo'</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>TypeScript’s conditional types work the same way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n` +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"car"</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' doors<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Motorbike</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"motorbike"</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' engineCapacity<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Boat</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"boat"</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' length<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Airplane</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"airplane"</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' wingspan<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Vehicle <span class="token operator">=</span> Car <span class="token operator">|</span> Motorbike <span class="token operator">|</span> Boat <span class="token operator">|</span> Airplane<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Vehicle</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Car</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">?</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a car with </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">"doors"</span><span class="token punctuation">]</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> doors.</span><span class="token string template-punctuation">`</span></span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">:</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Motorbike</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">?</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a motorbike with an engine capacity of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">"engineCapacity"</span><span class="token punctuation">]</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> cc.</span><span class="token string template-punctuation">`</span></span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">:</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Boat</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">?</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a boat with a length of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">"length"</span><span class="token punctuation">]</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> meters.</span><span class="token string template-punctuation">`</span></span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">:</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Airplane</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">?</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is an airplane with a wingspan of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token string">"wingspan"</span><span class="token punctuation">]</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> meters.</span><span class="token string template-punctuation">`</span></span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">:</span> <span class="token string">"Unknown vehicle type."</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">function</span> getVehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">Vehicle</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>vehicle<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"car"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a car with </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>vehicle<span class="token punctuation">.</span>doors<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> doors.</span><span class="token string template-punctuation">`</span></span> <span class="token keyword">as</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"motorbike"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a motorbike with an engine capacity of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>vehicle<span class="token punctuation">.</span>engineCapacity<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> cc.</span><span class="token string template-punctuation">`</span></span> <span class="token keyword">as</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"boat"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is a boat with a length of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>vehicle<span class="token punctuation">.</span>length<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> meters.</span><span class="token string template-punctuation">`</span></span> <span class="token keyword">as</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>vehicle<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"airplane"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">This is an airplane with a wingspan of </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>vehicle<span class="token punctuation">.</span>wingspan<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string"> meters.</span><span class="token string template-punctuation">`</span></span> <span class="token keyword">as</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token string">"Unknown vehicle type."</span> <span class="token keyword">as</span> VehicleInfo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> car<span class="token operator">:</span> Car <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"car"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> <span class="token string">"Toyota"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' doors<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> motorbike<span class="token operator">:</span> Motorbike <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"motorbike"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> <span class="token string">"Honda"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' engineCapacity<span class="token operator">:</span> <span class="token number">150</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> boat<span class="token operator">:</span> Boat <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"boat"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> <span class="token string">"Yamaha"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' length<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> airplane<span class="token operator">:</span> Airplane <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' type<span class="token operator">:</span> <span class="token string">"airplane"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' brand<span class="token operator">:</span> <span class="token string">"Boeing"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' wingspan<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> carInfo<span class="token operator">:</span> VehicleInfo<span class="token operator">&lt;</span>Car<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">getVehicleInfo</span><span class="token punctuation">(</span>car<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>carInfo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: "This is a car with 4 doors."</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> motorbikeInfo<span class="token operator">:</span> VehicleInfo<span class="token operator">&lt;</span>Motorbike<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">getVehicleInfo</span><span class="token punctuation">(</span>motorbike<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>motorbikeInfo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: "This is a motorbike with an engine capacity of 150 cc."</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> boatInfo<span class="token operator">:</span> VehicleInfo<span class="token operator">&lt;</span>Boat<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">getVehicleInfo</span><span class="token punctuation">(</span>boat<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>boatInfo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: "This is a boat with a length of 10 meters."</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> airplaneInfo<span class="token operator">:</span> VehicleInfo<span class="token operator">&lt;</span>Airplane<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">getVehicleInfo</span><span class="token punctuation">(</span>airplane<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>airplaneInfo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: "This is an airplane with a wingspan of 50 meters."</span>\n' +

3:40:27 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Here’s the formula <code>condition ? exprIfTrue : exprIfFalse</code>.</p><p><code>extends</code> keyword is the only operator for expressing conditions. Not <code>==</code>, <code>&gt;=</code>, <code>&lt;=</code>, <code>&gt;</code>, or <code>&lt;</code>.</p><p><code>T extends U</code> means <code>T</code> must be of <code>U</code> set. Is 24 a part of <code>number</code>? Yes. Is "I love you” a part of <code>number</code>? No.</p><p>If you can figure this out, you are good to go:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type <span class="token constant">A</span> <span class="token operator">=</span> <span class="token number">64</span> <span class="token keyword">extends</span> <span class="token class-name">number</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +
[build:critical-path] 'type <span class="token constant">B</span> <span class="token operator">=</span> number <span class="token keyword">extends</span> <span class="token class-name">64</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">C</span> <span class="token operator">=</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">any</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">D</span> <span class="token operator">=</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">E</span> <span class="token operator">=</span> never <span class="token keyword">extends</span> <span class="token class-name">any</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">F</span> <span class="token operator">=</span> any <span class="token keyword">extends</span> <span class="token class-name">any</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">G</span> <span class="token operator">=</span> Date <span class="token keyword">extends</span> <span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> any <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token constant">H</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> Date<span class="token punctuation">)</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> any <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>In the case of extending a union as a constraint, TypeScript will loop over each member of the union and return a union of its own:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FavoriteColors <span class="token operator">=</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">|</span> <span class="token string">"dark sienna"</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">|</span> <span class="token string">"van dyke brown"</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">|</span> <span class="token string">"yellow ochre"</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">|</span> <span class="token punctuation">[</span>number<span class="token punctuation">,</span> number<span class="token punctuation">,</span> number<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">|</span> <span class="token punctuation">{</span> red<span class="token operator">:</span> number<span class="token punctuation">;</span> green<span class="token operator">:</span> number<span class="token punctuation">;</span> blue<span class="token operator">:</span> number <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type ColorCode<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">string</span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> never<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is "dark sienna" assignable to string type? Yes. Append "dark sienna"</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is "van dyke brown" assignable to string type? Yes. Append "van dyke brown"</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is "yellow ochre" assignable to string type? Yes. Append "yellow ochre"</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is [number, number, number] assignable to string type? No. Ignore it.</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is { red: number; green: number; blue: number } assignable to string type? No. Ignore it.</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// So the ColorCode is a union of "dark sienna" | "van dyke brown" | "yellow ochre"</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">let</span> myColorCode<span class="token operator">:</span> ColorCode<span class="token operator">&lt;</span>FavoriteColors<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token string">"sap green"</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="extract-and-exclude">Extract and Exclude</h2><p><code>Extract</code> is useful for obtaining some sub-part of a type that is assignable to some other type.</p><p><code>Exclude</code>&nbsp;is the opposite of&nbsp;<code>Extract</code>, in that it’s useful for obtaining&nbsp;the part of a type that’s not assignable to some other type.</p><p>Here’s the complete source code for these types:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Exclude from T those types that are assignable to U\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Exclude<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> never <span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Extract from T those types that are assignable to U\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Extract<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="inference">Inference With Conditional Types</h2><p>The&nbsp;<code>infer</code>&nbsp;keyword compliments conditional types and cannot be used outside an&nbsp;<code>extends</code>&nbsp;clause.&nbsp;<code>infer</code>&nbsp;allows us <strong>extract</strong> <strong>and</strong> <strong>obtain</strong>&nbsp;type information from larger types.</p><p>Collect the first constructor argument type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type ConstructorArg<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> <span class="token keyword">new</span> <span class="token punctuation">(</span>arg<span class="token operator">:</span> infer <span class="token constant">A</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> any <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token constant">A</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>Function’s first argument type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FirstArg<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token parameter">firstArg<span class="token operator">:</span> infer <span class="token constant">A</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> any <span class="token operator">?</span> <span class="token constant">A</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>Function’s second argument type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type SecondArg<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token parameter">firstArg<span class="token operator">:</span> any<span class="token punctuation">,</span> secondArg<span class="token operator">:</span> infer <span class="token constant">A</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> any <span class="token operator">?</span> <span class="token constant">A</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>Function’s return type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type ReturnTypeFunc<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>infer <span class="token constant">A</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token constant">A</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>Array’s item type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type ArrayItem<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span>infer <span class="token constant">A</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token constant">A</span> <span class="token operator">:</span> never<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>Promise’s return type:</p><pre class="wp-block-code" data-language="html"><code class="language-html"><div class="code-wrapper">type PromiseReturn<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>T</span><span class="token punctuation">&gt;</span></span> = T extends Promise<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>infer</span> <span class="token attr-name">A</span><span class="token punctuation">&gt;</span></span> ? A : never;</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><h2 id="indexed-types">Indexed Accessed Types</h2><p>Let’s say we have a nested object like this:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> <span class="token string">"Tatang S."</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' contact<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' phone<span class="token operator">:</span> <span class="token string">"0251322387"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' email<span class="token operator">:</span> <span class="token string">"tatang.example.org"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' fax<span class="token operator">:</span> <span class="token string">"029328392999"</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We give a type definition to that object literal this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' contact<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' phone<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' email<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' fax<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">const</span> person<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> <span class="token string">"Tatang S."</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' contact<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' phone<span class="token operator">:</span> <span class="token string">"0251322387"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' email<span class="token operator">:</span> <span class="token string">"tatang.example.org"</span><span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' fax<span class="token operator">:</span> <span class="token string">"029328392999"</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We can get the type definition of <code>contact</code> without authoring another type/interface by accessing the indexed type:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// This way</span>\n' +

3:40:27 AM: [build:critical-path] `type Contact <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">'contact'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Instead of</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Contact</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' phone<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' email<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' fax<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] `<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We can also use <code>|</code> to access multiple indexed types in <code>Person</code>:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type UnionOfNameAndContact <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">'name'</span> <span class="token operator">|</span> <span class="token string">'contact'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><h2 id="mapped-types">Mapped Types</h2><p>It’s a more spesific form of index signatures where you can loop over keys and specify its values based on it. It’s safe to think of <code>Array.map</code> as a mental model:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type MyPetKeys <span class="token operator">=</span> <span class="token string">'dog'</span> <span class="token operator">|</span> <span class="token string">'cat'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Dog <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canBark</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Cat <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canMeow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Fish <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canSwim</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Duck <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canQuack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Pet</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' dog<span class="token operator">:</span> Dog<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' cat<span class="token operator">:</span> Cat<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' fish<span class="token operator">:</span> Fish<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' duck<span class="token operator">:</span> Duck\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type MyPet <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key <span class="token keyword">in</span> MyPetKeys<span class="token punctuation">]</span><span class="token operator">:</span> Pet<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Only Dog and Cat</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>With that, we can understand what’s under the hood of built-in utility <code>Record</code>:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// keyof any is equivalent to symbol | number | string</span>\n' +
[build:critical-path] 'type Record<span class="token operator">&lt;</span>KeyType <span class="token keyword">extends</span> <span class="token class-name">keyof</span> any<span class="token punctuation">,</span> ValueType<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> KeyType<span class="token punctuation">]</span><span class="token operator">:</span> ValueType \n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>And <code>Pick</code>:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Pick<span class="token operator">&lt;</span>Type<span class="token punctuation">,</span> Keys <span class="token keyword">extends</span> <span class="token class-name">keyof</span> Type<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> Keys<span class="token punctuation">]</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Key<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] `<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We can improve <code>MyPet</code> above this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type MyPetKeys <span class="token operator">=</span> <span class="token string">'dog'</span> <span class="token operator">|</span> <span class="token string">'cat'</span><span class="token punctuation">;</span>\n` +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Dog <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canBark</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Cat <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canMeow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Fish <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canSwim</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Duck <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">canQuack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Pet</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' dog<span class="token operator">:</span> Dog<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' cat<span class="token operator">:</span> Cat<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' fish<span class="token operator">:</span> Fish<span class="token punctuation">,</span>\n' +

3:40:27 AM: [build:critical-path] ' duck<span class="token operator">:</span> Duck\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type MyPet <span class="token operator">=</span> Pick<span class="token operator">&lt;</span>Pet<span class="token punctuation">,</span> MyPetKeys<span class="token operator">&gt;</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Mapped types can be used to change the access type (read only, optional, required) of object properties:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Make all properties in Type optional\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Partial<span class="token operator">&lt;</span>Type<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof Type<span class="token punctuation">]</span><span class="token operator">?</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Key<span class="token punctuation">]</span> \n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Make all properties in Type required\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Required<span class="token operator">&lt;</span>Type<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof Type<span class="token punctuation">]</span><span class="token operator">-</span><span class="token operator">?</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Key<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Make all properties in Type readonly\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Readonly<span class="token operator">&lt;</span>Type<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' readonly <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof Type<span class="token punctuation">]</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Key<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/**\n' +

3:40:27 AM: [build:critical-path] ' * Remove readonly in Type\n' +

3:40:27 AM: [build:critical-path] ' */</span>\n' +

3:40:27 AM: [build:critical-path] 'type Notreadonly<span class="token operator">&lt;</span>Type<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token operator">-</span>readonly <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof Type<span class="token punctuation">]</span><span class="token operator">:</span> Type<span class="token punctuation">[</span>Key<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>TypeScript 4.1 brought with it&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html" rel="noreferrer noopener" target="_blank">template literal types</a>. It’s useful for authoring a typed class that has many methods with similar prefixes like <code>get</code> or <code>set</code>:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">IPerson</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Setter <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof IPerson <span class="token keyword">as</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">set</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>Capitalize<span class="token operator">&lt;</span>Key<span class="token operator">&gt;</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">arg<span class="token operator">:</span> IPerson<span class="token punctuation">[</span>Key<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type Getter <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span>Key <span class="token keyword">in</span> keyof IPerson <span class="token keyword">as</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">get</span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>Capitalize<span class="token operator">&lt;</span>Key<span class="token operator">&gt;</span><span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> IPerson<span class="token punctuation">[</span>Key<span class="token punctuation">]</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token keyword">implements</span> <span class="token class-name">IPerson</span><span class="token punctuation">,</span> Getter<span class="token punctuation">,</span> Setter <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">public</span> name<span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token keyword">public</span> age<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">setName</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function">setAge</span><span class="token punctuation">(</span><span class="token parameter">age<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Now we are set to go through this challenging type information:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// Get keys of type T whose values are assignable to type U</span>\n' +

3:40:27 AM: [build:critical-path] 'type FilteredKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">[</span>keyof <span class="token constant">T</span><span class="token punctuation">]</span> <span class="token operator">&amp;</span> keyof <span class="token constant">T</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Take the first layer:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FilterType<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>We take two type parameters <code>T</code> and <code>U</code>. Map all keys of <code>T</code> this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><p>With conditional types, we make sure that <code>T[P]</code> is a subset of <code>U</code> and then extract <code>P</code> if condition met:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FilterType<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">greet</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token function function-variable">sleep</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">time<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] 'type <span class="token function function-variable">Verb</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arg<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> any<span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is string assignable / a subset of Verb? No. Assign never</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is number assignable / a subset of Verb? No. Assign never</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is () =&gt; void assignable / a subset of Verb? Yes. Assign "greet"</span>\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">// Is (time: number) =&gt; void assignable / a subset of Verb? Yes. Assign "sleep"</span>\n' +

3:40:27 AM: [build:critical-path] 'type FilteredType <span class="token operator">=</span> FilterType<span class="token operator">&lt;</span>Person<span class="token punctuation">,</span> Verb<span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/* We will end up with:\n' +

3:40:27 AM: [build:critical-path] ' *\n' +

3:40:27 AM: [build:critical-path] ' * {\n' +

3:40:27 AM: [build:critical-path] ' * name: never;\n' +

3:40:27 AM: [build:critical-path] ' * age: never;\n' +

3:40:27 AM: [build:critical-path] ' * greet: "greet";\n' +

3:40:27 AM: [build:critical-path] ' * sleep: "sleep";\n' +

3:40:27 AM: [build:critical-path] ' * }\n' +

3:40:27 AM: [build:critical-path] '*/</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>With indexed accessed types, we can get a union of <code>"greet" | "sleep"</code> this way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FilteredType <span class="token operator">=</span> FilterType<span class="token operator">&lt;</span>Person<span class="token punctuation">,</span> Verb<span class="token operator">&gt;</span><span class="token punctuation">;</span>\n' +

3:40:27 AM: [build:critical-path] 'type FilteredKeys <span class="token operator">=</span> FilteredType<span class="token punctuation">[</span>keyof Person<span class="token punctuation">]</span> <span class="token operator">&amp;</span> keyof Person\n' +

3:40:27 AM: [build:critical-path] '\n' +

3:40:27 AM: [build:critical-path] '<span class="token comment">/* We will end up with:\n' +

3:40:27 AM: [build:critical-path] ' *\n' +

3:40:27 AM: [build:critical-path] ' * "greet" | "sleep"\n' +

3:40:27 AM: [build:critical-path] '*/</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>&amp; keyof Person</code> is to make sure that the result is a subset of all properties in <code>Person</code>.</p><p>To make it more concise:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type FilteredKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">U</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:27 AM: [build:critical-path] ' <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">U</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never\n' +

3:40:27 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">[</span>keyof <span class="token constant">T</span><span class="token punctuation">]</span> <span class="token operator">&amp;</span> keyof <span class="token constant">T</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Hooray!</p></div></article><div class="m-share" data-description="This is a summary of Intermediate TypeScript on Frontend Masters\n' +

3:40:27 AM: [build:critical-path] ' […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Intermediate TypeScript" data-url="/articles/intermediate-typescript/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/typescript-fundamental/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">TypeScript Fundamentals</span></a><a href="/articles/typescript-fundamental/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"></li><li class="m-iterator__prev" data-tag="web"><a href="/articles/typescript-fundamental/?tag=web" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">TypeScript Fundamentals</span></a><a href="/articles/typescript-fundamental/?tag=web" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="web"></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>'
[build:critical-path] }

3:40:28 AM: [build:critical-path] Critical path for articles/melodramatis/index.html {

3:40:28 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.m-share{display:block;margin-top:60px}.m-share__desc{font-weight:700;font-family:Arial,Helvetica,sans-serif;text-align:left;margin:0 0 12.8px;padding:0 20px;font-size:16px;font-size:1rem;line-height:.97849}@media only screen and (max-width:768px){.m-share__desc{padding:0 16px;font-size:15px;font-size:1rem;line-height:.99084}.m-share__wrapper{padding:0}}.m-share__wrapper{display:block;background:#fff;padding:0}.m-share__item{display:inline-block;border:0;background:0 0;padding:10px 20px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}.m-share__item{padding:10px 16px}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:28 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Melodramatis</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Sepenggal kisah lama yang terlalu usang untuk dikisahkan.\n' +

3:40:28 AM: [build:critical-path] ' […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/melodramatis/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Melodramatis" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/melodramatis/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Sepenggal kisah lama yang terlalu usang untuk dikisahkan.\n' +

3:40:28 AM: [build:critical-path] ' […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.m-share{display:block;margin-top:60px}.m-share__desc{font-weight:700;font-family:Arial,Helvetica,sans-serif;text-align:left;margin:0 0 12.8px;padding:0 20px;font-size:16px;font-size:1rem;line-height:.97849}@media only screen and (max-width:768px){.m-share__desc{padding:0 16px;font-size:15px;font-size:1rem;line-height:.99084}.m-share__wrapper{padding:0}}.m-share__wrapper{display:block;background:#fff;padding:0}.m-share__item{display:inline-block;border:0;background:0 0;padding:10px 20px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}.m-share__item{padding:10px 16px}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:28 AM: [build:critical-path] ` <link href="/articles-melodramatis.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a class="a-anchor js-a-anchor m-navigation__back" href="#"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Melodramatis</h1><time datetime="2022-01-01T13:38:43">Jan 1, 2022</time></div><div class="m-article__content"><figure class="size-large wp-block-image"><img alt="" data-src="https://miayam.io/assets/images/Mely-1024x724.jpg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="></figure></div></article><div class="m-share" data-description="Sepenggal kisah lama yang terlalu usang untuk dikisahkan.\n` +

3:40:28 AM: [build:critical-path] ' […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Melodramatis" data-url="/articles/melodramatis/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/thomas-muller/"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Thomas Muller</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/thomas-muller/"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/responsive/"><span class="m-iterator__wording">Responsive</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/responsive/">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="art"></li><li class="m-iterator__next" data-tag="art"></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>'

3:40:28 AM: [build:critical-path] }

3:40:29 AM: [build:critical-path] Critical path for articles/mely/index.html {

3:40:29 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:29 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Mely</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah. Demi Tuhan, saya tidak kecewa. Saya […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/mely/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Mely" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/mely/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah. Demi Tuhan, saya tidak kecewa. Saya […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:29 AM: [build:critical-path] `<link href="/articles-mely.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a class="a-anchor js-a-anchor m-navigation__back" href="#"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Mely</h1><time datetime="2021-05-05T16:55:49">May 5, 2021</time></div><div class="m-article__content"><p>Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah.</p><p>Demi Tuhan, saya tidak kecewa. Saya tidak mengutuk pernikahan mereka sekotoran kuku sekalipun.</p><p>Saya ingat ketika dia duduk di tangga sendirian, tersenyum basa-basi sambil menyapa saya dengan sopan. Waktu itu semester baru dan sudah beberapa minggu kami tidak berjumpa. Saya meresponnya dengan angkuh demi menutupi perasaan gugup karena kasmaran.</p><p>Saya jatuh cinta.</p><p>Mely hanya perempuan biasa, dia tidak begitu cantik, sangat jauh bila dibandingkan dengan aktris porno favorit saya. Dia setahun lebih tua dan senior saya di kampus. Dia juga termasuk cewek populer di kalangan mahasiswa baru.</p><p>Ini jelas bukan hasrat seksual, perasaan berdebar ini sama seperti ketika saya memeluk atau mencium keponakan. Benar-benar tidak masuk akal.</p><p>Ada pengalaman menarik yang tidak mungkin dilupakan. Temannya sering bilang kalau wajah saya sekilas mirip dia. Pernahkah kamu mendapatkan pujian semanis itu? Kata-kata itu melambungkan badan saya sampai ke atap kampus. Belum pernah saya merasa seganteng itu.</p><p>Mungkin Mely tidak merasakan hal yang sama, lagi pula saya tidak berminat mendeklarasikan perasaan koyak ini. Ada banyak laki-laki santun untuk perempuan berhijab dari keluarga baik-baik seperti dia. Saya tidak akan keberatan.</p><p>Biarkan perasaan berdebar ini menguat seiring berjalannya waktu, sampai saat wajahmu berkeriput dan payudara mungilmu berubah bentuk seperti lipatan perut. Suatu saat pasti akan tumbuh cinta baru.</p><p>Dedikasi saya selama 10 tahun memendam perasaan ini sangat membantu mengasah kemampuan menulis saya. Terima kasih sayangku Mely.</p><p>Saya sayang kamu.</p><p>Malaikat juga tahu siapa yang jadi juaranya.</p><p>Dialah laki-laki jelek yang sekarang jadi suami kamu.</p></div></article><div class="m-share" data-description="Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah. Demi Tuhan, saya tidak kecewa. Saya […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Mely" data-url="/articles/mely/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"></li><li class="m-iterator__next" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/naoko-suzuki-mother-superior/"><span class="m-iterator__wording">Naoko Suzuki (Mother Superior)</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/naoko-suzuki-mother-superior/">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="love"></li><li class="m-iterator__next" data-tag="love"><a class="a-anchor m-iterator__link" href="/articles/naoko-suzuki-mother-superior/?tag=love"><span class="m-iterator__wording">Naoko Suzuki (Mother Superior)</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/naoko-suzuki-mother-superior/?tag=love">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:29 AM: [build:critical-path] }

3:40:30 AM: [build:critical-path] Critical path for articles/miayam-cms-under-the-hood/index.html {

3:40:30 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:30 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Miayam CMS Under The Hood</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="All contents here are served by https://cms.miayam.io. First of all, I don’t do DevOps. I just follow tutorials on Internet […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/miayam-cms-under-the-hood/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Miayam CMS Under The Hood" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/miayam-cms-under-the-hood/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="All contents here are served by https://cms.miayam.io. First of all, I don’t do DevOps. I just follow tutorials on Internet […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:30 AM: [build:critical-path] `<link href="/articles-miayam-cms-under-the-hood.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Miayam CMS Under The Hood</h1><time datetime="2022-05-22T07:39:42">May 22, 2022</time></div><div class="m-article__content"><p>All contents here are served by <a href="https://cms.miayam.io" rel="noreferrer noopener" target="_blank">https://cms.miayam.io&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;First of all, I don’t do DevOps. I just follow tutorials on Internet blindly. 3 months ago, I set up CI/CD pipeline with GitHub Actions, but now I miss the forest for the tress a.k.a I have no clue about it. That’s probably the reason why I have respect for anyone who dirty their hands with this kind of stuff. Just give all your money to DevOps, you dummy!</p><p>This article is just a reminder for the dumb me.</p><p>What kind of CMS am I looking for?</p><ul><li>A headless CMS that can spew contents in JSON format</li><li>Packaged as a Docker image so I can move it around from one free cloud service to another</li><li>Easy to use</li><li>If I got any issues, I can solve it by copy-pasting error message on Google search bar</li></ul><p>My choice goes to <a href="https://wordpress.org/" rel="noreferrer noopener" target="_blank">WordPress</a>. It is simple, useful, battle-tested and of course boring.</p><p>To set up <a href="https://wordpress.org/" rel="noreferrer noopener" target="_blank">WordPress</a> with Docker Compose, I need to follow <a href="https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-docker-compose" rel="noreferrer noopener" target="_blank">https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-docker-compose&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;To understand what the heck AWS EC2 is, I need to follow <a href="https://srepollock.medium.com/wordpress-in-a-docker-container-on-an-aws-ec2-instance-acb9b2243040" rel="noreferrer noopener" target="_blank">https://srepollock.medium.com/wordpress-in-a-docker-container-on-an-aws-ec2-instance-acb9b2243040&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;To set up <a href="https://wordpress.org/" rel="noreferrer noopener" target="_blank">WordPress</a> REST API and trigger <a href="https://www.netlify.com/" rel="noreferrer noopener" target="_blank">Netlify</a> deployment whenever new post created, I need to follow <a href="https://egghead.io/courses/headless-wordpress-4a14" rel="noreferrer noopener" target="_blank">https://egghead.io/courses/headless-wordpress-4a14&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;To enable lazy-loading for <code>iframes</code>, <code>images</code> and <code>scripts</code>, I need to follow <a href="https://wptips.dev/lazyload-without-plugin/" rel="noreferrer noopener" target="_blank">https://wptips.dev/lazyload-without-plugin/&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;To enable REST API for my modest search engine, I need to install <a href="https://wordpress.org/plugins/relevanssi/" rel="noreferrer noopener" target="_blank">https://wordpress.org/plugins/relevanssi/&lt;/a&gt; and <a href="https://wordpress.org/plugins/rest-api-for-relevanssi/" rel="noreferrer noopener" target="_blank">https://wordpress.org/plugins/rest-api-for-relevanssi/&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;To build a search bar of my own, I need to re-read my own blog post <a href="https://miayam.github.io/javascript/2017/06/06/day6-javascript-challenge" rel="noreferrer noopener" target="_blank">https://miayam.github.io/javascript/2017/06/06/day6-javascript-challenge&lt;/a&gt;.&lt;/p&gt;&lt;p&gt;That’s all.</p></div></article><div class="m-share" data-description="All contents here are served by https://cms.miayam.io. First of all, I don’t do DevOps. I just follow tutorials on Internet […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Miayam CMS Under The Hood" data-url="/articles/miayam-cms-under-the-hood/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/templat-surat-permohonan-doa/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Templat Surat Permohonan Doa</span></a><a href="/articles/templat-surat-permohonan-doa/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/benzema/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Benzema</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/benzema/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="web"><a href="/articles/responsive/?tag=web" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Responsive</span></a><a href="/articles/responsive/?tag=web" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="web"><a href="/articles/typescript-fundamental/?tag=web" class="a-anchor m-iterator__link"><span class="m-iterator__wording">TypeScript Fundamentals</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/typescript-fundamental/?tag=web" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:30 AM: [build:critical-path] }

3:40:30 AM: [build:critical-path] Critical path for articles/naoko-suzuki-mother-superior/index.html {

3:40:30 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:30 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Naoko Suzuki (Mother Superior)</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Keseluruhan. Optimal. Mencakup semua kualitas. Pewarta paling cantik di NHK News. Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/naoko-suzuki-mother-superior/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Naoko Suzuki (Mother Superior)" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/naoko-suzuki-mother-superior/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Keseluruhan. Optimal. Mencakup semua kualitas. Pewarta paling cantik di NHK News. Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:30 AM: [build:critical-path] `<link href="/articles-naoko-suzuki-mother-superior.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Naoko Suzuki (Mother Superior)</h1><time datetime="2021-05-14T15:41:00">May 14, 2021</time></div><div class="m-article__content"><p>Keseluruhan. Optimal. Mencakup semua kualitas.</p><figure class="size-large wp-block-image"><img alt="" data-src="https://nius.moviebloc.com/news/20230908/org/8dfb1fe7cad0552a06216f12f817959f.jpg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="><figcaption>Dapatkan gambar ini di:&nbsp;<a href="https://www.sanspo.com/article/20230908-PPQPDM2Z6JECRMECI5FBYSFCOA/" rel="noreferrer noopener" target="_blank">sanspo.com</a>&nbsp;|&nbsp;<a href="https://www.sanspo.com/article/20230908-PPQPDM2Z6JECRMECI5FBYSFCOA/" rel="noreferrer noopener" target="_blank">Detail lisensi</a><br>Pembuat:&nbsp;サンスポ&nbsp;|&nbsp;Kredit:&nbsp;サンスポ<br>Hak Cipta:&nbsp;サンスポ</figcaption></figure><p>Pewarta paling cantik di NHK News.</p><p>Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang mengatakan bahwa pada suatu ketika seseorang "memilikinya”, kemudian lenyap begitu saja tanpa sisa. Teori ini berlaku untuk semua orang tak terkecuali bagi Naoko Suzuki.</p><p>Mungkin beliau tidak menyadari bahwa waktu itu biadab. Sedikit demi sedikit kecantikannya luntur dimakan usia. Garis tipis di sekitar pipinya mulai kentara. Riasannya juga jadi semakin tebal. Waktu adalah keniscayaan… Demi waktu, sesungguhnya manusia kerugian, kecuali bagi mereka yang beriman dan beramal saleh…</p><p>Saat di usia awal 30-an, beliau masih lucu dan lincah mengabarkan prakiraan cuaca. Gerakan lengannya begitu sensual, erotis dan menantang sampai-sampai membuat saya terangsang. Beliau pantas saya juluki sebagai "Mother Superior”. Makhluk ajaib dari antah-berantah yang mampu meremas kemaluan saya dari kejauhan.</p><p>Saya tidak tahu gaya hidup macam apa yang membuat kecantikannya luntur begitu cepat. Apakah karena pernikahannya dengan laki-laki bangsat direktur NHK itu? Seharusnya di usianya yang masih 39 tahun beliau masih bisa mempertahankan elastisitas kulit di wajahnya. Memang sayang sekali.</p></div></article><div class="m-share" data-description="Keseluruhan. Optimal. Mencakup semua kualitas. Pewarta paling cantik di NHK News. Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Naoko Suzuki (Mother Superior)" data-url="/articles/naoko-suzuki-mother-superior/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/mely/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Mely</span></a><a href="/articles/mely/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/sofie/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Sofie</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/sofie/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="love"><a href="/articles/mely/?tag=love" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Mely</span></a><a href="/articles/mely/?tag=love" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="love"><a href="/articles/sofie/?tag=love" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Sofie</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/sofie/?tag=love" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:30 AM: [build:critical-path] }

3:40:31 AM: [build:critical-path] Critical path for articles/responsive/index.html {

3:40:31 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:31 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Responsive</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code? 🌐&nbsp;Live Demo https://responsive.miayam.io […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/responsive/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Responsive" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/responsive/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code? 🌐&nbsp;Live Demo https://responsive.miayam.io […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:31 AM: [build:critical-path] `<link href="/articles-responsive.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Responsive</h1><time datetime="2022-04-06T18:18:07">Apr 6, 2022</time></div><div class="m-article__content"><p>This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code?</p><figure class="size-large wp-block-image"><img alt="" data-src="https://miayam.io/assets/images/desktop.png" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="></figure><figure class="size-large wp-block-image"><img alt="" data-src="https://miayam.io/assets/images/mobile.png" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="></figure><h2>🌐&nbsp;Live Demo</h2><blockquote class="wp-block-quote"><p><a href="https://responsive.miayam.io/" rel="noreferrer noopener" target="_blank">https://responsive.miayam.io&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Repo: <a href="https://github.com/miayam/responsive" rel="noreferrer noopener" target="_blank">https://github.com/miayam/responsive&lt;/a&gt;&lt;/p&gt;&lt;/blockquote&gt;&lt;h2 id="table-of-contents">Table of Contents</h2><ul><li><a href="#tech-stack">Tech Stack</a></li><li><a href="#proof-of-concept">Proof of Concept</a></li><li><a href="#conclusion">Conclusion</a></li></ul><h2 id="tech-stack">Tech Stack</h2><p>This code example is built on top of:</p><ul><li><a href="https://github.com/facebook/react">React</a>&nbsp;– JavaScript library for building user interface.</li><li><a href="https://sass-lang.com/">SCSS</a>&nbsp;– CSS with superpowers.</li></ul><h2 id="proof-of-concept">Proof of Concept</h2><p>What is Responsive Web design?</p><blockquote class="wp-block-quote is-style-large"><p>Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.</p><cite>Smashing Magazine</cite></blockquote><p>As long as it can respond to screen size, platform and orientation, it’s Responsive Web design. And it doesn’t have to be CSS media query.</p><p>In the real world, a lack of compatibility and consistency between mobile and desktop layout is commonplace, just like that mockup above. Therefore, I prefer to separate the code for mobile and desktop.</p><p>If we are to seperate the code for mobile and desktop, how it responds to screen size or orientation? Meet our friend&nbsp;<code>resize</code>&nbsp;event listener. The snippet below is a React hook that listens to&nbsp;<code>window</code>‘s&nbsp;<code>resize</code>&nbsp;event. It will emit current width whenever users change the screen size or orientation and passes it down to consumers.</p><pre class="language-javascript wp-block-code" data-language="javascript"><code class="language-javascript"><div class="code-wrapper"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] '<span class="token keyword">const</span> <span class="token function function-variable">useViewport</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">const</span> <span class="token punctuation">[</span>width<span class="token punctuation">,</span> setWidth<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] ' <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">const</span> <span class="token function function-variable">handleWindowResize</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setWidth</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] ` window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> handleWindowResize<span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:31 AM: [build:critical-path] ` window<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> handleWindowResize<span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] ' <span class="token comment">// Return the width so we can use it in our components</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">{</span> width <span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] `<span class="token keyword">export</span> <span class="token keyword">default</span> useViewport<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Browser waits for&nbsp;<code>window</code>‘s&nbsp;<code>resize</code>&nbsp;event listener to take place. After&nbsp;<code>width</code>&nbsp;emitted, our app will decide which chunks (mobile or desktop) should be fetched and rendered on the screen. It only fetches chunks that it needs. As little chunks as possible.</p><p>Here’s the code sample:</p><pre class="language-javascript wp-block-code" data-language="javascript"><code class="language-javascript"><div class="code-wrapper"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> lazy<span class="token punctuation">,</span> Suspense <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] `<span class="token keyword">const</span> Desktop <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Desktop'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] `<span class="token keyword">const</span> Mobile <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Mobile'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] '<span class="token keyword">const</span> <span class="token function function-variable">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">const</span> <span class="token punctuation">{</span> width <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useViewport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">const</span> <span class="token constant">BREAKPOINT</span> <span class="token operator">=</span> <span class="token number">600</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">(</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token operator">&lt;</span>Suspense fallback<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">null</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">{</span>width <span class="token operator">&lt;</span> <span class="token constant">BREAKPOINT</span> <span class="token operator">?</span> <span class="token punctuation">(</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token operator">&lt;</span>Mobile <span class="token operator">/</span><span class="token operator">&gt;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token operator">&lt;</span>Desktop <span class="token operator">/</span><span class="token operator">&gt;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">)</span><span class="token punctuation">}</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token operator">&lt;</span><span class="token operator">/</span>Suspense<span class="token operator">&gt;</span>\n' +

3:40:31 AM: [build:critical-path] ' <span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:31 AM: [build:critical-path] '\n' +

3:40:31 AM: [build:critical-path] '<span class="token keyword">export</span> <span class="token keyword">default</span> Home<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="conclusion">Conclusion</h2><p>This approach will make you stick to good old separation of concerns. Any changes on desktop layout will not affect mobile layout. It also goes the other way round. My friend and I can work on both layouts in parallel without conflicts.</p><p>What are the drawbacks of this approach?</p><ul><li>It heavily relies on JavaScript. If users disable JavaScript, then this so called approach will be useless.</li><li>It seems like we work twice but actually it’s a good investment.</li></ul></div></article><div class="m-share" data-description="This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code? 🌐&nbsp;Live Demo https://responsive.miayam.io […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Responsive" data-url="/articles/responsive/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/melodramatis/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Melodramatis</span></a><a href="/articles/melodramatis/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/templat-surat-permohonan-doa/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Templat Surat Permohonan Doa</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/templat-surat-permohonan-doa/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="web"></li><li class="m-iterator__next" data-tag="web"><a href="/articles/miayam-cms-under-the-hood/?tag=web" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Miayam CMS Under The Hood</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/miayam-cms-under-the-hood/?tag=web" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>'

3:40:31 AM: [build:critical-path] }

3:40:32 AM: [build:critical-path] Critical path for articles/sofie/index.html {

3:40:32 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:32 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Sofie</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/sofie/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Sofie" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/sofie/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:32 AM: [build:critical-path] `<link href="/articles-sofie.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a class="a-anchor js-a-anchor m-navigation__back" href="#"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Sofie</h1><time datetime="2021-06-09T14:39:39">Jun 9, 2021</time></div><div class="m-article__content"><p>Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis malang yang hadir di mimpi basah pertama saya. Tidak banyak orang yang tahu tentang hal ini.</p><p>Sebagai orang yang gemar berkelakar porno, biasanya saya paling jago membual tentang hal-hal mesum. Untuk kali ini saya tidak berani sesumbar karena Kak Sofie adalah senior saya di Pramuka.</p><p>Kak Sofie tumbuh lebih cepat dari gadis sebayanya. Payudaranya muncul ke permukaan lebih awal dari biasanya. Estrogen di tubuhnya terlalu tergesa-gesa menuju kedewasaan.</p><p>Sekolah kami mewajibkan seluruh siswi memakai rok panjang 10 cm di atas mata kaki kecuali saat berseragam Pramuka. Saat itu Kak Sofie memakai rok coklat yang tergerai kira-kira 10 cm di atas lututnya. Mereka memperagakan gerakan dasar baris-berbaris kepada calon anggota baru dan paha mulusnya terekam jelas dalam ingatan saya. Setiap langkah tegak maju berubah menjadi gerakan erotis yang merangsang.</p><p>Adegan panas itu telah membunuh bocah laki-laki lugu berusia 13 tahun. Sebagai gantinya, lahirlah remaja mesum yang akan mengisi hari-harinya dengan animasi pornografi dari Negeri Matahari Terbit!</p><p>14 tahun berlalu. Terakhir kali saya cek di Facebook, Kak Sofie sudah berubah drastis. Dia terlihat lebih tua dari usianya. Tumpukan lemak di perutnya mengubur semua kecantikannya. Hampir tidak ada yang tersisa dari gadis remaja yang hadir di mimpi basah pertama saya.</p></div></article><div class="m-share" data-description="Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Sofie" data-url="/articles/sofie/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/naoko-suzuki-mother-superior/"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Naoko Suzuki (Mother Superior)</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/naoko-suzuki-mother-superior/"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/fida/"><span class="m-iterator__wording">Fida</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/fida/">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="love"><a class="a-anchor m-iterator__link" href="/articles/naoko-suzuki-mother-superior/?tag=love"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Naoko Suzuki (Mother Superior)</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/naoko-suzuki-mother-superior/?tag=love"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="love"><a class="a-anchor m-iterator__link" href="/articles/fida/?tag=love"><span class="m-iterator__wording">Fida</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/fida/?tag=love">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:32 AM: [build:critical-path] }

3:40:33 AM: [build:critical-path] Critical path for articles/templat-surat-permohonan-doa/index.html {

3:40:33 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:33 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Templat Surat Permohonan Doa</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/templat-surat-permohonan-doa/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Templat Surat Permohonan Doa" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/templat-surat-permohonan-doa/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:33 AM: [build:critical-path] `<link href="/articles-templat-surat-permohonan-doa.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Templat Surat Permohonan Doa</h1><time datetime="2022-05-20T16:34:16">May 20, 2022</time></div><div class="m-article__content"><p>Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. Kalau tidak bermanfaat, ya maaf.</p><p>Ini juga bisa dipakai untuk memperhalus maksud (eufimisme) bila dana yang ada hanya cukup untuk napak tilas penaklukan Konstantinopel atau menjelajahi daerah kekuasaan Ramses II.</p><blockquote class="wp-block-quote"><p>Kepada Yth. [Nama atau kelompok]</p><p>Assalamualaikum.</p><p>Kami Muhamad Deni Ramdan bin Daden Abdul Kodir dan [Nama mempelai wanita]<br>binti [Nama ayah mempelai wanita] akan melangsungkan akad nikah di [Tempat]<br>pada [Tanggal] dari pukul [Waktu dimulai] sampai selesai.</p><p>Pernikahan kami akan dilaksanakan dengan khidmat sesuai ajaran Islam dan<br>hanya akan dihadiri keluarga inti dari masing-masing mempelai.<br>Meski begitu, kami berharap doa kalian menyertai kami.</p><p>Ini acara yang penting bagi kami, tapi tidak bagi kalian. Kami lebih senang<br>kalian menghabiskan waktu bercengkrama dengan keluarga, kerabat, pacar<br>atau teman daripada harus menghadiri pernikahan kami yang membosankan ini.</p><p>Segala macam bentuk hadiah yang ditujukan kepada kami akan kami sumbangkan ke<br><a href="https://pitakuning.or.id/">Yayasan Pita Kuning</a> dan nama kalian akan dicantumkan sebagai wali bagi adik-adik<br>penyandang kanker yang berada di bawah naungan yayasan. Bagi kami, cukup nama<br>kami disebut dalam doa sudah menjadi kado pernikahan terindah. Kami percaya<br>kekuatan doa.</p><p>Mohon maaf bila tidak ada pesta di pernikahan kami. Kami ingin pernikahan<br>yang sederhana, sesederhana menyiram tanaman. Jika diibaratkan sebagai pohon,<br>pernikahan kami adalah benih yang akan tumbuh bersama waktu.</p><p>Doakan kami agar mampu mengarungi hidup sebagai suami istri yang sah menurut<br>agama dan negara. Hanya doa tulus yang kami harapkan karena membangun rumah<br>tangga bukan perkara yang mudah.</p><p>Terima kasih.</p></blockquote></div></article><div class="m-share" data-description="Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Templat Surat Permohonan Doa" data-url="/articles/templat-surat-permohonan-doa/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/responsive/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Responsive</span></a><a href="/articles/responsive/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/miayam-cms-under-the-hood/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Miayam CMS Under The Hood</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/miayam-cms-under-the-hood/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="story"><a href="/articles/thomas-muller/?tag=story" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Thomas Muller</span></a><a href="/articles/thomas-muller/?tag=story" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="story"><a href="/articles/benzema/?tag=story" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Benzema</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/benzema/?tag=story" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:33 AM: [build:critical-path] }

3:40:34 AM: [build:critical-path] Critical path for articles/thomas-muller/index.html {

3:40:34 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:34 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Thomas Muller</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/thomas-muller/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Thomas Muller" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/thomas-muller/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:34 AM: [build:critical-path] `<link href="/articles-thomas-muller.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a class="a-anchor js-a-anchor m-navigation__back" href="#"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Thomas Muller</h1><time datetime="2021-09-22T20:44:56">Sep 22, 2021</time></div><div class="m-article__content"><figure class="size-large wp-block-image"><img alt="" data-src="https://miayam.io/assets/images/thomas-muller-1024x683.jpg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="><figcaption>Jenius!</figcaption></figure><p>Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. Muller tidak cukup tajam sebagai penyerang, tidak terlalu kreatif sebagai gelandang tengah, tidak terlalu eksplosif sebagai pemain sayap, tidak cukup tangguh sebagai pemain belakang dan hampir tidak mungkin menjadi kiper. Saat ditanya wartawan tentang posisinya di lapangan, dia menyebut dirinya "Raumdeuter” yang jika diterjemahkan secara bebas berarti "penafsir ruang”.</p><p>Gaya permainan Muller tidak elegan dan membosankan. Saat ditekan bek lawan, dia lebih memilih mengumpan ke teman terdekat dan berlari mencari ruang kosong untuk menerima umpan matang dari rekannya yang lebih lihai menggiring bola. Dia seolah membuat ruang dan menjadikan dirinya leluasa menjebloskan bola ke gawang tanpa penjagaan ketat. Gaya permainannya seperti Inzaghi, hanya saja berkeliaran di sayap kanan atau di belakang penyerang utama. Inzaghi, David Beckham, dan Muller adalah contoh pemain rata-rata yang memiliki keahlian unik yang sangat sulit untuk diduplikasi. Keahlian itulah yang disebut "<em>career capital</em>” menurut Cal Newport dalam bukunya <strong><em>So Good They Canʼt Ignore You</em></strong>.</p><p>Saya sudah selesai membaca <strong><em>So Good They Can’t Ignore You</em></strong> dan merasa belum mampu mengejawantahkan isinya dengan baik. Saya adalah orang yang sangat biasa. Semua bidang yang saya tekuni berakhir terbengkalai. Kemampuan saya di pekerjaan juga sangat rata-rata. Mudah sekali menemukan orang dengan kompetensi yang sama. Bukan keputusan yang sulit bagi perusahaan tempat saya bekerja sekarang untuk mengganti saya kapan saja. Ini sudah menjadi PR saya sejak lama.</p><p>Belakangan, saya tergoda berbagai macam hal. Mulai dari menulis novel grafis sampai menjadi "<em>quant</em>". Saya sempat berpikir untuk berhenti dan secara paripurna mengikuti hasrat yang menggebu-gebu tapi menurut Cal Newport itu sangat keliru. Mengikuti hasrat tidak serta merta menjadikan kamu sukses seperti Bill Gates. Ada banyak yang harus dipertimbangkan sebelum membuat keputusan besar semacam itu. Sebagai contoh, Kent C. Dodds yang sempat menjadi insinyur perangkat lunak di PayPal memutuskan untuk fokus menjadi pengajar profesional. Beliau tidak serta-merta membanting setir. Perlu beberapa tahun sampai jumlah kapital yang dihasilkan dari mengajar lebih besar daripada penghasilannya sebagai insyinyur perangkat lunak di PayPal.</p><p>Mungkin dari situ saya bisa merancang rutinitas yang dapat membangkitkan "<em>career capital</em>” sebagaimana Muller menemukan gaya permainannya yang unik.</p><p>Jangan dengarkan kata Mario Puguh, eh, maksud saya Mario Teguh!</p></div></article><div class="m-share" data-description="Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Thomas Muller" data-url="/articles/thomas-muller/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/yu-aoi/"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Yu Aoi</span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/yu-aoi/"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a class="a-anchor m-iterator__link" href="/articles/melodramatis/"><span class="m-iterator__wording">Melodramatis</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/melodramatis/">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="story"></li><li class="m-iterator__next" data-tag="story"><a class="a-anchor m-iterator__link" href="/articles/templat-surat-permohonan-doa/?tag=story"><span class="m-iterator__wording">Templat Surat Permohonan Doa</span><span class="a-arrow a-arrow--right"></span></a><a class="a-anchor m-iterator__link --mobile" href="/articles/templat-surat-permohonan-doa/?tag=story">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:34 AM: [build:critical-path] }

3:40:35 AM: [build:critical-path] Critical path for articles/typescript-fundamental/index.html {

3:40:35 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}a{word-wrap:break-word}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:35 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>TypeScript Fundamentals</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="This is a summary of TypeScript Fundamental V3 on FrontendMasters.\n' +

3:40:35 AM: [build:critical-path] ' […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/typescript-fundamental/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="TypeScript Fundamentals" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/typescript-fundamental/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="This is a summary of TypeScript Fundamental V3 on FrontendMasters.\n' +

3:40:35 AM: [build:critical-path] ' […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}a{word-wrap:break-word}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}code{height:20px;padding:2px 4px;border-radius:4px}a{text-underline-position:under;text-decoration-style:dotted}a,code{word-wrap:break-word}code{background-color:#ebebeb}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article h2{font-size:26px;font-size:1.625rem;line-height:1.59005}.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:35 AM: [build:critical-path] ` <link href="/articles-typescript-fundamental.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>TypeScript Fundamentals</h1><time datetime="2023-06-02T13:46:25">Jun 2, 2023</time></div><div class="m-article__content"><p>This is a summary of <a href="https://frontendmasters.com/courses/typescript-v3/" rel="noreferrer noopener" target="_blank">https://frontendmasters.com/courses/typescript-v3/&lt;/a&gt;.&lt;/p&gt;&lt;h2&gt;Table of Contents</h2><ul><li><a href="#intro" data-type="internal" data-id="#intro">Intro</a></li><li><a href="#hello" data-type="internal" data-id="#hello">Hello TypeScript</a></li><li><a href="#variable-and-values">Variable and Values</a></li><li><a href="#objects-arrays-and-tuples">Objects, Arrays, and Tuples</a></li><li><a href="#structural-vs-nominal">Structural vs. Nominal Types</a></li><li><a href="#union-and-intersection">Union and Intersection Types</a></li><li><a href="#type-aliases-and-interfaces">Type Aliases and Interfaces</a></li><li><a href="#json">JSON Types</a></li><li><a href="#functions" data-type="internal">Functions</a></li><li><a href="#classes">Classes</a></li><li><a href="#top-and-bottom">Top and Bottom Types</a></li><li><a href="#type-guards">Type Guards and Narrowing</a></li><li><a href="#nullish">Nullish Values</a></li><li><a href="#generics" data-type="internal" data-id="#generics">Generics</a></li><li><a href="#generics-dictionary">Dictionary (<code>map</code>, <code>filter</code> and <code>reduce)</code></a></li><li><a href="#generics-scopes">Generics Scopes and Constraints</a></li></ul><h2 id="intro">Intro</h2><p>The purpose of this course is:</p><blockquote class="wp-block-quote"><p><em>By the end of this course,&nbsp;<strong>I want you to have a rock solid mental model, that will serve you well for years</strong></em></p></blockquote><p>TypeScript consists of 3 parts: Language, Language Server, and Compiler:</p><ul><li>Language – The syntax, semantic, and rules we must follow when we write TypeScript</li><li>Language Server – An endpoint from which VSCode checks the syntax’s correctness</li><li>Compiler – We convert TypeScript to JavaScript with compiler called <code>tsc</code></li></ul><p><strong>Why developers want types?</strong></p><ul><li>It allows you, as a code author,&nbsp;<strong>to leave more of your intent "on the page”</strong></li><li>It has the potential to move some kinds of errors from&nbsp;<em>runtime</em>&nbsp;to&nbsp;<em>compile time</em></li><li>It serves as the foundation for a&nbsp;<em>great</em>&nbsp;code authoring experience</li></ul><h2 id="hello">Hello TypeScript</h2><pre class="wp-block-code language-json" data-language="json"><code class="language-json"><div class="code-wrapper"><span class="token punctuation">{</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token string">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token string">"outDir"</span><span class="token operator">:</span> <span class="token string">"dist"</span><span class="token punctuation">,</span> <span class="token comment">// where to put the TS files</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token string">"target"</span><span class="token operator">:</span> <span class="token string">"ES3"</span> <span class="token comment">// which level of JS support to target</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token string">"include"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src"</span><span class="token punctuation">]</span> <span class="token comment">// which files to compile</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>A possible mnemonic to remember the important parts of <code>tsconfig</code> is COTI:</p><ul><li><code>C</code> stands for <code>compilerOptions</code></li><li><code>O</code> stands for <code>outDir</code>, which specifies the output directory</li><li><code>T</code> stands for <code>target</code>, which specifies level of JS support to target (ES3, ES5, ES2015, ES2017, etc)</li><li><code>I</code> stands for <code>include</code></li></ul><p>A good way to think of TS files:</p><ul><li><code>.ts</code>&nbsp;files contain both type information and code that runs</li><li><code>.js</code>&nbsp;files contain only code that runs</li><li><code>.d.ts</code>&nbsp;files contain only type information</li></ul><h2 id="variable-and-values">Variables and Values</h2><ul><li><strong>Inference is not so specific as to get in the way of common behavior.</strong> When we write <code>let age = 31;</code>, TypeScript assumes that <code>age</code> will always point to <code>number</code> and cannot be assigned to other types</li><li>Let’s say <code>const literal = "literal";</code>. TypeScript will infer that the type of <code>literal</code> is "literal” not a <code>string</code>. Why? You can’t change the value to anything else because of the <code>const</code>. That’s why the type is always "literal”. Always will be. Always has been. That’s a <em><strong>literal type</strong></em></li><li>Think of&nbsp;<code>any</code>&nbsp;as "the normal way JS variables work”, in that you could assign&nbsp;<em>any</em> variables&nbsp;to a&nbsp;<code>number</code>, then later a&nbsp;<code>function</code>, then a&nbsp;<code>string</code>. <strong>Anything</strong>.</li><li>What is type annotation? <code>let name: string = "Tatang"</code>. A token <code>string</code> that follows <code>name:</code> is a type annotation.</li></ul><h2 id="objects-arrays-and-tuples">Objects, Arrays, and Tuples</h2><h3>Objects</h3><p>In TypeScript, objects are collections of key-value pairs, where the key is always a string. You can define an object type using the curly braces <code>{}</code> syntax:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' occupation<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>You can then create an object of this type like this:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">const</span> person<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' occupation<span class="token operator">:</span> <span class="token string">"Developer"</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>You can also define optional properties on an object type by adding a <code>?</code> after the property name:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' occupation<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>This allows you to create objects with or without the <code>occupation</code> property.</p><h3>Arrays</h3><p>Arrays in TypeScript are similar to arrays in JavaScript, but with added type safety. You can define an array type by adding <code>[]</code> after the type of the elements:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">let</span> list<span class="token operator">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h3>Tuples</h3><p>Tuples are also available in TypeScript. A tuple is an array with a fixed number of elements, where each element has a specific type. You can define a tuple type using the square brackets <code>[]</code> syntax:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">let</span> tuple<span class="token operator">:</span> <span class="token punctuation">[</span>string<span class="token punctuation">,</span> number<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"hello"</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>This tuple has two elements, the first of type <code>string</code> and the second of type <code>number</code>.</p><h3>Index Signature</h3><p>An index signature allows an object to have any number of additional properties, whose keys are strings and whose values can be of any type. Here’s an example:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Dictionary</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> dict<span class="token operator">:</span> Dictionary <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' one<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' two<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' three<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dict<span class="token punctuation">[</span><span class="token string">"two"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: 2</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>In this example, we define an interface <code>Dictionary</code> with an index signature that allows any string key and enforces a number value. We then create an object <code>dict</code> that conforms to this interface and assign it some key-value pairs.</p><h2 id="structural-vs-nominal">Structural vs. Nominal Types</h2><ul><li>Structural type is about "shape”. Two objects are compatible if their "shape” are the same</li><li>Nominal type is about "name”. Two objects are compatible if they derive from the same class despite the shape.</li></ul><h2 id="union-and-intersection">Union and Intersection Types</h2><h3>Union Types</h3><p>Union Types described by the <code>|</code> (pipe) operator.</p><p>Either <strong>A</strong> or <strong>B</strong> but not both.</p><p>We need to "separate” potential possibilities for our value. It’s either <code>Cat</code> or <code>Dog</code>, right? We can do this with&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html">type guards</a>:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">meow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">bark</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">isCat</span><span class="token punctuation">(</span><span class="token parameter">animal<span class="token operator">:</span> Cat <span class="token operator">|</span> Dog</span><span class="token punctuation">)</span><span class="token operator">:</span> animal is Cat <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token string">"meow"</span> <span class="token keyword">in</span> animal<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">isDog</span><span class="token punctuation">(</span><span class="token parameter">animal<span class="token operator">:</span> Cat <span class="token operator">|</span> Dog</span><span class="token punctuation">)</span><span class="token operator">:</span> animal is Dog <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token string">"bark"</span> <span class="token keyword">in</span> animal<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">pet</span><span class="token punctuation">(</span><span class="token parameter">animal<span class="token operator">:</span> Cat <span class="token operator">|</span> Dog</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isCat</span><span class="token punctuation">(</span>animal<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">meow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isDog</span><span class="token punctuation">(</span>animal<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Or with discriminated unions:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>\n' +
[build:critical-path] ' kind<span class="token operator">:</span> <span class="token string">"cat"</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">meow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' kind<span class="token operator">:</span> <span class="token string">"dog"</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">bark</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'type Pet <span class="token operator">=</span> Cat <span class="token operator">|</span> Dog<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">pet</span><span class="token punctuation">(</span><span class="token parameter">animal<span class="token operator">:</span> Pet</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">switch</span> <span class="token punctuation">(</span>shape<span class="token punctuation">.</span>kind<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">case</span> <span class="token string">"cat"</span><span class="token operator">:</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">meow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">break</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">case</span> <span class="token string">"dog"</span><span class="token operator">:</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">break</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Read <a href="https://css-tricks.com/typescript-discriminated-unions/" data-type="URL" data-id="https://css-tricks.com/typescript-discriminated-unions/" rel="noreferrer noopener" target="_blank">Demystifying TypeScript Discriminated&nbsp;Unions</a>.</p><h3>Intersection Types</h3><p>An intersection type combines multiple types into one.</p><p><strong>A</strong> and <strong>B</strong> merged.</p><p>Intersection Types described by the <code>&amp;</code> (ampersand) operator:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">makeWeek</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Date <span class="token operator">&amp;</span> <span class="token punctuation">{</span> end<span class="token operator">:</span> Date <span class="token punctuation">}</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> end <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>start<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token constant">ONE_WEEK</span><span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>start<span class="token punctuation">,</span> end <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="type-aliases-and-interfaces">Type Aliases and Interfaces</h2><p>TypeScript provides two mechanisms for defining types and giving them useful and meaningful names: <strong>type aliases</strong> and <strong>interfaces</strong>.</p><h3>Type Aliases</h3><p>A type alias can hold&nbsp;<em>any type</em>, as it’s literally an alias (name) for a type of some sort:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Binggo <span class="token operator">=</span> <span class="token number">777</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type Dog <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">bark</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type Cat <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">meow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] 'type Pet <span class="token operator">=</span> Cat <span class="token operator">|</span> Dog<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type CatDog <span class="token operator">=</span> Cat <span class="token operator">&amp;</span> Dog<span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Extending behaviour with type aliases by using intersection (<code>&amp;</code>):</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type SpecialDate <span class="token operator">=</span> Date <span class="token operator">&amp;</span> <span class="token punctuation">{</span> <span class="token function">getReason</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> string <span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span></span></code></pre><h3>Interfaces</h3><p>It’s best used for "<em>object type”</em> such as:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> me<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> <span class="token string">"Muhamad D. R"</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> <span class="token number">31</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Use <code>extends</code> to "inherits” interface from a base interface:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">isAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Mammal</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">getFurOrHairColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Mammal</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">getBreed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">careForDog</span><span class="token punctuation">(</span><span class="token parameter">dog<span class="token operator">:</span> Dog</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' dog<span class="token punctuation">.</span><span class="token function">isAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' dog<span class="token punctuation">.</span><span class="token function">getBreed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' dog<span class="token punctuation">.</span><span class="token function">getFurOrHairColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>implements</code> can be used to state that&nbsp;<strong>a given class should produce instances that confirm to a given interface</strong>. It’s like a contract for an instance of class:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">LivingOrganism</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">isAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token boolean">true</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">AnimalLike</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">eat</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">CanBark</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">class</span> <span class="token class-name">Dog</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">extends</span> <span class="token class-name">LivingOrganism</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">implements</span> <span class="token class-name">AnimalLike</span><span class="token punctuation">,</span> CanBark\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token string">"woof"</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">eat</span><span class="token punctuation">(</span><span class="token parameter">food</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">consumeFood</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>TypeScript interfaces are "open”, meaning that unlike in type aliases, you can have multiple declarations in the same scope:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">interface</span> <span class="token class-name">AnimalLike</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">isAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">feed</span><span class="token punctuation">(</span><span class="token parameter">animal<span class="token operator">:</span> AnimalLike</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' animal<span class="token punctuation">.</span><span class="token function">isAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] '<span class="token comment">// SECOND DECLARATION OF THE SAME NAME</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">AnimalLike</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">eat</span><span class="token punctuation">(</span>food<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h3>Choosing Which To Use</h3><ol><li><strong>If you need to define something other than an object type</strong>&nbsp;(e.g., use of the&nbsp;<code>|</code>&nbsp;union type operator), you must use a type alias</li><li>If you need to define a type&nbsp;<strong>to use with the&nbsp;<code>implements</code>&nbsp;heritage term</strong>, it’s best to use an interface</li><li>If you need to&nbsp;<strong>allow consumers of your types to&nbsp;<em>augment</em>&nbsp;them</strong>, you must use an interface</li></ol><h3>Recursion Type</h3><p>Here’s an example:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Tree <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' left<span class="token operator">?</span><span class="token operator">:</span> Tree<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' right<span class="token operator">?</span><span class="token operator">:</span> Tree<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> tree<span class="token operator">:</span> Tree <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' left<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' left<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">4</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' right<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">5</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' right<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' left<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">6</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' right<span class="token operator">:</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' value<span class="token operator">:</span> <span class="token number">7</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="json">JSON Types</h2><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type JSONPrimitive <span class="token operator">=</span> number <span class="token operator">|</span> string <span class="token operator">|</span> boolean <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type JSONObject <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> JSONValue\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type JSONArray <span class="token operator">=</span> JSONValue<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] 'type JSONValue <span class="token operator">=</span> JSONObject <span class="token operator">|</span> JSONArray <span class="token operator">|</span> JSONPrimitive<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="functions">Functions</h2><p>We can make a type alias or an interface for function:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type <span class="token function function-variable">SayHelloType</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token operator">:</span> string<span class="token punctuation">,</span> greeting<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">SayHelloInterface</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">(</span>name<span class="token operator">:</span> string<span class="token punctuation">,</span> greeting<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> sayHello<span class="token operator">:</span> <span class="token function function-variable">SayHelloType</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> greeting</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>name<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">! </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>greeting<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">;</span>\n' +
[build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> sayHelloWithConsole<span class="token operator">:</span> <span class="token function function-variable">SayHelloInterface</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> greeting</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> expression <span class="token operator">=</span> <span class="token template-string"><span class="token string template-punctuation">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>name<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">! </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>greeting<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string template-punctuation">`</span></span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>expression<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> expression<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>The return value of <code>void</code> is meant to be ignored.</p><p>Function overloading is a way to define multiple versions of the same function that can handle different types of inputs and outputs:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token operator">:</span> number<span class="token punctuation">,</span> b<span class="token operator">:</span> number</span><span class="token punctuation">)</span><span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token operator">:</span> string<span class="token punctuation">,</span> b<span class="token operator">:</span> string</span><span class="token punctuation">)</span><span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token operator">:</span> number <span class="token operator">|</span> string<span class="token punctuation">,</span> b<span class="token operator">:</span> number <span class="token operator">|</span> string</span><span class="token punctuation">)</span><span class="token operator">:</span> number <span class="token operator">|</span> string <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: 3</span>\n' +

3:40:35 AM: [build:critical-path] `console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Output: helloworld</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>this</code> keyword can be defined and invoked like this:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">function</span> <span class="token function">focusAndLogEvent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span><span class="token operator">:</span> HTMLInputElement<span class="token punctuation">,</span> event<span class="token operator">:</span> Event</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] `<span class="token function">focusAndLogEvent</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> input2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> boundFocusAndLogEvent <span class="token operator">=</span> <span class="token function">focusAndLogEvent</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>input2<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] `<span class="token function">boundFocusAndLogEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>It is well-advised to explicitly define return types.</p><h2 id="classes">Classes</h2><p>Here’s how we define types to a class:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n` +

3:40:35 AM: [build:critical-path] ' make<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' model<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' year<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token operator">:</span> string<span class="token punctuation">,</span> model<span class="token operator">:</span> string<span class="token punctuation">,</span> year<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>year <span class="token operator">=</span> year<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>TypeScript provides three&nbsp;<em><strong>access modifier keywords</strong></em>, which can be used with class fields and methods, to describe&nbsp;<em><strong>who should be able to see and use them</strong></em>:</p><ul><li><code>public</code> – everyone can access</li><li><code>private</code> – only the instance itself can access</li><li><code>protected</code> – the instance itself and subclasses can access</li></ul><p>Access modifier keywords are only&nbsp;<strong>validated at compile time, with no real privacy or security benefits at runtime</strong>. Don’t use it for secret-keeping or security.</p><p>JS private <code>#fields</code> can be written as follow:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> make<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> model<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' #year<span class="token operator">:</span> number\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token operator">:</span> string<span class="token punctuation">,</span> model<span class="token operator">:</span> string<span class="token punctuation">,</span> year<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>#year <span class="token operator">=</span> year\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Car</span><span class="token punctuation">(</span><span class="token string">"Honda"</span><span class="token punctuation">,</span> <span class="token string">"Accord"</span><span class="token punctuation">,</span> <span class="token number">2017</span><span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] `c<span class="token punctuation">.</span>#year <span class="token comment">// Throw error because it's private</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>readonly</code> keyword:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> make<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> model<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> readonly year<span class="token operator">:</span> number\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token operator">:</span> string<span class="token punctuation">,</span> model<span class="token operator">:</span> string<span class="token punctuation">,</span> year<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>year <span class="token operator">=</span> year\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">updateYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` <span class="token keyword">this</span><span class="token punctuation">.</span>year<span class="token operator">++</span> <span class="token comment">// Cannot assign to 'year' because it is a read-only property.</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>To simplify our class, we can use param properties. From this:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' make<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' model<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] ' year<span class="token operator">:</span> number\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">make<span class="token operator">:</span> string<span class="token punctuation">,</span> model<span class="token operator">:</span> string<span class="token punctuation">,</span> year<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>make <span class="token operator">=</span> make\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>model <span class="token operator">=</span> model\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>year <span class="token operator">=</span> year\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>To this:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token parameter"><span class="token keyword">public</span> make<span class="token operator">:</span> string<span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> model<span class="token operator">:</span> string<span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">public</span> year<span class="token operator">:</span> number</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>Note the following order of what ends up in the class constructor:</p><ol><li><code>super()</code></li><li>Param property initialization</li><li>Other class field initialization</li><li>Anything else that was in your constructor after&nbsp;<code>super()</code></li></ol><h2 id="top-and-bottom">Top and Bottom Types</h2><ul><li>Types describe sets of allowed values</li><li>A&nbsp;<a href="https://en.wikipedia.org/wiki/Top_type">top type</a> (symbol:&nbsp;<code>⊤</code>) is a type that describes&nbsp;<strong>any possible value allowed by the system:</strong> <code>any</code> <strong>and</strong> <code>unknown</code></li><li>A&nbsp;<a href="https://en.wikipedia.org/wiki/Bottom_type">bottom type</a> (symbol:&nbsp;<code>⊥</code>) is a type that describes&nbsp;<strong>no possible value allowed by the system:</strong> <code>never</code></li><li><code>any</code> can be assigned to any values. No type guards needed</li><li><code>unknown</code> can be assigned to any values but you can’t use it unless with type guards</li><li><code>never</code> can never be assigned to any values</li></ul><h2 id="type-guards">Type Guards and Narrowing</h2><p>Sometimes we can’t assure the data we consume from API. TypeScript won’t catch it at compile-time. It could have been <code>null</code> or <code>undefined</code> right?</p><p>Type guards can be thought of as part of the "glue” that connects compile-time type-checking with the execution of your program at runtime.</p><p>Let’s say we expect <code>{ name: string, address: string }</code> but it’s possible that we can get <code>null</code> or <code>undefined</code>. Here’s the example:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' address<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'type Data <span class="token operator">=</span> Person <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">isPerson</span><span class="token punctuation">(</span><span class="token parameter">valueToTest<span class="token operator">:</span> any</span><span class="token punctuation">)</span><span class="token operator">:</span> valueToTest is Person <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' valueToTest <span class="token operator">&amp;&amp;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">typeof</span> valueToTest <span class="token operator">===</span> <span class="token string">"object"</span> <span class="token operator">&amp;&amp;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token string">"name"</span> <span class="token keyword">in</span> valueToTest <span class="token operator">&amp;&amp;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">typeof</span> valueToTest<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"string"</span> <span class="token operator">&amp;&amp;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token string">"address"</span> <span class="token keyword">in</span> valueToTest <span class="token operator">&amp;&amp;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">typeof</span> valueToTest<span class="token punctuation">[</span><span class="token string">"address"</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">"string"</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> <span class="token function">handlePerson</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token operator">:</span> Data</span><span class="token punctuation">)</span><span class="token operator">:</span> Person <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">if</span> <span class="token punctuation">(</span>data <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'It is null!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'It is undefined!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isPerson</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token comment">// This is how we handle Person</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> data<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Never!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="nullish">Nullish Values</h2><h3>Null</h3><p><code>null</code>&nbsp;is you set it to empty. Intentionally empty value. It’s empty on purpose.</p><h3>Undefined</h3><p><code>undefined</code>&nbsp;it’s empty because it has not been set. Unintentionally empty value.</p><h3>Void</h3><p><code>void</code>&nbsp;should exclusively be used to describe that a function’s return value should be ignored.</p><h3>Non-null Assertion Operator</h3><p><code>!.</code> operator tells the compiler not to complain about the possiblity that user might access properties of <code>null</code> or <code>underfined</code> value. It is the opposite of <code>?.</code> operator.</p><p>Example:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>\n' +
[build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">try</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` fruits<span class="token operator">!</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'mango'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// TypeScript won't complain</span>\n` +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h3>Definite Assignment Operator</h3><p>The definite assignment&nbsp;<code>!:</code>&nbsp;operator is used to suppress TypeScript’s objections about a class field being used, when it can’t be proven that it was initialized.</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">class</span> <span class="token class-name">ThingWithAsyncSetup</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' setupPromise<span class="token operator">:</span> Promise<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span> <span class="token comment">// Ignore the &lt;any&gt; for now</span>\n' +

3:40:35 AM: [build:critical-path] ' isSetup<span class="token operator">!</span><span class="token operator">:</span> boolean <span class="token comment">// TypeScript won\'t object this since we use `!:`</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>setupPromise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ` <span class="token keyword">this</span><span class="token punctuation">.</span>isSetup <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token comment">// We initialize it here, but TypeScript doesn't know</span>\n` +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSetup</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">this</span><span class="token punctuation">.</span>isSetup <span class="token operator">=</span> <span class="token boolean">true</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">private</span> <span class="token keyword">async</span> <span class="token function">doSetup</span><span class="token punctuation">(</span><span class="token function function-variable">resolve</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token operator">:</span> unknown</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token comment">// some async stuff</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="generics">Generics</h2><p>It is a way to generalize types. What does that mean? Take that you want to convert array of something (<code>T[]</code>) into a dictionary of something (<code>{[key: string]: T}</code>) and <code>T</code> could be anything. Here’s the example:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> createDictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' array<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token comment">// Impelmentation...</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'type Person <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' name<span class="token operator">:</span> string<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' age<span class="token operator">:</span> number<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> numbers<span class="token operator">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] `<span class="token keyword">const</span> strings<span class="token operator">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] `<span class="token keyword">const</span> people<span class="token operator">:</span> Person<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Hiro'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">21</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Tito'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n` +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> dictionaryOfNumbers <span class="token operator">=</span> createDictionary<span class="token operator">&lt;</span>number<span class="token operator">&gt;</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> dictionaryOfStrings <span class="token operator">=</span> createDictionary<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span>strings<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">const</span> dictionaryOfPeople <span class="token operator">=</span> createDictionary<span class="token operator">&lt;</span>Person<span class="token operator">&gt;</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p><code>T</code> is called type parameter.</p><h2 id="generics-dictionary">Dictionary (<code>map</code>, <code>filter</code> and <code>reduce</code>)</h2><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' apple<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' grape<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' banana<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"yellow"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">183</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' lemon<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"yellow"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">80</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' pear<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"green"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">178</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' orange<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">262</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' raspberry<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' cherry<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> mass<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">interface</span> <span class="token class-name">Dict</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">[</span>k<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token comment">// Array.prototype.map, but for Dict</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> mapDict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">S</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' dict<span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> name<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">S</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">S</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> newDict<span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">S</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>dict<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' newDict<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">callback</span><span class="token punctuation">(</span>dict<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> newDict<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token comment">// Array.prototype.filter, but for Dict</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> filterDict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' dict<span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> <span class="token constant">T</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> boolean\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> filteredDict<span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>dict<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>dict<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' filteredDict<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> dict<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> filteredDict<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token comment">// Array.prototype.reduce, but for Dict</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> reduceDict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">S</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' dict<span class="token operator">:</span> Dict<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">reducer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token operator">:</span> <span class="token constant">S</span><span class="token punctuation">,</span> current<span class="token operator">:</span> <span class="token constant">T</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">S</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' initialValue<span class="token operator">:</span> <span class="token constant">S</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">S</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">let</span> total<span class="token operator">:</span> <span class="token constant">S</span> <span class="token operator">=</span> initialValue<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' \n' +

3:40:35 AM: [build:critical-path] ' Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>dict<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' total <span class="token operator">=</span> <span class="token function">reducer</span><span class="token punctuation">(</span>total<span class="token punctuation">,</span> dict<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> total<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h2 id="generics-scopes">Generics Scopes and Constraints</h2><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> createDictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' array<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token function function-variable">idGenerator</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> <span class="token constant">T</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> dict<span class="token operator">:</span> Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' dict<span class="token punctuation">[</span><span class="token function">idGenerator</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> dict<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '</div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><p>As you can see <code>T</code> could be anything (<code>number</code>, <code>string</code>, <code>boolean</code>, etc). What if we take out <code>idGenerator</code> and decide that <code>T</code> is supposed be an object and has <code>id</code> property. The way we define constraints on <code>T</code> is by using the&nbsp;<code><a href="https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints" data-type="URL" data-id="https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints" rel="noreferrer noopener" target="_blank">extends</a></code>&nbsp;keyword.</p><p>Here’s how it’s done:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper">type Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +
[build:critical-path] ' <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] 'type HasId <span class="token operator">=</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' id<span class="token operator">:</span> string\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> createDictionary<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">HasId</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>\n' +

3:40:35 AM: [build:critical-path] ' array<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">)</span><span class="token operator">:</span> Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">const</span> dict<span class="token operator">:</span> Dictionary<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' dict<span class="token punctuation">[</span>item<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> dict<span class="token punctuation">;</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre><h3>Scopes and Type Params</h3><p>When working with function parameters, we know that "inner scopes” have the ability to access "outer scopes” but not vice versa. Type params work a similar way:</p><pre class="language-typescript wp-block-code" data-language="typescript"><code class="language-typescript"><div class="code-wrapper"><span class="token comment">// Outer function</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token keyword">function</span> tupleCreator<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>first<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token comment">// Inner function</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token keyword">function</span> finish<span class="token operator">&lt;</span><span class="token constant">S</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>last<span class="token operator">:</span> <span class="token constant">S</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">S</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token keyword">return</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> last<span class="token punctuation">]</span>\n' +

3:40:35 AM: [build:critical-path] ' <span class="token punctuation">}</span>\n' +

3:40:35 AM: [build:critical-path] '<span class="token punctuation">}</span></div><span class="line-numbers-rows" aria-hidden="true"><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span><span class="highlight-line"></span></span></code></pre></div></article><div class="m-share" data-description="This is a summary of TypeScript Fundamental V3 on FrontendMasters.\n' +

3:40:35 AM: [build:critical-path] ' […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="TypeScript Fundamentals" data-url="/articles/typescript-fundamental/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" class="m-share__logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="1px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" class="m-share__logo" data-src="/assets/images/twitter.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" class="m-share__logo" data-src="/assets/images/pinterest.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" class="m-share__logo" data-src="/assets/images/telegram.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" class="m-share__logo" data-src="/assets/images/tumblr.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" class="m-share__logo" data-src="/assets/images/reddit.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" class="m-share__logo" data-src="/assets/images/whatsapp.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" class="m-share__logo" data-src="/assets/images/linkedin.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" class="m-share__logo" data-src="/assets/images/gmail.png" height="20px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/analisa-pasar-saham/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Analisa Pasar Saham</span></a><a href="/articles/analisa-pasar-saham/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/intermediate-typescript/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Intermediate TypeScript</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/intermediate-typescript/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="web"><a href="/articles/miayam-cms-under-the-hood/?tag=web" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Miayam CMS Under The Hood</span></a><a href="/articles/miayam-cms-under-the-hood/?tag=web" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="web"><a href="/articles/intermediate-typescript/?tag=web" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Intermediate TypeScript</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/intermediate-typescript/?tag=web" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>'

3:40:35 AM: [build:critical-path] }

3:40:36 AM: [build:critical-path] Critical path for articles/yu-aoi/index.html {

3:40:36 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}',

3:40:36 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Yu Aoi</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi […]" name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/articles/yu-aoi/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Yu Aoi" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/articles/yu-aoi/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi […]" property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-iterator__next,.m-iterator__prev{display:inline-block;position:absolute;width:50%;height:60px}.m-iterator__prev{text-align:left;left:0;padding-left:7px}.m-iterator__next{text-align:right;right:0;padding-right:7px}.m-article blockquote{margin:20px 0;padding-left:16px;border-left:3px solid #1b1b1b}@media only screen and (max-width:425px){.m-iterator__prev{display:none;padding-left:14px}.m-iterator__next{display:none;padding-right:14px}}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__backWrapper{display:inline-block;height:100%}.m-navigation__back{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__back{width:118px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}.m-article{padding:0 20px}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article figure{margin:16px 0}.m-article figcaption,.m-article time{color:#595959;font-size:13.92px;line-height:1.25}.m-article a{color:#324f73}.m-article__header{border-bottom:1px solid rgba(0,0,0,.12)}.m-article__header h1{display:inline-block;width:80%;line-height:1.2;margin-bottom:16px}.m-article__header time{display:inline-block;width:19%;text-align:right}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}.m-article__header h1,.m-article__header time{width:100%;display:block;text-align:left}.m-article__header time{margin-bottom:16px}}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.m-iterator .a-anchor,.m-iterator .a-arrow{display:inline-block}.m-iterator .a-anchor{height:60px;vertical-align:middle;min-width:100px}@media only screen and (max-width:425px){.m-iterator .a-anchor{display:none}}.m-iterator .a-arrow{margin-top:-2px;margin-right:4px}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.t-blog{background:#fff}</style>\n' +

3:40:36 AM: [build:critical-path] `<link href="/articles-yu-aoi.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-blog" data-router-view="blog"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__backWrapper"><a href="#" class="a-anchor js-a-anchor m-navigation__back"><span class="a-arrow a-arrow--left"></span>Articles</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><div class="m-article__header"><h1>Yu Aoi</h1><time datetime="2021-09-05T14:31:56">Sep 5, 2021</time></div><div class="m-article__content"><p>Cantik sekali…</p><figure class="size-large wp-block-image"><img alt="" data-src="https://wallpapers.com/images/hd/tokyo-ghoul-movie-1260-x-1000-wallpaper-vvb4xq2xpwmv9ks9.jpg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4="><figcaption>Dapatkan gambar ini di:&nbsp;<a href="https://wallpapers.com/wallpapers/tokyo-ghoul-movie-1260-x-1000-wallpaper-vvb4xq2xpwmv9ks9.html" rel="noreferrer noopener" target="_blank">Wallpapers.com</a>&nbsp;|&nbsp;<a href="https://wallpapers.com/dmca" rel="noreferrer noopener" target="_blank">Detail lisensi</a></figcaption></figure><p>Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi wanita paling cantik di bumi versi saya?</p><p>Saya punya teori:</p><blockquote class="wp-block-quote"><p><em>"Kriteria adalah hasil endapan dari pengalaman seksual yang ditangkap panca indra ketika balita. Boleh jadi, wajah perempuan-perempuan yang kita anggap cantik pernah kita temui di masa lalu dan tersimpan di brankas paling nista di bank memori sebagai tolak ukur untuk menentukan cantik-jeleknya perempuan yang kita temui. Wajah guru TK kita yang baik hati, teman-teman masa kecil kita, bibi-bibi kita, sepupu-sepupu kita, kakak-kakak perempuan kita, bahkan ibu kita sendiri atau gadis seksi yang tidak sengaja kita lihat ketika ayah kita sedang asyik menonton film porno.”</em></p></blockquote><p>Yu Aoi bagi saya adalah bukti nyata dari teori di atas.</p><p>Dia adalah zenit. Titik tertinggi di mana semua perempuan yang saya suka diukur derajat kecantikannya. Titik nadirnya tentu saja adalah Bu Tina. Guru SD saya yang gendut, bangsat dan jelek.</p><p>Jemarinya yang lentik dan bersih mirip sekali dengan jemari kakak sepupu saya berinisial "W”. Guru agama saya pernah bilang kalau ketertarikan seksual kepada sepupu perempuan itu diperbolehkan dalam Islam. Halal untuk dinikahi tapi dengan risiko anak-anak hasil perkawinan mengidap epilepsi.</p><p>Kontur wajahnya sepertinya pernah saya lihat di film Godzilla versi Jepang atau Ultraman yang saya tonton ketika umur 4 tahun. Anggap saja demikian karena bisa dibilang Yu Aoi punya wajah khas wanita Jepang pada umumnya.</p><p>Tubuhnya langsing dan payudaranya tipis. Hampir semua anggota keluarga saya kurus kering, jadi saya memaklumi kecenderungan saya pada perempuan cantik malnutrisi.</p><p>Kulitnya putih langsat tanpa cacat. Kecenderungan ini bisa jadi karena telah terkondisikan budaya di mana perempuan berkulit putih akan selalu dianggap cantik oleh pribumi. Bisa dibilang salah satu contoh mentalitas inlander warisan kompeni.</p><p>Dari bukti-bukti metafisis di atas, saya berhasil memformulasikan sistem metrik untuk menakar derajat kecantikan perempuan-perempuan yang saya suka. Satuan metafisis ini saya lambangkan sebagai <em>Yu</em>. Sebagai contoh, kecantikan Raisa bagi saya hanya 0.0001 <em>Yu</em> dan Isyana 0.0025 <em>Yu.</em> Bu Tina guru SD saya yang gendut, bangsat dan jelek tentu saja 0 <em>Yu</em>.</p><p>Demikian pembahasan saya tentang Yu Aoi. Dia adalah hasil sintesis dari pengalaman seksual saya di masa kecil. Masih belum tergantikan sejauh ini.</p><p>Baiklah! Setelah menguap bosan sepanjang paragraf, mari kita setel musik dan dendangkan sepenggal lirik di bawah:</p><iframe allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" allowfullscreen="" data-src="https://open.spotify.com/embed/track/28Tj1Gc80CcgI3zElL3rgf?utm_source=generator" frameborder="0" height="152" loading="lazy" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NjYgNDgwJz48L3N2Zz4=" style="border-radius:12px" width="100%"></iframe><blockquote class="wp-block-quote"><p><em>"I see her face. Everyday! I see her face… It doesn’t help me… She is so high! She is so high! She is so high! I want to crawl all over her!” (Blur – She Is So High)</em></p></blockquote></div></article><div class="m-share" data-description="Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi […]" data-image="https://avatars2.githubusercontent.com/u/12558753" data-title="Yu Aoi" data-url="/articles/yu-aoi/"><p class="m-share__desc">Sharing is caring :)</p><div class="m-share__wrapper"><img alt="logo" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="1px" width="1px" id="js-share"><button class="m-share__item" id="js-twitter"><img alt="logo" data-src="/assets/images/twitter.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-pinterest"><img alt="logo" data-src="/assets/images/pinterest.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-telegram"><img alt="logo" data-src="/assets/images/telegram.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-tumblr"><img alt="logo" data-src="/assets/images/tumblr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-reddit"><img alt="logo" data-src="/assets/images/reddit.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-whatsapp"><img alt="logo" data-src="/assets/images/whatsapp.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-linkedin"><img alt="logo" data-src="/assets/images/linkedin.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button><button class="m-share__item" id="js-gmail"><img alt="logo" data-src="/assets/images/gmail.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="m-share__logo" height="20px" width="20px"></button></div></div><ul class="m-iterator"><li class="m-iterator__prev" data-tag="all"><a href="/articles/fida/" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Fida</span></a><a href="/articles/fida/" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="all"><a href="/articles/thomas-muller/" class="a-anchor m-iterator__link"><span class="m-iterator__wording">Thomas Muller</span><span class="a-arrow a-arrow--right"></span></a><a href="/articles/thomas-muller/" class="a-anchor m-iterator__link --mobile">Next<span class="a-arrow a-arrow--right"></span></a></li><li class="m-iterator__prev" data-tag="love"><a href="/articles/fida/?tag=love" class="a-anchor m-iterator__link"><span class="a-arrow a-arrow--left"></span><span class="m-iterator__wording">Fida</span></a><a href="/articles/fida/?tag=love" class="a-anchor m-iterator__link --mobile"><span class="a-arrow a-arrow--left"></span>Prev</a></li><li class="m-iterator__next" data-tag="love"></li></ul></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async="" class="main-script" src="/scripts-blog-e28bfbe6305e5e02a020.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:36 AM: [build:critical-path] }

3:40:37 AM: [build:critical-path] Critical path for index.html {

3:40:37 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}',

3:40:37 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Miayam | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Miayam | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}</style>\n' +

3:40:37 AM: [build:critical-path] `<link href="/index.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="all" style="display:none"><span class="icon-all" aria-label="all" role="img"></span><strong>All</strong><span data-description="Not knowing is Buddha. The Aha! moment is waiting for you.">All</span></p><section class="m-card"><a href="/articles/intermediate-typescript/"><div class="m-card__header"><h2>Intermediate TypeScript</h2><time datetime="2023-07-16T14:49:04">— Jul 16, 2023</time></div><p>This is a summary of Intermediate TypeScript on Frontend Masters […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/typescript-fundamental/"><div class="m-card__header"><h2>TypeScript Fundamentals</h2><time datetime="2023-06-02T13:46:25">— Jun 2, 2023</time></div><p>This is a summary of TypeScript Fundamental V3 on FrontendMasters. […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/analisa-pasar-saham/"><div class="m-card__header"><h2>Analisa Pasar Saham</h2><time datetime="2022-08-18T20:51:36">— Aug 18, 2022</time></div><p>Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi. […]</p></a><div class="m-card__tagList"><a href="/tags/slant/" aria-label="slant"><span class="icon-slant" aria-hidden="true"></span><span class="visually-hidden">slant</span></a></div></section><section class="m-card"><a href="/articles/benzema/"><div class="m-card__header"><h2>Benzema</h2><time datetime="2022-06-04T09:19:15">— Jun 4, 2022</time></div><p>Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di Lauhulmahfuz (Arab: لَوْحُ المَحْفُوظٍ) […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section><section class="m-card"><a href="/articles/miayam-cms-under-the-hood/"><div class="m-card__header"><h2>Miayam CMS Under The Hood</h2><time datetime="2022-05-22T07:39:42">— May 22, 2022</time></div><p>All contents here are served by https://cms.miayam.io. First of all, I don’t do DevOps. I just follow tutorials on Internet […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/templat-surat-permohonan-doa/"><div class="m-card__header"><h2>Templat Surat Permohonan Doa</h2><time datetime="2022-05-20T16:34:16">— May 20, 2022</time></div><p>Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section><section class="m-card"><a href="/articles/responsive/"><div class="m-card__header"><h2>Responsive</h2><time datetime="2022-04-06T18:18:07">— Apr 6, 2022</time></div><p>This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code? 🌐&nbsp;Live Demo https://responsive.miayam.io […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/melodramatis/"><div class="m-card__header"><h2>Melodramatis</h2><time datetime="2022-01-01T13:38:43">— Jan 1, 2022</time></div><p>Sepenggal kisah lama yang terlalu usang untuk dikisahkan. […]</p></a><div class="m-card__tagList"><a href="/tags/art/" aria-label="art"><span class="icon-art" aria-hidden="true"></span><span class="visually-hidden">art</span></a></div></section><section class="m-card"><a href="/articles/thomas-muller/"><div class="m-card__header"><h2>Thomas Muller</h2><time datetime="2021-09-22T20:44:56">— Sep 22, 2021</time></div><p>Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="" data-total="2"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/">1</option><option value="/2/">2</option></select> of 2</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:37 AM: [build:critical-path] }

3:40:38 AM: [build:critical-path] Critical path for now/id/index.html {

3:40:38 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*,:after,:before{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}',

3:40:38 AM: [build:critical-path] html: '<!doctype html><html lang="en"><head><title>Sekarang Sedang Apa? Di Mana? Dengan Siapa? Semalam Berbuat Apa?</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/now/id/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Sekarang Sedang Apa? Di Mana? Dengan Siapa? Semalam Berbuat Apa?" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/now/id/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*,:after,:before{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}</style>\n' +

3:40:38 AM: [build:critical-path] `<link href="/styles-about.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><link href="/styles-about.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style"></head><body><div class="t-about" data-router-view="about"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><h1>Sekarang Sedang Apa? Di Mana? Dengan Siapa? Semalam Berbuat Apa?</h1><hr><p>Versi yang lebih profesional ditulis menggunakan <a href="/now/" class="a-langSwitcher">🇬🇧 bahasa Inggris.</a></p><p>Saya lelah belajar hal-hal mendasar yang esensial tapi masih banyak lubang yang perlu ditambal.</p><p>Sudah 4 bulan saya bekerja di <a href="https://www.baskit.app/">Baskit</a>. Merasakan kembali bekerja dalam tim kecil setelah sekian lama.</p><p>Saya hendak membebastugaskan <a href="https://cms.miayam.io">https://cms.miayam.io&lt;/a&gt; dan membuat CMS baru menggunakan <a href="https://create.t3.gg/">T3 stack</a></p><p>Terakhir ditulis April 2024.</p><p>Halaman ini terinspirasi <a href="https://sive.rs/now/">ide keren</a> dari <a href="https://sive.rs">Pak Derek Sivers</a>.</p></article></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async class="main-script" src="/scripts-about-4d030cbb301e69fecf26.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:38 AM: [build:critical-path] }

3:40:39 AM: [build:critical-path] Critical path for now/index.html {

3:40:39 AM: [build:critical-path] css: '@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*,:after,:before{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}',

3:40:39 AM: [build:critical-path] html: `<!doctype html><html lang="en"><head><title>What I'm Doing Now</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/now/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="What I'm Doing Now" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/now/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Not knowing is Buddha. The Aha! moment is waiting for you." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h1{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}*,:after,:before{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}li{line-height:2}.m-article{padding:0 20px}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h1{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}.m-article{padding:16px}}.m-article h1{font-size:33px;font-size:2.0625rem;line-height:2.01815}.m-article hr{border:unset;border-top:1px solid rgba(0,0,0,.12);margin:0 0 16px}.m-article a{color:#324f73}.m-skeletonArticles{display:none}.m-skeletonArticle{margin-top:30px;width:0;padding:0 20px;animation:.5s cubic-bezier(.25,.46,.45,.94) forwards fullView}.m-skeletonArticle:first-child{margin-top:0}.m-skeletonArticle__bar{height:16px;background:rgba(0,0,0,.12);margin-top:18px;animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:700px 100%}.m-skeletonArticle__bar--w80{width:80%}@keyframes fullView{to{width:100%}}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-leaflet{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}.o-leaflet{padding-top:30px;margin:32px auto}}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-about{background:#fff}.t-about .m-article h1{line-height:1.5;padding:16px 0}</style>\n` +

3:40:39 AM: [build:critical-path] `<link href="/styles-about.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><link href="/styles-about.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style"></head><body><div class="t-about" data-router-view="about"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-leaflet" role="main"><div class="m-skeletonArticles"><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div><div class="m-skeletonArticle"><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar"></div><div class="m-skeletonArticle__bar m-skeletonArticle__bar--w80"></div></div></div><article class="m-article"><h1>What I'm Doing Now</h1><hr><p>The alternative version of this page is written in <a href="/now/id" class="a-langSwitcher">🇮🇩 Bahasa.</a></p><p>I am tired of working on the fundamentals but there are many potholes to be plugged.</p><p>It's been 4 months since I worked at <a href="https://www.baskit.app/">Baskit</a>. The excitement of working in the small team.</p><p>I am about to deactivate <a href="https://cms.miayam.io">https://cms.miayam.io&lt;/a&gt; and built my own CMS with <a href="https://create.t3.gg/">T3 stack</a>.</p><p>Last updated: April 2024.</p><p>This page is inspired by <a href="https://sive.rs/now">a good idea from Derek Sivers</a>.</p></article></main><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer></div><script async class="main-script" src="/scripts-about-4d030cbb301e69fecf26.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:39 AM: [build:critical-path] }

3:40:40 AM: [build:critical-path] Critical path for tags/art/index.html {

3:40:40 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.a-arrow--double-left:before,.a-arrow--double-right:before{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--double-left:after,.a-arrow--double-right:after{left:14px}.a-arrow--double-left:after,.a-arrow--double-left:before{transform:rotate(45deg)}.a-arrow--double-right:after,.a-arrow--double-right:before{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}.m-pagination{padding:0 16px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-pagination{display:block;width:100%;position:relative}.m-pagination__container{list-style-type:none;width:100%;margin:0;padding:60px 0 0}.m-pagination__item{display:inline-block;width:15%}.m-pagination__navigator{width:40%;text-align:center;display:inline-block}.m-pagination__navigator select{font-size:17px;font-size:1rem;line-height:1.01116;padding:2px;margin-right:5px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-home{background:#fff}',

3:40:40 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Art | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="My arts are useless, so am I. Embark on my personal artistic journey." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/tags/art/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Art | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/tags/art/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="My arts are useless, so am I. Embark on my personal artistic journey." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.a-arrow--double-left:before,.a-arrow--double-right:before{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--double-left:after,.a-arrow--double-right:after{left:14px}.a-arrow--double-left:after,.a-arrow--double-left:before{transform:rotate(45deg)}.a-arrow--double-right:after,.a-arrow--double-right:before{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}.m-pagination{padding:0 16px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-pagination{display:block;width:100%;position:relative}.m-pagination__container{list-style-type:none;width:100%;margin:0;padding:60px 0 0}.m-pagination__item{display:inline-block;width:15%}.m-pagination__navigator{width:40%;text-align:center;display:inline-block}.m-pagination__navigator select{font-size:17px;font-size:1rem;line-height:1.01116;padding:2px;margin-right:5px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer{background:#fff;position:relative}.m-footer .a-copyright{position:absolute;bottom:0}.t-home{background:#fff}</style>\n' +

3:40:40 AM: [build:critical-path] `<link href="/tags-art.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/tags/art/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span><strong>Art: </strong><span data-description="My arts are useless, so am I. Embark on my personal artistic journey.">My arts are useless, so am I. Embark on my personal artistic journey.</span></p><section class="m-card"><a href="/articles/melodramatis/?tag=art"><div class="m-card__header"><h2>Melodramatis</h2><time datetime="2022-01-01T13:38:43">— Jan 1, 2022</time></div><p>Sepenggal kisah lama yang terlalu usang untuk dikisahkan. […]</p></a><div class="m-card__tagList"><a href="/tags/art/" aria-label="art"><span class="icon-art" aria-hidden="true"></span><span class="visually-hidden">art</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="/tags/art" data-total="1"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/tags/art/">1</option></select> of 1</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:40 AM: [build:critical-path] }

3:40:41 AM: [build:critical-path] Critical path for tags/love/index.html {

3:40:41 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}',

3:40:41 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Love | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="A section dedicated to heartfelt reflections, stories, and experiences that offer glimpses into my romantic journey." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/tags/love/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Love | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/tags/love/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="A section dedicated to heartfelt reflections, stories, and experiences that offer glimpses into my romantic journey." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}</style>\n' +

3:40:41 AM: [build:critical-path] `<link href="/tags-love.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/tags/love/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span><strong>Love: </strong><span data-description="A section dedicated to heartfelt reflections, stories, and experiences that offer glimpses into my romantic journey.">A section dedicated to heartfelt reflections, stories, and experiences that offer glimpses into my romantic journey.</span></p><section class="m-card"><a href="/articles/yu-aoi/?tag=love"><div class="m-card__header"><h2>Yu Aoi</h2><time datetime="2021-09-05T14:31:56">— Sep 5, 2021</time></div><p>Bagi saya, kecantikan Yu Aoi setara dengan 100 model Victoria’s Secret. Kenapa dia begitu sempurna di mata saya dan menjadi […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/fida/?tag=love"><div class="m-card__header"><h2>Fida</h2><time datetime="2021-07-20T14:40:54">— Jul 20, 2021</time></div><p>Tahun terakhir di SMA dan saya begitu khawatir dengan masa depan. Sempat terpikir untuk melamar menjadi loper koran setelah lulus, […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/sofie/?tag=love"><div class="m-card__header"><h2>Sofie</h2><time datetime="2021-06-09T14:39:39">— Jun 9, 2021</time></div><p>Setiap anak laki-laki yang beranjak remaja mengalami fase pubertas yang ditandai dengan keluarnya air mani melalui mimpi. Sofie adalah gadis […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/naoko-suzuki-mother-superior/?tag=love"><div class="m-card__header"><h2>Naoko Suzuki (Mother Superior)</h2><time datetime="2021-05-14T15:41:00">— May 14, 2021</time></div><p>Keseluruhan. Optimal. Mencakup semua kualitas. Pewarta paling cantik di NHK News. Sekali lagi, Irvine Welsh benar dengan teori sintingnya yang […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section><section class="m-card"><a href="/articles/mely/?tag=love"><div class="m-card__header"><h2>Mely</h2><time datetime="2021-05-05T16:55:49">— May 5, 2021</time></div><p>Sampai saat ini perasaan koyak di dada masih terasa meskipun perempuan ini sudah menikah. Demi Tuhan, saya tidak kecewa. Saya […]</p></a><div class="m-card__tagList"><a href="/tags/love/" aria-label="love"><span class="icon-love" aria-hidden="true"></span><span class="visually-hidden">love</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="/tags/love" data-total="1"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/tags/love/">1</option></select> of 1</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:41 AM: [build:critical-path] }

3:40:42 AM: [build:critical-path] Critical path for tags/slant/index.html {

3:40:42 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-footer{background:#fff;position:relative}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.a-arrow--double-left:before,.a-arrow--double-right:before{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--double-left:after,.a-arrow--double-right:after{left:14px}.a-arrow--double-left:after,.a-arrow--double-left:before{transform:rotate(45deg)}.a-arrow--double-right:after,.a-arrow--double-right:before{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}.m-pagination{padding:0 16px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-pagination{display:block;width:100%;position:relative}.m-pagination__container{list-style-type:none;width:100%;margin:0;padding:60px 0 0}.m-pagination__item{display:inline-block;width:15%}.m-pagination__navigator{width:40%;text-align:center;display:inline-block}.m-pagination__navigator select{font-size:17px;font-size:1rem;line-height:1.01116;padding:2px;margin-right:5px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer .a-copyright{position:absolute;bottom:0}.t-home{background:#fff}',

3:40:42 AM: [build:critical-path] html: `<!DOCTYPE html><html lang="en"><head><title>Slant | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="My point of view. My 2 cents. My universe. My allegation. My judgement. Don't believe me, please." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/tags/slant/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Slant | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/tags/slant/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="My point of view. My 2 cents. My universe. My allegation. My judgement. Don't believe me, please." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.m-footer{background:#fff;position:relative}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.a-arrow{position:relative;display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;border:2px solid transparent;border-radius:100px}.a-arrow:after{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--left:after{transform:rotate(45deg)}.a-arrow--right:after{transform:rotate(225deg)}.a-arrow--double-left:before,.a-arrow--double-right:before{content:"";display:block;box-sizing:border-box;position:absolute;width:10px;height:10px;border-bottom:2px solid;border-left:2px solid;left:6px;top:4px}.a-arrow--double-left:after,.a-arrow--double-right:after{left:14px}.a-arrow--double-left:after,.a-arrow--double-left:before{transform:rotate(45deg)}.a-arrow--double-right:after,.a-arrow--double-right:before{transform:rotate(225deg)}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}.m-pagination{padding:0 16px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-pagination{display:block;width:100%;position:relative}.m-pagination__container{list-style-type:none;width:100%;margin:0;padding:60px 0 0}.m-pagination__item{display:inline-block;width:15%}.m-pagination__navigator{width:40%;text-align:center;display:inline-block}.m-pagination__navigator select{font-size:17px;font-size:1rem;line-height:1.01116;padding:2px;margin-right:5px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.a-copyright{width:100%;background:#f5f5f5}.a-copyright__content{max-width:740px;margin:0 auto;text-align:center;padding:16px}.m-footer .a-copyright{position:absolute;bottom:0}.t-home{background:#fff}</style>\n` +

3:40:42 AM: [build:critical-path] `<link href="/tags-slant.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/tags/slant/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span><strong>Slant: </strong><span data-description="My point of view. My 2 cents. My universe. My allegation. My judgement. Don't believe me, please.">My point of view. My 2 cents. My universe. My allegation. My judgement. Don't believe me, please.</span></p><section class="m-card"><a href="/articles/analisa-pasar-saham/?tag=slant"><div class="m-card__header"><h2>Analisa Pasar Saham</h2><time datetime="2022-08-18T20:51:36">— Aug 18, 2022</time></div><p>Terdapat 3 pendekatan dalam menganalisa saham: Fundamental, teknikal, dan bandarmologi. […]</p></a><div class="m-card__tagList"><a href="/tags/slant/" aria-label="slant"><span class="icon-slant" aria-hidden="true"></span><span class="visually-hidden">slant</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="/tags/slant" data-total="1"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/tags/slant/">1</option></select> of 1</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:42 AM: [build:critical-path] }

3:40:42 AM: [build:critical-path] Critical path for tags/story/index.html {

3:40:42 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}',

3:40:42 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Story | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="Non fiction. Incredible stories to tell. This section is all about me interpreting messages from 5 senses." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/tags/story/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Story | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/tags/story/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="Non fiction. Incredible stories to tell. This section is all about me interpreting messages from 5 senses." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}</style>\n' +

3:40:42 AM: [build:critical-path] `<link href="/tags-story.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/tags/story/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span><strong>Story: </strong><span data-description="Non fiction. Incredible stories to tell. This section is all about me interpreting messages from 5 senses.">Non fiction. Incredible stories to tell. This section is all about me interpreting messages from 5 senses.</span></p><section class="m-card"><a href="/articles/benzema/?tag=story"><div class="m-card__header"><h2>Benzema</h2><time datetime="2022-06-04T09:19:15">— Jun 4, 2022</time></div><p>Dari lubuk hati paling dalam sebenarnya saya berharap Liverpool yang juara, namun nasib berkata lain. Di Lauhulmahfuz (Arab: لَوْحُ المَحْفُوظٍ) […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section><section class="m-card"><a href="/articles/templat-surat-permohonan-doa/?tag=story"><div class="m-card__header"><h2>Templat Surat Permohonan Doa</h2><time datetime="2022-05-20T16:34:16">— May 20, 2022</time></div><p>Berikut adalah contoh templat surat permohonan doa restu yang saya rangkai sedemikian rupa dari lubuk hati paling dalam. Semoga bermanfaat. […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section><section class="m-card"><a href="/articles/thomas-muller/?tag=story"><div class="m-card__header"><h2>Thomas Muller</h2><time datetime="2021-09-22T20:44:56">— Sep 22, 2021</time></div><p>Layaknya tim sepak bola, peran saya di lingkungan profesional hampir sama dengan Thomas Muller di timnas Jerman dan Bayern Munchen. […]</p></a><div class="m-card__tagList"><a href="/tags/story/" aria-label="story"><span class="icon-story" aria-hidden="true"></span><span class="visually-hidden">story</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="/tags/story" data-total="1"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/tags/story/">1</option></select> of 1</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:42 AM: [build:critical-path] }

3:40:43 AM: [build:critical-path] Critical path for tags/web/index.html {

3:40:43 AM: [build:critical-path] css: '@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}',

3:40:43 AM: [build:critical-path] html: '<!DOCTYPE html><html lang="en"><head><title>Web | The excitement of not knowing</title><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ie=edge" http-equiv="X-UA-Compatible"><meta content="My work as a web developer. My main source of income. Boring as hell but pays the bill." name="description"><link href="/assets/images/cropped-miayam-32x32.png" rel="icon" sizes="32x32"><link href="/assets/images/cropped-miayam-192x192.png" rel="icon" sizes="192x192"><link href="https://miayam.io/tags/web/" rel="canonical"><link href="/manifest.webmanifest" rel="manifest"><link href="/assets/images/cropped-miayam-192x192.png" rel="apple-touch-icon"><meta content="#fff" name="theme-color"><meta content="Web | The excitement of not knowing" property="og:title"><meta content="website" property="og:type"><meta content="https://miayam.io/tags/web/" property="og:url"><meta content="https://avatars2.githubusercontent.com/u/12558753" property="og:image"><meta content="miayam" property="og:site_name"><meta content="My work as a web developer. My main source of income. Boring as hell but pays the bill." property="og:description"><meta content="Eleventy" name="generator"><style>@font-face{font-family:icomoon-tags;src:url(/assets/fonts/icomoon-tags.eot);src:url(/assets/fonts/icomoon-tags.eot#iefix) format("embedded-opentype"),url(/assets/fonts/icomoon-tags.woff2) format("woff2"),url(/assets/fonts/icomoon-tags.ttf) format("truetype"),url(/assets/fonts/icomoon-tags.woff) format("woff"),url(/assets/fonts/icomoon-tags.svg#icomoon) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText"),local(".HelveticaNeueDeskInterface"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto"),local("DroidSans"),local("Tahoma")}.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.a-anchor{text-decoration:none;border:3px solid transparent}.a-anchor,.a-anchor:visited{color:#1b1b1b}.m-navigation{margin:0 auto;max-width:1024px;height:60px}@media only screen and (max-width:1000px){.m-navigation{border-bottom:1px solid rgba(0,0,0,.12)}}.m-navigation__list{height:100%;list-style-type:none;margin:0;padding:0}.m-navigation__list li{padding:0}.m-navigation__linkWrapper{display:inline-block;height:100%}.m-navigation__link{vertical-align:middle;display:table-cell;height:60px;text-align:center;padding:3px 12px}.m-navigation__link{width:90px}.o-header{height:auto;border-bottom:1px solid rgba(0,0,0,.12);z-index:2;position:fixed;top:0;width:100%;background-color:#fff}.a-more,.a-more span{display:inline-block}.a-more span{border:1px solid #aaa;border-radius:50%;height:8px;width:8px}.a-more span+span{margin-left:5px}.m-menu{margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);background-color:#fff;white-space:nowrap;display:inline-block;position:relative;width:100%;height:46px}.m-menu__hiddenTabs,.m-menu__tabs{list-style-type:none;height:100%;margin:0;padding:0;text-align:left}.m-menu__tabs{display:inline-block;width:90%;white-space:nowrap;overflow:hidden;margin-bottom:-17px}@media only screen and (max-width:425px){.m-menu__tabs{width:80%}}.m-menu__hiddenTabs{z-index:1;position:absolute;right:0;margin-right:0;background:#fff;color:#1b1b1b;border:1px solid rgba(0,0,0,.12);height:auto;display:none;min-width:150px;top:45.5px}.m-menu__moreTab,.m-menu__tab{position:relative;display:inline-block;margin:0 auto;height:45px;padding:0}.m-menu__moreTab span,.m-menu__tab span{padding-right:5px;font-size:13.6px}.m-menu__tab{min-width:15%}.m-menu__tab span{margin-right:5px;height:13.6px;width:13.6px;display:inline-block}.m-menu__moreTab{width:10%;background-color:#fff;display:none;height:30px}@media only screen and (max-width:425px){.m-menu__moreTab{width:15%}}.m-menu__label,.m-menu__moreLabel{font-size:15.2px;text-align:center;border:2px solid transparent;display:inline-block;padding-top:8px;height:45px;width:100%}.m-menu__label{min-width:80px}.m-headline{max-width:300px;margin:30px auto 0;background-color:#fff;color:#1b1b1b}.m-headline__logo{width:130px;height:130px;border:1px solid rgba(0,0,0,.3);border-radius:50%;display:block;margin:0 auto}@media only screen and (max-width:1000px){.m-headline__logo{margin-top:60px;width:100px;height:100px}}.m-headline__wording{text-align:center;font-weight:700;font-size:6px;font-size:1.2rem;line-height:4.25463}.m-card{border:1px solid rgba(0,0,0,.12);border-radius:8px}.m-card a{color:inherit;padding:20px 20px 0;display:block;text-decoration:none}.m-card__header{width:100%}.m-card__header h2{font-size:20px;font-size:1.25rem;line-height:1.34543;display:inline-block;width:70%;line-height:1.2}.m-card__header time{display:inline-block;width:29%;text-align:right;color:#595959;font-size:13.92px;line-height:1.25}@media only screen and (max-width:425px){.m-menu__label{min-width:85px}.m-card__header h2,.m-card__header time{width:100%;display:block;text-align:left}.m-card__header h2{margin-bottom:4.5px}.m-card__header time{margin-bottom:6px}}.m-card__tagList{margin:20px}.m-card__tagList span{display:inline-block;border-radius:4px;padding:8px;background-color:rgba(0,0,0,.12)}.m-card__tagList .visually-hidden{overflow:hidden;width:1px;height:1px;padding:0;margin:0;white-space:nowrap;color:rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.m-card__tagList a{display:inline-block;padding:unset;z-index:1;height:32px;border-radius:4px}.m-skeletonCard{animation:2s linear infinite shimmer;background:linear-gradient(90deg,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);background-size:450px 100%;border-radius:8px;width:100%;height:206px}[class^=icon-]{font-family:icomoon-tags!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-story:before{content:"\\e907"}.icon-art:before{content:"\\e90d"}.icon-slant:before{content:"\\e916"}.icon-all:before{content:"\\e982"}.icon-love:before{content:"\\e9da"}.icon-web:before{content:"\\ea80"}html{box-sizing:border-box;background-color:#f5f5f5;color:#1b1b1b;font-size:16px}html,html body{height:100%}html body{background-color:#f5f5f5}html h1{font-size:42px;font-size:2.625rem;line-height:2.56855}html h2{font-size:33px;font-size:2.0625rem;line-height:2.01815}html h1,html h2{padding-top:24px}html a,html li,html p{font-size:16px;font-size:1rem;line-height:.97849;line-height:1.59668}@media only screen and (max-width:768px){html{font-size:15px}html h1{font-size:39px;font-size:2.6rem;line-height:2.57618}html h2{font-size:31px;font-size:2.06667rem;line-height:2.04773}html h1,html h2{padding-top:22.5px}html a,html li,html p{font-size:15px;font-size:1rem;line-height:.99084}html a,html p{line-height:1.6089}html li{line-height:2rem;padding:8px 0}}*{box-sizing:inherit}a{text-underline-position:under;text-decoration-style:dotted}a{word-wrap:break-word}h1,h2{margin:0;font-family:Helvetica,Arial,sans-serif}body{font-family:system,Times New Roman,Times,serif;margin:0;padding:0;font-weight:400}img{max-width:100%;height:auto}li{line-height:2}@keyframes shimmer{0%{background-position:-700px 0}to{background-position:700px 0}}.o-posts{width:100%;min-height:66%;max-width:700px;margin:0 auto;padding-bottom:138px;padding-top:108px}@media only screen and (max-width:1000px){.o-posts{padding-top:30px;margin:32px auto}}.o-posts{max-width:450px}.o-posts h1:first-of-type,.o-posts h2:first-of-type{padding-top:unset}.o-posts .m-card+.m-card,.o-posts .m-skeletonCard+.m-skeletonCard{margin-top:20px}.o-posts__description{margin:0 0 16px;line-height:1.3;padding-left:10px}.o-posts__description strong{padding-right:5px}.o-posts__description [class^=icon-]{padding-right:5px;font-size:13.6px}@media only screen and (max-width:425px){.o-posts__cards,.o-posts__skeletonCards{padding:0 16px}}.o-posts__skeletonCards{display:none}.t-home{background:#fff}</style>\n' +

3:40:43 AM: [build:critical-path] `<link href="/tags-web.css?9590563304968d5f8c0c" rel="stylesheet" class="main-style" media="print" onload="this.media='all'"></head><body><div class="t-home" data-current-page="1" data-router-view="home"><header class="o-header" id="js-o-header" role="banner"><nav class="m-navigation" role="navigation"><ul class="m-navigation__list"><li class="m-navigation__linkWrapper"><a href="/tags/web/" class="a-anchor js-a-anchor m-navigation__link">Articles</a></li><li class="m-navigation__linkWrapper"><a href="/about/" class="a-anchor js-a-anchor m-navigation__link">About</a></li><li class="m-navigation__linkWrapper"><a href="/now/" class="a-anchor js-a-anchor m-navigation__link">Now</a></li></ul></nav></header><main class="o-posts" role="main"><div class="m-headline"><img alt="logo" class="lozad m-headline__logo" data-src="/assets/images/cropped-miayam-192x192.png" height="130px" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="130px"><h1 class="m-headline__wording">知らぬが仏</h1></div><nav class="m-menu" role="navigation"><ul class="m-menu__tabs" role="menu"><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="all"><span class="icon-all" aria-label="all" role="img"></span>All</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span>Web</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="story"><span class="icon-story" aria-label="story" role="img"></span>Story</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="slant"><span class="icon-slant" aria-label="slant" role="img"></span>Slant</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="art"><span class="icon-art" aria-label="art" role="img"></span>Art</div></li><li class="m-menu__tab" role="menuitem"><div class="js-m-menu__label m-menu__label" data-tag="love"><span class="icon-love" aria-label="love" role="img"></span>Love</div></li></ul><div class="m-menu__moreTab" data-width="45"><div class="m-menu__moreLabel" aria-label="more" role="button" aria-pressed="false" tabindex="0"><div class="a-more m-menu__moreIcon" aria-label="more" role="img"><span></span><span></span><span></span></div></div></div><ul class="m-menu__hiddenTabs"></ul></nav><section class="o-posts__skeletonCards"><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div><div class="m-skeletonCard m-skeletonCard--hCard m-skeletonCard--wCard"></div></section><section class="o-posts__cards"><p class="o-posts__description" data-tag="web"><span class="icon-web" aria-label="web" role="img"></span><strong>Web: </strong><span data-description="My work as a web developer. My main source of income. Boring as hell but pays the bill.">My work as a web developer. My main source of income. Boring as hell but pays the bill.</span></p><section class="m-card"><a href="/articles/intermediate-typescript/?tag=web"><div class="m-card__header"><h2>Intermediate TypeScript</h2><time datetime="2023-07-16T14:49:04">— Jul 16, 2023</time></div><p>This is a summary of Intermediate TypeScript on Frontend Masters […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/typescript-fundamental/?tag=web"><div class="m-card__header"><h2>TypeScript Fundamentals</h2><time datetime="2023-06-02T13:46:25">— Jun 2, 2023</time></div><p>This is a summary of TypeScript Fundamental V3 on FrontendMasters. […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/miayam-cms-under-the-hood/?tag=web"><div class="m-card__header"><h2>Miayam CMS Under The Hood</h2><time datetime="2022-05-22T07:39:42">— May 22, 2022</time></div><p>All contents here are served by https://cms.miayam.io. First of all, I don’t do DevOps. I just follow tutorials on Internet […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section><section class="m-card"><a href="/articles/responsive/?tag=web"><div class="m-card__header"><h2>Responsive</h2><time datetime="2022-04-06T18:18:07">— Apr 6, 2022</time></div><p>This article exhibits my highly opinionated approach to design. How I turn this beautiful mockup into code? 🌐&nbsp;Live Demo https://responsive.miayam.io […]</p></a><div class="m-card__tagList"><a href="/tags/web/" aria-label="web"><span class="icon-web" aria-hidden="true"></span><span class="visually-hidden">web</span></a></div></section></section><nav class="m-pagination" role="navigation"><ul class="m-pagination__container"><li class="m-pagination__item --first"><span class="a-arrow a-arrow--double-left"></span></li><li class="m-pagination__item --prev"><span class="a-arrow a-arrow--left"></span></li><li class="m-pagination__navigator" data-baselink="/tags/web" data-total="1"><label for="pagination"></label><select aria-label="pagination" id="pagination"><option value="/tags/web/">1</option></select> of 1</li><li class="m-pagination__item --next"><span class="a-arrow a-arrow--right"></span></li><li class="m-pagination__item --last"><span class="a-arrow a-arrow--double-right"></span></li></ul></nav></main></div><footer class="m-footer"><div class="a-copyright"><p class="a-copyright__content">Made with ❤️ by Muhamad D. R.</p></div></footer><script async="" class="main-script" src="/scripts-home-8d03090afd07bd25188e.js?9590563304968d5f8c0c" type="text/javascript"></script></body></html>`

3:40:43 AM: [build:critical-path] }

3:40:43 AM: [build:stats ]

3:40:43 AM: [build:stats ] > miayam@1.0.0 build:stats /opt/build/repo

3:40:43 AM: [build:stats ] > node src/scripts/tasks/stats.js

3:40:43 AM: [build:stats ]

3:40:44 AM: [build:stats ] CSS

3:40:44 AM: [build:stats ] _site/2-2.css 8.7 KB

3:40:44 AM: [build:stats ] _site/about-about.css 5.0 KB

3:40:44 AM: [build:stats ] _site/articles-analisa-pasar-saham.css 5.5 KB

3:40:44 AM: [build:stats ] _site/articles-benzema.css 5.4 KB

3:40:44 AM: [build:stats ] _site/articles-fida.css 5.3 KB

3:40:44 AM: [build:stats ] _site/articles-intermediate-typescript.css 7.9 KB

3:40:44 AM: [build:stats ] _site/articles-melodramatis.css 5.3 KB

3:40:44 AM: [build:stats ] _site/articles-mely.css 5.3 KB

3:40:44 AM: [build:stats ] _site/articles-miayam-cms-under-the-hood.css 5.4 KB

3:40:44 AM: [build:stats ] _site/articles-naoko-suzuki-mother-superior.css 5.4 KB

3:40:44 AM: [build:stats ] _site/articles-responsive.css 7.9 KB

3:40:44 AM: [build:stats ] _site/articles-sofie.css 5.3 KB

3:40:44 AM: [build:stats ] _site/articles-templat-surat-permohonan-doa.css 5.4 KB

3:40:44 AM: [build:stats ] _site/articles-thomas-muller.css 5.4 KB

3:40:44 AM: [build:stats ] _site/articles-typescript-fundamental.css 8.3 KB

3:40:44 AM: [build:stats ] _site/articles-yu-aoi.css 5.4 KB

3:40:44 AM: [build:stats ] _site/index.css 8.7 KB

3:40:44 AM: [build:stats ] _site/styles-404.css 2.0 KB

3:40:44 AM: [build:stats ] _site/styles-about.css 12.9 KB

3:40:44 AM: [build:stats ] _site/styles-blog.css 12.8 KB

3:40:44 AM: [build:stats ] _site/styles-home.css 18.4 KB

3:40:44 AM: [build:stats ] _site/tags-art.css 8.7 KB

3:40:44 AM: [build:stats ] _site/tags-love.css 8.7 KB

3:40:44 AM: [build:stats ] _site/tags-slant.css 8.7 KB

3:40:44 AM: [build:stats ] _site/tags-story.css 8.7 KB

3:40:44 AM: [build:stats ] _site/tags-web.css 8.7 KB

3:40:44 AM: [build:stats ]

3:40:44 AM: [build:stats ]

3:40:44 AM: [build:stats ] JS

3:40:44 AM: [build:stats ] _site/scripts-404-e4bcebf058bcbc09fed8.js 993 Bytes

3:40:44 AM: [build:stats ] _site/scripts-about-4d030cbb301e69fecf26.js 8.4 KB

3:40:44 AM: [build:stats ] _site/scripts-article-af0ab42dc07f67a02e97.js 1.7 KB

3:40:44 AM: [build:stats ] _site/scripts-blog-e28bfbe6305e5e02a020.js 8.4 KB

3:40:44 AM: [build:stats ] _site/scripts-home-8d03090afd07bd25188e.js 14.8 KB

3:40:44 AM: [build:stats ] _site/scripts-iterator-89b271cfe9d901ba1a4f.js 924 Bytes

3:40:44 AM: [build:stats ] _site/scripts-share-291e8fe8f4388a2b562a.js 9.0 KB

3:40:44 AM: [build:stats ]

3:40:44 AM: [build:stats ]

3:40:44 AM: ​

3:40:44 AM: (build.command completed in 35.5s)

3:40:44 AM: ​

3:40:44 AM: (Netlify Build completed in 36s)

3:40:45 AM: Section completed: building

3:40:48 AM: Finished processing build request in 1m6.367s

3:40:44 AM: Deploy site

3:40:44 AM: ────────────────────────────────────────────────────────────────

3:40:44 AM: ​

3:40:44 AM: Starting to deploy site from '_site'

3:40:44 AM: Calculating files to upload

3:40:44 AM: 40 new files to upload

3:40:44 AM: 0 new functions to upload

3:40:44 AM: Section completed: deploying

3:40:44 AM: Site deploy was successfully initiated

3:40:44 AM: ​

3:40:44 AM: (Deploy site completed in 474ms)

3:40:44 AM: Netlify Build Complete

3:40:44 AM: ────────────────────────────────────────────────────────────────

3:40:44 AM: ​

3:40:45 AM: Caching artifacts

3:40:45 AM: Started saving node modules

3:40:45 AM: Finished saving node modules

3:40:45 AM: Started saving build plugins

3:40:45 AM: Finished saving build plugins

3:40:45 AM: Started saving corepack cache

3:40:45 AM: Finished saving corepack cache

3:40:45 AM: Started saving pip cache

3:40:45 AM: Finished saving pip cache

3:40:45 AM: Started saving emacs cask dependencies

3:40:45 AM: Finished saving emacs cask dependencies

3:40:45 AM: Started saving maven dependencies

3:40:45 AM: Finished saving maven dependencies

3:40:45 AM: Started saving boot dependencies

3:40:45 AM: Finished saving boot dependencies

3:40:45 AM: Started saving rust rustup cache

3:40:45 AM: Finished saving rust rustup cache

3:40:45 AM: Started saving go dependencies

3:40:45 AM: Finished saving go dependencies

3:40:45 AM: Build script success

3:40:46 AM: Uploading Cache of size 240.0MB

3:40:48 AM: Section completed: cleanup

3:40:44 AM: Post processing - header rules

3:40:44 AM: Post processing - redirect rules

3:40:44 AM: Starting post processing

3:40:44 AM: Skipping form detection

3:40:44 AM: Post processing done

3:40:44 AM: Section completed: postprocessing

3:40:45 AM: Site is live ✨