<?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom"> <title>🤓Jecelyn Yeen 🤓</title> <subtitle>Articles, experiments, musings by Jecelyn Yeen.</subtitle> <link href="https://jec.fish/index.xml" rel="self"/> <link href="https://jec.fish"/> <updated>2022-12-27T00:00:00-00:00</updated> <id>https://jec.fish</id> <author> <name>Jecelyn Yeen</name> </author> <entry> <title>Coding - The Power Language that Everyone can Speak</title> <link href="https://jec.fish/deck/coding-the-powerful-language"/> <updated>2017-09-30T00:00:00-00:00</updated> <id>https://jec.fish/deck/coding-the-powerful-language</id> <summary>Talk about coding, how the language evolved, myths, and how you could start</summary> <category term="deck"/> <content type="html">&lt;p&gt;Human languages has a long history in human evolution. Thousands of years or maybe more. Coding languages are much shorter than that. However, many of us probably could not live a day without coding languages nowadays.&lt;/p&gt; &lt;p&gt;The invention of coding languages is indeed important in human history. Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;f1bf94d1d6b9454cbc39f3aa5365149c&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/coding-the-powerful-language-that-everyone-can-speak&quot;&gt;https://speakerdeck.com/jecfish/coding-the-powerful-language-that-everyone-can-speak&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;It was a challenge for me to deliver the talk in less than 18 minutes (TEDx style) because a usual tech talk lasts between 30 to 60 minutes. I did quite a few rounds of practices beforehand, but was still nervous on stage, hah.&lt;/p&gt; &lt;p&gt;I like how I structured my slides - the flow and the explanation. However, I don&#39;t like the delivery that much, haha. 😆 It&#39;s painful to watch myself talking. This is one of my early days speaking, probably that won&#39;t change that much still. 😂&lt;/p&gt; &lt;p&gt;The transcript of the slides is available as well, get it at &lt;a href=&quot;https://speakerdeck.com/jecfish/coding-the-powerful-language-transcript&quot;&gt;speakerdeck.com/jecfish/coding-the-powerful-language-transcript&lt;/a&gt;. If it&#39;s too painful to watch, just read it ok! 🤣&lt;/p&gt; &lt;p&gt;There is a video recording as well, during TEDxSunwayUniversity 2017. 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/pKTa7yzDSsE&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/pKTa7yzDSsE?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/pKTa7yzDSsE/hqdefault.jpg alt=&#39;Coding: The Power Language that Everyone can Speak | TedxSunwayUniversity&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Coding: The Power Language that Everyone can Speak | TedxSunwayUniversity&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the event.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.8359375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/coding-the-powerful-language-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/coding-the-powerful-language-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/coding-the-powerful-language-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/coding-the-powerful-language-01.jpg&quot; alt=&quot;With my all-time supporters - Henry and Chee Yim and the drawing of me (that does not look like me, at all 😆)&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;With my all-time supporters - Henry and Chee Yim and the drawing of me (that does not look like me, at all 😆)&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261710655557472256&quot;&gt; twitter.com/jecfish/status/1261710655557472256 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Processor Pattern with Angular Dependency Injection</title> <link href="https://jec.fish/deck/angular-di-processor-pattern"/> <updated>2018-09-27T00:00:00-00:00</updated> <id>https://jec.fish/deck/angular-di-processor-pattern</id> <summary>How to utilise the awesome Angular Dependency Injection (particularly Injection token and multi provider) – to implement the processor pattern</summary> <category term="deck"/> <content type="html">&lt;p&gt;Processor Design Pattern (Command Pattern) is widely used in building enterprise grade software. In this session, I will share how to utilise the awesome Angular Dependency Injection to implement the pattern.&lt;/p&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;7ed7cab0defa44509eae2f5f30a9ed0b&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/angular-di-processor-pattern&quot;&gt;https://speakerdeck.com/jecfish/angular-di-processor-pattern&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;I did this sharing multiple times. Here is a video recording, during the International JavaScript Conference (IJS) 2018. 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/wNH0Vs6arNc&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/wNH0Vs6arNc?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/wNH0Vs6arNc/maxresdefault.jpg alt=&#39;Processor Pattern with Angular Dependency Injection | Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Processor Pattern with Angular Dependency Injection | Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the conference.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:75%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/angular-di-processor-pattern-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/angular-di-processor-pattern-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/angular-di-processor-pattern-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/angular-di-processor-pattern-01.jpg&quot; alt=&quot;Two Austrians and one Malaysian - Manfred, Michael and me.&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Two Austrians and one Malaysian - Manfred, Michael and me.&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1045376362792579073&quot;&gt; twitter.com/jecfish/status/1045376362792579073 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>以 PWA 實現 Angular 網站開發：離線、推播、Service Worker</title> <link href="https://jec.fish/deck/angular-pwa-zh"/> <updated>2018-11-16T00:00:00-00:00</updated> <id>https://jec.fish/deck/angular-pwa-zh</id> <summary>如何使用 Angular 實現 PWA 網站開發, 優化使用者體驗</summary> <category term="deck"/> <content type="html">&lt;p&gt;隨著 PWA 技術的成熟以及瀏覽器的支援度提高，2018 年可謂是 PWA 爆發的一年。本次分享將涵蓋 PWA 的一系列技術 - 離線、推播、Service Worker，以及如何使用 Angular 實現 PWA 網站開發，優化使用者體驗。&lt;/p&gt; &lt;p&gt;台北第一届Angular开发者大会。本来打算除了开场自我介绍之外，全程都以英语为主。主要是因为没试过用英语演讲啊，日常华语交谈和正规演讲毕竟是有区别的。&lt;/p&gt; &lt;p&gt;我的分享时间比较靠后。对比了前面几位讲者分享时现场观众的反应（英文vs华文），临时决定改用华语分享。演讲中间有些卡卡，因为我脑里不断在进行翻译，有些技术用语（技术术语）确实是不知道啊。😆&lt;/p&gt; &lt;p&gt;第一次华语的分享，就这样献给了台北！表现得还可以，过得去，有进步空间。&lt;/p&gt; &lt;p&gt;下台后，蛮多与会者来找我进行分享与交流的，看来大家对于提升用户体验还是蛮热心的。還遇到幾位大馬的同胞呢（駐台灣的馬來西亞開發者），真开心。&lt;/p&gt; &lt;p&gt;簡報鏈接在此 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;25b0dd345c874761ba6847870dc49029&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/angular-pwa-ngtw&quot;&gt;https://speakerdeck.com/jecfish/angular-pwa-ngtw&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;NG-TW 2019 的主办方有录下这场分享。📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/NDBFRWhzE5I&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/NDBFRWhzE5I?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/NDBFRWhzE5I/maxresdefault.jpg alt=&#39;以 PWA 實現 Angular 網站開發：離線、推播、Service Worker - Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;以 PWA 實現 Angular 網站開發：離線、推播、Service Worker - Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;附上一張我在大會拍的照片。&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/angular-pwa-zh-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/angular-pwa-zh-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/angular-pwa-zh-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/angular-pwa-zh-01.jpg&quot; alt=&quot;第一次（也是唯一的一次）在技術大會上看到手語師（sign language interpreter @ tech conf）&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;第一次（也是唯一的一次）在技術大會上看到手語師（sign language interpreter @ tech conf）&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261710946277265408&quot;&gt; twitter.com/jecfish/status/1261710946277265408 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt;</content> </entry> <entry> <title>NGXS - State Management Made Simple</title> <link href="https://jec.fish/deck/ngxs-state-management"/> <updated>2019-01-10T00:00:00-00:00</updated> <id>https://jec.fish/deck/ngxs-state-management</id> <summary>Talk about NGXS &amp; its concepts. NGXS took many of the concepts of Redux but reimagined them for Angular.</summary> <category term="deck"/> <content type="html">&lt;p&gt;While NgRx seems like the de facto state management solution for Angular applications, we have NGXS as well. Designed to be simple &amp;amp; accessible, it took many of the concepts of Redux but reimagined them for Angular.&lt;/p&gt; &lt;p&gt;In this talk, I share about why NGXS - its concepts and core features, and did a live demo!&lt;/p&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;b36831c583154a55b0da82c025bb4a3f&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/ngxs&quot;&gt;https://speakerdeck.com/jecfish/ngxs&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;There is a video recording as well, during NG-ATL (ngAtlanta) 2019 (but the demo screen is not recorded somehow). 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/0bhfUGjn0KA&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/0bhfUGjn0KA?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/0bhfUGjn0KA/maxresdefault.jpg alt=&#39;NGXS, State Management Made Simple - Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;NGXS, State Management Made Simple - Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;I really like my coffee demo. In fact, I ran a few workshops using this demo. Here is the GitHub repo: &lt;a href=&quot;https://github.com/jecfish/ngxs-coffee&quot;&gt;ngxs-coffee&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the conference.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:75%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/ngxs-state-management-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/ngxs-state-management-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/ngxs-state-management-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/ngxs-state-management-01.jpg&quot; alt=&quot;A rare conference which female speakers are more than men! 💪&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;A rare conference which female speakers are more than men! 💪&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1083386398214901760&quot;&gt; twitter.com/jecfish/status/1083386398214901760 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>How We Built NG-MY Website</title> <link href="https://jec.fish/deck/how-we-built-ng-my"/> <updated>2019-07-06T00:00:00-00:00</updated> <id>https://jec.fish/deck/how-we-built-ng-my</id> <summary>Performance optimizations, SEO, Customized Angular CLI Build</summary> <category term="deck"/> <content type="html">&lt;p&gt;In this talk, we shared about the learnings and techniques we applied in building the NG-MY Website, you can apply these techniques in your projects too!&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;htttps://ng-my.org&quot;&gt;NG-MY.org&lt;/a&gt; is a speedy Single Page Application (SPA), SEO friendly website, built for the NG-MY 2019 conference. It is built using the Angular framework.&lt;/p&gt; &lt;p&gt;These are the area we covered:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;How we cut cost&lt;/li&gt; &lt;li&gt;How we collaborated&lt;/li&gt; &lt;li&gt;How we made the website fast&lt;/li&gt; &lt;li&gt;What are some techniques we used (CSS, Angular, etc)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;45c0010c1f2a4fad95fe7d8d9e0d874d&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/how-we-build-ng-my-website&quot;&gt;https://speakerdeck.com/jecfish/how-we-build-ng-my-website&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;There is a video recording as well, during NG-MY Conference 2019. 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/6l779_V4LV8&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/6l779_V4LV8?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/6l779_V4LV8/maxresdefault.jpg alt=&#39;How We Build NG-MY Website: Performance, SEO.. | Jenning Ho, Adrian Yeong, Jecelyn Yeen | NG-MY 2019&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;How We Build NG-MY Website: Performance, SEO.. | Jenning Ho, Adrian Yeong, Jecelyn Yeen | NG-MY 2019&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the conference, it was fun!&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:48.14453125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/how-we-built-ng-my-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/how-we-built-ng-my-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/how-we-built-ng-my-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/how-we-built-ng-my-01.jpg&quot; alt=&quot;All the Google Developer Experts (GDE) at NG-MY 2019!&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;All the Google Developer Experts (GDE) at NG-MY 2019!&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261711138569334785&quot;&gt; twitter.com/jecfish/status/1261711138569334785 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Web Performance Optimization</title> <link href="https://jec.fish/deck/web-performance-optimization"/> <updated>2019-08-31T00:00:00-00:00</updated> <id>https://jec.fish/deck/web-performance-optimization</id> <summary>How to do image, web font, and JavaScript optimization</summary> <category term="deck"/> <content type="html">&lt;p&gt;Tips on how to create speedy and performant websites. You can easily apply these techniques in your website too!&lt;/p&gt; &lt;p&gt;Here is what we will cover:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Image optimization&lt;/li&gt; &lt;li&gt;Web Font optimization&lt;/li&gt; &lt;li&gt;JavaScript optimization&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;ae71f076840a410e8eaaa662d2b2ab0c&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/web-performance-optimization&quot;&gt;https://speakerdeck.com/jecfish/web-performance-optimization&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;There is a video recording as well, during the Women Who Code Connect Conference 2019. 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/ACA3yBHBUuE&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/ACA3yBHBUuE?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/ACA3yBHBUuE/maxresdefault.jpg alt=&#39;Web Performance Optimization - Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Web Performance Optimization - Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the conference.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/web-performance-optimization-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/web-performance-optimization-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/web-performance-optimization-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/web-performance-optimization-01.jpg&quot; alt=&quot;WWCODEKL bunch at the conf&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;WWCODEKL bunch at the conf&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261711400121937920&quot;&gt; twitter.com/jecfish/status/1261711400121937920 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Modern JavaScript Frameworks and SEO</title> <link href="https://jec.fish/deck/modern-js-frameworks-and-seo"/> <updated>2019-10-22T00:00:00-00:00</updated> <id>https://jec.fish/deck/modern-js-frameworks-and-seo</id> <summary>How do bots see your single page application? Sharing SEO tips for modern JavaScript frameworks.</summary> <category term="deck"/> <content type="html">&lt;p&gt;In this session, you will learn some facts about Google Search, its rendering pipeline and the various tools which can help you diagnose the gap between what your users see versus what Google Search sees.&lt;/p&gt; &lt;p&gt;Many modern JavaScript frameworks render their HTML content on the client-side, while assuming that every environment that is accessing their pages are as modern as they are. However, many search engines – including Google Search – do not behave exactly the same as a user’s browser.&lt;/p&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;d06ec13ba312419fbc1d65b16f038082&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/js-seo&quot;&gt;https://speakerdeck.com/jecfish/js-seo&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;There is a video recording as well, during FrontCon Latvia 2019. 📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/-0DoYpj3SVc&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/-0DoYpj3SVc?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/-0DoYpj3SVc/hqdefault.jpg alt=&#39;Modern JavaScript Frameworks and SEO by Jecelyn Yeen at FrontCon 2019&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Modern JavaScript Frameworks and SEO by Jecelyn Yeen at FrontCon 2019&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the conference.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/modern-js-frameworks-and-seo-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/modern-js-frameworks-and-seo-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/modern-js-frameworks-and-seo-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/modern-js-frameworks-and-seo-01.jpg&quot; alt=&quot;I did a Vuex Workshop at the conference too, and all my workshop attendees... are gentlemen!&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;I did a Vuex Workshop at the conference too, and all my workshop attendees... are gentlemen!&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261711618590703616&quot;&gt; twitter.com/jecfish/status/1261711618590703616 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Learning Functional Programming through Game</title> <link href="https://jec.fish/deck/learning-rx-js-through-game"/> <updated>2019-11-03T00:00:00-00:00</updated> <id>https://jec.fish/deck/learning-rx-js-through-game</id> <summary>Learn by building the famous trex game with RxJs</summary> <category term="deck"/> <content type="html">&lt;p&gt;It is a workshop on functional programming. Introducing the concept and use RxJs to recreate the famous trex game.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/learning-rx-js-through-game-02.gif&quot; alt=&quot;Chrome 404 trex game&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Chrome 404 trex game&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;f635ee81fd5543c18b820da226aacf4e&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/rxjs-trex&quot;&gt;https://speakerdeck.com/jecfish/rxjs-trex&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Play the game here (live demo): &lt;a href=&quot;https://rxjs-trex.netlify.app/&quot;&gt;rxjs-trex.netlify.app&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;The source code is available in two flavors:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;vanilla JavaScript: &lt;a href=&quot;https://stackblitz.com/edit/rxjs-trex-run&quot;&gt;stackblitz.com/edit/rxjs-trex-run&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Angular: &lt;a href=&quot;https://github.com/jecfish/rxjs-trex&quot;&gt;github.com/jecfish/rxjs-trex&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here is a photo of me during the talk @ GDG SEA Summit 2019. (GDG = Google Developers Group)&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:53.515625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/learning-rx-js-through-game-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/learning-rx-js-through-game-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/learning-rx-js-through-game-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/learning-rx-js-through-game-01.jpg&quot; alt=&quot;Me explaning the trex game&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Me explaning the trex game&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261711814808596480&quot;&gt; twitter.com/jecfish/status/1261711814808596480 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>如何打造高性能，快速且SEO友好的单页应用（SPA）</title> <link href="https://jec.fish/deck/spa-performance-zh"/> <updated>2019-11-24T00:00:00-00:00</updated> <id>https://jec.fish/deck/spa-performance-zh</id> <summary>为大家介绍了各种简单的效能调校的技巧，涵盖了JavaScript，文字以及图像的优化。</summary> <category term="deck"/> <content type="html">&lt;p&gt;如何利用Angular框架建立一个面向群众，高性能的网页呢？本次的分享为大家介绍了各种简单的效能调校技巧，涵盖了JavaScript，文字以及图像的优化。&lt;/p&gt; &lt;p&gt;这是我第二次用华语在台上分享，首次在杭州演说（上一次在台北）。还是有点不习惯，毕竟不太常用中文进行正规演说。很多词汇特地事先翻译了一下，练习了一下。现场观众的反应蛮热烈的，确实令人鼓舞。😃&lt;/p&gt; &lt;p&gt;简报链接在此 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;4ac34b0f11a9484e86239b17cf00fe62&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/ru-he-da-zao-gao-xing-neng-qie-seoyou-hao-de-dan-ye-ying-yong-spa&quot;&gt;https://speakerdeck.com/jecfish/ru-he-da-zao-gao-xing-neng-qie-seoyou-hao-de-dan-ye-ying-yong-spa&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://ng-china.org/&quot;&gt;NG-CHINA 2019&lt;/a&gt; 的主办方有录下这场演说。📹&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/M84OHIWdFX0&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/M84OHIWdFX0?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/M84OHIWdFX0/maxresdefault.jpg alt=&#39;如何打造高性能，快速且SEO友好的SPA网页 - Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;如何打造高性能，快速且SEO友好的SPA网页 - Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;在此附上一张我在大会拍的照片。&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/spa-performance-zh-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/spa-performance-zh-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/spa-performance-zh-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/spa-performance-zh-02.jpg&quot; alt=&quot;生平第一次脸被印在这么一块大板上，要好好纪念。把Angular程序猿也带上。&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;生平第一次脸被印在这么一块大板上，要好好纪念。把Angular程序猿也带上。&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261711976993943552&quot;&gt; twitter.com/jecfish/status/1261711976993943552 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt;</content> </entry> <entry> <title>Introducing New Web APIs and Stylings</title> <link href="https://jec.fish/deck/new-web-apis-and-stylings"/> <updated>2019-12-09T00:00:00-00:00</updated> <id>https://jec.fish/deck/new-web-apis-and-stylings</id> <summary>What are the new and upcoming web APIs &amp; shiny new CSS features?</summary> <category term="deck"/> <content type="html">&lt;p&gt;Really ah? The web is so &amp;quot;geng&amp;quot; (incredibly powerful) meh? This talk will cover the new and upcoming web APIs &amp;amp; shiny new CSS features to build beautiful, fast, and powerful web apps.&lt;/p&gt; &lt;p&gt;The full title of this talk was actually &amp;quot;Web Can Do This Meh?! Introducing New Web APIs &amp;amp; Stylings ✨&amp;quot;. 💯 made in &lt;strong&gt;#malaysia&lt;/strong&gt;, haha.&lt;/p&gt; &lt;p&gt;Here are the slides 👉🏼&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;6836e4b92aae481a9c64d87a4093f9ac&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/new-web-api-and-stylings&quot;&gt;https://speakerdeck.com/jecfish/new-web-api-and-stylings&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;This talk was delivered in &lt;a href=&quot;https://devfest.gdgkl.dev/schedule/121&quot;&gt;DevFest KL 2019&lt;/a&gt;. No video recorded. Here is a photo of me during the conference.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:66.69921875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/new-web-apis-and-stylings-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/new-web-apis-and-stylings-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/new-web-apis-and-stylings-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/new-web-apis-and-stylings-01.jpg&quot; alt=&quot;Groupie with the speakers and cute dino!&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Groupie with the speakers and cute dino!&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261712164282232832&quot;&gt; twitter.com/jecfish/status/1261712164282232832 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Becoming a GDE - What, Why, and How</title> <link href="https://jec.fish/deck/becoming-a-gde"/> <updated>2020-05-10T00:00:00-00:00</updated> <id>https://jec.fish/deck/becoming-a-gde</id> <summary>Talk about GDE the program &amp; sharing my 4 years&#39; experience in the program.</summary> <category term="deck"/> <content type="html">&lt;p&gt;I was a Google Developer Expert (GDE) on Angular and Web technologies from 2016 to 2020. Here is my sharing on the GDE program - what is it about, how to become one, and my 4 years experience in it.&lt;/p&gt; &lt;p&gt;Oh, I am no longer a GDE anymore. Why is that? Read on! 👀&lt;/p&gt; &lt;p&gt;Here&#39;s the slides:&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;2e0da86de886408c8ad2a1ca9c7f992e&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/becoming-a-gde&quot;&gt;https://speakerdeck.com/jecfish/becoming-a-gde&lt;/a&gt; &lt;/noscript&gt; &lt;h2&gt;Official GDE program information&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;GDE program details &lt;a href=&quot;https://developers.google.com/community/experts&quot;&gt;here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;GDE directory &lt;a href=&quot;https://developers.google.com/community/experts/directory&quot;&gt;here&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h2&gt;GDE community resources&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;Aaron Frosty, Angular GDE: &lt;a href=&quot;https://medium.com/@frosty/preparing-to-become-a-gde-752b551c88df&quot;&gt;Preparing to be a GDE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Stephen Fluin, Developer relations, Googler: &lt;a href=&quot;https://fluin.io/blog/how-to-become-an-angular-gde&quot;&gt;How to Become an Angular GDE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Wajat Karim, Android GDE: &lt;a href=&quot;https://wajahatkarim.com/2020/02/gde/&quot;&gt;Becoming a GDE in Android&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h2&gt;How&#39;s my experience with the program?&lt;/h2&gt; &lt;p&gt;It&#39;s been a &lt;strong&gt;fruitful experience&lt;/strong&gt;. Throughout these four years, I visited various countries, spoke in different conferences, and met and collaborated with my fellow GDEs.&lt;/p&gt; &lt;p&gt;The program has widened my horizons and challenged me to keep on learning &amp;amp; growing. Here&#39;s a review of my past 4 years of community involvement, partly enabled by the GDE program.&lt;/p&gt; &lt;h3&gt;Year 2016&lt;/h3&gt; &lt;p&gt;First year in the program. Visited both the US &amp;amp; attended Chrome Dev Summit (CDS) for the very first time! How excited I was to meet the Chrome team members and developers in real life. 🤩 Checking out what&#39;s available in the booths is equally exciting. For me, this experience set the standard of what a good tech conference experience should be.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:62.5%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-07.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-07.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-07.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-07.jpg&quot; alt=&quot;Paul Irish talks about Chrome DevTools at CDS&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Paul Irish talks about Chrome DevTools at CDS&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Also did a video shooting for the first time as well, so nervous! It was the &lt;a href=&quot;https://youtu.be/kEieXe-3DGU&quot;&gt;web developer portrait&lt;/a&gt; series by Google. Walking on the street, talking to myself and NGs for... quite a few times.&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/kEieXe-3DGU&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/kEieXe-3DGU?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/kEieXe-3DGU/maxresdefault.jpg alt=&#39;Web Developer Portrait - Jecelyn Yeen&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Web Developer Portrait - Jecelyn Yeen&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;Continued to host local meetups and workshops as I always do. Slowly received more invitations to speak in cross state local events. Also continued to publish online tutorials on &lt;a href=&quot;https://scotch.io/@jecelyn&quot;&gt;scotch.io&lt;/a&gt; and &lt;a href=&quot;https://medium.com/@jecfish&quot;&gt;Medium&lt;/a&gt;.&lt;/p&gt; &lt;h3&gt;Year 2017&lt;/h3&gt; &lt;p&gt;Attended &lt;a href=&quot;https://events.google.com/io/&quot;&gt;Google I/O&lt;/a&gt;, the annual developer conference for the first time. Sitting at the front row during the keynote! Met my fellow &lt;a href=&quot;https://www.womenwhocode.com/&quot;&gt;Women Who Code&lt;/a&gt; from around the world during the conference. (Can you spot me? 🕵🏼‍♀️)&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-01.jpg&quot; alt=&quot;Women Who Code at Google IO&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Women Who Code at Google IO&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Also attended &lt;a href=&quot;https://2017.ng-conf.org/&quot;&gt;ng-conf&lt;/a&gt;, the original Angular conference @ Salt Lake City, US. Thanks to the organizer &lt;a href=&quot;https://twitter.com/aaronfrost?lang=en&quot;&gt;@Frosty&lt;/a&gt; (Angular GDE) for sponsoring my ticket, which I could not afford. The conference was very well-organized, entertaining and insightful. This amazing experience inspired me to start planning a conference to bring this wonderful experience closer to home.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-08.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-08.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-08.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-08.jpg&quot; alt=&quot;Raul, Jorge &amp; me (Angular GDEs) at ng-conf&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Raul, Jorge &amp; me (Angular GDEs) at ng-conf&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;The same year, I got accepted to my first two overseas conferences @ &lt;a href=&quot;https://codecamp.ro/&quot;&gt;Codecamp, Romania&lt;/a&gt; &amp;amp; &lt;a href=&quot;https://youtu.be/rIpzhgz5Y_o&quot;&gt;DevFest, Cebu, Phillipines&lt;/a&gt;! Big crowd, both with over 800+ attendees. Oh, I also did a sharing in Phnom Penh, Cambodia.&lt;/p&gt; &lt;h3&gt;Year 2018&lt;/h3&gt; &lt;p&gt;As part of my plan towards organizing an international conference, I took up the role to organize &lt;a href=&quot;https://sunwayecho.wordpress.com/2018/07/25/google-i-o-extended-kuala-lumpur-2018/&quot;&gt;Google I/O Extended in Kuala Lumpur&lt;/a&gt;. A lot of first times for me personally. From drafting sponsorship proposal and budgeting to event scheduling and printing merchandise. I&#39;m grateful to have gotten valuable advice from other GDEs and help from the volunteers.&lt;/p&gt; &lt;p&gt;We had 400 attendees. The turn up rate was 96%, which was very good for Malaysian standards. Our efforts on promoting a responsible culture paid off.&lt;/p&gt; &lt;p&gt;At the same time, I&#39;ve unlocked more overseas speaking too @ Germany, Taiwan &amp;amp; US. Good content matters, but the GDE title did (probably) put me in a better position, I guess.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:44.7265625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-02.jpg&quot; alt=&quot;Google IO Extended KL 2018&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Google IO Extended KL 2018&lt;/figcaption&gt;&lt;/figure&gt; &lt;h3&gt;Year 2019&lt;/h3&gt; &lt;p&gt;2019 is indeed a busy year for me. Full of conference travels, and finally realizing a long dream of mine - &lt;strong&gt;&lt;a href=&quot;https://ng-my.org/&quot;&gt;NG-MY&lt;/a&gt;&lt;/strong&gt;, the first Angular conference in the region!&lt;/p&gt; &lt;p&gt;Challenging indeed. Although I gained some experiences last year, this time it is fully self-funded. The stress of 💵 is real, since the event scale is bigger because we planned to invite international speakers. With the support from my fellow Angular GDEs (speaking, sponsoring, sharing contacts and advice) and my awesome &lt;a href=&quot;https://2019.ng-my.org/team&quot;&gt;team&lt;/a&gt;, we made it!&lt;/p&gt; &lt;p&gt;It&#39;s a successful one. Good mix of international and regional speakers, 400+ attendees from 30+ countries, fun and loads of useful content. We also sponsored about 40 scholarships to help the local &amp;amp; regional attendees come together.&lt;/p&gt; &lt;p&gt;Oh, did I mention that I travelled to 12 countries, 25+ cities in the same year, and spoke in 25+ events? It was a crazy year!&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:74.51171875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-03.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-03.jpg&quot; alt=&quot;NG-MY 2019&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;NG-MY 2019&lt;/figcaption&gt;&lt;/figure&gt; &lt;h3&gt;Year 2020&lt;/h3&gt; &lt;p&gt;After an eventful 2019, I decided to take a break in early 2020. Oh, COVID-19! 🦠 It&#39;s a challenging year ahead for many of us. 😔 I hope we, the human race, win this battle together.&lt;/p&gt; &lt;p&gt;Another big decision for me was... &lt;strong&gt;I joined Google&lt;/strong&gt; as a Developer Advocate for Google Chrome. I will be relocating to Munich, Germany, but it was delayed. Memorable start indeed during this pandemic.&lt;/p&gt; &lt;p&gt;Thanks to technology, I still got to meet my teammates virtually. Looking forward to working together with the talented team, continuing to bring you better developer experiences and productivity on the DevTools.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:70.80078125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-06.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-06.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-06.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-06.jpg&quot; alt=&quot;I joined Google!&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;I joined Google!&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Summary&lt;/h2&gt; &lt;p&gt;Looking back, it was an amazing 4 years! I am glad to be part of this big GDE family. Gaining new friendship, unlocking new skills, learning, growing and contributing back to the community at the same time. The program opened up tremendous new opportunities for me. I might probably not have achieved all the above without the support from the program and the community.&lt;/p&gt; &lt;p&gt;From 2016, when I first attended CDS, to 2020, when I joined the Chrome team. Who’d have thought? Alright, last photo 👇🏼, some of us having fun during the GDE Summit after party last year.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:75%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/becoming-a-gde-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/becoming-a-gde-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/becoming-a-gde-04.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/becoming-a-gde-04.jpg&quot; alt=&quot;GDE Summit after party with the bunch&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;GDE Summit after party with the bunch&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1259888881765240832&quot;&gt; twitter.com/jecfish/status/1259888881765240832 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Links to My Previous Write-Ups</title> <link href="https://jec.fish/blog/past-write-ups"/> <updated>2020-05-13T00:00:00-00:00</updated> <id>https://jec.fish/blog/past-write-ups</id> <summary>Links to my old write-ups and where to find them.</summary> <category term="blog"/> <content type="html">&lt;p&gt;** &lt;em&gt;Drum roll&lt;/em&gt; **&lt;/p&gt; &lt;p&gt;Finally, I rolled out my own website! Have been avoiding doing that for a long long time (because I am lazy). 😂&lt;/p&gt; &lt;p&gt;Anyway, it&#39;s here - &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; would be the new home for my blogging moving forward.&lt;/p&gt; &lt;p&gt;The old articles are still available, it will stay where they are now. 😃 (I haven&#39;t think about what to do with them yet)&lt;/p&gt; &lt;p&gt;Here are the links to my old articles:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://scotch.io/@jecelyn&quot;&gt;scotch.io/@jecelyn&lt;/a&gt;: It&#39;s a good platform for tech publishing. Chris (&lt;a href=&quot;https://twitter.com/intent/follow?screen_name=chrisoncode&quot;&gt;@chrisoncode&lt;/a&gt;), the founder is a really nice person to work with.&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://medium.com/@jecfish&quot;&gt;medium.com/@jecfish&lt;/a&gt;: I like Medium clap feature. Its paywall announcement has triggered quite some negative responses, tech community particularly. Many flocked to other platforms since then (e.g. &lt;a href=&quot;https://dev.to/&quot;&gt;DEV.to&lt;/a&gt;). I wasn&#39;t leaving back then, but I am now. 😁&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Thanks for reading! And thanks for follow my writings. 🙇🏻‍♀️&lt;/p&gt; &lt;p&gt;Shameless plug - Follow me on Twitter &lt;a href=&quot;https://twitter.com/jecfish&quot;&gt;@jecfish&lt;/a&gt; for updates on tech tips and new write-ups!&lt;/p&gt; &lt;!-- &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/&quot;&gt; twitter.com/jecfish/status/ &lt;/a&gt; &lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; --&gt; </content> </entry> <entry> <title>Building Personal Static Site with Eleventy</title> <link href="https://jec.fish/blog/building-my-static-site-with-11ty"/> <updated>2020-05-14T00:00:00-00:00</updated> <id>https://jec.fish/blog/building-my-static-site-with-11ty</id> <summary>A blog series on tips and tricks of building static site with 11ty.</summary> <category term="blog"/> <content type="html">&lt;p&gt;I built this site with Eleventy (aka. 11ty), a modern static site generator. Why did I choose 11ty? How to set it up? Is it a good choice? Are there any gotchas? Read on!&lt;/p&gt; &lt;p&gt;As a long time web developer 👩🏼‍💻, I&#39;ve never used any site generator before, not even WordPress... for the past 10+ years. Only vanilla JavaScript, frameworks &amp;amp; jQuery. The web dev scene is so diverse, right? 😄&lt;/p&gt; &lt;p&gt;(If you just want to see the code, here&#39;s the GitHub repo &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;.)&lt;/p&gt; &lt;h2&gt;Why 11ty?&lt;/h2&gt; &lt;p&gt;Honestly, I thought about rolling my own site from scratch using frameworks (Angular, Preact), because why not? 😆 Then I defeat myself with my own laziness.&lt;/p&gt; &lt;p&gt;Let&#39;s just pick a modern, shiny &lt;a href=&quot;https://jamstack.org/&quot;&gt;JAM stack&lt;/a&gt; or static site generator from the market!&lt;/p&gt; &lt;p&gt;The immediate &amp;quot;framework-ish&amp;quot; choices for me are &lt;a href=&quot;https://scully.io/&quot;&gt;Scully (Angular)&lt;/a&gt;, &lt;a href=&quot;https://nuxtjs.org/&quot;&gt;Nuxt (Vue)&lt;/a&gt; and &lt;a href=&quot;https://www.gatsbyjs.org/&quot;&gt;Gatsby (React)&lt;/a&gt;. Nope, if I am going to use frameworks, I want to build from scratch, hah! (What weird logic 😂)&lt;/p&gt; &lt;p&gt;I recalled several people mentioning &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;11ty&lt;/a&gt;. Did a quick check on the &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;official site&lt;/a&gt;, &lt;a href=&quot;https://www.11ty.dev/docs/getting-started/&quot;&gt;getting started&lt;/a&gt; and the &lt;a href=&quot;https://www.11ty.dev/docs/&quot;&gt;documentation&lt;/a&gt;. Although the documentation looks a bit overwhelming, it seems legit and easy to start. One interesting &amp;amp; convincing discovery for me was that &lt;a href=&quot;https://www.11ty.dev/#built-with-eleventy&quot;&gt;web.dev&lt;/a&gt;, &lt;a href=&quot;https://developer.chrome.com/devsummit/&quot;&gt;Chrome Dev Summit 2019&lt;/a&gt;, &lt;a href=&quot;https://eslint.org/&quot;&gt;ESLint&lt;/a&gt;, and &lt;a href=&quot;https://v8.dev/&quot;&gt;Google V8 blog&lt;/a&gt; are built with 11ty!&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:59.86328125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/building-my-static-site-with-11ty-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/building-my-static-site-with-11ty-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/building-my-static-site-with-11ty-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/building-my-static-site-with-11ty-01.jpg&quot; alt=&quot;web.dev is built with 11ty&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;web.dev is built with 11ty&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Googling further, I found this step-by-step &lt;a href=&quot;https://keepinguptodate.com/pages/2019/06/creating-blog-with-eleventy/&quot;&gt;tutorial&lt;/a&gt; by &lt;a href=&quot;https://twitter.com/jon_keeping&quot;&gt;Jon Keeping&lt;/a&gt;. I followed through the steps to build a basic blog. The tutorial gave a good overview on what 11ty provides. In short - &lt;strong&gt;minimal setup yet customizable through several out-of-the-box features&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;As a developer that is familiar with Angular and Vue, the out-of-the-box features are similar to these frameworks&#39; concept of filter, pipe, component, and directive. I feel comfortable with it.&lt;/p&gt; &lt;p&gt;Sorry WordPress, Hugo, Jekyll, and Hexo! I did not really do detailed research and comparison.&lt;/p&gt; &lt;p&gt;Building a personal blog is not a big life decision anyway. The tooling choice is personal. Pick a comfortable one and just go for it. If it fails, just dump it and pick another lah~&lt;/p&gt; &lt;p&gt;That being said, I like the 11ty experience so far!&lt;/p&gt; &lt;h2&gt;My 11ty configuration&lt;/h2&gt; &lt;p&gt;Although 11ty works with zero config out of the box, that&#39;s not what I want. The good news is we can customize that. I will go through a few of my settings.&lt;/p&gt; &lt;h3&gt;Setup folder structure&lt;/h3&gt; &lt;p&gt;This is the standard folder structure that I want my project to be.&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- assets /* images, etc */&lt;br&gt;- src /* all source files */&lt;br&gt;- dist /* all files to be deployed */&lt;br&gt;- package.json &lt;br&gt;- .eleventy.js /* 11ty config file */&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Out of the box, the 11ty configuration is different. We can customize that in the config file &lt;code&gt;.eleventy.js&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* .eleventy.js */&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// set copy asset folder to dist&lt;/span&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPassthroughCopy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;assets&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// set input and output folder&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; dir&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; input&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;src&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; output&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dist&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;More configuration options can be found in the &lt;a href=&quot;https://www.11ty.dev/docs/config/&quot;&gt;documentation&lt;/a&gt;.&lt;/p&gt; &lt;h3&gt;Pick template languages&lt;/h3&gt; &lt;p&gt;11ty supports quite a number of template languages, full list of languages available &lt;a href=&quot;https://www.11ty.dev/docs/languages/&quot;&gt;here&lt;/a&gt;. That being said, each language support and documentation varies, though. You can actually mix and use all of the template languages 😆, but let&#39;s deduce, pick, and focus.&lt;/p&gt; &lt;p&gt;I decided to go with:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://mozilla.github.io/nunjucks/&quot;&gt;Nunjucks&lt;/a&gt; - a templating language open sourced by Mozilla, usually with file extension &lt;code&gt;.njk&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://daringfireball.net/projects/markdown/syntax&quot;&gt;Markdown&lt;/a&gt; - Markdown is everywhere, with file extension &lt;code&gt;.md&lt;/code&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Another common option is Shopify&#39;s &lt;a href=&quot;https://shopify.github.io/liquid/&quot;&gt;Liquid&lt;/a&gt;. After reading both docs, Nunjucks obviously has more advanced features (e.g. &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#extends&quot;&gt;extends&lt;/a&gt; and &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#macro&quot;&gt;macro&lt;/a&gt;). Honestly, I&#39;m not sure if I need these features, but no harm going with that, given both languages&#39; syntax are quite similar. By the way, you may also use &lt;code&gt;EJS, PUG, HAML, Mustache, Handlebars&lt;/code&gt; and more.&lt;/p&gt; &lt;p&gt;Let&#39;s update our configuration file to reflect that.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* .eleventy.js */&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// set copy asset folder to dist&lt;/span&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPassthroughCopy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;assets&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// set input and output folder&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; dir&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; input&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;src&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; output&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dist&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; dataTemplateEngine&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;njk&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; markdownTemplateEngine&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;njk&#39;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Setting up NPM scripts&lt;/h3&gt; &lt;p&gt;Let&#39;s take a look at my &lt;code&gt;package.json&lt;/code&gt; and see some of the helper scripts I have.&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* .package.json */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;jec-fyi&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;clean&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npx del dist&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;serve&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ELEVENTY_ENV=dev npx eleventy --serve&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;start&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run serve&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;build&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ELEVENTY_ENV=dev npx eleventy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;build:prod&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ELEVENTY_ENV=prod npx eleventy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;debug&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;DEBUG=* npx eleventy&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;devDependencies&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;@11ty/eleventy&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;^0.10.0&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;del-cli&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;^3.0.0&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;A very clean start indeed, only two dev dependencies. 😆&lt;/p&gt; &lt;p&gt;Here&#39;re the explanation of the setup above:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;I always like my project to have a &lt;code&gt;start&lt;/code&gt; script, to indicate the project starting point.&lt;/li&gt; &lt;li&gt;Setting up &lt;code&gt;clean&lt;/code&gt; script to completely clear the output directory.&lt;/li&gt; &lt;li&gt;To build an 11ty project, the &lt;code&gt;eleventy&lt;/code&gt; command is all you need. To run a local server, just add &lt;code&gt;--serve&lt;/code&gt; behind it.&lt;/li&gt; &lt;li&gt;In my script, I use &lt;code&gt;ELEVENTY_ENV&lt;/code&gt; environment variable to indicate the &lt;code&gt;dev&lt;/code&gt; and &lt;code&gt;prod&lt;/code&gt;. I&#39;ll need this to enable / disable some of my code. It&#39;s entirely optional, and you may not need this. (Alternatively, you can use a &lt;code&gt;.env&lt;/code&gt; file or set it in your terminal / cmd)&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;Take note that the &lt;code&gt;eleventy&lt;/code&gt; command will not clean your output directory, but update the files within the directory instead. If you want a clean build every time, add the two scripts below:&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* .package.json */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;prestart&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run clean&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;prebuild&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run clean&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;I did not add the two scripts above because I&#39;ll run my build on my CI/CD server (will write about &lt;code&gt;GitHub Actions&lt;/code&gt; in a coming post), it would be a clean build every time. It didn&#39;t bother me that much in local (sometimes it does, heh).&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Extra notes:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;npx&lt;/code&gt; is a built-in command in npm, allowing you to run local packages&#39; commands. More details &lt;a href=&quot;https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner&quot;&gt;here&lt;/a&gt; &lt;br&gt;&lt;/li&gt; &lt;li&gt;npm provides &lt;code&gt;pre&lt;/code&gt; and &lt;code&gt;post&lt;/code&gt; hook for commands. e.g. in our setup, when you run &lt;code&gt;npm start&lt;/code&gt;, it will first run &lt;code&gt;prestart&lt;/code&gt; automatically.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt;Cool! Let&#39;s run &lt;code&gt;npm install&lt;/code&gt; then &lt;code&gt;npm start&lt;/code&gt; now. We are good to go!&lt;/p&gt; &lt;h3&gt;Building first page&lt;/h3&gt; &lt;p&gt;Let&#39;s start building a page to see if this works. Create an &lt;code&gt;index.njk&lt;/code&gt; file in the &lt;code&gt;src&lt;/code&gt; folder.&lt;/p&gt; &lt;p&gt;Assuming you are running the &lt;code&gt;npm start&lt;/code&gt; command, 11ty will watch your &lt;code&gt;src&lt;/code&gt; folder for changes.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- index.njk --&gt;&lt;/span&gt;&lt;br&gt;---&lt;br&gt;title: Home page &lt;br&gt;date: 2020-05-10&lt;br&gt;---&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;en&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% set greeting = &#39;hello&#39; %}&lt;br&gt; &lt;br&gt; Yay, {{ greeting | upper }} world!&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Now check the &lt;code&gt;dist&lt;/code&gt; folder, and you can see &lt;code&gt;index.html&lt;/code&gt; file is generated. Open browser and hit &lt;code&gt;localhost:8080&lt;/code&gt;. You should see &lt;code&gt;Yay, HELLO world!&lt;/code&gt; showing on screen with &lt;code&gt;Home page&lt;/code&gt; as the title.&lt;/p&gt; &lt;p&gt;From the example above, you can already see some of the features provided by 11ty and Nunjucks.&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;code&gt;.njk&lt;/code&gt; file will be rendered into &lt;code&gt;.html&lt;/code&gt; file in &lt;code&gt;dist&lt;/code&gt; folder.&lt;/li&gt; &lt;li&gt;Nunjucks uses &lt;code&gt;{% %}&lt;/code&gt; and &lt;code&gt;{{ }}&lt;/code&gt; syntax.&lt;/li&gt; &lt;li&gt;The top part enclosed with &lt;code&gt;---&lt;/code&gt; is called &lt;a href=&quot;https://www.11ty.dev/docs/data-frontmatter/&quot;&gt;Front Matter&lt;/a&gt;. It&#39;s a way for us to set and pass data around. (Will explore further in upcoming posts)&lt;/li&gt; &lt;li&gt;&lt;code&gt;upper&lt;/code&gt; is something we refer to as &lt;code&gt;filter&lt;/code&gt;. There are quite some number of built-in filters, check &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#builtin-filters&quot;&gt;Nunjucks filters&lt;/a&gt; and &lt;a href=&quot;https://www.11ty.dev/docs/filters/&quot;&gt;11ty fitlers&lt;/a&gt;. In the coming post, we will explore how to create our own filter! 😃&lt;/li&gt; &lt;/ol&gt; &lt;h2&gt;IDE Extensions &amp;amp; Settings&lt;/h2&gt; &lt;p&gt;I am using VSCode. These are the few VSCode plugins that can help boost your development productivity. After all, who likes to keep typing &lt;code&gt;{% %}&lt;/code&gt;, hah.&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;Nunjucks&lt;/strong&gt; by ronnidc - code highlight for &lt;code&gt;.njk&lt;/code&gt; files.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Nunjucks Snippets&lt;/strong&gt; by luwenjiechn - provide snippets like &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;njk&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Nunjucks Template Formatter&lt;/strong&gt; by Nanda Okitavera - right click &lt;code&gt;format&lt;/code&gt; your &lt;code&gt;.njk&lt;/code&gt; files.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Prettier - Code formatter&lt;/strong&gt; by Esben Petersen - generally, this is a good extension to format your codes - JavaScript, Markdown, CSS and more.&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Gotcha:&lt;/p&gt; &lt;p&gt;There is a bug in the &lt;strong&gt;Nunjucks by ronnidc&lt;/strong&gt; extension as of the time of writing. Syntax autocomplete (Emmet) doesn&#39;t work, refer to this &lt;a href=&quot;https://github.com/ronnidc/vscode-nunjucks/issues/7&quot;&gt;GitHub issue&lt;/a&gt;. There is a workaround, add the below setting in your vscode &lt;code&gt;settings.json&lt;/code&gt; file manually (shortcut to open the file: &lt;code&gt;CMD + OPTION + P&lt;/code&gt; &amp;gt; &lt;code&gt;Open Settings (JSON)&lt;/code&gt;) and restart your IDE.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* vscode settings.json */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token string&quot;&gt;&quot;emmet.includeLanguages&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;njk&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;html&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;nunjucks&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;html&quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;/div&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;That&#39;s all for now. We have successfully set up the project. That&#39;s how my site &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; was set up as well. In the coming posts, I plan to write about:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you. I highly recommend you to try out 11ty yourself! The development experience has been great so far.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;Happy coding!&lt;/p&gt; &lt;p&gt;&lt;em&gt;&lt;small&gt;The &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; website itself isn&#39;t open source yet, but it will soon! Some housekeeping is needed before that. 😛 &lt;/small&gt;&lt;/em&gt;&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1260845853482250240&quot;&gt; twitter.com/jecfish/status/1260845853482250240 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Setting up GitHub Actions and Firebase Hosting</title> <link href="https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting"/> <updated>2020-05-15T00:00:00-00:00</updated> <id>https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting</id> <summary>Automate deployment with GitHub Actions and Firebase Hosting</summary> <category term="blog"/> <content type="html">&lt;p&gt;Both Firebase Hosting &amp;amp; GitHub Actions offer generous free quota (with limit of course), perfect for our personal project!&lt;/p&gt; &lt;p&gt;Let&#39;s use these tools to set up our hosting and automate our deployment workflow.&lt;/p&gt; &lt;p&gt;Feel free to skip any sections (that you already know) or dive into the source code &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; straight away!&lt;/p&gt; &lt;p&gt;This is the second post of the series. Here is the previous post - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt;. It&#39;s fine to continue reading this though. The basic setup is similar among projects.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Refer to official documentation for latest pricing:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://firebase.google.com/pricing&quot;&gt;Firebase pricing&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://help.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions&quot;&gt;GitHub Actions Pricing&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;h2&gt;Setting up Firebase Hosting&lt;/h2&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Please complete these two prerequisites before we continue:&lt;/p&gt; &lt;p&gt;a. Sign up &amp;amp; login to &lt;a href=&quot;https://console.firebase.google.com/&quot;&gt;console.firebase.google.com&lt;/a&gt;.&lt;br&gt; b. Create a project, follow the steps on screen. Give your project a nice name.&lt;/p&gt; &lt;/div&gt; &lt;p&gt;In your project, open up the terminal and follow the steps below:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Run &lt;code&gt;npm install firebase-tools -D&lt;/code&gt; in the terminal. This will install Firebase CLI as our project&#39;s dev dependency.&lt;/li&gt; &lt;li&gt;Run &lt;code&gt;npx firebase login&lt;/code&gt; to sign in using your Google / Firebase account.&lt;/li&gt; &lt;li&gt;Run &lt;code&gt;npx firebase init hosting&lt;/code&gt; - Firebase provides a lot of other features, but we only need hosting for now.&lt;/li&gt; &lt;li&gt;Select &lt;code&gt;Use an existing project&lt;/code&gt; and choose the project created in prerequisite step b.&lt;/li&gt; &lt;li&gt;It will prompt you 2-3 more questions along the way. Just press enter or answer anything. You will be fine, no worries 😆. Not convinced? Follow the my answers below lol.&lt;/li&gt; &lt;/ol&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:41.30859375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-github-actions-and-firebase-hosting-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-github-actions-and-firebase-hosting-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-github-actions-and-firebase-hosting-03.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-github-actions-and-firebase-hosting-03.jpg&quot; alt=&quot;Firebase prompts&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Firebase prompts&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Why the steps?&lt;/h2&gt; &lt;p&gt;The steps above will eventually create two files in the project - &lt;code&gt;.firebaserc&lt;/code&gt; and &lt;code&gt;firebase.json&lt;/code&gt;. We can edit both (that&#39;s why no worries, heh).&lt;/p&gt; &lt;p&gt;Let&#39;s look into each of these files.&lt;/p&gt; &lt;p&gt;&lt;code&gt;.firebaserc&lt;/code&gt; stores the Firebase project name. In case you chose the wrong project in step 4 earlier, you may update it here.&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .firebaserc&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;projects&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;default&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;[your_firebase_project_name]&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Next, &lt;code&gt;firebase.json&lt;/code&gt; stores our project configuration. Replace your file with the code below. 👇🏼&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// firebase.json&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;hosting&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;public&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;dist&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;cleanUrls&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;ignore&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;firebase.json&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;**/.*&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;**/node_modules/**&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;A few explanations on the configuration above,&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;public&lt;/code&gt; indicates the folder that we will deploy / upload to Firebase Hosting, our deployment folder is &lt;code&gt;dist&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;&lt;code&gt;ignore&lt;/code&gt; as the name indicates, ignore any files (do not deploy) that matches the provided names.&lt;/li&gt; &lt;li&gt;&lt;code&gt;cleanUrls&lt;/code&gt; allows us to control our &lt;code&gt;.html&lt;/code&gt; extension. (Extra explanation needed)&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Suppose we have the following html document:&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- about.html&lt;br&gt;- licenses.html&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;When the user navigates to our pages in browser, the URLs would be:&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- your_domain.com/about.html&lt;br&gt;- your_domain.com/licenses.html&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Urgh, not that pretty right? It would be nice if our URLs looked prettier, like:&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;- your_domain.com/about&lt;br&gt;- your_domain.com/licenses&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;That&#39;s what the &lt;code&gt;cleanUrls&lt;/code&gt; setting does. Refer to the &lt;a href=&quot;https://firebase.google.com/docs/hosting/full-config#control_html_extensions&quot;&gt;Firebase documentation&lt;/a&gt; for more details.&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;Setting up NPM scripts&lt;/h2&gt; &lt;p&gt;Alright, Firebase Hosting is ready. Next, add our deployment scripts in &lt;code&gt;package.json&lt;/code&gt;:&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* .package.json */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;clean&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npx del dist&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;prebuild&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run clean&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;build:prod&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ELEVENTY_ENV=prod npx eleventy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;predeploy&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run build:prod&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;deploy&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npx firebase deploy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;All set! Let&#39;s try to run &lt;code&gt;npm run deploy&lt;/code&gt; in your terminal. The below tasks will be executed in sequence:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Delete the &lt;code&gt;dist&lt;/code&gt; folder if it exists.&lt;/li&gt; &lt;li&gt;11ty will build and compile your &lt;code&gt;src&lt;/code&gt; files to the &lt;code&gt;dist&lt;/code&gt; folder.&lt;/li&gt; &lt;li&gt;Firebase will deploy all the files in the &lt;code&gt;dist&lt;/code&gt; folder to its hosting service.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;As mentioned in the previous &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;post&lt;/a&gt;, the &lt;code&gt;prebuild&lt;/code&gt; task is optional. You may not need that. Also, if you prefer to run the build and deploy scripts separately, feel free to remove the &lt;code&gt;predeploy&lt;/code&gt; script.&lt;/p&gt; &lt;h2&gt;Nice, so where&#39;s my url?&lt;/h2&gt; &lt;p&gt;Your URL should appear in the terminal upon successful deployment. Otherwise, go to your &lt;a href=&quot;https://console.firebase.google.com/&quot;&gt;Firebase console&lt;/a&gt;, select the project and click on the &lt;code&gt;Hosting&lt;/code&gt; menu. At the page, you should see the URL Firebase has created for you.&lt;/p&gt; &lt;p&gt;Copy the URL and open it in the browser. You should see &lt;code&gt;HELLO world!&lt;/code&gt; on screen.&lt;/p&gt; &lt;p&gt;If you bought a domain (e.g. my domain is &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt;), you can start setting it up by clicking on the &lt;code&gt;Add custom domain&lt;/code&gt; button. Follow the instructions on screen and you&#39;ll be fine.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:47.36328125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-github-actions-and-firebase-hosting-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-github-actions-and-firebase-hosting-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-github-actions-and-firebase-hosting-04.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-github-actions-and-firebase-hosting-04.jpg&quot; alt=&quot;Add custom domain in Firebase Hosting&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Add custom domain in Firebase Hosting&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Setting up Github Actions&lt;/h2&gt; &lt;p&gt;As a developer, we don&#39;t want to run the deployment step manually every time. Let&#39;s use GitHub Actions to automate that!&lt;/p&gt; &lt;p&gt;In your project folder,&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Create a new folder &lt;code&gt;.github&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;Create a &lt;code&gt;workflows&lt;/code&gt; folder under &lt;code&gt;.github&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;Create a &lt;code&gt;main.yml&lt;/code&gt; file in the &lt;code&gt;workflows&lt;/code&gt; folder. You can rename the file freely, not necessary &lt;code&gt;main&lt;/code&gt;.&lt;/li&gt; &lt;/ol&gt; &lt;h3&gt;First step to automate our deployment&lt;/h3&gt; &lt;p&gt;First, we need to decide when to deploy. In our case, the project is small. It&#39;s a personal website.&lt;/p&gt; &lt;p&gt;We want to deploy when either condition is met:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Whenever changes pushed to &lt;code&gt;master&lt;/code&gt; branch&lt;/li&gt; &lt;li&gt;Everyday, 9pm, Malaysia time.&lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;Configure our workflow&lt;/h3&gt; &lt;p&gt;Let&#39;s configure our &lt;code&gt;main.yml&lt;/code&gt; to reflect that.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# main.yml&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; CI &lt;span class=&quot;token comment&quot;&gt;# Give it any name&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; master&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;schedule&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;cron&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;0 13 * * *&#39;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# daily 9pm MYT&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The configuration is quite expressive itself. The schedule is using the cron syntax. If you want to learn more about it, go to &lt;a href=&quot;https://crontab.guru/&quot;&gt;crontab.guru&lt;/a&gt; (keep pressing the &lt;code&gt;random&lt;/code&gt; link on screen to learn further 😆).&lt;/p&gt; &lt;p&gt;Another gotcha: you might be wondering why &lt;code&gt;13:00&lt;/code&gt; is &lt;code&gt;9pm MYT&lt;/code&gt;. Well, GitHub does not support timezones yet, so it uses UTC time. Do your own math or use &lt;a href=&quot;https://www.worldtimebuddy.com/?pl=1&amp;amp;lid=100,1735161&amp;amp;h=100&quot;&gt;worldtimebuddy.com&lt;/a&gt; to do the conversion beforehand. If you&#39;d like to have built-in timezones, go upvote the feature in &lt;a href=&quot;https://github.community/t5/GitHub-Actions/Timezone-support-for-scheduled-actions/td-p/42170&quot;&gt;GitHub Community&lt;/a&gt;!&lt;/p&gt; &lt;h3&gt;Define our build steps&lt;/h3&gt; &lt;p&gt;Next, let&#39;s add in our step-by-step instructions in &lt;code&gt;main.yml&lt;/code&gt;. We want to:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Run the deployment tasks on Linux (Windows and macOS are available too, but more expensive though).&lt;/li&gt; &lt;li&gt;Checkout the source code from the repository.&lt;/li&gt; &lt;li&gt;Install Node.js.&lt;/li&gt; &lt;li&gt;Run &lt;code&gt;npm install&lt;/code&gt; to install dependencies.&lt;/li&gt; &lt;li&gt;Run the &lt;code&gt;deploy&lt;/code&gt; script we created earlier to build and deploy to Firebase (&lt;code&gt;npm run deploy&lt;/code&gt;).&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;Convert the above steps into &lt;code&gt;main.yml&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;# main.yml&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Checkout branch&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v1&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Use Node.js&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v1&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;12.16&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Install dependencies&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm install&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Build &amp;amp; deploy&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm run deploy&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;CI&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;true&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;FIREBASE_TOKEN&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.YOUR_SECRET &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The steps are quite expressive itself. A few explanations on the fields.&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;name&lt;/code&gt; - It&#39;s good to name each step, but it&#39;s optional&lt;/li&gt; &lt;li&gt;&lt;code&gt;run&lt;/code&gt; - The command to execute in terminal&lt;/li&gt; &lt;li&gt;&lt;code&gt;uses&lt;/code&gt; - The pre-built actions you want to use, if any. Find them in &lt;a href=&quot;https://github.com/marketplace?type=actions&amp;amp;query=&quot;&gt;GitHub Marketplace&lt;/a&gt;, pick and utilize those.&lt;/li&gt; &lt;li&gt;&lt;code&gt;env&lt;/code&gt; - Specify the environment variables for the step. (e.g. we set &lt;code&gt;ELEVENTY_ENV&lt;/code&gt; in our npm script, it&#39;s ok to put it here instead).&lt;/li&gt; &lt;li&gt;&lt;code&gt;FIREBASE_TOKEN&lt;/code&gt; env variable - Firebase needs this token to authorize the deployment (because we can&#39;t run &lt;code&gt;npx firebase login&lt;/code&gt; remotely). Generate the token beforehand by running &lt;code&gt;npx firebase login:ci&lt;/code&gt; command in your machine. Detailed instructions &lt;a href=&quot;https://github.com/firebase/firebase-tools#using-with-ci-systems&quot;&gt;here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;The &lt;code&gt;secrets.YOUR_SECRET&lt;/code&gt; - The token is sensitive information, so we need a safe place to store it. Copy the token and create a new secret in GitHub Repository &amp;gt; Settings &amp;gt; Secrets. Name it &lt;code&gt;YOUR_SECRET&lt;/code&gt; or feel free to rename it whatever you want (remember to update the variable name in &lt;code&gt;main.yml&lt;/code&gt; if you do so).&lt;/li&gt; &lt;/ul&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:43.75%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-github-actions-and-firebase-hosting-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-github-actions-and-firebase-hosting-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-github-actions-and-firebase-hosting-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-github-actions-and-firebase-hosting-01.jpg&quot; alt=&quot;Add a new secret in GitHub repo &gt; Settings &gt; Secrets&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Add a new secret in GitHub repo &gt; Settings &gt; Secrets&lt;/figcaption&gt;&lt;/figure&gt; &lt;h3&gt;Run &amp;amp; test our GitHub Actions&lt;/h3&gt; &lt;p&gt;All good! Let&#39;s push your changes to the &lt;code&gt;master&lt;/code&gt; branch. Open your GitHub repository page, and view your deployment progress in the &lt;code&gt;Actions&lt;/code&gt; tab.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:37.5%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-github-actions-and-firebase-hosting-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-github-actions-and-firebase-hosting-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-github-actions-and-firebase-hosting-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-github-actions-and-firebase-hosting-02.jpg&quot; alt=&quot;See your GitHub Actions in action&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;See your GitHub Actions in action&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;You can drill down further to see the status of each step, the steps shown on screen are the &lt;code&gt;name&lt;/code&gt; we defined in &lt;code&gt;main.yml&lt;/code&gt; (give your steps meaningful names).&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:52.05078125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-github-actions-and-firebase-hosting-05.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-github-actions-and-firebase-hosting-05.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-github-actions-and-firebase-hosting-05.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-github-actions-and-firebase-hosting-05.jpg&quot; alt=&quot;Add a new secret in GitHub repo &gt; Settings &gt; Secrets&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Add a new secret in GitHub repo &gt; Settings &gt; Secrets&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Explore further:&lt;/p&gt; &lt;p&gt;You may want a totally different configuration - for example, you might want to run the build on every branch or whenever someone creates a PR. You might have more than one workflow as well. In some projects, you might even want to build on different OS (e.g. Windows, Mac) and software versions (e.g. NPM, Android project simultaneously).&lt;/p&gt; &lt;p&gt;GitHub Actions can support complex use cases, pretty powerful. Just try to play around and configure that.&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;Bonus: Two extra handy configurations&lt;/h3&gt; &lt;p&gt;Thanks for reading so far ! Here are the two handy configurations for you.&lt;/p&gt; &lt;h4&gt;Skipping the build&lt;/h4&gt; &lt;p&gt;Other popular deployment tools (e.g. Travis or Circle CI) support &lt;code&gt;[skip-ci]&lt;/code&gt;. We can type &lt;code&gt;[skip-ci]&lt;/code&gt; in our commit message or PR title to stop the build intentionally.&lt;/p&gt; &lt;p&gt;This doesn&#39;t come with GitHub Actions by default, but we can write an extra line to support that easily.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# main.yml&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;!contains(github.event.head_commit.message, &#39;[skip-ci]&#39;)&quot;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;# add this line&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h4&gt;Cache your dependencies&lt;/h4&gt; &lt;p&gt;&lt;code&gt;npm install&lt;/code&gt; takes time. The more dependencies we have, the slower our build is. It&#39;s good to cache them for faster subsequent builds. Let&#39;s add in one more action for that.&lt;/p&gt; &lt;p&gt;GitHub supports more complex cache settings too, refer to its &lt;a href=&quot;https://github.com/actions/cache&quot;&gt;documentation&lt;/a&gt; (with instant copy-pastable example 😍).&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# main.yml&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;# place after the &quot;Checkout branch&quot; step&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Retrieve npm cache (if any)&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/cache@v1&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ~/.npm&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;packages&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Combine all the steps above. Here is our full &lt;code&gt;main.yml&lt;/code&gt; file!&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# main.yml&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; CI&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; master&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;schedule&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;cron&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;0 13 1/1 * *&#39;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;!contains(github.event.head_commit.message, &#39;[skip-ci]&#39;)&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Checkout branch&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v1&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Retrieve npm cache (if any)&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/cache@v1&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ~/.npm&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;packages&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Use Node.js&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v1&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;12.16&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Install dependencies&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm install&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Build &amp;amp; deploy&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; npm run deploy&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;CI&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;true&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token key atrule&quot;&gt;FIREBASE_TOKEN&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.FIREBASE_TOKEN &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have set up hosting and automate the deployment successfully. 🎉 That&#39;s how my site &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; was set up as well. I have been using GitHub Actions and Firebase for several projects, so far so good.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Alternative:&lt;/p&gt; &lt;p&gt;If you are looking for alternatives for hosting and automation, try &lt;a href=&quot;https://www.netlify.com/&quot;&gt;Netlify&lt;/a&gt;! They offer free quota too. The developer experience in Netlify is better than both Firebase Hosting and Github Actions, IMHO, especially for people without prior experience in hosting and deployment. Much easier to get started. I like it.&lt;/p&gt; &lt;p&gt;However, Netlify has a less generous free quota 😆 (check out their &lt;a href=&quot;https://www.netlify.com/pricing/&quot;&gt;pricing plan&lt;/a&gt;), but it is enough for personal projects. I am not sure if it can support complex deployment scenarios like GitHub Actions can.&lt;/p&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1261173954661638144&quot;&gt; twitter.com/jecfish/status/1261173954661638144 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Customizing File Structure, URLs and Browsersync</title> <link href="https://jec.fish/blog/customizing-file-structure-urls-browsersync"/> <updated>2020-05-21T00:00:00-00:00</updated> <id>https://jec.fish/blog/customizing-file-structure-urls-browsersync</id> <summary>How to use various 11ty data features to achieve the desired file structure and URLs</summary> <category term="blog"/> <content type="html">&lt;p&gt;Find out how I customize Eleventy to achieve my opinionated requirements about the structure of source files, output files and URLs.&lt;/p&gt; &lt;style&gt; /* markdown table generator: https://www.tablesgenerator.com/markdown_tables */ /* css gist: https://gist.github.com/tuzz/3331384 */ table { padding: 0; margin-bottom: 20px; border-collapse: collapse; } table tr { margin: 0; padding: 0; } table tr th { font-weight: bold; text-align: left; margin: 0; padding: 6px 14px; border-top: 2px solid #D8DEE9; } table tr td { text-align: left; margin: 0; padding: 6px 14px; border-top: 2px solid #D8DEE9; border-bottom: 2px solid #D8DEE9; } .dark-mode table tr th, .dark-mode table tr td { border-color: #4C566A; } &lt;/style&gt; &lt;p&gt;Eleventy offers zero configuration (file structure and URLs) out-of-the-box. It adopts the concept of &lt;a href=&quot;https://www.11ty.dev/docs/permalinks/&quot;&gt;Cool URIs don&#39;t change&lt;/a&gt; - the generated URLs will follow its filename by default, with no file extensions. For example, if you have an &lt;code&gt;about-me.html&lt;/code&gt; source file, the URL for it would be &lt;code&gt;/about-me/&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;This is great but not exactly what I want because:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;I have a slightly different folder setup.&lt;/li&gt; &lt;li&gt;Some of my files follow specific naming conventions.&lt;/li&gt; &lt;li&gt;That means URL might be different from its source file name.&lt;/li&gt; &lt;li&gt;I don&#39;t like how the output files are structured by default.&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Feel free to dive into the source code &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; straight away. This is the 3rd post of the series. Here is the previous post - &lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt;.&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;Organizing source files&lt;/h2&gt; &lt;p&gt;I organized all source files under subfolders. General pages like &lt;a href=&quot;https://jec.fish/licenses&quot;&gt;/licenses&lt;/a&gt;, &lt;a href=&quot;https://jec.fish/blog&quot;&gt;/blog&lt;/a&gt; listing, &lt;a href=&quot;https://jec.fish/404&quot;&gt;/404&lt;/a&gt;, even the &lt;a href=&quot;https://jec.fish/&quot;&gt;home page&lt;/a&gt; are placed under a folder named &lt;code&gt;root&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;For content pages like &lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;blog posts&lt;/a&gt; and &lt;a href=&quot;https://jec.fish/deck/coding-the-powerful-language&quot;&gt;presentation decks&lt;/a&gt;, they will be organized:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;under the folder of its content category&lt;/li&gt; &lt;li&gt;each content source file name will be prefixed with ISO created date (YYYY-MM-DD), for source file sorting purposes.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;For instance, the &amp;quot;&lt;a href=&quot;https://jec.fish/deck/web-performance-optimization&quot;&gt;Web Performance Optimization&lt;/a&gt;&amp;quot; presentation is placed under the &lt;code&gt;deck&lt;/code&gt; folder and the file name would be &amp;quot;2019-08-31-web-performance-optimization.md&amp;quot;.&lt;/p&gt; &lt;p&gt;Below is an overview of how source files are structured:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# Source file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; licenses.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; 2020&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;05&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;19&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;one.md&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;In future, I might add in a new content category named &lt;code&gt;read&lt;/code&gt;. I will then add a &lt;code&gt;read.njk&lt;/code&gt; in the &lt;code&gt;root&lt;/code&gt; folder and create a &lt;code&gt;read&lt;/code&gt; folder for all my reading reviews.&lt;/p&gt; &lt;p&gt;* If you are wondering about the file extensions here, I use markdown &lt;code&gt;.md&lt;/code&gt; file for content writing and Nunjucks &lt;code&gt;.njk&lt;/code&gt; file for general pages that need more html manipulation.&lt;/p&gt; &lt;h2&gt;How does 11ty process our source files?&lt;/h2&gt; &lt;p&gt;Eleventy will process our source files (both &lt;code&gt;.njk&lt;/code&gt; and &lt;code&gt;.md&lt;/code&gt;) into &lt;code&gt;.html&lt;/code&gt; pages by default. Base on the above file structure, this would be the output:-&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# Output file structure by default&lt;/span&gt;&lt;br&gt;&lt;br&gt;dist&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; licenses&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; 2020&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;05&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;19&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;one&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.html&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Each source file will output 2 items:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;a folder with the same name as its source file&lt;/li&gt; &lt;li&gt;an &lt;code&gt;index.html&lt;/code&gt; file in that folder&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Based on the above output files, you can probably guess the website URLs! Here is an overview of the URLs:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# Website URLs by default&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; /root/&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; /root/licenses/&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; /root/blog/&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; /blog/2020&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;05&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;19&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;one/&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Erm... that doesn&#39;t look like what I want.&lt;/p&gt; &lt;h2&gt;What is my expected output?&lt;/h2&gt; &lt;p&gt;There is nothing wrong with the default output, 11ty processes our files naively based on our input structure by default. However, that is not what I want.&lt;/p&gt; &lt;p&gt;Here are my requirements:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Each source file should output just &lt;strong&gt;ONE HTML&lt;/strong&gt; file, no folder.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;NO DATE&lt;/strong&gt; information in the URLs.&lt;/li&gt; &lt;li&gt;URLs should be &lt;strong&gt;CLEAN&lt;/strong&gt;. (Explain in a bit)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here is the output I&#39;d like:-&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# My expected output&lt;/span&gt;&lt;br&gt;&lt;br&gt;dist&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; licenses.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; deck.html&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; post&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;one.html &lt;span class=&quot;token comment&quot;&gt;# no date&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;What do I mean by &lt;strong&gt;&amp;quot;URLs should be clean&amp;quot;&lt;/strong&gt;? I prefer URLs with no trailing slash and no file extension. For example:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;😍 /about-me&lt;/li&gt; &lt;li&gt;🙁 /about-me/&lt;/li&gt; &lt;li&gt;☹️ /about-me.html&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;I prefer the first URL format. However, with the above output files, when the user browses to &lt;code&gt;licenses&lt;/code&gt; page, for example, she will land on &lt;a href=&quot;https://jec.fish/blog/jec.fish/licenses.html&quot;&gt;/licenses.html&lt;/a&gt;, oops! 😥&lt;/p&gt; &lt;p&gt;No worryies though, we&#39;ve got that covered in the &lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;previous post&lt;/a&gt;. We have updated the server settings (Firebase &lt;code&gt;cleanURLs&lt;/code&gt;) to eliminate file extensions when users browse to our page, so &lt;code&gt;/licenses&lt;/code&gt; it is. No file extension, no trailing slash. 😍&lt;/p&gt; &lt;p&gt;So what we need to do now is play with 11ty&#39;s configurations to generate the above output.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;TLDR: Does website URLs matter? Trailing slash, file extension or date.&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;No, it doesn&#39;t impact the searchability (aka SEO) of your site, and users might not even care about or notice that.&lt;/p&gt; &lt;p&gt;But! &lt;em&gt;It matters to me&lt;/em&gt;. This is my site, the trailing slash and extension hurt my eyes. 😆 I don&#39;t want date information in URLs because it is not meaningful (I might update the content from time to time).&lt;/p&gt; &lt;p&gt;Coincidentally, my colleague - Jake did a &lt;a href=&quot;https://twitter.com/jaffathecake/status/1261252780796383233?s=20&quot;&gt;Twitter poll on the same topic&lt;/a&gt; few days ago. 😆 &lt;a href=&quot;https://twitter.com/mathias/status/1261392833992429570&quot;&gt;Mathias replied&lt;/a&gt; on it as well. My preference (and the majority) is same as Mathias: prefer &lt;strong&gt;links without trailing slash&lt;/strong&gt;.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/customizing-file-structure-urls-browsersync-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/customizing-file-structure-urls-browsersync-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/customizing-file-structure-urls-browsersync-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/customizing-file-structure-urls-browsersync-01.jpg&quot; alt=&quot;Jake and Mathias tweet about web urls, and my replies to it.&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Jake and Mathias tweet about web urls, and my replies to it.&lt;/figcaption&gt;&lt;/figure&gt; &lt;/div&gt; &lt;h2&gt;What are the solutions then?&lt;/h2&gt; &lt;p&gt;Now that we understand the requirements, let&#39;s solve that! After reading the documentation multiple times and performing various testing. I found a few ways to achieve the desired result. Let us go through it one by one, from basic to pro. 😎&lt;/p&gt; &lt;h3&gt;First pass: Adding permalink in each file&lt;/h3&gt; &lt;p&gt;It is quite easy to change the output filename. We just need to update the &lt;code&gt;permalink&lt;/code&gt; on the file&#39;s Front Matter Data&lt;/p&gt; &lt;p&gt;Let&#39;s look at our &lt;code&gt;licenses.njk&lt;/code&gt; file as an example.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- root/licenses.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;title: Licenses&lt;br&gt;permalink: licenses.html&lt;br&gt;---&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; Hello licenses page.&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The &lt;code&gt;---&lt;/code&gt; top section is something we called &lt;strong&gt;Front Matter Data&lt;/strong&gt; (briefly mentioned in &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;1st post&lt;/a&gt;). 11ty wil preprocess the Front Matter Data before the template.&lt;/p&gt; &lt;p&gt;There are some built-in Front Matter Data that we can use. &lt;a href=&quot;https://www.11ty.dev/docs/permalinks/&quot;&gt;Permalink&lt;/a&gt; is one of them, and it is a special one (further explained later) because &lt;code&gt;permalink&lt;/code&gt; field gives us a way to change the output file format and location. In our case, &lt;code&gt;src/root/licenses.njk&lt;/code&gt; will now output as &lt;code&gt;dist/licenses.html&lt;/code&gt;, without &lt;code&gt;root&lt;/code&gt; in it and no extra folder!&lt;/p&gt; &lt;p&gt;More information on Front Matter Data is available in the &lt;a href=&quot;https://www.11ty.dev/docs/data-frontmatter/&quot;&gt;documentation&lt;/a&gt;.&lt;/p&gt; &lt;h3&gt;Second pass: Use 11ty supplied data in permalink&lt;/h3&gt; &lt;p&gt;Editing permalink in file manually is prone to typing errors. We can improve our manual typing slightly by utilizing some of the &lt;strong&gt;Eleventy Supplied Data&lt;/strong&gt;. Here is &lt;a href=&quot;https://www.11ty.dev/docs/data-eleventy-supplied/&quot;&gt;the list of supplied data&lt;/a&gt; that we can use.&lt;/p&gt; &lt;p&gt;We will be using the &lt;a href=&quot;https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem&quot;&gt;page.filePathStem&lt;/a&gt; supplied data. It provides us the full filename - without the date prefix and extension.&lt;/p&gt; &lt;p&gt;Here are the &lt;code&gt;filePathStem&lt;/code&gt; value for each source files:&lt;/p&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;code&gt;source file&lt;/code&gt;&lt;/th&gt; &lt;th&gt;&lt;code&gt;filePathStem&lt;/code&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;root/index.njk&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;/root/index&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;root/licenses.njk&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;/root/licenses&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;root/blog.njk&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;/root/blog&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;blog/2020-05-19-post-one.md&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;/blog/post-one&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Look at the blog post, the date information is gone. One more thing we need to solve though. For the general files, we want the output to be without &lt;code&gt;/root&lt;/code&gt;. We achieve that by using the Nunjucks built-in &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#replace&quot;&gt;replace&lt;/a&gt; filter.&lt;/p&gt; &lt;p&gt;Let&#39;s update our &lt;code&gt;permalink&lt;/code&gt; to use the &lt;code&gt;page.filePathStem&lt;/code&gt;:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- root/licenses.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;permalink: &quot;{{ page.filePathStem | replace(&#39;/root/&#39;, &#39;/&#39;) }}.html&quot;&lt;br&gt;---&lt;br&gt;&lt;br&gt;...&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;There you go. Remember I mentioned earlier that &lt;code&gt;permalink&lt;/code&gt; is a special one? It is because it allows us to write code. The logic will be interpolated in later stages.&lt;/p&gt; &lt;h3&gt;Third pass: Setting permalink per directory&lt;/h3&gt; &lt;p&gt;Well, both the first and second pass require us to update each file manually, so it is time-wasting! Is there a better way? Let&#39;s go up one level, where we can set the &lt;code&gt;permalink&lt;/code&gt; data per directory by creating a &lt;a href=&quot;https://www.11ty.dev/docs/data-template-dir/&quot;&gt;Directory Data File&lt;/a&gt; per folder.&lt;/p&gt; &lt;p&gt;Here is the new file structure.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# File structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root.11tydata.js &lt;span class=&quot;token comment&quot;&gt;# add this&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; licenses.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog.11tydata.js &lt;span class=&quot;token comment&quot;&gt;# add this&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; 2020&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;05&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;19&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;post&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;one.njk &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Please note that the Directory Data file name:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Must be the same as the directory name&lt;/li&gt; &lt;li&gt;Must ends with &lt;code&gt;.11tydata.js&lt;/code&gt; (you configure it)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Okay, let&#39;s update both of our Directory Data files.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// root/root.11tydata.js&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// blog/blog.11tydata.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; permalink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{page.filePathStem | replace(&#39;/root/&#39;, &#39;/&#39;)}}.html&quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;It&#39;s okay for us to use the same code. In fact, you can shorten the &lt;code&gt;permalink&lt;/code&gt; in &lt;code&gt;blog.11ty.data.js&lt;/code&gt; to just &lt;code&gt;{{page.filePathStem}}.html&lt;/code&gt; if you want to, but I prefer to use the same logic.&lt;/p&gt; &lt;p&gt;With this setting, each file under the same directory will get the &lt;code&gt;permalink&lt;/code&gt; value injected automatically. We don&#39;t need to update every file manually.&lt;/p&gt; &lt;p&gt;In case you have a file in the directory that needs a special &lt;code&gt;permalink&lt;/code&gt;, you can still override it using the &lt;code&gt;Front Matter Data&lt;/code&gt; in each file. For example, let&#39;s say we add a RSS file in the &lt;code&gt;root&lt;/code&gt; folder &lt;code&gt;atom.njk&lt;/code&gt;. We want the output to be &lt;code&gt;index.xml&lt;/code&gt; - no &lt;code&gt;/root&lt;/code&gt; in name and the file extension should be &lt;code&gt;xml&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;Here is how we can do it. 👇🏼 The priority in the file &lt;code&gt;Front Matter Data&lt;/code&gt; is higher than the &lt;code&gt;Directiry Template Data&lt;/code&gt; and hence value get overridden.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// root/atom.njk&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; permalink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; index&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;xml&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Final pass: Do it once, setting permalink globally&lt;/h3&gt; &lt;p&gt;Still, I wasn&#39;t happy with the per-directory approach, as you probably do too. I want to find a way to do it just once and forget about it.&lt;/p&gt; &lt;p&gt;After reading the documentation - &lt;a href=&quot;https://www.11ty.dev/docs/data-computed/#real-world-example&quot;&gt;real world example&lt;/a&gt; and &lt;a href=&quot;https://www.11ty.dev/docs/data-template-dir/&quot;&gt;data precedence&lt;/a&gt; a few times, and through various testing, I found a way to do it.&lt;/p&gt; &lt;p&gt;11ty accepts a global data folder &lt;code&gt;_data&lt;/code&gt; (customizable). We can place our global data or function here (will talk more about this in the coming post).&lt;/p&gt; &lt;p&gt;There is one special file we can add into this folder - the &lt;code&gt;Computed Data File&lt;/code&gt;. Name it as &lt;code&gt;eleventyComputed.js&lt;/code&gt; (must be this name). Let&#39;s create the folder and file.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;# add _data folder and `eleventyComputed.js`&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _data&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; eleventyComputed.js&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is the code for our &lt;code&gt;eleventyComputed.js&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// _data/eleventyComputed.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; permalink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&#39;{% set p = page.filePathStem | replace(&quot;/root/&quot;, &quot;/&quot;) %}&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&#39;{{ permalink or (p + &quot;.html)&quot; }}&#39;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Notes for Nunjucks newbies:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Nunjucks uses &lt;code&gt;{% %}&lt;/code&gt; as the template syntax.&lt;/li&gt; &lt;li&gt;Nunjucks uses &lt;code&gt;{{ }}&lt;/code&gt; for interpolation.&lt;/li&gt; &lt;li&gt;The built-in &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#set&quot;&gt;set&lt;/a&gt; tag is used to create/modify a variable.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;p&gt;The code is slightly different from our &lt;code&gt;Data Directory Data&lt;/code&gt;, we add an &lt;code&gt;or&lt;/code&gt; statement here:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;if &lt;code&gt;permalink&lt;/code&gt; already exists, we will not override the value&lt;/li&gt; &lt;li&gt;if &lt;code&gt;permalink&lt;/code&gt; is empty, we will populate that with our value&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Basically, the &lt;code&gt;permalink&lt;/code&gt; value in the global &lt;code&gt;_data/eleventyComputed.js&lt;/code&gt; directory has the highest priority of all. It will override the value in all &lt;code&gt;Data Directory Data&lt;/code&gt; and &lt;code&gt;Front Matter Data&lt;/code&gt; files. Refer to the &lt;a href=&quot;https://www.11ty.dev/docs/data-computed/#advanced-details&quot;&gt;advanced details&lt;/a&gt; section in the documentation.&lt;/p&gt; &lt;p&gt;We don&#39;t want the &lt;code&gt;permalink&lt;/code&gt; to be overridden if we have set it somewhere else for a special case (e.g. the RSS file). Therefore, we add an &lt;code&gt;or&lt;/code&gt; statement to check that.&lt;/p&gt; &lt;p&gt;Voila! No more per file nor per directory settings. Just one global computed data to rule it all. 😃&lt;/p&gt; &lt;h2&gt;One more thing... configure our localhost&lt;/h2&gt; &lt;p&gt;If you run &lt;code&gt;npm start&lt;/code&gt; to serve the project now, it will show a &amp;quot;page not found&amp;quot; error when you browse to &lt;a href=&quot;localhost:8080/licenses&quot;&gt;/licenses&lt;/a&gt; page. However, it works when you browse to &lt;a href=&quot;localhost:8080/licenses.html&quot;&gt;/licenses.html&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;What happened is that we configured our production server (Firebase Hosting) to handle the &lt;code&gt;cleanURLs&lt;/code&gt; (eliminate &lt;code&gt;.html&lt;/code&gt;), but we have not configured our local server yet.&lt;/p&gt; &lt;p&gt;Eleventy uses Browsersync under the hood to serve our local files. The good news is we can customize that too! Let&#39;s configure that in our &lt;code&gt;.eleventy.js&lt;/code&gt; configuration file.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .eleventy.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// Browsersync config&lt;/span&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setBrowserSyncConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// will add our configuration code here&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The configuration code is slightly lengthy, so I placed that in a separate file &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter/blob/master/configs/browsersync.config.js&quot;&gt;configs/browsersync.config.js&lt;/a&gt;. (I might consider creating an npm package in future, maybe!)&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// configs/browsersync.config.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fs &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;fs&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; url &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;url&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;output&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; server&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; baseDir&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;output&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; middleware&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;req&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; next&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; file &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; url&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;parse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;req&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;url&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; file &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;pathname&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; file &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;/\/+$/&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// remove trailing hash&lt;/span&gt;&lt;br&gt; file &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;output&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;file&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;.html&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;fs&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;existsSync&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; content &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; fs&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;readFileSync&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;content&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;writeHead&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;200&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;end&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;next&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; callbacks&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function-variable function&quot;&gt;ready&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;_&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; bs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; bs&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addMiddleware&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;*&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;_&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; res&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; content &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; fs&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;readFileSync&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;output&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/404.html&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;content&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;writeHead&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;404&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;end&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;No worries, it&#39;s okay to skip reading these code, just use it! 😉 Next, update our &lt;code&gt;.eleventy.js&lt;/code&gt; file to use that.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .eleventy.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// Browsersync config&lt;/span&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setBrowserSyncConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// add this line - dist is our output directory&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./configs/browsersync.config&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;dist&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have set up our file structure, cleaned the URLs and configure Browsersync to support that. 🎉 We have learned about &lt;code&gt;Front Matter Data&lt;/code&gt;, &lt;code&gt;Data File Directory&lt;/code&gt; &lt;code&gt;Computed Data&lt;/code&gt;, the global folder and Browsersync too.&lt;/p&gt; &lt;p&gt;That&#39;s how my site &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; was set up as well.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;TLDR; Does these effort worth it?&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Actually... &lt;strong&gt;you might not need this. Seriously&lt;/strong&gt;. Just go with the default settings and you will be happy, hah!&lt;/p&gt; &lt;p&gt;I am opionated as I have mentioned. I am surprised that I can go so far and even write a whole blog post about this, basically just to:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;make my output file structure look good&lt;/li&gt; &lt;li&gt;make the URLs look good&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;(No offense all, good in my definition! 😂)&lt;/p&gt; &lt;p&gt;Nevertheless, I enjoy the process of exploration and testing the flexibility of Eleventy. Turns out, there is a lot of customization you can do with it.&lt;/p&gt; &lt;/div&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1263751963562237952&quot;&gt; twitter.com/jecfish/status/1263751963562237952 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Automating Image Optimization Workflow</title> <link href="https://jec.fish/blog/automating-image-optimization-workflow"/> <updated>2020-05-23T00:00:00-00:00</updated> <id>https://jec.fish/blog/automating-image-optimization-workflow</id> <summary>Automate image resize, conversion and compression in bulk.</summary> <category term="blog"/> <content type="html">&lt;p&gt;Image resize, compression and format conversion are tedious tasks. However, it&#39;s inevitable. Having optimized images is a crucial part for web performance.&lt;/p&gt; &lt;p&gt;It&#39;s our responsibility to &lt;em&gt;make our websites load fast&lt;/em&gt;. I will share how to automate these tasks in our project with Imagemin, Jimp, Husky and Gulp.&lt;/p&gt; &lt;p&gt;This is the 4th post of the series - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Website with Eleventy&lt;/a&gt;. However, you can jump straight into this article without prior reading as this image optimization workflow setup could be applied to any projects.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;Notes:&lt;/p&gt; &lt;p&gt;You may jump straight to the code, &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; on GitHub, but this post contains some useful tips on image optimization and testing, so you might not want to miss!&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;What are performant images?&lt;/h2&gt; &lt;p&gt;In short, performant images are:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Images with the appropriate &lt;strong&gt;format&lt;/strong&gt;. (e.g. favor &lt;code&gt;webp&lt;/code&gt; than &lt;code&gt;jpg&lt;/code&gt; or &lt;code&gt;png&lt;/code&gt;)&lt;/li&gt; &lt;li&gt;Images with appropriate &lt;strong&gt;compression&lt;/strong&gt;. (e.g. drop the image quality to 80-85%)&lt;/li&gt; &lt;li&gt;Images with appropriate &lt;strong&gt;display size&lt;/strong&gt;. (e.g. serve smaller images for mobile, and bigger one for desktop)&lt;/li&gt; &lt;li&gt;Loading lazily. (e.g. only load when user scrolls to it)&lt;/li&gt; &lt;/ol&gt; &lt;h2&gt;A brief walkthrough on the images structure&lt;/h2&gt; &lt;p&gt;Most original images in &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; have similar traits:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Images are in various formats. JPG mostly, but also PNG, SVG and GIF.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;1200 x 675 px&lt;/strong&gt; - Used as post cover in collection listing (e.g. &lt;a href=&quot;https://jec.fish/blog&quot;&gt;/blog&lt;/a&gt;. &lt;a href=&quot;https://jec.fish/deck&quot;&gt;/deck&lt;/a&gt;) and meta tag for social media.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;1024 x any height px&lt;/strong&gt; - Used in content (e.g. a &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;blog post&lt;/a&gt;, a &lt;a href=&quot;https://jec.fish/deck/web-performance-optimization&quot;&gt;presentation deck&lt;/a&gt;)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here is an overview of how images are organized in the project:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# image folder&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; assets&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; img&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; blog&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; aaa.jpg&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; bbb.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; ddd.gif&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicons&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;96.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;128.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; fff.svg&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; ggg&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;256.jpg&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; hhh.jpg&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Task 01: Resize the images&lt;/h2&gt; &lt;p&gt;Here are the requirements:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Resize the images to &lt;code&gt;500px&lt;/code&gt; width.&lt;/li&gt; &lt;li&gt;Only resize images with &lt;code&gt;jpg&lt;/code&gt; or &lt;code&gt;png&lt;/code&gt; format.&lt;/li&gt; &lt;li&gt;Output the resized files to &lt;code&gt;assets/img-500&lt;/code&gt; folder.&lt;/li&gt; &lt;li&gt;Make the code flexible. For example, we might want to generate images with &lt;code&gt;300px&lt;/code&gt; in the future.&lt;/li&gt; &lt;li&gt;Exclude files with prefix &lt;code&gt;favicon-&lt;/code&gt; or suffix &lt;code&gt;-256&lt;/code&gt;.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;We will be using &lt;a href=&quot;https://gulpjs.com/&quot;&gt;Gulp&lt;/a&gt; as our build tool and the &lt;a href=&quot;https://github.com/oliver-moran/jimp&quot;&gt;Jimp&lt;/a&gt; for our image processing library. Take note that you can use Jimp independently to resize the images, but I find it easier to automate that with Gulp.&lt;/p&gt; &lt;p&gt;Let&#39;s roll up our sleeves and start by installing the packages!&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# run command&lt;/span&gt;&lt;br&gt;npm install gulp gulp&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;cli jimp through2 &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;D&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Next, create a Gulp file and start coding. You can give the file any name and place it anywhere in your project. I prefer to organize build tasks in &lt;code&gt;tasks&lt;/code&gt; directory. I followed &lt;a href=&quot;https://angular.io/guide/styleguide#naming&quot;&gt;Angular naming conventions&lt;/a&gt; - &lt;code&gt;feature.type.js&lt;/code&gt; and &lt;code&gt;dashed-case&lt;/code&gt; personally.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# create a gulp file&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; assets&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; img&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; tasks&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; transform&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;image.gulp.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Great, here is the code to resize our images:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// tasks/transform-image.gulp.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; src&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dest&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; series&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; parallel &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; through2 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;through2&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; Jimp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;jimp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;assets&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;EXCLUDE_SRC_GLOB&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!(favicon*|*-256)&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; to&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/**/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;EXCLUDE_SRC_GLOB&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;*.{jpg,png}&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;to&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;resizeImage&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; quality &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; through2&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;obj&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;file&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; _&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cb&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isBuffer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; img &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; Jimp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;contents&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; smallImg &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; img&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;width&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; Jimp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;AUTO&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;quality&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;quality&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; content &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; smallImg&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getBufferAsync&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Jimp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;AUTO&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;contents &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; Buffer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;content&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;cb&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// export the task, pass in parameters&lt;/span&gt;&lt;br&gt;exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;img-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;500&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code looks slightly lengthy. Let&#39;s walk through it together:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;Gulp&lt;/code&gt; provides a &lt;code&gt;src&lt;/code&gt; function for us to read and loop through all the files that match the file pattern (glob). We can pass in either a string or array of globs.&lt;/li&gt; &lt;li&gt;Take note of the &lt;code&gt;SRC&lt;/code&gt; and &lt;code&gt;EXCLUDE_SRC_GLOB&lt;/code&gt;. This is the glob pattern to select all the files we want in the &lt;code&gt;img&lt;/code&gt; folder but excludes those we don&#39;t.&lt;/li&gt; &lt;li&gt;&lt;code&gt;through2&lt;/code&gt; is a wrapper for Nodejs stream. We use it to get our image object streams for processing.&lt;/li&gt; &lt;li&gt;Use &lt;code&gt;Jimp&lt;/code&gt; to resize and compress the image quality to just &lt;code&gt;80%&lt;/code&gt; quality from the original.&lt;/li&gt; &lt;li&gt;Use the &lt;code&gt;Gulp&lt;/code&gt; built-in &lt;code&gt;dest&lt;/code&gt; function to write our files to the output folder.&lt;/li&gt; &lt;li&gt;Finally, pass in parameters to our &lt;code&gt;resize&lt;/code&gt; function and export it as the default task.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;The &lt;code&gt;resize&lt;/code&gt; function actually returns the &lt;code&gt;resizeImage&lt;/code&gt; function. The benefit of wrapping the code this way is that we can perform multiple &lt;code&gt;resizeImage&lt;/code&gt; actions with different parameters. For example, if we need to resize the images to &lt;code&gt;300px&lt;/code&gt; as well, we could export this task instead:-&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// export the tasks, perform 2 resize action in parallel&lt;/span&gt;&lt;br&gt;&lt;br&gt;exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;parallel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;img-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;500&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;img-300&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;300&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;code&gt;parallel&lt;/code&gt; is the function offered by &lt;code&gt;Gulp&lt;/code&gt;. If you want to run the tasks sequentially (one by one) instead, replace &lt;code&gt;parallel&lt;/code&gt; with &lt;code&gt;series&lt;/code&gt;.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;More about Globs&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;If you want to learn more about file globs, Gulp has a &lt;a href=&quot;https://gulpjs.com/docs/en/getting-started/explaining-globs/&quot;&gt;basic documentation&lt;/a&gt; for that. The docs also provide links to some more advanced globbing syntax. Read the Micromatch documentation too (link provided in the docs), we use that syntax to form our glob above.&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;How to run the task?&lt;/h2&gt; &lt;p&gt;You can run the task by running this command:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# command to run the task&lt;/span&gt;&lt;br&gt;npx gulp &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;f tasks/transform&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;image.gulp.js&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;I created a script in &lt;code&gt;package.json&lt;/code&gt; file to make my life easier:&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// package.json&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;transform-image&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npx gulp -f tasks/transform-image.gulp.js&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; ...&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;I can then run the task by using the command &lt;code&gt;npm run transform-image&lt;/code&gt;.&lt;/p&gt; &lt;h2&gt;Task 02: Convert the images to webp&lt;/h2&gt; &lt;p&gt;&lt;code&gt;WebP&lt;/code&gt; is a modern image format that is usually 25-35% smaller than comparable JPG and PNG images. It&#39;s supported in most browsers, but... not Safari sadly. 😌 However, we serve the &lt;code&gt;WebP&lt;/code&gt; images if it is browser-supported, and fall back to &lt;code&gt;JPG&lt;/code&gt; if it isn&#39;t. (Further explanation later)&lt;/p&gt; &lt;p&gt;Here are the requirements for conversion:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Convert the images in both &lt;code&gt;img&lt;/code&gt; and &lt;code&gt;img-500&lt;/code&gt; folders to &lt;code&gt;webp&lt;/code&gt; format.&lt;/li&gt; &lt;li&gt;Only convert &lt;code&gt;jpg&lt;/code&gt; and &lt;code&gt;png&lt;/code&gt; files.&lt;/li&gt; &lt;li&gt;Output the converted files to &lt;code&gt;webp&lt;/code&gt; and &lt;code&gt;webp-500&lt;/code&gt; folders respectively.&lt;/li&gt; &lt;li&gt;Make sure the converted files have &lt;code&gt;.webp&lt;/code&gt; file extension.&lt;/li&gt; &lt;li&gt;Do not hardcode. We might need to convert more images in different folders in the future.&lt;/li&gt; &lt;li&gt;Exclude files with prefix &lt;code&gt;favicon-&lt;/code&gt; or suffix &lt;code&gt;-256&lt;/code&gt;.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;We will be using &lt;a href=&quot;https://github.com/imagemin/imagemin&quot;&gt;imagemin&lt;/a&gt; and the &lt;a href=&quot;https://github.com/imagemin/imagemin-webp&quot;&gt;imagemin-webp&lt;/a&gt; plugins. Let&#39;s install the packages.&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;npm install gulp-imagemin imagemin-webp gulp-rename -D&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Next, let&#39;s update our &lt;code&gt;transform-image.gulp.js&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// tasks/transform-image.gulp.js &lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; src&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dest&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; series&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; parallel &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; imageminWebp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;imagemin-webp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; imagemin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-imagemin&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; rename &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-rename&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;assets&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;EXCLUDE_SRC_GLOB&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;!(favicon*|*-256|*-512|*-1024)&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; to&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; extension &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;webp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/**/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;EXCLUDE_SRC_GLOB&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;*.{jpg,png}&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ASSETS_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;to&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;convertWebp&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;imagemin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;imageminWebp&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; quality&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;80&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;rename&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; extname&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;extension&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// export the tasks&lt;/span&gt;&lt;br&gt;exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;parallel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;webp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;webp-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code structure is similar to the previous task - read, process and output, but with one extra step at the end: we rename the file with the new extension. (e.g. &lt;code&gt;aaa.jpg&lt;/code&gt; will be renamed to &lt;code&gt;aaa.webp&lt;/code&gt;).&lt;/p&gt; &lt;h2&gt;Can we run both tasks together?&lt;/h2&gt; &lt;p&gt;Yes, you can. Update our &lt;code&gt;export&lt;/code&gt; task to:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// update the tasks to run all tasks&lt;/span&gt;&lt;br&gt;&lt;br&gt;exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;resize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;img-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;500&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;parallel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;webp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;img-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;webp-500&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The above code means: wait for the image resize task to complete, then start the two image conversion tasks in parallel.&lt;/p&gt; &lt;h2&gt;Not good enough...&lt;/h2&gt; &lt;p&gt;The above code achieves the purpose. However, there is one drawback. The process will take longer when the number of images grow. It is because the above tasks will always process all the images in the provided folders, &lt;strong&gt;regardless of whether the files are already processed or generated&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;Let&#39;s make it better! We could use &lt;code&gt;gulp-changed&lt;/code&gt; to compare the file&#39;s last modified date. If the file already exists in the output folder, we won&#39;t process it again.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// tasks/transform-image.gulp.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; changed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-changed&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// Modify resizeImage() function&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;resizeImage&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; quality &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;80&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// add this line&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;changed&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// Modify convertWebp() function&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;SRC&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// add this line&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;changed&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DEST&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; extension&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;extension&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;For the &lt;code&gt;resizeImage&lt;/code&gt; function, both input and output filenames are the same, so we just need to call the &lt;code&gt;changed&lt;/code&gt; function to compare. However, &lt;code&gt;convertWebp&lt;/code&gt; function changes the file extension from JPG to WebP. We need to pass in an additional parameter to the &lt;code&gt;changed&lt;/code&gt; function to make it work.&lt;/p&gt; &lt;p&gt;Check the &lt;a href=&quot;https://github.com/sindresorhus/gulp-changed&quot;&gt;gulp-changed&lt;/a&gt; documentation if you want to compare the files with other methods.&lt;/p&gt; &lt;p&gt;Now, try to run the task again. It should convert just the newly added images. Great! We saved our time and the Earth (less processing power 😆) successfully.&lt;/p&gt; &lt;h2&gt;But... I don&#39;t want to run the command manually every time&lt;/h2&gt; &lt;p&gt;Sure. You can set up a new GitHub Actions to do so (read my 2nd post on &lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt;).&lt;/p&gt; &lt;p&gt;However, I prefer to do it locally, because I need to visualize the images during development or writing time (also to save some build minutes on GitHub 😛).&lt;/p&gt; &lt;p&gt;One option is to create a &lt;code&gt;prestart&lt;/code&gt; NPM script to run the &lt;code&gt;transform-image&lt;/code&gt; every time before starting the local server.&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// package.json&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;prestart&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run transform-image&quot;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Another option is to run the tasks every time before we &lt;code&gt;git push&lt;/code&gt; or &lt;code&gt;git commit&lt;/code&gt; our changes. To do this, you can use the &lt;code&gt;Husky&lt;/code&gt; package.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# install Husky&lt;/span&gt;&lt;br&gt;npm install husky &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;D&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Once installed, add this configuration to your &lt;code&gt;package.json&lt;/code&gt;:&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// package.json&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;husky&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;hooks&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;pre-push&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run transform-image&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Test it! The &lt;code&gt;transform-image&lt;/code&gt; task will run every time you push your code.&lt;/p&gt; &lt;h2&gt;Serving responsive images in HTML&lt;/h2&gt; &lt;p&gt;Instead of using the &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag in HTML, we can wrap it with the &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; element to serve responsive images. For example, with our output files above, our HTML could be:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(max-width: 500px)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/assets/webp-500/hhh.webp&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/webp&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(min-width: 501px)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/assets/webp/hhh.webp&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;image/webp&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;source&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(max-width: 500px)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/assets/img-500/hhh.jpg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/assets/img/hhh.jpg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;loading&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;lazy&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;caption&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;https://web.dev/native-lazy-loading/&quot;&gt;Native image lazy loading&lt;/a&gt; support has landed in &lt;a href=&quot;https://caniuse.com/#feat=loading-lazy-attr&quot;&gt;majority of the browsers&lt;/a&gt;! Not yet in Safari... 😌&lt;/p&gt; &lt;p&gt;We can add the &lt;code&gt;loading =&amp;quot;lazy&amp;quot;&lt;/code&gt; tag in the &lt;code&gt;img&lt;/code&gt; to signal the browser to load the image lazily.&lt;/p&gt; &lt;p&gt;Here is the short explanation on what the code above did. 👉🏼&lt;/p&gt; &lt;p&gt;If the browser supports WebP, it will serve images:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;from the &lt;code&gt;/webp-500&lt;/code&gt; folder if the screen size is small. (within &lt;code&gt;500px&lt;/code&gt;)&lt;/li&gt; &lt;li&gt;from the &lt;code&gt;/webp&lt;/code&gt; folder if the screen size is over &lt;code&gt;500px&lt;/code&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;If WebP format is not supported, the browser will use the JPG images instead, either from &lt;code&gt;/img-500&lt;/code&gt; or &lt;code&gt;/img&lt;/code&gt; depending on the screen size.&lt;/p&gt; &lt;p&gt;Please note that the above code works in all browsers.&lt;/p&gt; &lt;p&gt;There are many ways you can configure the &lt;code&gt;source&lt;/code&gt; tag, whether to serve responsive images by media size, device pixel ratio, sizes, etc. Read more in this &lt;a href=&quot;https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/&quot;&gt;post&lt;/a&gt; here by &lt;a href=&quot;https://twitter.com/etportis&quot;&gt;Eric&lt;/a&gt; on Smashing Magazine!&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;But... the HTML code is lengthy&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;Indeed, and we don&#39;t want to write the same code over and over again. In the coming post, I will share how to create a reusable function to do that, plus anti content jumping when the image is loading. Stay tuned! (hint: by creating &lt;code&gt;shortcode&lt;/code&gt; in Eleventy)&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;Bonus 1/3: What are the alternatives?&lt;/h2&gt; &lt;h3&gt;What if I want to transform an image one-off manually?&lt;/h3&gt; &lt;p&gt;Sure, use this website &lt;a href=&quot;https://squoosh.app/&quot;&gt;squoosh.app&lt;/a&gt; to resize, compress and convert the image format! Drop in an image, and select the options you need and download the processed image.&lt;/p&gt; &lt;p&gt;In fact, I use it quite often myself. Pretty handy.&lt;/p&gt; &lt;h3&gt;How to do this on demand (on the fly)?&lt;/h3&gt; &lt;p&gt;Yes. You can use &lt;a href=&quot;http://thumbor.org/&quot;&gt;Thumbor&lt;/a&gt; (open source project, host it yourself) to do it. Read the &lt;a href=&quot;https://web.dev/use-thumbor/&quot;&gt;web.dev&lt;/a&gt; article for details.&lt;/p&gt; &lt;p&gt;Another one would be &lt;a href=&quot;https://cloudinary.com/&quot;&gt;Cloudinary&lt;/a&gt;, and they offer free quota. It is user friendly and supports image format conversion on the fly!&lt;/p&gt; &lt;p&gt;Last one is to roll your own API with the libraries above (&lt;code&gt;imagemin&lt;/code&gt; and &lt;code&gt;Jimp&lt;/code&gt;)!&lt;/p&gt; &lt;h2&gt;Bonus 2/3: How to know which image is serving currently?&lt;/h2&gt; &lt;p&gt;When serving responsive images, you might want to test if the right images are served. You can use DevTools to do so (Of course I use Chrome DevTools 😆).&lt;/p&gt; &lt;p&gt;Say you want to test on a single image. You can hover to the image element in the DevTools &lt;code&gt;Element&lt;/code&gt; panel, and it will show you a pop-up, showing which is the &lt;code&gt;currentSrc&lt;/code&gt; of the image.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:40.52734375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/automating-image-optimization-workflow-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/automating-image-optimization-workflow-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/automating-image-optimization-workflow-04.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/automating-image-optimization-workflow-04.jpg&quot; alt=&quot;View current image src in Element panel&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;View current image src in Element panel&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;If you want to examine the images in bulk, open the &lt;code&gt;Network&lt;/code&gt; Panel, filter network requests by &lt;code&gt;Img&lt;/code&gt; type, check the URLs or further &lt;code&gt;filter&lt;/code&gt; by format or filename.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:55.375%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/automating-image-optimization-workflow-02.gif&quot; alt=&quot;Filtering network request in Network Panel&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Filtering network request in Network Panel&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;How about test serving images in different device pixel ratios (DPR)? Toggle the &lt;code&gt;Device&lt;/code&gt; toolbar, and add the DPR selection.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:48.25%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/automating-image-optimization-workflow-03.gif&quot; alt=&quot;Loading image by DPR&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Loading image by DPR&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Another easy way is to right click the image, open it in a new tab and check the URL. No DevTools needed! 😆&lt;/p&gt; &lt;h2&gt;Bonus 3/3: How&#39;s other sites serving their images?&lt;/h2&gt; &lt;p&gt;Let&#39;s learn from one of the best image websites. Try inspect &lt;a href=&quot;https://unsplash.com/&quot;&gt;unsplash.com&lt;/a&gt; with DevTools. (right click on the photo &amp;gt; select &amp;quot;Inspect&amp;quot;).&lt;/p&gt; &lt;p&gt;Guess how many &lt;code&gt;srcset&lt;/code&gt; they have for the one image? &lt;strong&gt;20&lt;/strong&gt;.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:57.2265625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/automating-image-optimization-workflow-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/automating-image-optimization-workflow-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/automating-image-optimization-workflow-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/automating-image-optimization-workflow-01.jpg&quot; alt=&quot;Unsplash has 20 versions of the same image&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Unsplash has 20 versions of the same image&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Instagram and Pinterest have lesser &lt;code&gt;srcset&lt;/code&gt;. Pick and set the appropriate one for your site. 😃 The best thing about the web is it&#39;s open. Inspect and learn!&lt;/p&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have learnt how to optimize images, serve them responsively and test it. 🎉 On behalf of the web residents, thanks for saving our data, hah! 🙇🏻‍♀️&lt;/p&gt; &lt;p&gt;This is how I optimize the images in my site &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; as well. I have a presentation (slides and video) on &lt;a href=&quot;https://jec.fish/deck/web-performance-optimization&quot;&gt;web optimization - images, fonts and JavaScript&lt;/a&gt;, do check it out.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1264060210563276800&quot;&gt; twitter.com/jecfish/status/1264060210563276800 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Setting up SEO and Google Analytics</title> <link href="https://jec.fish/blog/setting-up-seo-and-google-analytics"/> <updated>2020-05-24T00:00:00-00:00</updated> <id>https://jec.fish/blog/setting-up-seo-and-google-analytics</id> <summary>How to setup SEO, Google Analytics, structured data and sitemap in Eleventy.</summary> <category term="blog"/> <content type="html">&lt;p&gt;Let&#39;s dive into how to make our website discoverable and more attractive when sharing in social media - with a cover image, proper title and short description.&lt;/p&gt; &lt;style&gt; /* markdown table generator: https://www.tablesgenerator.com/markdown_tables */ /* css gist: https://gist.github.com/tuzz/3331384 */ table { padding: 0; margin-bottom: 20px; border-collapse: collapse; } table tr { margin: 0; padding: 0; } table tr th { font-weight: bold; text-align: left; margin: 0; padding: 6px 14px; border-top: 2px solid #D8DEE9; } table tr td { text-align: left; margin: 0; padding: 6px 14px; border-top: 2px solid #D8DEE9; border-bottom: 2px solid #D8DEE9; } .dark-mode table tr th, .dark-mode table tr td { border-color: #4C566A; } &lt;/style&gt; &lt;p&gt;This is the 5th post of the series - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;building personal static site with 11ty&lt;/a&gt;. GitHub Repo is here - &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; if you are a code-first person. 😉&lt;/p&gt; &lt;h2&gt;Let&#39;s set up some global data before we start&lt;/h2&gt; &lt;p&gt;We touched on global data in the &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;previous post&lt;/a&gt;. Global data is data which, once defined, it is accessible in all project template files (e.g. Markdown, Nunjucks).&lt;/p&gt; &lt;p&gt;There are some common data we need for all pages, so let&#39;s create a new file under the default global data folder &lt;code&gt;_data&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _data&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; env.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is what our &lt;code&gt;env.js&lt;/code&gt; file looks like.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_data/env.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; environment &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; process&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;env&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;ELEVENTY_ENV&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROD_ENV&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;prod&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; prodUrl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;https://your-production.url&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; devUrl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;http://localhost:8080&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; baseUrl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; environment &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROD_ENV&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; prodUrl &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; devUrl&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; isProd &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; environment &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;PROD_ENV&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; folder &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; assets&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;assets&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; dir &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; img&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;folder&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;assets&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/img/&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; siteName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;your site name&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; author&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;your name&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; environment&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; isProd&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; folder&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; base&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; site&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; baseUrl&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; img&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;baseUrl&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;dir&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;img&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code is quite straightforward. We set the &lt;code&gt;ELEVENTY_ENV&lt;/code&gt; environment variable to &lt;code&gt;dev&lt;/code&gt; or &lt;code&gt;prod&lt;/code&gt; when we build the project (we set that in NPM scripts previously).&lt;/p&gt; &lt;p&gt;Depending on the value, we set other variables accordingly, then export it. These data can be accessed by any template files later. For example, we get the image base URL by calling &lt;code&gt;env.base.img&lt;/code&gt;.&lt;/p&gt; &lt;h2&gt;Create a base layout&lt;/h2&gt; &lt;p&gt;We will be using the &lt;a href=&quot;https://www.11ty.dev/docs/layouts/&quot;&gt;11ty Layouts&lt;/a&gt; feature. A Layout is a reusable piece. As you know, we need to set the SEO (meta tags) and Google Analytics on every page. As a lazy developer, we don&#39;t want to copy-paste the same code every time. Layout can help with that.&lt;/p&gt; &lt;p&gt;&lt;code&gt;_includes&lt;/code&gt; is the default layout directory (customizable). Let&#39;s create our first layout.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.njk &lt;span class=&quot;token comment&quot;&gt;# create this file&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;File naming:&lt;/p&gt; &lt;p&gt;Please note that you can give your layout file any names. I followed &lt;a href=&quot;https://angular.io/guide/styleguide#naming&quot;&gt;Angular naming conventions&lt;/a&gt; personally - naming files with &lt;code&gt;feature.type.js&lt;/code&gt; and &lt;code&gt;dashed-case&lt;/code&gt;. I find it easier to search through the source files later.&lt;/p&gt; &lt;/div&gt; &lt;p&gt;Here is the base layout code to start with.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token doctype&quot;&gt;&amp;lt;!DOCTYPE html&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;en&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;charset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;UTF-8&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;viewport&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;width=device-width, initial-scale=1.0&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {{ content | safe }}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;This &lt;code&gt;base.layout.njk&lt;/code&gt; would be our skeleton (or you may call it &amp;quot;master layout&amp;quot;) for all other templates. The &lt;code&gt;title&lt;/code&gt; data will be provided by the child template later. The &lt;code&gt;content&lt;/code&gt; data is the child template’s content. We escape the content by using the built-in &lt;code&gt;safe&lt;/code&gt; filter.&lt;/p&gt; &lt;p&gt;Let&#39;s see how we can use this layout in our template file. the layout. Let&#39;s update &lt;code&gt;index.njk&lt;/code&gt;:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;title: Home Page&lt;br&gt;---&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hello Eleventy!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;We set the page layout to our newly created &lt;code&gt;base.layout.njk&lt;/code&gt;. Open the page in browser now, you should see:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;The page title shown as &amp;quot;Home Page&amp;quot;.&lt;/li&gt; &lt;li&gt;The page shows &lt;strong&gt;Hello Eleventy!&lt;/strong&gt; in bold - instead of literally &amp;quot;&amp;lt;strong&amp;gt;Hello Eleventy!&amp;lt;/strong&amp;gt;&amp;quot; because we use the &lt;code&gt;safe&lt;/code&gt; filter to escape the content in the base layout.&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;Protip: Setting layout per directory&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;We can set the &lt;code&gt;layout&lt;/code&gt; value in the Directory Data File &lt;code&gt;root.11tydata.js&lt;/code&gt;. By doing this, we do not need to set &lt;code&gt;layout&lt;/code&gt; in every template. All templates under the &lt;code&gt;root&lt;/code&gt; directory will use &lt;code&gt;base.layout.njk&lt;/code&gt; by default! (We covered this in the &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;previous post&lt;/a&gt;.&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;Let&#39;s add Google Analytics&lt;/h2&gt; &lt;p&gt;Let&#39;s start adding Google Analytics. Once you set up an account with &lt;a href=&quot;http://analytics.google.com/&quot;&gt;Google Analytics&lt;/a&gt;, copy the JavaScript code snippet to our base layout.&lt;/p&gt; &lt;p&gt;The code should look something like this:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;...&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- add these code in the head section --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;async&lt;/span&gt; &lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;https://www.googletagmanager.com/gtag/js?id=your_tracking_id&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;dataLayer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;dataLayer &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; dataLayer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;arguments&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;config&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;your_tracking_id&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;...&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Erm... Not good enough&lt;/h3&gt; &lt;p&gt;The above code works, but is not good enough because:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;We don&#39;t want to track the activities during development. We should enable that for production only.&lt;/li&gt; &lt;li&gt;We might have different tracking id for different environments. For example, the beta environment. Hard-coded the tracking id here might not be ideal.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let&#39;s enhance that, update our code above to the following:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;...&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% if env.isProd %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;async&lt;/span&gt; &lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;https://www.googletagmanager.com/gtag/js?id={{ env.tracking.gtag }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;dataLayer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;dataLayer &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; dataLayer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;arguments&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;config&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;{{ env.tracking.gtag }}&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% endif %}&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;...&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;With the above changes, the analytics code will be added to the page only if it&#39;s in production (&lt;code&gt;env.isProd&lt;/code&gt;). We have also replaced the hardcoded tracking id with a new global data &lt;code&gt;env.tracking.gtag&lt;/code&gt;. Add that in your &lt;code&gt;env.js&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_data/env.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt; tracking&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; gtag&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;your_tracking_id&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Cool, Google Analytics configuration is done. Try to build your code in dev mode &lt;code&gt;npm run build&lt;/code&gt; and production mode &lt;code&gt;npm run build:prod&lt;/code&gt; to see the different outputs.&lt;/p&gt; &lt;h2&gt;Creating the robots.txt file&lt;/h2&gt; &lt;p&gt;&lt;a href=&quot;https://support.google.com/webmasters/answer/6062608?hl=en&quot;&gt;Robots.txt&lt;/a&gt; is a text file with instructions for search engine crawlers. Let&#39;s create one.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;robots.njk &lt;span class=&quot;token comment&quot;&gt;# new file &lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;And here is the content of our &lt;code&gt;robots.txt&lt;/code&gt;:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# src/root/robots.txt&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;false&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;permalink&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; robots.txt&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;User-agent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; *&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;This will create the &lt;code&gt;robots.txt&lt;/code&gt; file in our output directory.&lt;/p&gt; &lt;p&gt;Alternatively, you can name the file as &lt;code&gt;robots.txt&lt;/code&gt;, but you might need to add the &lt;code&gt;addPassthroughCopy&lt;/code&gt; setting in the &lt;code&gt;.eleventy.js&lt;/code&gt; config file (covered in &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;first post&lt;/a&gt;) because 11ty doesn&#39;t process text files by default.&lt;/p&gt; &lt;h2&gt;Excluding pages for SEO&lt;/h2&gt; &lt;p&gt;Sometimes we want to exclude pages for search index, like the &lt;a href=&quot;https://jec.fish/404&quot;&gt;/404&lt;/a&gt; page. You can do that by adding the page URL in &lt;code&gt;robots.txt&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;However, there is another way to do it. We can add a meta tag in the base layout.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% if ignore %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;robots&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;noindex&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% endif %}&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;...&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;For pages we don&#39;t want to index, we can set &lt;code&gt;ignore&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt; in the page&#39;s Front Matter Data. Here is an example:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/404.njk --&gt;&lt;/span&gt; &lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;ignore: true&lt;br&gt;---&lt;br&gt;&lt;br&gt;Page not found. Go home!&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;What are the tags for SEO?&lt;/h2&gt; &lt;p&gt;At the minimum, we should set the &lt;code&gt;title&lt;/code&gt; tag and meta tag &lt;code&gt;description&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;description&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ desc or title }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;In case there is no &lt;code&gt;desc&lt;/code&gt; provided in the template file, we will use the &lt;code&gt;title&lt;/code&gt; value as the description.&lt;/p&gt; &lt;p&gt;However, minimum is not good enough for social media sharing.&lt;/p&gt; &lt;h3&gt;Social media meta tags&lt;/h3&gt; &lt;p&gt;There are many social media meta tags you can set depending on how you want the data to display in the platforms. Read the specific social media documentation for the updated details.&lt;/p&gt; &lt;p&gt;I did the basic social media setup here:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;Support Twitter and Open Graph tags&lt;/strong&gt; - Good enough, these tags work for popular platforms like Twitter, Facebook, Slack, LinkedIn, WhatsApp and more.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Only one cover image in JPG format&lt;/strong&gt; for all social media with size &lt;code&gt;1200 x 675 px&lt;/code&gt; - each social media platform requires a specific image size for optimal display. You may consider generating different cover images for that. I aim for basic configuration. The trick is to always &lt;strong&gt;set the main content at the center-ish location&lt;/strong&gt; area of the cover image, so when the image is cropped by social media, main content will still be seen. (Try sharing this post in social media and test if my theory works 😉)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here are the meta tags I used.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Open graph --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ title }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:description&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ desc or title }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:type&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;article&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ cover }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:image:width&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;1200&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:image:height&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;675&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Twitter --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ title }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:card&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;summary_large_image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:site&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;@yourUsername&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:description&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ desc or title }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ cover }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:creator&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;@yourUsername&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;...&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;For open graph meta tags, we need to set the width and height to make sure the cover image displays correctly every time someone shares the link (see the &lt;a href=&quot;https://stackoverflow.com/questions/17226392/share-on-facebook-thumbnail-not-showing-for-the-first-time&quot;&gt;issue and explanation here&lt;/a&gt;).&lt;/p&gt; &lt;p&gt;Check the documentation for &lt;code&gt;og:type&lt;/code&gt; and &lt;code&gt;twitter:card&lt;/code&gt;, and pick the type that is most suitable for your content. I use Twitter &lt;code&gt;summary_large_image&lt;/code&gt; because a big image looks great in a tweet.&lt;/p&gt; &lt;p&gt;Child templates will need to provide the &lt;code&gt;cover&lt;/code&gt; data - cover image URL.&lt;/p&gt; &lt;p&gt;Here is the example of all the Front Matter Data that a child template should have set.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- omit the layout if it&#39;s already set in root.11tydata.js --&gt;&lt;/span&gt;&lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;title: Home Page&lt;br&gt;desc: This is my home page. &lt;br&gt;cover: /assets/img/cover-image.jpg&lt;br&gt;---&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hello Eleventy!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Gotcha! No cover image shown in social media&lt;/h3&gt; &lt;p&gt;Deploy your project. Try sharing the page URL in social media now.&lt;/p&gt; &lt;p&gt;Oops, no cover image shows in the thumbnail.&lt;/p&gt; &lt;p&gt;This is because the cover image URL must be absolute (e.g. https://your-site.com/assets/img/cover-image.jpg). You might thought this is an easy fix - by adding the base image url to the &lt;code&gt;cover&lt;/code&gt; data like this:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Nice try, but this is not working! --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;title: Home Page&lt;br&gt;desc: This is my home page. &lt;br&gt;cover: &quot;{{ env.base.img }}cover-image.jpg&quot;&lt;br&gt;---&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hello Eleventy!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;strong&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Nice try, but this is not working. 😆 (Said this to myself)&lt;/p&gt; &lt;p&gt;Turns out, we cannot have global data access and string interpolation in Front Matter Data (except the special case &lt;code&gt;permalink&lt;/code&gt;, covered in &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;previous post&lt;/a&gt;). That means your &lt;code&gt;og:image&lt;/code&gt; and &lt;code&gt;twitter:image&lt;/code&gt; are showing &lt;strong&gt;{{ env.base.img }}cover-image.jpg&lt;/strong&gt; literally in the HTML.&lt;/p&gt; &lt;h3&gt;Oh no, how to get around that?&lt;/h3&gt; &lt;p&gt;To solve that, you can update the meta tag to include the base image URL.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Open graph --&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;property&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;og:image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.img + cover }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Twitter --&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;twitter:image&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.img + cover }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;...&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;With that, you only need to type the shorter image name in every child template.&lt;/p&gt; &lt;h3&gt;Not good enough, for lazy developer&lt;/h3&gt; &lt;p&gt;Let&#39;s face it, naming is hard. Typing the image URL manually in each template is time-wasting. It would be ideal if the &lt;code&gt;cover&lt;/code&gt; data is:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;auto populated, in the format of &lt;strong&gt;cleaned-filename.jpg&lt;/strong&gt;&lt;/li&gt; &lt;li&gt;overridable in child template, in case we need to supply a different image&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here are the expected image names:-&lt;/p&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;src&lt;/th&gt; &lt;th&gt;assets/img&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;root/index.njk&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;root/index.jpg&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;root/licenses.njk&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;root/licenses.jpg&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;blog/2020-05-19-post-one.md&lt;/code&gt;&lt;/td&gt; &lt;td&gt;&lt;code&gt;blog/post-one.jpg&lt;/code&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;We can achieve this with the Global Computed Data &lt;code&gt;eleventyComputed.js&lt;/code&gt;. In fact, we used that in our &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;previous post&lt;/a&gt;. We can apply similar techniques here.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_data/eleventyComputed.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; env &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./env&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// add this cover data&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function-variable function&quot;&gt;cover&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; img &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;cover &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;page&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;filePathStem &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;.jpg&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; img &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; img&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;startsWith&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;/&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; img&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;substr&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; img&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; img&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;URL&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;img&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; env&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;base&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;img&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;With the above code, we no longer need to enter &lt;code&gt;cover&lt;/code&gt; data in every template file. Sweet! 😍&lt;/p&gt; &lt;h3&gt;Social media content testing tools&lt;/h3&gt; &lt;p&gt;You can test the code once it is deployed and publicly accessible. Various testing tools are offered by each platform - and each has its own fancy name...&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Twitter Card Validator - &lt;a href=&quot;https://cards-dev.twitter.com/validator&quot;&gt;cards-dev.twitter.com/validator&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Facebook Sharing Debugger - &lt;a href=&quot;https://developers.facebook.com/tools/debug/&quot;&gt;developers.facebook.com/tools/debug&lt;/a&gt;&lt;/li&gt; &lt;li&gt;LinkedIn Post Inspector - &lt;a href=&quot;https://www.linkedin.com/post-inspector/&quot;&gt;linkedin.com/post-inspector&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;So many different places to test! Yes. Once you set everything up correctly, then no more testing until the next time a social media platform decides to change their image display sizes... 😂&lt;/p&gt; &lt;h2&gt;Sitemap&lt;/h2&gt; &lt;p&gt;Sitemap is a good thing to have. You might not need one if you have linked your pages within your website. Crawlers are pretty good at discovering content automatically nowadays. Nevertheless, here is the code if you need to create one.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# src/root/sitemap.njk&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;false&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;permalink&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; sitemap.txt&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;%&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; for item in collections.all %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; item.url &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;%&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; endfor %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Search engines accept sitemap in several formats. I am using a text file here, you may use xml. The &lt;code&gt;collections.all&lt;/code&gt; data is an Eleventy Supplied Data. It contains all the pages we created in our project. We loop through each one and write the URL in the sitemap.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;Protip: Logging and debugging&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;How to know what are the properties available in &lt;code&gt;collections.all&lt;/code&gt; or &lt;code&gt;item&lt;/code&gt;? We can use the filter &lt;code&gt;log&lt;/code&gt; to examine the value. Here is how you can use it:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# src/root/sitemap.njk&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; collections.all &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt; log &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Reload the page and check your dev console (where you run &lt;code&gt;npm start&lt;/code&gt;). The &lt;code&gt;collections.all&lt;/code&gt; data is logged.&lt;/p&gt; &lt;p&gt;Pretty handy! Use &lt;code&gt;log&lt;/code&gt; for debugging and discovery.&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;Wait... something is not right&lt;/h3&gt; &lt;p&gt;Browse to &lt;code&gt;/sitemap.txt&lt;/code&gt;, there are a few things we need to fix:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;ignore&lt;/code&gt; pages should be excluded - We marked &lt;code&gt;404&lt;/code&gt; page as &lt;code&gt;ignore: true&lt;/code&gt;. We should exclude that from our sitemap.&lt;/li&gt; &lt;li&gt;URLs in sitemap should be &lt;strong&gt;absolute URLs&lt;/strong&gt; - It&#39;s a sitemap requirement. Our URL now has no base URL.&lt;/li&gt; &lt;li&gt;Remove &lt;code&gt;.html&lt;/code&gt; file extension - The pages will get indexed by Google and show up in the search result. It&#39;s okay actually, but I don&#39;t like that. 😆 Let&#39;s remove that as well.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here is the fix:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# src/root/sitemap.njk&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;false&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token key atrule&quot;&gt;permalink&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; sitemap.txt&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token comment&quot;&gt;# {{ collections.all | log }} #}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;%&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; for item in collections.all %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;% if not item.data.ignore %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;env.base.site&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; item.url &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt; replace(&#39;.html&#39;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &#39;&#39;) &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;% endif %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;%&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; endfor %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Another way to fix this would be creating your own &lt;a href=&quot;https://www.11ty.dev/docs/collections/&quot;&gt;collection&lt;/a&gt; to filter out the unwanted pages, but we won&#39;t cover this for now. There is a lot to learn already!&lt;/p&gt; &lt;p&gt;Nice. Browse to &lt;code&gt;/sitemap.txt&lt;/code&gt; page again, you should see all URLs are absolute and cleaned! Go ahead and submit that to &lt;a href=&quot;https://search.google.com/search-console/about&quot;&gt;Google Search Console&lt;/a&gt; and probably the &lt;a href=&quot;https://www.bing.com/webmaster/&quot;&gt;Bing Webmaster Tools&lt;/a&gt; too (which I did, because why not)!&lt;/p&gt; &lt;h2&gt;Bonus: Adding Structured Data&lt;/h2&gt; &lt;p&gt;Google has a &lt;a href=&quot;https://developers.google.com/search/docs/guides/intro-structured-data&quot;&gt;detailed explanation&lt;/a&gt; on structured data. Adding structured data helps crawlers to understand your content more, and there would also be a possibility that your page would show up nicer in the search result.&lt;/p&gt; &lt;p&gt;We can define structured data with script format &lt;code&gt;JSON-LD&lt;/code&gt;. Both Google and Bing support that. We don&#39;t need structured data for every single page, only the main content (blog posts, presentation decks) will do, in my opinion (but I am not an SEO expert).&lt;/p&gt; &lt;p&gt;Again, we don&#39;t want to add the &lt;code&gt;JSON-LD&lt;/code&gt; script in every content page manually. One way to solve this is to do something similar to the &lt;code&gt;ignore&lt;/code&gt;. We can achieve this by using a new Front Matter Data, for example &lt;code&gt;isSupportStructuredData&lt;/code&gt;, to check the boolean value and toggle the script accordingly. However, let&#39;s not overuse the Front Matter.&lt;/p&gt; &lt;p&gt;Using a new layout would be a better option for our case. Let&#39;s create one and I will explain later why it is better.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; writing.layout.njk &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Update all our blog posts to use the writing layout. To save time, we can just add that once in the &lt;code&gt;blog.11tydata.js&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/blog/blog.11tydata.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; layout&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;writing.layout.njk&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The good thing about layout is - it is chainable. &lt;code&gt;writing.layout.js&lt;/code&gt; extends from the base layout (so we don&#39;t need to define those meta tags again 😃).&lt;/p&gt; &lt;p&gt;Alright, here is our writing layout with structured data.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/writing.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;---&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- the content --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;main&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;article&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ content | safe }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;article&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;main&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- the structured data --&gt;&lt;/span&gt;&lt;br&gt;{% set absoluteUrl = env.base.site + (page.url | replace(&#39;.html&#39;, &#39;&#39;)) %}&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;application/ld+json&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@context&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;http://schema.org&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Article&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ absoluteUrl }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;mainEntityOfPage&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;WebPage&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ absoluteUrl }}&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ absoluteUrl }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;headline&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ desc }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;description&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ title }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;audience&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;web developers and designers&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;image&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ImageObject&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ cover }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;height&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;675&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;width&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1200&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;dateCreated&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ date }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;datePublished&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ date }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;dateModified&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ date }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;articleSection&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Blog&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;author&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Person&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.author }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;image&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ImageObject&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.img }}your_photo.jpg&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;height&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1024&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;width&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1024&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.site }}&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;publisher&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Organization&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.site }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.siteName }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.site }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;logo&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;@type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ImageObject&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.img }}your_photo.jpg&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;height&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1024&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&quot;width&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1024&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Structured data is lengthy. Luckily we just need to write it once in writing layout, not every post.&lt;/p&gt; &lt;p&gt;Use the writing layout in our blog post. Here is how our blog post look like:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/blog/2020-05-19-post-one.md --&gt;&lt;/span&gt;&lt;br&gt;---&lt;br&gt;title: A day of my life&lt;br&gt;desc: Story of a relaxing day.&lt;br&gt;date: 2020-05-20&lt;br&gt;---&lt;br&gt;&lt;br&gt;I do nothing and sleep all day.&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;code&gt;Layout&lt;/code&gt; data is inherited from &lt;code&gt;blog/blog.11tydata.js&lt;/code&gt; and &lt;code&gt;cover&lt;/code&gt; image is defined in global data. We don&#39;t need to add those in the templates again.&lt;/p&gt; &lt;p&gt;View the script output in DevTools. Check if the data populated correctly.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;Why is layout a better option in this case?&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;The writing layout does not only have structured content data, but it has some specific CSS for styling as well.&lt;/p&gt; &lt;p&gt;It is good for us to not mix it with &lt;code&gt;base.layout.njk&lt;/code&gt;. Keep the base layout clean.&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;How to test it?&lt;/h3&gt; &lt;p&gt;You can validate the structured data with the Google &lt;a href=&quot;https://search.google.com/structured-data/testing-tool&quot;&gt;structure data testing tool&lt;/a&gt;, even during development. Select the &amp;quot;code snippet&amp;quot; option and paste your &lt;code&gt;JSON-LD&lt;/code&gt; script there.&lt;/p&gt; &lt;p&gt;There is a handy feature in Chrome DevTools to help you to copy the script easily - in the Elements tab, right click on the script element &amp;gt; select Copy &amp;gt; Copy element.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:50.48828125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-seo-and-google-analytics-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-seo-and-google-analytics-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-seo-and-google-analytics-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-seo-and-google-analytics-01.jpg&quot; alt=&quot;Copy the element with ChromeDevTools&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Copy the element with ChromeDevTools&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;There you go, the script is in your clipboard!&lt;/p&gt; &lt;h3&gt;But.. how to know what structured data to set?&lt;/h3&gt; &lt;p&gt;The fact is, I don&#39;t know either. I use DevTools to inspect the top article sites like &lt;a href=&quot;https://medium.com/&quot;&gt;Medium.com&lt;/a&gt; and &lt;a href=&quot;https://scotch.io/&quot;&gt;Scotch.io&lt;/a&gt; to learn how they configured the structured data. That&#39;s how I came out with the above script. 😂&lt;/p&gt; &lt;p&gt;I also referred to the &lt;a href=&quot;https://schema.org/&quot;&gt;schema.org&lt;/a&gt; website to see what are the fields available for each entity.&lt;/p&gt; &lt;h2&gt;Bonus: Any other to-dos to enhance SEO?&lt;/h2&gt; &lt;p&gt;SEO is a big topic. While I might not be an expert, here is a few things that can impact your site ranking:&lt;/p&gt; &lt;p&gt;Low hanging fruits:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Site performance - &lt;a href=&quot;https://cognitiveseo.com/blog/22865/page-speed-seo/&quot;&gt;Page speed is one of the ranking factor&lt;/a&gt;. Make sure your &lt;strong&gt;page loads fast&lt;/strong&gt;. Use &lt;a href=&quot;https://developers.google.com/web/tools/lighthouse&quot;&gt;Lighthouse&lt;/a&gt; (Chrome DevTools &amp;gt; Audits panel) to detect and fix potential performance issues. Other tools helped as well - &lt;a href=&quot;https://developers.google.com/speed/pagespeed/insights&quot;&gt;PageSpeed Insights&lt;/a&gt; or &lt;a href=&quot;https://www.webpagetest.org/&quot;&gt;WebPagetest&lt;/a&gt;.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Responsive layout&lt;/strong&gt; - Page should be mobile friendly, and provide positive user experience (UX). Better UX leads to longer &amp;quot;time spent on page&amp;quot;, and thus &lt;a href=&quot;https://www.searchenginejournal.com/seo-responsive-web-design-benefits/211264/&quot;&gt;raise the page ranking&lt;/a&gt;. Test your site with &lt;a href=&quot;https://search.google.com/test/mobile-friendly&quot;&gt;Mobile-Friendly Test&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Require more effort:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Adding &lt;a href=&quot;https://amp.dev/&quot;&gt;AMP Page&lt;/a&gt; and &lt;a href=&quot;https://www.facebook.com/facebookmedia/solutions/instant-articles&quot;&gt;Facebook Instant Article&lt;/a&gt; might help as well.&lt;/li&gt; &lt;li&gt;Backlink - When reputable sites link to your page, your page ranks higher because it represents a &amp;quot;vote of confidence&amp;quot;.&lt;/li&gt; &lt;/ul&gt; &lt;h1&gt;Bonus: Search your site URLs&lt;/h1&gt; &lt;p&gt;You can search for all your site URLs to check if your pages are indexed in search engine.&lt;/p&gt; &lt;p&gt;Type &lt;code&gt;site:your_domain_url&lt;/code&gt; in Google or Bing. You will see a list of your indexed pages. For example, this is the result when I google &lt;strong&gt;&lt;a href=&quot;https://www.google.com/search?q=site%3Ajec.fish&quot;&gt;site:jec.fish&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.93359375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/setting-up-seo-and-google-analytics-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/setting-up-seo-and-google-analytics-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/setting-up-seo-and-google-analytics-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/setting-up-seo-and-google-analytics-02.jpg&quot; alt=&quot;Google result of my website URLs&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Google result of my website URLs&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Alternatively, you can view it in &lt;a href=&quot;https://search.google.com/search-console/about&quot;&gt;Google Search Console&lt;/a&gt; and &lt;a href=&quot;https://www.bing.com/webmaster/&quot;&gt;Bing Webmaster Tools&lt;/a&gt;.&lt;/p&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have learnt quite a bit in this post! From setting up Google Analytics, meta tags, and sitemap, to structured data, and various testing tools. Oh, we have also learnt about how to use layouts and global data!&lt;/p&gt; &lt;p&gt;All these efforts are mostly one time. Get it right and you won&#39;t need to worry about it anymore (until something suddenly breaks, heh 😝).&lt;/p&gt; &lt;p&gt;This is how I set up the SEO of my site &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; as well.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1264474481617035264&quot;&gt; twitter.com/jecfish/status/1264474481617035264 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Minifying HTML, JavaScript, CSS - Automate Inline</title> <link href="https://jec.fish/blog/minifying-html-js-css"/> <updated>2020-05-27T00:00:00-00:00</updated> <id>https://jec.fish/blog/minifying-html-js-css</id> <summary>How to handle resources minification &amp; how to inline them automatically by setting up naming convention in Eleventy.</summary> <category term="blog"/> <content type="html">&lt;p&gt;Let&#39;s talk about how to handle HTML, JavaScript &amp;amp; CSS minification &amp;amp; inline them automatically with file naming conventions in Eleventy.&lt;/p&gt; &lt;p&gt;This is the 6th post of the series - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;building personal static site with 11ty&lt;/a&gt;. Feel free to jump straight to the GitHub Repo &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; if you are a code-first person. 😉&lt;/p&gt; &lt;h2&gt;What do we want to achieve?&lt;/h2&gt; &lt;p&gt;The main goal is to serve the optimized minified version of HTML - with mostly inline JavaScript and CSS to our users, &lt;strong&gt;but our source files should be organized separately&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;As a bonus, I will share the workflow of minifying external CSS and JavaScript files as well.&lt;/p&gt; &lt;div class=&quot;notes&quot;&gt; &lt;p&gt;&lt;strong&gt;What do you mean by inline?&lt;/strong&gt;&lt;br&gt; Inline means writing CSS and JavaScript in the same HTML file using the &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag. (For CSS, some say that&#39;s called &lt;strong&gt;internal CSS&lt;/strong&gt;, but I will refer that as inline in this post, for simplicity&#39;s purpose)&lt;/p&gt; &lt;/div&gt; &lt;h3&gt;Could you show me an example?&lt;/h3&gt; &lt;p&gt;Sure! Here is the expected file structure. Notice that we have new CSS and JavaScript files created with same name as the template file:&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.css &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.css &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is a sample of the &lt;code&gt;base.layout.*&lt;/code&gt; source code:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;...&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ content | safe }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/_includes/base.layout.css */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/_includes/base.layout.js */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; h1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;h1&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;h1&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; h1&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39; | Surprise!&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is a sample of the &lt;code&gt;index.*&lt;/code&gt; source code:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;title: Home Page &lt;br&gt;---&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Lorem Ipsum blah blah&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/root/index.css */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; blue&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/root/index.js */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; p &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;p&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;p&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; p&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39; yay!&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;The expected output in the &lt;code&gt;dist&lt;/code&gt; folder should be the &lt;strong&gt;minified version&lt;/strong&gt; of the &lt;code&gt;index.html&lt;/code&gt;, shown below:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- dist/index.html --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token style&quot;&gt;&lt;span class=&quot;token language-css&quot;&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;/* from base.layout.css */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;/* from index.css */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token selector&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; blue&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Home Page | Surprise!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Lorem Ipsum blah blah yay!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// from index.js&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; p &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;p&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; p&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; p&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39; yay!&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// from base.layout.js&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; h1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;h1&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; h1&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; h1&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;innerText &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39; | Surprise!&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Why inline JavaScript and CSS?&lt;/h3&gt; &lt;p&gt;When building my personal site, I asked myself:&lt;/p&gt; &lt;blockquote&gt; &lt;p&gt;&lt;em&gt;Will there be a lot of JavaScript and CSS in each page?&lt;/em&gt;&lt;/p&gt; &lt;/blockquote&gt; &lt;p&gt;My answer is &lt;strong&gt;NO&lt;/strong&gt;. Unlike enterprise applications, there will be very minimal CSS and JS in this project.&lt;/p&gt; &lt;h3&gt;Why do you want to separate the JS and CSS source code?&lt;/h3&gt; &lt;p&gt;The syntax highlighting support in individual files is better than inlining them in Nunjucks or Markdown templates.&lt;/p&gt; &lt;p&gt;Also, I am obsessed with file structures. 😂 I will split the code into individual files when it goes more than 10 lines usually (or 5 sometimes), but this is purely personal preference.&lt;/p&gt; &lt;p&gt;That being said, we can still write CSS in the template file directly if we want.&lt;/p&gt; &lt;h2&gt;Setting up the minification workflow&lt;/h2&gt; &lt;p&gt;In the previous post, we used &lt;a href=&quot;https://gulpjs.com/&quot;&gt;Gulp&lt;/a&gt; to set up image transformation, so we will stick to that. Let&#39;s install some packages to help us with our HTML, JS and CSS minification workflow!&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;npm install gulp-htmlmin terser -D&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Next, we will create a new file under the &lt;code&gt;tasks&lt;/code&gt; folder.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# create a new task&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; tasks&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; minify&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;output.gulp.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is the code to handle HTML, CSS and JS minification together:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// tasks/minify-output.gulp.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; src&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dest&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; series &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; htmlmin &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-htmlmin&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; jsMinify &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;terser&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;minify&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;OUTPUT_DIR&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dist&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;minifyHtml&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;OUTPUT_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/**/*.html&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;htmlmin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// options offered by the library (lib)&lt;/span&gt;&lt;br&gt; collapseWhitespace&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; useShortDoctype&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; removeComments&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// lib supports inline CSS minification too&lt;/span&gt;&lt;br&gt; minifyCSS&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// lib support inline JS minification as well&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// with a catch, so we need to use terser instead&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function-variable function&quot;&gt;minifyJS&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;text&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; _&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; res &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;jsMinify&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;text&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; warnings&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;warnings&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;warnings&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;error&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;text&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;throw&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;error&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;code&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;../&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;OUTPUT_DIR&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;exports&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;series&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;minifyHtml&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The &lt;a href=&quot;https://github.com/jonschlinkert/gulp-htmlmin&quot;&gt;gulp-htmlmin&lt;/a&gt; package uses &lt;a href=&quot;https://twitter.com/kangax&quot;&gt;@kangax&#39;s&lt;/a&gt; famous &lt;a href=&quot;https://github.com/kangax/html-minifier&quot;&gt;html-minifier&lt;/a&gt; library under the hood. The library supports:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;inline CSS minification (using &lt;a href=&quot;https://github.com/jakubpawlowicz/clean-css&quot;&gt;clean-css&lt;/a&gt;)&lt;/li&gt; &lt;li&gt;inline JavaScript minification (using &lt;a href=&quot;https://github.com/mishoo/UglifyJS2&quot;&gt;UglifyJS&lt;/a&gt;)&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Take a look at the &lt;a href=&quot;https://github.com/kangax/html-minifier&quot;&gt;html-minifier documentation&lt;/a&gt;, there are a lot of configuration options you can play around with (e.g. &lt;code&gt;collapseWhitespace&lt;/code&gt;, &lt;code&gt;minifyCSS&lt;/code&gt; are just some of the options we used above).&lt;/p&gt; &lt;p&gt;One catch - the default JavaScript minification library &lt;a href=&quot;https://github.com/mishoo/UglifyJS2&quot;&gt;UglifyJS&lt;/a&gt; is not actively maintained anymore and doesn&#39;t support the modern JavaScript syntax (ES6+). Therefore, we replace it with the &lt;a href=&quot;https://github.com/terser/terser&quot;&gt;Terser&lt;/a&gt; library.&lt;/p&gt; &lt;p&gt;Note that we will run this task after Eleventy processes our files to the output &lt;code&gt;dist&lt;/code&gt; folder (unminified HTML files). We will then reprocess the HTML files, and replace the content with the minified one.&lt;/p&gt; &lt;p&gt;You may add the NPM scripts below to run the task each time after a production build.&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// package.json&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;build:prod&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ELEVENTY_ENV=prod npx eleventy&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// existing script&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;postbuild:prod&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npm run minify-output&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;minify-output&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;npx gulp -f tasks/minify-output.gulp.js&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Great, our minification workflow has been set up successfully! Next, we need to work on inlining the JS and CSS files, BEFORE we run the minification task.&lt;/p&gt; &lt;h2&gt;Inline with Nunjuck &lt;code&gt;include&lt;/code&gt;&lt;/h2&gt; &lt;p&gt;In the &lt;a href=&quot;https://www.11ty.dev/docs/&quot;&gt;11ty documentation&lt;/a&gt; site, there is a &lt;a href=&quot;https://www.11ty.dev/docs/quicktips/&quot;&gt;quick tips&lt;/a&gt; section on how to handle &lt;a href=&quot;https://www.11ty.dev/docs/quicktips/inline-css/&quot;&gt;inline CSS&lt;/a&gt; and &lt;a href=&quot;https://www.11ty.dev/docs/quicktips/inline-js/&quot;&gt;inline JS&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;In short, here is how you can do it:-&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- store the css file content as a string variable --&gt;&lt;/span&gt;&lt;br&gt; {% set cssStr %}&lt;br&gt; {% include &quot;index.css&quot; %}&lt;br&gt; {% endset %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- interpolate it in style tag --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token style&quot;&gt;&lt;span class=&quot;token language-css&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; cssStr | safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- store the js file content as a string variable --&gt;&lt;/span&gt;&lt;br&gt; {% set jsStr %}&lt;br&gt; {% include &quot;index.js&quot; %}&lt;br&gt; {% endset %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- interpolate it in script tag --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; jsStr &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code above is pretty expressive by itself. We first include the file content and assign them to variables, then interpolate them in their respective tags.&lt;/p&gt; &lt;p&gt;Nunjucks&#39; &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#include&quot;&gt;include&lt;/a&gt; tag allow you to pull in other file content in place. It&#39;s useful when you need to share smaller chunks of content across several files.&lt;/p&gt; &lt;h3&gt;Not good enough... Let&#39;s improve it&lt;/h3&gt; &lt;p&gt;The code above works. However, you have to copy-paste, edit the above code every time, and each file manually. 😥 The syntax is a bit verbose (syntax noise is real).&lt;/p&gt; &lt;p&gt;I enhanced the code above a little by using Nunjucks &lt;a href=&quot;https://mozilla.github.io/nunjucks/templating.html#macro&quot;&gt;macro&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;The &lt;code&gt;macro&lt;/code&gt; tag allows us to define reusable chunks of content. It is similar to JavaScript module. Once defined, we can import and use them.&lt;/p&gt; &lt;h3&gt;1st improvement - write the macros&lt;/h3&gt; &lt;p&gt;Let&#39;s start by creating a &lt;code&gt;macro&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src.macro.njk &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;We will write two macros in this file. One for CSS and one for JS.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/src.macro.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- macro for css, accept a filename as input --&gt;&lt;/span&gt;&lt;br&gt;{% macro css(filename) %}&lt;br&gt; {% set cssStr %}&lt;br&gt; {% include filename %}&lt;br&gt; {% endset %}&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token style&quot;&gt;&lt;span class=&quot;token language-css&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; cssStr | safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endmacro %}&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- macro for js, accept a filename as input --&gt;&lt;/span&gt;&lt;br&gt;{% macro js(filename) %}&lt;br&gt; {% set jsStr %}&lt;br&gt; {% include filename %}&lt;br&gt; {% endset %}&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; jsStr &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endmacro %}&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;We have two macros functions &lt;code&gt;css&lt;/code&gt; and &lt;code&gt;js&lt;/code&gt;. Each accepts an input parameter &lt;code&gt;filename&lt;/code&gt;. Did you notice that these code are similar to the previous (except the &lt;code&gt;macro&lt;/code&gt; part)? You are right. We just moved them in.&lt;/p&gt; &lt;p&gt;Now, let&#39;s update our base layout to use the &lt;code&gt;macros&lt;/code&gt;!&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- import the macro --&gt;&lt;/span&gt;&lt;br&gt;{% import &quot;src.macro.njk&quot; as src with context %}&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- use the css macro --&gt;&lt;/span&gt;&lt;br&gt; {{ src.css(&#39;base.layout.css&#39;) }}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- use the js macro --&gt;&lt;/span&gt;&lt;br&gt; {{ src.js(&#39;base.layout.js&#39;) }}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Does the code in our base layout look better now? 😁 We can reuse the &lt;code&gt;macros&lt;/code&gt; this way for all &lt;code&gt;layouts&lt;/code&gt; (e.g. &lt;code&gt;wiriting.layout.njk&lt;/code&gt;) - Import the macro, then use it by passing in the filename.&lt;/p&gt; &lt;h3&gt;How about our template files?&lt;/h3&gt; &lt;p&gt;For each of our web page templates (e.g. &lt;code&gt;index.njk&lt;/code&gt;, &lt;code&gt;2020-05-19-post-one.md&lt;/code&gt;), we have an even better way to handle the css and js inline.&lt;/p&gt; &lt;p&gt;In my &lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;previous post&lt;/a&gt;, we&#39;ve set up &lt;code&gt;base.layout.njk&lt;/code&gt; as the master layout - all of our templates and layouts are inherited from &lt;code&gt;base.layout.njk&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;We can inline the page specific CSS and JS in &lt;code&gt;base.layout.njk&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;First, modify our base layout to include two more lines.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;{% import &quot;src.macro.njk&quot; as src with context %}&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; {{ src.css(&#39;base.layout.css&#39;) }}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- include the page template CSS --&gt;&lt;/span&gt;&lt;br&gt; {{ src.css(page.inputPath) }}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; {{ src.js(&#39;base.layout.js&#39;) }}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- include the page template JS --&gt;&lt;/span&gt;&lt;br&gt; {{ src.js(page.inputPath) }}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here, we utilize the &lt;a href=&quot;https://www.11ty.dev/docs/data-eleventy-supplied/&quot;&gt;Eleventy Supplied Data&lt;/a&gt; to get the value of the current &lt;code&gt;page.inputPath&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;For example, the input path for &lt;code&gt;index.njk&lt;/code&gt; would be &lt;code&gt;./src/root/index.njk&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;The code above doesn&#39;t work (just yet) because:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;Individual JS or CSS files are optional&lt;/strong&gt; - For example, I might not have &lt;code&gt;licenses.css&lt;/code&gt; or &lt;code&gt;licenses.js&lt;/code&gt; for the template &lt;code&gt;licenses.njk&lt;/code&gt;. The import should be optional, no error should be thrown if no files found.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Incorrect file extension&lt;/strong&gt; - The &lt;code&gt;page.inputPath&lt;/code&gt; return files in &lt;code&gt;.md&lt;/code&gt; or &lt;code&gt;.njk&lt;/code&gt; extension. We need to replace that with &lt;code&gt;.js&lt;/code&gt; or &lt;code&gt;.css&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Incorrect file path&lt;/strong&gt; - For example, the &lt;code&gt;index.*&lt;/code&gt; should be &lt;code&gt;../root/index.*&lt;/code&gt; instead of &lt;code&gt;./src/root/index.*&lt;/code&gt;. It is because the file path should be relative to the base layout location (which we wrote our &lt;code&gt;import&lt;/code&gt; macro statement). Below is our file structure again for your reference.&lt;/li&gt; &lt;/ul&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# our file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.css&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base.layout.js&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.css&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.js&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Alright, let&#39;s fix all the issues above in our &lt;code&gt;macro&lt;/code&gt; file!&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/src.macro.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;{% macro css(filename) %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- change relative path --&gt;&lt;/span&gt;&lt;br&gt; {% set path = filename | replace(&#39;./src/&#39;, &#39;../&#39;) %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- replace file extension --&gt;&lt;/span&gt;&lt;br&gt; {% set path = utils.replaceExtension(path, &#39;css&#39;) %}&lt;br&gt; &lt;br&gt; {% set cssStr %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- ignore if missing --&gt;&lt;/span&gt;&lt;br&gt; {% include path ignore missing %}&lt;br&gt; {% endset %}&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token style&quot;&gt;&lt;span class=&quot;token language-css&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; cssStr | safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;style&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endmacro %}&lt;br&gt;&lt;br&gt;&lt;br&gt;{% macro js(filename) %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- change relative path --&gt;&lt;/span&gt;&lt;br&gt; {% set path = filename | replace(&#39;./src/&#39;, &#39;../&#39;) %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- replace file extension --&gt;&lt;/span&gt;&lt;br&gt; {% set path = utils.replaceExtension(path, &#39;js&#39;) %}&lt;br&gt;&lt;br&gt; {% set jsStr %}&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- ignore if missing --&gt;&lt;/span&gt;&lt;br&gt; {% include path ignore missing %}&lt;br&gt; {% endset %}&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token script&quot;&gt;&lt;span class=&quot;token language-javascript&quot;&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; jsStr &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; safe &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endmacro %}&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;With the above changes, we&#39;ve fixed all the 3 issues we mentioned above.&lt;/p&gt; &lt;p&gt;You might be wondering where did the &lt;code&gt;utils.replaceExtension&lt;/code&gt; function come from? It&#39;s a new function. Let&#39;s create that in our global &lt;code&gt;_data&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _data&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; utils.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is the code:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function-variable function&quot;&gt;replaceExtension&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;file&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; extension&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;/([^\.]*)$/&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; extension&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;We use regex to find the file extension and replace it with the expected extension.&lt;/p&gt; &lt;p&gt;Viola! Try to run the build or browse to our home page now, you should see the result shown as expected!&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.8359375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/minifying-html-js-css-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/minifying-html-js-css-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/minifying-html-js-css-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/minifying-html-js-css-01.jpg&quot; alt=&quot;Expected home page result when viewing in browser&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Expected home page result when viewing in browser&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Note that we don&#39;t need to add an &lt;code&gt;import&lt;/code&gt; statement in any of our page templates (e.g. &lt;code&gt;root/index.njk&lt;/code&gt;, &lt;code&gt;blog/2020-05-19-post-one.md&lt;/code&gt;) because we have configured that in the master base layout.&lt;/p&gt; &lt;p&gt;The page template JS and CSS files will be inlined automatically, as long as the filename matches the template file. 😁&lt;/p&gt; &lt;h1&gt;What if I want to inline a shared CSS file?&lt;/h1&gt; &lt;p&gt;Let&#39;s say you have a css file called &lt;code&gt;table.css&lt;/code&gt;. It is a shared CSS, you want to inline that for a few templates only. Here is how you can do it.&lt;/p&gt; &lt;p&gt;Place the file under &lt;code&gt;assets/css&lt;/code&gt; folder.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; assets&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; css&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; table.css &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.css&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Let&#39;s say you want to inline that in &lt;code&gt;root/index.njk&lt;/code&gt;. There are two ways to do it.&lt;/p&gt; &lt;h4&gt;Option one: include in th template CSS file&lt;/h4&gt; &lt;p&gt;Update your &lt;code&gt;root/index.css&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/root/index.css */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; red&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;% include &lt;span class=&quot;token string&quot;&gt;&quot;../../assets/css/table.css&quot;&lt;/span&gt; %&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Use the Nunjucks &lt;code&gt;include&lt;/code&gt; statement in the CSS file (yes, we can). The CSS will be included accordingly.&lt;/p&gt; &lt;h4&gt;Option two: include in the template file&lt;/h4&gt; &lt;p&gt;To do this, you need to import the macro file.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;layout: base.layout.njk&lt;br&gt;title: Home Page &lt;br&gt;---&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- import and apply css --&gt;&lt;/span&gt;&lt;br&gt;{% import &quot;src.macro.njk&quot; as src with context %}&lt;br&gt;{% src.css(&quot;../../assets/table.css&quot;) %}&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Lorem Ipsum blah blah&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;These two options applied to shared &lt;code&gt;js&lt;/code&gt; files too.&lt;/p&gt; &lt;h2&gt;Bonus: Minify external CSS and JS files&lt;/h2&gt; &lt;p&gt;As promised. Here is the code to minify external CSS and JS files. We will set up two more Gulp tasks to do so!&lt;/p&gt; &lt;p&gt;Let&#39;s install these packages:&lt;/p&gt; &lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;npm install gulp-clean-css gulp-terser -D&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Note that we use the same libraries under the hood - &lt;a href=&quot;https://github.com/jakubpawlowicz/clean-css&quot;&gt;clean-css&lt;/a&gt; and &lt;a href=&quot;https://github.com/terser/terser&quot;&gt;terser&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;Here are the code:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// tasks/minify-output.gulp.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; src&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dest&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; parallel &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;required&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; terser &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-terser&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; cleanCSS &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;gulp-clean-css&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;minifyCss&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;../assets/css/*.css&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;cleanCSS&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;dist/assets/css&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;minifyJs&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;../assets/js/*.js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;terser&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; warnings&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;pipe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dest&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;dist/assets/js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;minifyHtml&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// Run all the tasks in parallel&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;default &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;parallel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;minifyHtml&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; minifyCss&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; minifyJs&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;We export the tasks and execute them all in parallel.&lt;/p&gt; &lt;h3&gt;Bonus: This is not perfect&lt;/h3&gt; &lt;p&gt;As for every solution, inline CSS and JS is not perfect. While the page rendering is faster (eliminates additional round trips to fetch external resources), browsers are &lt;strong&gt;not able to cache any inline CSS and JS&lt;/strong&gt;. This is bad if you have a huge chunk of JS and CSS.&lt;/p&gt; &lt;p&gt;On the other hand, browsers can cache external files. However, it might take a longer time to download external resources and &lt;strong&gt;page rendering is blocked while waiting the resource to be downloaded&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;Another solution (only for CSS), would be &lt;strong&gt;critical CSS&lt;/strong&gt;. It combines the best of both world. You can use library like &lt;a href=&quot;https://github.com/addyosmani/critical&quot;&gt;Critical&lt;/a&gt; to:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;extract the critical CSS from the external CSS file&lt;/li&gt; &lt;li&gt;inline the critical CSS into each html&lt;/li&gt; &lt;li&gt;the non-critical CSS remains in external file&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;However, this does increase your workflow complexity. Read this article to understand more about &lt;a href=&quot;https://www.smashingmagazine.com/2015/08/understanding-critical-css/&quot;&gt;critical CSS&lt;/a&gt;.&lt;/p&gt; &lt;h3&gt;Strike a balance, make a decision&lt;/h3&gt; &lt;p&gt;It is a conscious decision for me to inline most of the JS and CSS, because as I mentioned, this is a personal website, the JS and CSS are minimal (please don&#39;t believe me, inspect it with DevTools).&lt;/p&gt; &lt;p&gt;I load external CSS as well. If you inspect this page with DevTools, I load two CSS file externally - &lt;code&gt;prism-{light,dark}.css&lt;/code&gt; (used for syntax highlight) and &lt;code&gt;fonts.css&lt;/code&gt; (use for display nicer fonts).&lt;/p&gt; &lt;p&gt;I also inline a few CSS files conditionally (e.g. &lt;code&gt;table.css&lt;/code&gt;) only when I need them on a particular template. (e.g. this &lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;blog post&lt;/a&gt; has a table).&lt;/p&gt; &lt;p&gt;It is your website, try to strike a balance between complexity and performance. Choose the best one, set up and forget about it (or revisit later).&lt;/p&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have minified all our HTML, CSS and JavaScript - both inline and external. We learnt about the Nunjucks &lt;code&gt;macro&lt;/code&gt; and &lt;code&gt;include&lt;/code&gt; as well.&lt;/p&gt; &lt;p&gt;This is how I handle the minification of this website &lt;a href=&quot;https://jec.fish/&quot;&gt;jec.fish&lt;/a&gt; as well. Did you feel my site load fast (or slow)?&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1265890220001525760&quot;&gt; twitter.com/jecfish/status/1265890220001525760 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>How many favicons should you have in your site?</title> <link href="https://jec.fish/blog/favicons-manifest"/> <updated>2020-05-29T00:00:00-00:00</updated> <id>https://jec.fish/blog/favicons-manifest</id> <summary>How many favicon sizes and formats do you need? How about manifest? What are the tools to generate them?</summary> <category term="blog"/> <content type="html">&lt;p&gt;How many favicon (including app icon) sizes and formats do you need? What are the tools to generate them? Let&#39;s explore.&lt;/p&gt; &lt;p&gt;Take note that there are files and meta tags that you might need together with the favicons:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Files: &lt;code&gt;web.manifest&lt;/code&gt;, &lt;code&gt;browserconfig.xml&lt;/code&gt;, etc&lt;/li&gt; &lt;li&gt;Meta tags: &lt;code&gt;msapplication-TileColor&lt;/code&gt;, &lt;code&gt;mobile-web-app-capable&lt;/code&gt; etc&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;We will go through these as well.&lt;/p&gt; &lt;p&gt;This is the 7th post of the series - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;building personal static site with 11ty&lt;/a&gt;. Here is the GitHub Repo &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; if you prefer to read the code first.&lt;/p&gt; &lt;h2&gt;How many favicons do we need?&lt;/h2&gt; &lt;p&gt;Short answer - it depends (because that&#39;s how people answer, always 😂).&lt;/p&gt; &lt;p&gt;Slightly longer answer - it depends on:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;How many different platforms you want to support - iOS, Windows, web browser, etc&lt;/li&gt; &lt;li&gt;Do you want to support older browsers / platforms - IE 8, Windows 8.1, iOS 6, etc&lt;/li&gt; &lt;li&gt;Do you need pixel perfect icons - is it okay to let the platforms scale them?&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Longer answer - read this &lt;a href=&quot;https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/&quot;&gt;blog post&lt;/a&gt; by Philippe Bernard. It talks about whether we should support all favicon formats or using the &amp;quot;less is more&amp;quot; approach.&lt;/p&gt; &lt;h2&gt;How many favicons does this website have?&lt;/h2&gt; &lt;p&gt;Glad you asked. This website has:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;10 favicons&lt;/strong&gt; in total.&lt;/li&gt; &lt;li&gt;Favicons are in 3 different formats - &lt;code&gt;.ico&lt;/code&gt;, &lt;code&gt;.png&lt;/code&gt; and &lt;code&gt;.svg&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;The largest favicon is &lt;code&gt;512x512 px&lt;/code&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h2&gt;Where can we spot the favicons?&lt;/h2&gt; &lt;p&gt;The most common place we can see favicon is on a &lt;strong&gt;browser tab&lt;/strong&gt;, a tiny one.&lt;/p&gt; &lt;p&gt;However, favicons can also show up in multiple places, some with much bigger size. Here are some examples:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Firefox home page - When your website is one of the top visit sites&lt;/li&gt; &lt;li&gt;Mobile home screen - Android, iOS home screen&lt;/li&gt; &lt;li&gt;Desktop Chrome Web Store (Apps) - When users &amp;quot;install&amp;quot; or add to home screen&lt;/li&gt; &lt;li&gt;Desktop shortcuts - Windows Tile, Mac Launchpad &amp;amp; Dock&lt;/li&gt; &lt;li&gt;Safari pinned tab - Display on Safari and MacBook Touch Bar. Users right click &amp;gt; select &amp;quot;Pin Tab&amp;quot; on your page.&lt;/li&gt; &lt;li&gt;Quick Look (Mac) - User can right click on the app and select quick look to check the app version info. Users can enlarge the page to full screen (huge favicon).&lt;/li&gt; &lt;/ul&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/favicons-manifest-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/favicons-manifest-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/favicons-manifest-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/favicons-manifest-01.jpg&quot; alt=&quot;Places you can spot favicons.&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Places you can spot favicons.&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Should we care about all of them? &lt;strong&gt;Probably not&lt;/strong&gt;. I mean, how often do people add a blog to home screen? (especially an unknown blog like mine 😆)&lt;/p&gt; &lt;p&gt;However, there&#39;s no harm supporting that. Nevertheless, I am exploring out of curiosity.&lt;/p&gt; &lt;h2&gt;Favicon design template size&lt;/h2&gt; &lt;p&gt;The design template should be square in shape, or with at least &lt;code&gt;512x512px&lt;/code&gt; in size. I suggest to use &lt;code&gt;1024px&lt;/code&gt; or above because who knows in the future that the favicon size will grow again!&lt;/p&gt; &lt;h3&gt;How do I know how many and what favicons I need?&lt;/h3&gt; &lt;p&gt;There are online tools! 😃 Here are a few tools I used to generate favicons and other useful files and meta tags.&lt;/p&gt; &lt;h3&gt;realfavicongenerator.net&lt;/h3&gt; &lt;p&gt;Highly recommended: &lt;a href=&quot;https://realfavicongenerator.net/&quot;&gt;realfavicongenerator.net&lt;/a&gt;. It is a good free tool to generate favicons to support different platforms.&lt;/p&gt; &lt;p&gt;You can also pass a link to analyse your current website favicon condition and see recommendations on how to fix it.&lt;/p&gt; &lt;p&gt;Upload your favicon (or just click on &amp;quot;Demo with random image&amp;quot;), and it will show you a preview on how your favicons will look like on different platforms. There are quite a few options you can play around as well.&lt;/p&gt; &lt;p&gt;It is an all in one tool - helps you to generate all necessary &lt;code&gt;png&lt;/code&gt;, &lt;code&gt;ico&lt;/code&gt; and &lt;code&gt;svg&lt;/code&gt; file, plus the &lt;code&gt;manifest&lt;/code&gt; and &lt;code&gt;browserconfig.xml&lt;/code&gt; (for Microsoft Tile) files.&lt;/p&gt; &lt;p&gt;Try it!&lt;/p&gt; &lt;p&gt;If you want to know the usage of each icon, check out their &lt;a href=&quot;https://realfavicongenerator.net/faq&quot;&gt;FAQ&lt;/a&gt; for detailed explanation.&lt;/p&gt; &lt;h3&gt;faviconit.com&lt;/h3&gt; &lt;p&gt;A simple one - &lt;a href=&quot;http://faviconit.com/&quot;&gt;faviconit.com&lt;/a&gt;. If you don&#39;t like to read (while the previous one offers more explanation, it might be confusing for some users), you may use this tool. This website requires you to upload a photo, then it will generate an &lt;code&gt;ico&lt;/code&gt; and &lt;code&gt;png&lt;/code&gt; file accordingly, along with the &lt;code&gt;browserconfig.xml&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;However, it doesn&#39;t generate a manifest file for you. (You may not need it either)&lt;/p&gt; &lt;h3&gt;splash-screens&lt;/h3&gt; &lt;p&gt;If you want to provide a native like experience for your &amp;quot;installed&amp;quot; website, you may want to generate a splash screen when the user launches your website from the home screen. iOS requires special meta tags and links to handle that, you can use this tool - &lt;a href=&quot;https://appsco.pe/developer/splash-screens&quot;&gt;splash-screens&lt;/a&gt; to generate that.&lt;/p&gt; &lt;p&gt;*I did not use this for this site.&lt;/p&gt; &lt;h3&gt;The 2020 Guide to FavIcons for Nearly Everyone and Every Browser&lt;/h3&gt; &lt;p&gt;I read &lt;a href=&quot;https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons&quot;&gt;this article - The 2020 Guide to FavIcons for Nearly Everyone and Every Browser&lt;/a&gt; as well because the title is eye-catching. It talks about a brief history of favicon, a list of current favicon sizes and deprecated favicon sizes. It also provide templates (in GitHub) for you to start design (Photoshop and Sketch).&lt;/p&gt; &lt;h3&gt;My favicon setup&lt;/h3&gt; &lt;p&gt;Combining all the knowledge from the links above, here are all the new files I created:-&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# file structure&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; assets&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; img&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicons&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;120.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;144.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;150.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;152.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;180.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;192.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;310.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;512.png&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon.svg&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; src&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; favicon.ico&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; _includes&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; base&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;favicon.partial.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; root&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; browserconfig.njk&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; web&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;manifest.njk&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Notice that I create a file called &lt;code&gt;base-favicon.partial.njk&lt;/code&gt;. It is because there are too many favicons to define. I prefer to put them in a separate file, then including them in the &lt;code&gt;base.layout.njk&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;Here is the code:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; {% include &#39;base-favicon.partial.njk&#39; %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base-favicon.partial.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- generics: classic --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;shortcut icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/favicon.ico&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/favicon.ico&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;16x16 32x32 48x48 64x64&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;{% set icons = [128, 196] %}&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- generics: modern --&gt;&lt;/span&gt;&lt;br&gt;{% for icon in icons %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{icon}}x{{icon}}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.favicons }}favicon-{{icon}}.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endfor %}&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- iOS --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;mask-icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.themeColor }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.favicons }}favicon.svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;{% set icons = [120, 152, 180] %}&lt;br&gt;{% for icon in icons %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;apple-touch-icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;sizes&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{icon}}x{{icon}}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.favicons }}favicon-{{icon}}.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;{% endfor %}&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Windows 8 IE 10 --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;msapplication-TileColor&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.themeColor }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;msapplication-TileImage&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.base.favicons }}favicon-144.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Windows 8.1 + IE11 and above --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;msapplication-config&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;browserconfig.xml&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Web App manifest --&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;manifest&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/web.manifest&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;theme-color&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{ env.themeColor }}&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Notice that there are some new &lt;code&gt;env.*&lt;/code&gt; variables in the previous code. Let&#39;s add them in our existing global data file &lt;code&gt;src/_data/env.js&lt;/code&gt;.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_data/env.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;baseUrl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// added previously&lt;/span&gt;&lt;br&gt;&lt;br&gt;modules&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;export &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; siteName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;your_website_name&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;br&gt; themeColor&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;#fffff&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// replace with any color&lt;/span&gt;&lt;br&gt; dir&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt; favicons&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/assets/img/favicons/&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; base&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt; favicons&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;baseUrl&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;dir&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;favicons&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Next let&#39;s work on the &lt;code&gt;browserconfig&lt;/code&gt; which Windows requires:-&lt;/p&gt; &lt;pre class=&quot;language-xml&quot;&gt;&lt;code class=&quot;language-xml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/browserconfig.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;layout: false&lt;br&gt;permalink: browserconfig.xml&lt;br&gt;ignore: true&lt;br&gt;---&lt;br&gt;&lt;span class=&quot;token prolog&quot;&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;browserconfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;msapplication&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;tile&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;square150x150logo&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{env.base.favicons}}favicon-150.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;square310x310logo&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;{{env.base.favicons}}favicon-310.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;TileColor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ env.themeColor }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;TileColor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;tile&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;msapplication&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;browserconfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Last one. The &lt;a href=&quot;https://web.dev/add-manifest/&quot;&gt;web app manifest&lt;/a&gt; is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user&#39;s desktop or mobile device.&lt;/p&gt; &lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/root/web-manifest.njk&lt;/span&gt;&lt;br&gt;&lt;br&gt;---&lt;br&gt;layout&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;br&gt;permalink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; web.manifest&lt;br&gt;ignore&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;br&gt;---&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.siteName }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;short_name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.siteName }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;start_url&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;/&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;icons&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;src&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.favicons }}favicon-192.png&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;sizes&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;192x192&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;image/png&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;src&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.base.favicons }}favicon-512.png&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;sizes&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;512x512&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;type&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;image/png&quot;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;theme_color&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.themeColor }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;background_color&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;{{ env.themeColor }}&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;&quot;display&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;standalone&quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Bonus: How do I test?&lt;/h2&gt; &lt;p&gt;You might want to test how the favicons show up in each platforms. There is no easy way to do it, you may need to test manually or create your own automation test (may not help if you want to test the photo quality).&lt;/p&gt; &lt;p&gt;There are some tools could help you to test on some of it.&lt;/p&gt; &lt;p&gt;To test on older browsers, like Internet Explorer, you can sign up for &lt;a href=&quot;https://www.browserstack.com/&quot;&gt;BrowserStack&lt;/a&gt; or &lt;a href=&quot;https://saucelabs.com/&quot;&gt;Saucelabs&lt;/a&gt;. These two testing tools support multiple Desktop OSes, mobile OSes and browser versions. It makes testing easier (don&#39;t need to have a physical device ourselves).&lt;/p&gt; &lt;p&gt;However, the free trial period is short, and you will need to subscribe to continue using it.&lt;/p&gt; &lt;p&gt;On the other hand, you can use Chrome DevTools to test if your web &lt;code&gt;manifest&lt;/code&gt; is configured correctly.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:69.23828125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/favicons-manifest-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/favicons-manifest-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/favicons-manifest-03.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/favicons-manifest-03.jpg&quot; alt=&quot;Chrome DevTools &gt; Application Panel &gt; Manifest&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Chrome DevTools &gt; Application Panel &gt; Manifest&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Bonus: Maskable icon&lt;/h2&gt; &lt;p&gt;If your website is a Progressive Web App (PWA) - Maskable icons are a new icon format that gives you more control and let PWA use adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great on all Android devices.&lt;/p&gt; &lt;p&gt;You may read &lt;a href=&quot;https://web.dev/maskable-icon/&quot;&gt;this article&lt;/a&gt; for more details. This &lt;a href=&quot;https://maskable.app/editor&quot;&gt;maskabel.app&lt;/a&gt; is a tool to help you create one.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:73.046875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/favicons-manifest-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/favicons-manifest-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/favicons-manifest-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/favicons-manifest-02.jpg&quot; alt=&quot;Normal transparent icons vs Maskable icons&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Normal transparent icons vs Maskable icons&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We have generated and set up favicons, themes, and web manifest to support almost all of the platforms.&lt;/p&gt; &lt;p&gt;I wish we could have shorter, easier or a one size fit all favicon solution 😆. Keeping track on how each platform require a slightly different image size and meta tag is not fun at all.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1266319579313143809&quot;&gt; twitter.com/jecfish/status/1266319579313143809 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>My Journey as a Technical Presenter</title> <link href="https://jec.fish/deck/my-journey-as-a-tech-presenter"/> <updated>2020-06-03T00:00:00-00:00</updated> <id>https://jec.fish/deck/my-journey-as-a-tech-presenter</id> <summary>6 years into tech speaking, how I got better at that. Sharing tips for people who plan to start doing technical presentations.</summary> <category term="deck"/> <content type="html">&lt;p&gt;Sharing my journey as a technical speaker, and some tips for people who plan to start doing technical presentations.&lt;/p&gt; &lt;p&gt;Started giving a public technical presentation in Nov 2014. It wasn&#39;t a great start. However, what mattered was that I&#39;ve done that, and made the first move.&lt;/p&gt; &lt;p&gt;Delivered this talk on &lt;a href=&quot;http://goo.gle/wd-academy&quot;&gt;Women Developer Academy&lt;/a&gt; (WDA) graduation day. WDA is a program to equip women in tech with the skills and resources, and support their need to become tech presenters and speakers.&lt;/p&gt; &lt;p&gt;Here&#39;s the slides:&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;98f916f44fea4dfaaa4809ce3877f758&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/my-journey-as-technical-presenter&quot;&gt;https://speakerdeck.com/jecfish/my-journey-as-technical-presenter&lt;/a&gt; &lt;/noscript&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;Both female engineers and tech speakers are still lagging in the industry. Let&#39;s #changetheratio together. 💪🏼&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Representation matters.&lt;/strong&gt; I recommend you to read Hui Jing&#39;s awesome post &amp;quot;&lt;a href=&quot;https://chenhuijing.com/blog/musings-on-speaking-at-conferences/#%F0%9F%91%9F&quot;&gt;Musings on speaking at conferences&lt;/a&gt;&amp;quot; on how does it feels, as a Southeast Asian female speaking in tech conferences.&lt;/p&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;The talk is recorded, will update again when the link becomes available.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:63.96484375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/my-journey-as-a-tech-presenter-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/my-journey-as-a-tech-presenter-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/my-journey-as-a-tech-presenter-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/my-journey-as-a-tech-presenter-01.jpg&quot; alt=&quot;A screenshot during the WDA virtual graduation day&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;A screenshot during the WDA virtual graduation day&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1268165205952884736&quot;&gt; twitter.com/jecfish/status/1268165205952884736 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Creating Filters, Shortcodes and Plugins</title> <link href="https://jec.fish/blog/creating-filters-shortcodes-plugins"/> <updated>2020-06-06T00:00:00-00:00</updated> <id>https://jec.fish/blog/creating-filters-shortcodes-plugins</id> <summary>How to create filters, shortcodes and plugins in Eleventy.</summary> <category term="blog"/> <content type="html">&lt;p&gt;Filters, shortcodes and plugins are among the most powerful features in 11ty. Let&#39;s understand the concepts and learn how to create them.&lt;/p&gt; &lt;p&gt;This is the 8th post of the series - &lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;building personal static site with 11ty&lt;/a&gt;. Here is the GitHub Repo &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; if you prefer to read the code first.&lt;/p&gt; &lt;h2&gt;Filters&lt;/h2&gt; &lt;p&gt;Every blog post has a date. I stored the date in ISO date format &lt;strong&gt;yyyy-MM-dd&lt;/strong&gt; (e.g. 2020-12-31). However, I would like to display it in &lt;strong&gt;MMM dd, yyyy&lt;/strong&gt; (e.g. Dec 31, 2020) format because I find that more readable. (Scroll to the top of this post to see the date in action)&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://www.11ty.dev/docs/filters/&quot;&gt;Filters&lt;/a&gt; offer us a way to process our data and output it to a format we want. In our case, we will be creating a date format filter. Let&#39;s name it &lt;code&gt;dateDisplay&lt;/code&gt;. (naming is hard, couldn&#39;t figure out a better name yet. 😂)&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// output: Dec 31, 2020&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;2020-12-31&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;|&lt;/span&gt; dateDisplay &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The syntax above shows how we will use the filter in our code. Next, let&#39;s write the &lt;code&gt;dateDisplay&lt;/code&gt; filter function!&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// configs/date-display.filter.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; parseISO&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; format &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;date-fns/fp&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;input&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; formatter &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;MMM dd, yyyy&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; date &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; input &lt;span class=&quot;token keyword&quot;&gt;instanceof&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Date&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; input &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;parseISO&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;input&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;formatter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;date&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code is quite expressive itself. The input could be a date or a string in ISO format. We are using the &lt;a href=&quot;https://date-fns.org/&quot;&gt;date-fns&lt;/a&gt; package to format the date. Install it by running &lt;code&gt;npm install date-fns -D&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;Now we have our function ready, but we have not told 11ty that this is a filter. Let&#39;s configure that in our &lt;code&gt;.eleventy.js&lt;/code&gt; file.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .eleventy.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// add these 2 lines&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; dateDisplay &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./configs/date-display.filter&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;dateDisplay&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; dateDisplay&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Shortcodes&lt;/h2&gt; &lt;p&gt;I embedded Youtube videos in almost all my presentation posts - &lt;a href=&quot;https://jec.fish/deck&quot;&gt;jec.fish/deck&lt;/a&gt;. The code to embed the Youtube video, as copied from Youtube, would be something like this:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;iframe&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;https://www.youtube.com/embed/[your-video-id]&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;frameborder&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;allowfullscreen&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;allow&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;iframe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;It is okay for us to write (or copy paste) these code manually to each page with YouTube video. However, it&#39;s repetitive. Also, it might be harder to apply changes in the future, for example:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;to remove the &lt;code&gt;allowfullscreen&lt;/code&gt; option for all videos&lt;/li&gt; &lt;li&gt;to apply stylings for all videos - border, width, height, etc.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;It would be good if we can shorten the code and centralize the changes. &lt;a href=&quot;https://www.11ty.dev/docs/shortcodes/&quot;&gt;Shortcodes&lt;/a&gt; could help us with that.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// output: &amp;lt;iframe ...&gt;&amp;lt;/iframe&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt; youtube &lt;span class=&quot;token string&quot;&gt;&#39;your-video-id&#39;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code above shows how&#39;s a shortcode syntax looks like. We will create a &lt;code&gt;youtube&lt;/code&gt; shortcode function which accepts a video id. The output would be the HTML iframe.&lt;/p&gt; &lt;p&gt;Here is how our function looks like:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// configs/youtube.shortcode.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; outdent &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;outdent&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; newline&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39; &#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; outdent&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&lt;br&gt; &amp;lt;div class=&quot;video-wrapper&quot;&gt;&lt;br&gt; &amp;lt;iframe src=&quot;https://www.youtube.com/embed/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;id&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&lt;br&gt; frameborder=&quot;0&quot; allowfullscreen &lt;br&gt; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;&gt;&lt;br&gt; &amp;lt;/iframe&gt;&lt;br&gt; &amp;lt;/div&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;The code is fairly self-explanatory. We wrap the iframe with additional &lt;code&gt;div&lt;/code&gt; to style the YouTube iframe. We use the &lt;code&gt;outdent&lt;/code&gt; function (install it with command &lt;code&gt;npm install outdent -D&lt;/code&gt;) to format the output string, replacing the new lines with space.&lt;/p&gt; &lt;p&gt;The reason we use outdent is because the way 11ty processes new lines is not what we expected - refer to the Eleventy &lt;a href=&quot;https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output&quot;&gt;explanation here&lt;/a&gt;. If you prefer to not install the &lt;code&gt;outdent&lt;/code&gt; package, just rewrite your code above (all the HTML) in a single line. I don&#39;t like it because it is not readable during development.&lt;/p&gt; &lt;p&gt;Here is the CSS to style our &lt;code&gt;video-wrapper&lt;/code&gt;, to make our YouTube video display responsively (refer to &lt;a href=&quot;https://howchoo.com/g/mgflywu4ytc/how-to-make-youtube-videos-responsive-without-js&quot;&gt;this article&lt;/a&gt; for details.). I placed this css in &lt;code&gt;src/_includes/writing.layout.css&lt;/code&gt; because that&#39;s where my video lives in, but you can place it in any css file with video.&lt;/p&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* Put it in any css file with video */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;.video-wrapper&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; relative&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;padding-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 56.25%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;.video-wrapper iframe&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Great, now we have the function ready, configure that in &lt;code&gt;.eleventy.js&lt;/code&gt; so we can use this shortcode in our template.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .eleventy.js&lt;/span&gt;&lt;br&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addShortcode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&#39;youtube&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./configs/youtube.shortcode&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;I use the same concept to create &lt;code&gt;speakerdeck&lt;/code&gt;, &lt;code&gt;img&lt;/code&gt; and &lt;code&gt;twitter&lt;/code&gt; shortcodes on this website.&lt;/p&gt; &lt;h2&gt;Plugins&lt;/h2&gt; &lt;p&gt;The filters and shortcodes that you&#39;ve created might be useful for others. You might want to reuse it in other projects or just publish it in &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;npm&lt;/a&gt; so other people can benefit from it.&lt;/p&gt; &lt;p&gt;We can create them as a plugin. Let me show you how we can make our &lt;code&gt;date-display&lt;/code&gt; filter and &lt;code&gt;youtube&lt;/code&gt; shortcode a plugin instead. 😃&lt;/p&gt; &lt;p&gt;First, create a folder &lt;code&gt;plugins&lt;/code&gt; and an &lt;code&gt;index.js&lt;/code&gt; file in it.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; plugins&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Next, move the filter and shortcode to the &lt;code&gt;plugins&lt;/code&gt; folder instead.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# folder structure&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; plugins&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; index.js &lt;span class=&quot;token comment&quot;&gt;# new file&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; date&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;display.filter.js&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; youtube.shortcode.js&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Remove the code filter and shortcode configuration we added in &lt;code&gt;.eleventy.js&lt;/code&gt; just now. Save it. Try to run &lt;code&gt;npm start&lt;/code&gt; now, you will hit an error (something like &amp;quot;unknown block tag: youtube&amp;quot;). We will fix this in a moment. 😉&lt;/p&gt; &lt;p&gt;Open our &lt;code&gt;plugins/index.js&lt;/code&gt; file. Here is the code.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// plugins/index.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;eleventyConfig&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addFilter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dateDisplay&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./date-display.filter&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addShortcode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token string&quot;&gt;&#39;youtube&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./youtube.shortcode&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Did you notice that this plugin code is similar to our &lt;code&gt;.eleventy.js&lt;/code&gt; configuration file (except the differences in &lt;code&gt;require&lt;/code&gt; file paths)? It is because the theory of creating plugins is similar to &lt;code&gt;.eleventy.js&lt;/code&gt; configuration.&lt;/p&gt; &lt;p&gt;Now, let&#39;s update our &lt;code&gt;.eleventy.js&lt;/code&gt; to use our plugins.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// .eleventy.ts&lt;/span&gt;&lt;br&gt;eleventyConfig&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addPlugin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;./plugins&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Try to start your application again. The errors are gone. Date and YouTube video are shown correctly on screen.&lt;/p&gt; &lt;p&gt;Splitting your code into plugins in the same projects might not be very useful. However, if you need the same set of filters and shortcodes across multiple projects, you can export them as npm packages and reuse them across projects.&lt;/p&gt; &lt;p&gt;In fact, we can also install some plugins that others have published! Here is a list of &lt;a href=&quot;https://www.11ty.dev/docs/plugins/&quot;&gt;community created plugins&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;These are two plugins I used in this website:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://github.com/11ty/eleventy-plugin-rss&quot;&gt;@11ty/eleventy-plugin-rss&lt;/a&gt; - plugins for generating RSS feed.&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://github.com/11ty/eleventy-plugin-syntaxhighlight&quot;&gt;@11ty/eleventy-plugin-syntaxhighlight&lt;/a&gt; - plugins for syntax highlighting in Markdown, Nunjucks and other templates.&lt;/li&gt; &lt;/ul&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! We&#39;ve learnt how to create filters and shortcodes, and how to convert them into plugins to make it reusable across projects.&lt;/p&gt; &lt;p&gt;Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1269196934666784768&quot;&gt; twitter.com/jecfish/status/1269196934666784768 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Supporting Dark Mode in Your Website</title> <link href="https://jec.fish/blog/supporting-dark-mode"/> <updated>2020-06-08T00:00:00-00:00</updated> <id>https://jec.fish/blog/supporting-dark-mode</id> <summary>A guide to implement light and dark modes on websites</summary> <category term="blog"/> <content type="html">&lt;p&gt;Working with and supporting dark mode is fun. However, it&#39;s not just for fun, it&#39;s a feature, and some may even say it&#39;s a necessity.&lt;/p&gt; &lt;p&gt;This post will focus on how I implemented dark mode support in this website. Click on the top right toggle on this page to see it in action. 😃&lt;/p&gt; &lt;p&gt;Here is the GitHub repo &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt; if you prefer to read the code straightaway.&lt;/p&gt; &lt;style&gt; kbd { border: 1px solid; border-radius: 4px; padding: 0 6px; font-size: smaller; margin: 0 4px; vertical-align: text-top; } &lt;/style&gt; &lt;h2&gt;What are the requirements?&lt;/h2&gt; &lt;p&gt;Our website needs to support dark and light mode. I will refer them as &lt;strong&gt;color scheme&lt;/strong&gt; from here onwards.&lt;/p&gt; &lt;p&gt;Here are the requirements:-&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Display the page with the user&#39;s &lt;strong&gt;preferred color scheme&lt;/strong&gt;. (e.g. if the user&#39;s system settings is dark mode, our site should show dark mode as default).&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Option to change&lt;/strong&gt; the color scheme - in our case, show a toggle on the top right corner.&lt;/li&gt; &lt;li&gt;Once the user has changed the color scheme, we will use that setting for the &lt;strong&gt;entire session&lt;/strong&gt; (until the user closes the tab). We will use &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage&quot;&gt;session storage&lt;/a&gt; for that.&lt;/li&gt; &lt;li&gt;Ensure &lt;strong&gt;smooth transition&lt;/strong&gt; when changing the color scheme.&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Dim the images&#39; color&lt;/strong&gt; when it&#39;s in dark mode.&lt;/li&gt; &lt;li&gt;In case no color scheme is detected, always &lt;strong&gt;fall back to light mode&lt;/strong&gt;.&lt;/li&gt; &lt;/ol&gt; &lt;h2&gt;First things first, how to test this?&lt;/h2&gt; &lt;p&gt;Before we jump into coding, let&#39;s talk about how we can test color scheme changes. We will be spending a lot of time on testing this.&lt;/p&gt; &lt;p&gt;Here is the guide on how to change the color scheme in your system settings:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://lifehacker.com/how-to-enable-chromes-new-dark-mode-on-android-1834339091&quot;&gt;Android and Apple iOS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://www.howtogeek.com/360650/how-to-enable-dark-mode-for-google-chrome/&quot;&gt;Windows and macOS&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;However, changing our system settings multiple times is not fun. There&#39;s an easier way to do it: Chrome DevTools (CDT) is here to the rescue. We can emulate the color scheme with CDT.&lt;/p&gt; &lt;p&gt;There are two ways to do this - the short version (if you remember the command) and a slightly longer version.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Short version&lt;/strong&gt;&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Open Chrome DevTools &lt;ul&gt; &lt;li&gt;macOS &lt;kbd&gt;⌘&lt;/kbd&gt;+&lt;kbd&gt;Option&lt;/kbd&gt;+&lt;kbd&gt;J&lt;/kbd&gt;&lt;/li&gt; &lt;li&gt;Windows &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;J&lt;/kbd&gt;&lt;/li&gt; &lt;li&gt;Right click on page &amp;gt; Select &amp;quot;Inspect&amp;quot;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Run command &lt;ul&gt; &lt;li&gt;macOS &lt;kbd&gt;⌘&lt;/kbd&gt;+&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;P&lt;/kbd&gt;&lt;/li&gt; &lt;li&gt;Windows &lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;P&lt;/kbd&gt;&lt;/li&gt; &lt;li&gt;Click on three dots (top right corner) &amp;gt; Select &amp;quot;Run command&amp;quot;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Type in: &amp;quot;dark&amp;quot; (or &amp;quot;light&amp;quot;)&lt;/li&gt; &lt;li&gt;Select &lt;strong&gt;Rendering: Emulate CSS prefers-color-scheme: dark&lt;/strong&gt;&lt;/li&gt; &lt;/ol&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:71.125%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/supporting-dark-mode-04.gif&quot; alt=&quot;How to emulate CSS prefers-color-scheme&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;How to emulate CSS prefers-color-scheme&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:43.65234375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/supporting-dark-mode-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/supporting-dark-mode-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/supporting-dark-mode-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/supporting-dark-mode-01.jpg&quot; alt=&quot;Emulate CSS prefers-color-scheme: dark&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Emulate CSS prefers-color-scheme: dark&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;&lt;strong&gt;Slightly longer version&lt;/strong&gt;&lt;/p&gt; &lt;ol&gt; &lt;li&gt;Open Chrome DevTools.&lt;/li&gt; &lt;li&gt;Pull out the &lt;strong&gt;Rendering Panel&lt;/strong&gt;: &lt;ul&gt; &lt;li&gt;Click on three dots &amp;gt; More tools &amp;gt; Select &amp;quot;Rendering&amp;quot;&lt;/li&gt; &lt;li&gt;Click on three dots &amp;gt; Run command &amp;gt; Type &amp;quot;render&amp;quot; &amp;gt; Select &amp;quot;Show Rendering&amp;quot;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Scroll down, look for the option &lt;strong&gt;Emulate CSS media feature prefers-color-scheme&lt;/strong&gt;.&lt;/li&gt; &lt;li&gt;Change the dropdown value to light, dark, or no emulation.&lt;/li&gt; &lt;/ol&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.4453125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/supporting-dark-mode-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/supporting-dark-mode-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/supporting-dark-mode-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/supporting-dark-mode-02.jpg&quot; alt=&quot;Rendering panel&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Rendering panel&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Detecting user&#39;s preferred color scheme&lt;/h2&gt; &lt;p&gt;When the page first loads, we will use JavaScript to detect the user&#39;s current system settings.&lt;/p&gt; &lt;p&gt;We will also detect if any color scheme is stored in session storage. We will use that if it exists, else we use system settings or fall back to light mode if not found.&lt;/p&gt; &lt;p&gt;This logic is needed in every web page so we will place the code in the base layout. Here is the implementation.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_includes/base.layout.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dark&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;light&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; isSystemDarkMode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; matchMedia &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;matchMedia&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;(prefers-color-scheme: dark)&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;matches&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; mode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; sessionStorage&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getItem&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;jec.color-scheme&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;mode &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; isSystemDarkMode&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; mode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; mode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; mode &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// we will do something later&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// run the code &lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;https://jec.fish/blog/%60https://caniuse.com/#feat=matchmedia%60&quot;&gt;window.matchMedia&lt;/a&gt; (or just &lt;code&gt;matchMedia&lt;/code&gt;) is the web API for finding out whether a media query applies to the document or not. It is widely supported by modern browsers. We can use that to detect &lt;code&gt;prefers-color-scheme&lt;/code&gt;, which is the user&#39;s system setting.&lt;/p&gt; &lt;p&gt;When the color scheme is dark, we need to update our website appearance. We will look into that in a moment. No action is needed for the light color scheme, because it&#39;s the default mode.&lt;/p&gt; &lt;h2&gt;Creating the color scheme toggle&lt;/h2&gt; &lt;p&gt;We use an image as toggle. Place it in base layout too because we want it to show in every page.&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;color-scheme-toggle&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/assets/img/icons/dark.svg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;toggle dark mode&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;We gave the toggle an id &lt;strong&gt;#color-scheme-toggle&lt;/strong&gt;. We will change the image &lt;code&gt;src&lt;/code&gt; to &amp;quot;light&amp;quot; and &lt;code&gt;alt&lt;/code&gt; to &amp;quot;toggle light mode&amp;quot; if the user clicks and toggles to light mode, and vice versa.&lt;/p&gt; &lt;p&gt;Note that you can replace the image with your own dark and light mode images. It is okay to use text buttons too.&lt;/p&gt; &lt;p&gt;We will handle the toggle click event in a moment.&lt;/p&gt; &lt;h2&gt;How do we style for each color scheme?&lt;/h2&gt; &lt;p&gt;We will style our website by using these two approaches:-&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;strong&gt;Split&lt;/strong&gt; into light and dark CSS files, and load them conditionally. In our case, we will toggle between these 2 stylesheets for syntax highlighting - &lt;code&gt;prism-dark.css&lt;/code&gt; and &lt;code&gt;prism-light.css&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;Append a &lt;strong&gt;CSS class&lt;/strong&gt; in the HTML &lt;code&gt;body&lt;/code&gt; tag when the color scheme has changed. In our case, we will append the &lt;code&gt;dark-mode&lt;/code&gt; CSS class in the &lt;code&gt;body&lt;/code&gt; tag when it&#39;s in dark mode.&lt;/li&gt; &lt;/ul&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/_includes/base.layout.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Not every page need syntax highlight --&gt;&lt;/span&gt;&lt;br&gt; {% if prism %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;link&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;prism-css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;assets/css/prism-light.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; {% endif %}&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- we will toggle the dark-mode CSS class --&gt;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;body&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt; ...&lt;br&gt; &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/_includes/base.layout.css */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;body.dark-mode&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;What happens when the toggle is clicked&lt;/h2&gt; &lt;p&gt;When the user clicks on the color scheme toggle, we need to:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;toggle the body tag&#39;s &lt;strong&gt;dark-mode&lt;/strong&gt; CSS class&lt;/li&gt; &lt;li&gt;update the &lt;strong&gt;jec.color-scheme&lt;/strong&gt; session storage key&lt;/li&gt; &lt;li&gt;update the &lt;strong&gt;#color-scheme-toggle&lt;/strong&gt;&#39;s &lt;code&gt;src&lt;/code&gt; and &lt;code&gt;alt&lt;/code&gt;&lt;/li&gt; &lt;li&gt;update the &lt;strong&gt;#prism-css&lt;/strong&gt; &lt;code&gt;href&lt;/code&gt; if it exists&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;We will also fire a custom event. Let&#39;s name it &lt;strong&gt;&amp;quot;colorSchemeChanged&amp;quot;&lt;/strong&gt; because we want to &lt;strong&gt;decouple the page specific changes&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;For example, my profile photo in &lt;a href=&quot;https://jec.fish/&quot;&gt;home page&lt;/a&gt; changes when the color scheme changes. It is specific to that page, and I don&#39;t need that logic in other pages.&lt;/p&gt; &lt;p&gt;By firing a custom event, each page can listen to the event and implement page specific updates independently.&lt;/p&gt; &lt;p&gt;Here is the code.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_includes/base.layout.css&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; bodyEl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;body&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; toggleEl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;#color-scheme-toggle&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; prismEl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;#prism-css&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dark&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;light&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;COLOR_SCHEME_CHANGED&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;colorSchemeChanged&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;click&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; isDark &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; bodyEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;dark-mode&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; mode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; isDark &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; sessionStorage&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setItem&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;jec.color-scheme&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; mode&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;isDark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;alt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;alt&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;prismEl&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; prismEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;href &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; prismEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;alt &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;alt&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;prismEl&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; prismEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;href &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; prismEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;dispatchEvent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;CustomEvent&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token constant&quot;&gt;COLOR_SCHEME_CHANGED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; detail&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; mode &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// init...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;If you want to learn more about custom event, here is the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent&quot;&gt;documentation of Custom Event API&lt;/a&gt; by MDN.&lt;/p&gt; &lt;p&gt;Next, we can update our &lt;code&gt;init&lt;/code&gt; function from just now. Trigger the color scheme toggle click event when it is in dark mode.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/_includes/base.layout.css&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;init&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// add this line&lt;/span&gt;&lt;br&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;#color-scheme-toggle&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;click&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h3&gt;Handling page specific changes&lt;/h3&gt; &lt;p&gt;Here is an example on how you could listen to the &lt;code&gt;colorSchemeChanged&lt;/code&gt; custom event. We will update our profile photo&#39;s &lt;code&gt;src&lt;/code&gt; on the home page when the color scheme changes.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:63.625%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/supporting-dark-mode-03.gif&quot; alt=&quot;Toggle profile photo&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Toggle profile photo&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Prepare two profile photos, one for light and one for dark mode. Here is the HTML:&lt;/p&gt; &lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- src/root/index.njk --&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;profilePhoto&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;assets/img/me-light.jpg&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Here is the code:-&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// src/root/index.js&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; toggleEl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;#color-scheme-toggle&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;dark&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;light&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;COLOR_SCHEME_CHANGED&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;colorSchemeChanged&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; toggleEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;COLOR_SCHEME_CHANGED&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; isDark &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; e&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;detail &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; imgEl &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;#profilePhoto&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; mode &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;DARK&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;LIGHT&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;isDark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; mode&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;reverse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; imgEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; imgEl&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;src&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mode&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; mode&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Dim the image&#39;s colors for dark mode&lt;/h2&gt; &lt;p&gt;Sometimes, the image&#39;s colors might be too bright when displayed on a dark background. We can adjust the image colors with CSS.&lt;/p&gt; &lt;p&gt;This website applies the CSS below for all images:&lt;/p&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.dark-mode img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;filter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;grayscale&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;30%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Smooth transitions when changing color schemes&lt;/h2&gt; &lt;p&gt;It is good to change the color schemes gradually, providing users with visual feedback and a pleasant experience. This site applies background color transitions when the color scheme changes.&lt;/p&gt; &lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* src/_includes/base.layout.css */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;/* add this line */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;transition&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; background-color 300ms ease-in-out 0s&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;body.dark-mode&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Bonus: Use the ready-made web component&lt;/h2&gt; &lt;p&gt;The Chrome team has developed a custom element that allows you to easily insert the Dark Mode 🌒 Toggle on your site.&lt;/p&gt; &lt;p&gt;Take a look at the &lt;a href=&quot;https://github.com/GoogleChromeLabs/dark-mode-toggle&quot;&gt;documentation&lt;/a&gt;, NPM install and use it right away... &lt;strong&gt;without having to write the most of the custom code above&lt;/strong&gt;.&lt;/p&gt; &lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;# command&lt;/span&gt;&lt;br&gt;&lt;br&gt;npm install &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;save dark&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;mode&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;toggle&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;This web component is used in the &lt;a href=&quot;https://jec.fish/blog/v8.dev&quot;&gt;V8 blog&lt;/a&gt;. (TLDR - V8 is the JavaScript engine, used in Chrome and Node.js.)&lt;/p&gt; &lt;p&gt;You might be wondering why I did not use that? It is because I only found out after I have shipped my code. 😆&lt;/p&gt; &lt;p&gt;Since my implementation is decent for my scenario, I&#39;ll just continue to use mine.&lt;/p&gt; &lt;p&gt;[Updated: Dec 6, 2020] Oh, receiving several requests, I&#39;ve updated my site to save theme preference in &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage&quot;&gt;localStorage&lt;/a&gt; for longer persistence.&lt;/p&gt; &lt;h2&gt;Alrighty, what&#39;s next?&lt;/h2&gt; &lt;p&gt;Yay! Dark mode is proudly supported in our website. 😍 Here&#39;s the GitHub repo for the code above: &lt;a href=&quot;https://github.com/jecfish/jec-11ty-starter&quot;&gt;jec-11ty-starter&lt;/a&gt;. I&#39;ll update the repo whenever I write a new post.&lt;/p&gt; &lt;p&gt;If you need a more detailed guide on dark mode in general, including its history, I recommend you to read this article - &lt;a href=&quot;https://web.dev/prefers-color-scheme/&quot;&gt;Hello darkness, my old friend&lt;/a&gt; by my colleague &lt;a href=&quot;https://twitter.com/tomayac&quot;&gt;Thomas Steiner&lt;/a&gt;.&lt;/p&gt; &lt;p&gt;In the coming posts, I plan to write about more on how I built my website with 11ty:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/building-my-static-site-with-11ty&quot;&gt;Building Personal Static Site with Eleventy&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-github-actions-and-firebase-hosting&quot;&gt;Setting up GitHub Actions and Firebase Hosting&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/customizing-file-structure-urls-browsersync&quot;&gt;Customizing File Structure, URLs and Browsersync&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/automating-image-optimization-workflow&quot;&gt;Automating Image Optimization Workflow&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/setting-up-seo-and-google-analytics&quot;&gt;Setting up SEO and Google Analytics&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/minifying-html-js-css&quot;&gt;Minifying HTML, JavaScript, CSS - Automate Inline&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/favicons-manifest&quot;&gt;How many favicons should you have in your site?&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/creating-filters-shortcodes-plugins&quot;&gt;Creating Filters, Shortcodes and Plugins&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://jec.fish/blog/supporting-dark-mode&quot;&gt;Supporting Dark Mode in Your Website&lt;/a&gt; ✅&lt;/li&gt; &lt;li&gt;and probably more!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Let me know if the above topics interest you.&lt;/p&gt; &lt;p&gt;That&#39;s all. Happy coding!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1269897911233470465&quot;&gt; twitter.com/jecfish/status/1269897911233470465 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Fish 001</title> <link href="https://jec.fish/fish/20200620"/> <updated>2020-06-20T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200620</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200620.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200620.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200620.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200620.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Helping dad sell fish at #pasar.&lt;/p&gt; &lt;p&gt;Auntie: How much is this fish?&lt;br&gt; Me: (Weighting) RM 10.&lt;/p&gt; &lt;p&gt;Auntie: Walao, why so expensive one. U knw anot one, ask ur dad weight n see.&lt;br&gt; Me: 🙄 ok lo…&lt;/p&gt; &lt;p&gt;Dad: Oi, u calc properly la, it is RM 12.&lt;br&gt; Auntie: Ok, pack it.&lt;/p&gt; &lt;p&gt;Me: … 😳🤷😂 (#seniority and #reputation matter ya, charge higher is fine)&lt;/p&gt; &lt;p&gt;#活该你付多一点 #我是来倒米的&lt;/p&gt; </content> </entry> <entry> <title>Fish 002</title> <link href="https://jec.fish/fish/20200627"/> <updated>2020-06-27T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200627</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:112.3046875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200627.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200627.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200627.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200627.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Two aunties come n buy same kind of fish concurrently. Weigh and send to the fish processing(dad) queue in FIFO manner.&lt;/p&gt; &lt;p&gt;Handing 1st fish to auntie A. Auntie B away for shopping.&lt;/p&gt; &lt;p&gt;Auntie A: U sure this is mine anot? Or that one (fish 2) is mine.&lt;br&gt; Me: Sure ah.&lt;/p&gt; &lt;p&gt;Auntie A: Ask ur dad.&lt;br&gt; Me: 🙄 (again…)&lt;/p&gt; &lt;p&gt;Dad: Oh, u want this ah (fish 2)? Can la, but this one is lighter wor, u sure?&lt;br&gt; Me: (Actually he is js bluffing…)&lt;/p&gt; &lt;p&gt;Auntie: Aiya, nvm la, ok la ok la. (Make payment like she&#39;s kind)&lt;/p&gt; &lt;p&gt;Moral of the story: Top management js bluff their way up and it works. Life as a middle mgmt / operation sucks. 😂 (neh, kan Malaysian always likes to ask customer service: whr is ur manager? #ifeelu 😆)&lt;/p&gt; &lt;p&gt;#不要整天叫我问爸爸&lt;/p&gt; </content> </entry> <entry> <title>Fish 003</title> <link href="https://jec.fish/fish/20200704"/> <updated>2020-07-04T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200704</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200704.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200704.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200704.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200704.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;I kept (hide) 1kg prawns and a fish for myself before biz start.&lt;/p&gt; &lt;p&gt;Biz is good. All prawns and fishs sold out. I took out my 🐟🦐, wanna split and pack.&lt;/p&gt; &lt;p&gt;Auntie A walks over.&lt;/p&gt; &lt;p&gt;Auntie A: Yi, no prawn ady ah? (&lt;em&gt;Peeping&lt;/em&gt; at my prawn)&lt;/p&gt; &lt;p&gt;Me: (feeling alert)&lt;/p&gt; &lt;p&gt;Dad: Oh, that&#39;s my daughter one. U want ah, can lah, split half for u.&lt;/p&gt; &lt;p&gt;Me: … (I see that coming, but fine. Thinking still gt half kg ma)&lt;/p&gt; &lt;p&gt;Auntie B passed by, overheard the conversation.&lt;/p&gt; &lt;p&gt;Auntie B: Ei, I want oso leh! The other half give me la!&lt;/p&gt; &lt;p&gt;Dad: Okok! (Look at me) U take next time la.&lt;/p&gt; &lt;p&gt;Me: 😳😳😳&lt;/p&gt; &lt;p&gt;Auntie A: How about that fish ah? (looking my 🐟)&lt;/p&gt; &lt;p&gt;Me: Walao eh! (Stare at my dad with the expression - dare u say &amp;quot;can la&amp;quot; again, i flip table and resign frm this unpaid job permanently).&lt;/p&gt; &lt;p&gt;Lesson: Speak up and know your worth when ppl step over your boundary. Avoid ending up with NO FISH NO PRAWN!&lt;/p&gt; &lt;p&gt;The ending: Dad gt the signal. I end up with the fish, nt too bad la. 😁 Prawn high cholesterol ma, give to others la nvm. 😂&lt;/p&gt; &lt;p&gt;#抢鱼抢虾记 #虾被抢光 #至少还有鱼&lt;/p&gt; </content> </entry> <entry> <title>Fish 004</title> <link href="https://jec.fish/fish/20200711"/> <updated>2020-07-11T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200711</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200711.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200711.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200711.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200711.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today im feeling #senior coz my young bro came &amp;amp; help tdy as well. #promoted&lt;/p&gt; &lt;p&gt;The fact that I see him kelam-kabut, got critiqued by aunties this round (me none) make me feel im pro-er 😁. Finally my time saying &amp;quot;ai yor, why u so slow one&amp;quot; haha. 😆&lt;/p&gt; &lt;p&gt;Obviously, this is nt something a good senior should do! 😂&lt;/p&gt; &lt;p&gt;Should say nice thing, be more encouraging, make him motivated so im nt stuck in this role forever! #growingjunior&lt;/p&gt; &lt;p&gt;Knowing doesn&#39;t mean doing. I really js want to laugh at him and enjoy my proud moment now lol. 🤣 #badsenior&lt;/p&gt; &lt;p&gt;#但是问题是我们两个都想辞职啊&lt;/p&gt; </content> </entry> <entry> <title>Fish 005</title> <link href="https://jec.fish/fish/20200718"/> <updated>2020-07-18T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200718</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200718.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200718.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200718.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200718.jpg&quot; alt=&quot;Underwater nemo&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Underwater nemo&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today my dad turned into family matters #expert, consulting an auntie on her relationship with daughter-in-law (aka typical drama in-law war) #婆媳大战&lt;/p&gt; &lt;p&gt;Both mom (the auntie M) and daughter (D) in-law are my dad regular customers, they stay in one home.&lt;/p&gt; &lt;p&gt;No wonder so many drama la, also both sometimes a bit calculative on who should pay for the fish. 😆&lt;/p&gt; &lt;p&gt;D uses Facebook to talk bad stuff about M. M uses pasar as a platform to gain her justice.&lt;/p&gt; &lt;p&gt;Juicy story, too long to fit here. Too bad no popcorn sell in pasar. 😂&lt;/p&gt; &lt;p&gt;Surprisingly, dad did nt add fire to the conversation instead advice properly.&lt;/p&gt; &lt;p&gt;Then, dad said to me: Fish only sellable if family stick together.&lt;/p&gt; &lt;p&gt;Woah, word of the day! What a wise business man, mitigate potential business risk. #visionary&lt;/p&gt; &lt;p&gt;What I also think: If D move out (M repeated N times it&#39;s her home), splitting to two homes probably will increase fish sales? Happy family cook more lol. But that&#39;s risk.&lt;/p&gt; &lt;p&gt;What I really think: Probably better to nt stay with in-law. Every LITTLE details got jot down!&lt;/p&gt; &lt;p&gt;Anyway, next time I wanna hear story frm D! 😏🍿&lt;/p&gt; </content> </entry> <entry> <title>Fish 006</title> <link href="https://jec.fish/fish/20200725"/> <updated>2020-07-25T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200725</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200725.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200725.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200725.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200725.jpg&quot; alt=&quot;Underwater nemo&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Underwater nemo&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;No pasar fish story today. Go underwater survey real fish alive! 😆&lt;/p&gt; &lt;p&gt;A family of friendly photogenic nemo. #tioman&lt;/p&gt; &lt;p&gt;#本小姐offday&lt;/p&gt; </content> </entry> <entry> <title>Fish 007</title> <link href="https://jec.fish/fish/20200801"/> <updated>2020-08-01T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200801</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:99.90234375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200801.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200801.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200801.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200801.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Lately my dad also sell abalone cans in pasar. So there&#39;s this rich aunty A came by (heard later frm other aunties, her house big big one).&lt;/p&gt; &lt;p&gt;A: Give me one carton! (24 cans)&lt;br&gt; Me: Wah really! Why u buy so many ah? #倒米王&lt;/p&gt; &lt;p&gt;A: Oh, I buy for my grandchildren to eat ma, good nutrients. 😳&lt;br&gt; Me: (Don&#39;t knw how to continue the conversation…)&lt;/p&gt; &lt;p&gt;Well u knw in life, some kids eat abalone since born, some hv to help selling fish in pasar since childhood. 🤷&lt;/p&gt; &lt;p&gt;But that&#39;s ok right, while one has abalone, another gain priceless experience! 🙂&lt;/p&gt; &lt;p&gt;Always appreciate wht u hv, be mostly positive and gt the most out of it. Blaming is no use, it doesn&#39;t turn one dad into rich papa!&lt;br&gt; .&lt;br&gt; .&lt;br&gt; .&lt;br&gt; .&lt;br&gt; .&lt;br&gt; Anyway… can I be your granddaughter too, rich mama? 😘😂&lt;/p&gt; &lt;p&gt;#不介意当干女儿哦&lt;/p&gt; </content> </entry> <entry> <title>Fish 008</title> <link href="https://jec.fish/fish/20200808"/> <updated>2020-08-08T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200808</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:113.37890625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200808.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200808.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200808.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200808.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today i prepared a success story of digital transformation, but turn out it&#39;s a failure because didn&#39;t met the business expectation.&lt;/p&gt; &lt;p&gt;So the current 🐟 price calculation process is manual like this photo shown, it&#39;s slow.&lt;/p&gt; &lt;p&gt;I bought a digital scale for my dad (actually to ease myself la 😆). I did proper user training, teach him how to use it. Also consult him to test it in production during non-busy day.&lt;/p&gt; &lt;p&gt;So far so good, dad feedback the scale make the process faster. So I tot I can proudly goyang kaki tdy, took photo and share the #successstory.&lt;/p&gt; &lt;p&gt;Manatau I arrived at the stall this morning and still see this calculator and normal scale. No sign of digital scale.&lt;/p&gt; &lt;p&gt;Me: Why ah? I thought u say it&#39;s good and faster?&lt;br&gt; Dad: Faster is faster la, but too accurate ady, I lost money! Cannot la!&lt;/p&gt; &lt;p&gt;U knw fish selling is a low margin business, every cent count. With manual scale one can round up easier! 😂😂😂 (Note: But our price is competitive, somemore with premium fish quality)&lt;/p&gt; &lt;p&gt;Actually, it&#39;s a long consideration before I purchase the scale. Part of my heart wants him to use traditional calculation on normal day, use digital one only on busy day (when im thr 😁).&lt;/p&gt; &lt;p&gt;The reason is old uncle needs to keep doing brain exercise to stay healthy! Also becoz I like how the old way can simulate more conversation with human, can fight price calculation with aunties!&lt;/p&gt; &lt;p&gt;Js that young one like me lazy lo sometimes, brain karat ady. Haiz, finding shortcut but gt banned by old folk, oppss.&lt;/p&gt; &lt;p&gt;Happy for him, sad for me. Need to find a way to convince him to let me use it when im helping! 😏&lt;/p&gt; &lt;p&gt;#暂时转型失败 #不过也是好的 #老的脑要多运动 #不自动化比较有人情味&lt;/p&gt; </content> </entry> <entry> <title>Fish 009</title> <link href="https://jec.fish/fish/20200815"/> <updated>2020-08-15T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200815</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200815.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200815.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200815.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200815.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today im demotivated as an employee.&lt;/p&gt; &lt;p&gt;Basically, the boss (my dad) doubled up the stock tdy and we sold out.&lt;/p&gt; &lt;p&gt;Good right? Of course! Good for the boss lo, more works for me. 🙄&lt;/p&gt; &lt;p&gt;See the fish queue. Calculate and pack until I blur. Also no fish to steal home tdy because no time to hide it. 😌&lt;/p&gt; &lt;p&gt;A good boss should incentivize their workers accordingly to overload them!&lt;/p&gt; &lt;p&gt;I was hoping one day my dad will reward me by saying &amp;quot;nah, i kept a fish for u tdy&amp;quot;. Even js a cheap fish i think i will be very happy. Haiz, never happen. 😆&lt;/p&gt; &lt;p&gt;Better jump ship faster if gt boss like this okkkk!&lt;/p&gt; &lt;p&gt;#无良老细 #typicalCinaManCompany&lt;/p&gt; </content> </entry> <entry> <title>Fish 010</title> <link href="https://jec.fish/fish/20200822"/> <updated>2020-08-22T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200822</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200822.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200822.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200822.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200822.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;An unknown 70 yrs-old-ish auntie dragged a trolley to our stall and started talking to me. Dad was away.&lt;/p&gt; &lt;p&gt;A: Pretty, shopping pasar very tired. Are you going home soon?&lt;/p&gt; &lt;p&gt;Me: (Alert, why she asked that. I stay calm, ignore question) U can put ur trolley here for a while, sit and rest.&lt;/p&gt; &lt;p&gt;A: This trolley is very heavy. I&#39;m thinking if u r going back soon can u help to send to my house?&lt;/p&gt; &lt;p&gt;Me: (Alert, what!? I don&#39;t even knw u!? 跟你很熟咩?) Errrr…&lt;/p&gt; &lt;p&gt;Luckily, dad came back in time. Auntie repeated the same request.&lt;/p&gt; &lt;p&gt;Dad: Ok ah, no problem.&lt;br&gt; Me: 😮&lt;/p&gt; &lt;p&gt;Apparently this is nt the first time.&lt;/p&gt; &lt;p&gt;Me: Wah, nvr know u r so kind-hearted one.&lt;br&gt; Dad: Aiya, her home is just on the way back. Pasar might be her only social place nw. Helping ppl whatever possible lo. U old ady then u knw. 😲&lt;/p&gt; &lt;p&gt;Wow! I guess the older one grows, the more empathy one will be? Coz u might be the next one tht need help.&lt;/p&gt; &lt;p&gt;Probably I shouldn&#39;t be too alert js nw. This is the kind of service u dun get in hypermarket. #人情味&lt;/p&gt; &lt;p&gt;Ok, good model to show me how he wants to be treated when he is older. 😆&lt;/p&gt; &lt;p&gt;#言教不如身教 #丢他去老人院吗&lt;/p&gt; </content> </entry> <entry> <title>Fish 011</title> <link href="https://jec.fish/fish/20200829"/> <updated>2020-08-29T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200829</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:119.43359375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200829.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200829.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200829.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200829.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;My dad has a loyal premium customer that came all the way frm Klang bi-weekly.&lt;/p&gt; &lt;p&gt;A young mom tht dun eat fish herself... Buy a lot and nt very calculative. Friendly, nt supervising my weighting, just pay whatever I ask. 😍&lt;/p&gt; &lt;p&gt;Honestly, I was quite surprised but then I understand why later.&lt;/p&gt; &lt;p&gt;Me: Why u come so far to buy fish here?&lt;br&gt; Y: Ur dad fish fresh ma.&lt;/p&gt; &lt;p&gt;Me: But Klang pasar got so many fresh fishes...&lt;br&gt; Y: Used to buy frm ur dad ady, good service.&lt;/p&gt; &lt;p&gt;Me: (Actually I still wanna ask further one, but better dun la, nt that i wanna convince her to nt come kan. 😂) #倒米王&lt;/p&gt; &lt;p&gt;Dad: Hey, I reserve these fishballs, free for you and your family.&lt;br&gt; Y: Wah, so good ah. Tq uncle.&lt;br&gt; Me: (Well, the fact is - it&#39;s just so happen we cant finish selling the fishballs 🙄 #明明就是卖不完怕坏掉）&lt;/p&gt; &lt;p&gt;Aha! Rephrase your offering to double up the impact and customer satisfaction. 😏 Make them feel valued and happy, they&#39;ll always come back!&lt;/p&gt; &lt;p&gt;#行走江湖识做人很重要&lt;/p&gt; </content> </entry> <entry> <title>Fish 012</title> <link href="https://jec.fish/fish/20200905"/> <updated>2020-09-05T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200905</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200905.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200905.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200905.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200905.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;No pasar 🐟 story today. My boss off to #kualakurau pasar for market survey lol!&lt;/p&gt; &lt;p&gt;#微服出巡 #格格被逼随行&lt;/p&gt; </content> </entry> <entry> <title>Fish 013</title> <link href="https://jec.fish/fish/20200912"/> <updated>2020-09-12T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200912</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200912.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200912.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200912.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200912.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Last weekend was off, dad forecasted business tdy would be great, so he gets more fishes. However, it&#39;s RAINY DAY, sh**! 🌧️&lt;/p&gt; &lt;p&gt;Manage to almost sold out luckily, after dad pushed the sales harder and make calls to some regular customers (still sleeping 😴 or lazy to come out).&lt;/p&gt; &lt;hr&gt; &lt;p&gt;8.30 am, left a Chinese Pomfret #斗底鲳 and a Grouper #石斑, about RM 42 and RM 35 each (mid-upper range fish).&lt;/p&gt; &lt;p&gt;Me: Ok la, u take one, i take one, we go home eat la.&lt;br&gt; Dad: Cannot, expensive. Let&#39;s wait.&lt;br&gt; Me: 😑 (fine)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;9 am, left only the Pomfret.&lt;/p&gt; &lt;p&gt;Me: Give me la.&lt;br&gt; Dad: (Think for a few seconds) Ok. Took and chop.&lt;/p&gt; &lt;p&gt;Me: 😁&lt;br&gt; Dad: (Split the fish into 2) U take half, I take half. Cheaper.&lt;/p&gt; &lt;p&gt;Me: 😑😑😑 Huh!? #酱都可以 #cheapskate!&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Story aside, getting wet at rain and worrying about fish sales aren&#39;t fun.&lt;/p&gt; &lt;p&gt;Always be prepared at normal day (building good relationship with customers) make it easier to navigate business through bad weather. #survivalskill&lt;/p&gt; &lt;hr&gt; &lt;p&gt;I really think we should just reward each of us one fish today instead of half lol, celebrate little win ma. Well, clearly boss only think about profits!&lt;/p&gt; &lt;p&gt;#不需要一人一半 #一人一条感情也不会散的嘛&lt;/p&gt; </content> </entry> <entry> <title>Fish 014</title> <link href="https://jec.fish/fish/20200919"/> <updated>2020-09-19T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200919</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:119.3359375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200919.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200919.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200919.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200919.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today suddenly gt scolded by an hot-tempered uncle. He bought RM 11 fish.&lt;/p&gt; &lt;p&gt;Man: How much?&lt;br&gt; Me: RM 11.&lt;/p&gt; &lt;p&gt;Man: (Give me RM 50)&lt;br&gt; Man: I give u RM 5 also.&lt;/p&gt; &lt;p&gt;Me: Ok. (Pass him RM 44 - 2xRM20, 4xRM1)&lt;br&gt; Man: (Shout at me) What r u doing? Why u give me so many RM 1 notes.&lt;/p&gt; &lt;p&gt;Me: (Blur) Huh?&lt;br&gt; Man: How much is the fish? (In high pitch, annoying face)&lt;/p&gt; &lt;p&gt;Me: RM 11. (Doing math in my head, wondering are thr anyway i can give less RM1)&lt;br&gt; Man: Oh, say la RM 11, then I give u RM 1 instead of RM 5. (Still raising voice)&lt;/p&gt; &lt;p&gt;Me: ...&lt;/p&gt; &lt;p&gt;Man grabbed the fish and the 💵, show me an angry eyesight, then left the stall.&lt;/p&gt; &lt;p&gt;WTH, Im still wondering why he gt so triggered by RM1. Seriously I didn&#39;t do anything. 😳&lt;/p&gt; &lt;p&gt;Potato also need to be respected one ok. Customer is not king sorry.&lt;/p&gt; &lt;p&gt;Luckily my mood isn&#39;t bad today else u see la, throw u the fish. 😂&lt;/p&gt; </content> </entry> <entry> <title>Fish 015</title> <link href="https://jec.fish/fish/20200926"/> <updated>2020-09-26T00:00:00-00:00</updated> <id>https://jec.fish/fish/20200926</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:64.74609375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20200926.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20200926.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20200926.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20200926.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Manager should help staff to prioritize tasks and share the workloads. Nt just giving instructions.&lt;/p&gt; &lt;p&gt;Dad: Pack this fish for auntie A.&lt;/p&gt; &lt;p&gt;Dad: Peel these prawn shells for auntie B.&lt;/p&gt; &lt;p&gt;Dad: Weight these fishes (a lot) for auntie C.&lt;/p&gt; &lt;p&gt;Auntie D: Amoi, come help me pick a few nice prawns.&lt;/p&gt; &lt;p&gt;Auntie E: Girl, how much is this fish ah?&lt;/p&gt; &lt;p&gt;Auntie F: Ei, my fish processed ady anot, can faster ah.&lt;/p&gt; &lt;p&gt;Walao, im a single core, at most duo core processor jer, not thousand-hands guanyin ok!!! #千手观音&lt;/p&gt; &lt;p&gt;Ideally, I will handle pipeline first C-E-D, then closing sales F-A, then after sales service B.&lt;/p&gt; &lt;p&gt;The problem is, when tasks r all coming at once, all eyes r on you; some said rushing, some are premium customers, the u gg. The queue doesn&#39;t work that way.&lt;/p&gt; &lt;p&gt;Me: 🙄 (Asking while peeling prawns for the premium and rushing customer). Wait! Boss, which one should I handle first, no hands ady!&lt;/p&gt; &lt;p&gt;Successfully diverted attention. All aunties eye on dad now, don&#39;t care. 😬&lt;/p&gt; &lt;p&gt;Dad stopped cutting fish and come helping #frontend. 😁&lt;/p&gt; &lt;p&gt;Frontend is nt easy ok, dun keep passing all the tasks to frontend, and hiding in the backend ok!!!&lt;/p&gt; &lt;p&gt;#managingupwards&lt;/p&gt; </content> </entry> <entry> <title>Fish 016</title> <link href="https://jec.fish/fish/20201003"/> <updated>2020-10-03T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201003</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:69.23828125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201003.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201003.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201003.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201003.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar way of calculation is not conventional for me.&lt;/p&gt; &lt;p&gt;When aunties asking &amp;quot;how much is the fish?&amp;quot;, they are asking for per kati (600g) price, NOT per kilogram (kg).&lt;/p&gt; &lt;p&gt;However, when i weight the fishes, I calculate with kg price. 😌&lt;/p&gt; &lt;p&gt;Hard to remember the long list of price with 2 measurement systems, so the first thing i do is always writing them (like the picture).&lt;/p&gt; &lt;p&gt;My dad just memorize these numbers in his head. 👏 Sorry la, my brain doesn&#39;t work that way, similar to coding, just Google or StackOverflow when needed. 🙈&lt;/p&gt; &lt;p&gt;Me: Why pasar ppl dun ask for per kg price?&lt;br&gt; Dad: Because it sounds more expensive? Per kati sounds cheaper.&lt;/p&gt; &lt;p&gt;Me: But it&#39;s eventually the same price and it&#39;s easier for calculate.&lt;br&gt; Dad: People just wanna feel better at the moment of buying. It&#39;s like this one, just follow la.&lt;/p&gt; &lt;p&gt;Me: (not convinced) &lt;em&gt;Testing saying KG price to a few customers&lt;/em&gt;&lt;/p&gt; &lt;p&gt;Customer ABCDE: 😱😱 Why ur fishes suddenly become so expensive!&lt;/p&gt; &lt;p&gt;Dad: (Stare at me in killing mode then explain to aunties) No la, per kati is RM XX la!&lt;/p&gt; &lt;p&gt;Me: (Ok, experiment failed. It&#39;s proven hard to change the existing system or I hv nt try hard enough! 😆)&lt;/p&gt; &lt;p&gt;#倒米王&lt;/p&gt; </content> </entry> <entry> <title>Fish 017</title> <link href="https://jec.fish/fish/20201010"/> <updated>2020-10-10T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201010</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201010.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201010.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201010.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201010.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Sometimes i really beh tahan pasar aunties bargaining skill.&lt;/p&gt; &lt;p&gt;Auntie A: How much?&lt;br&gt; Me: 19.2. count u RM 19 la.&lt;/p&gt; &lt;p&gt;Auntie B: 24.5 ah, RM 24 enough la~&lt;/p&gt; &lt;p&gt;Auntie C: 33.9 ah, RM 33 cannot meh!&lt;/p&gt; &lt;p&gt;Auntie D: 47 ah, RM 45 can ady la~&lt;/p&gt; &lt;p&gt;Walao eh, 90 cent also want to round down? All math fail is it. Rounding doesn&#39;t work like that leh! 😂&lt;/p&gt; &lt;p&gt;Small number i will round down automatically, big number don&#39;t la, we r js small business ok. 😌&lt;/p&gt; &lt;p&gt;That&#39;s y my dad said, sometimes it&#39;s good to say higher then charge lower.&lt;/p&gt; &lt;p&gt;For example, when the price is 11.4, just say &amp;quot;11.7, aiya cincai la, charge u 11.5 enough ady, special discount for u&amp;quot;.&lt;/p&gt; &lt;p&gt;Usually aunties wont bargain again, unless those really thick face one, can ignore.&lt;/p&gt; &lt;p&gt;Problem reduced, 💰in 👩 happy. Win-win. #streetsmart&lt;/p&gt; &lt;p&gt;I dun do it all the time, because i always forget that this is not programming, no need to be so accurate. 😆 (except JavaScript...)&lt;/p&gt; &lt;p&gt;#我们绝对不是奸商哦 #情势所逼啊&lt;/p&gt; </content> </entry> <entry> <title>Fish 018</title> <link href="https://jec.fish/fish/20201017"/> <updated>2020-10-17T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201017</id> <summary></summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:124.21875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201017.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201017.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201017.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201017.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Woo, today got premium customer ordered a whole cod fish, about 1.4k, each slice bigger than my palm.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Doing business is about extending conversation.&lt;/p&gt; &lt;p&gt;A: Fish fresh anot today?&lt;br&gt; Me: Fresh! We no fresh no sell one. (Abor i said nt fresh meh, extend further, bluffing + demo) Ytd catch one. Nah, u press and see this fish, bla bla bla&lt;/p&gt; &lt;p&gt;B: Is this fish tasty? Meat elastic anot?&lt;br&gt; Me: Of course tasty la, everyone eat will sure come back buy one (extend, empty promise), if nt tasty u come back i replace one for u.&lt;/p&gt; &lt;p&gt;C: Which fish nicer?&lt;br&gt; Me: All fish r equally nice wor (can stop here or extend suggest), but if u like steam fish, then this is better (extend even further) u can steam with (recipe sharing, bla bla).&lt;/p&gt; &lt;h2&gt;Next level&lt;/h2&gt; &lt;p&gt;D: (Just passing by the stall, nt stopping)&lt;br&gt; Dad: Ei, ur last Monday fish taste good anot? (knw details, extend upsell) tdy I gt this prawn, i rmb ur son like it, wanna get some?&lt;/p&gt; &lt;h2&gt;Learnings&lt;/h2&gt; &lt;p&gt;The conversation can be meaningless, telling the obvious or asking them boring questions.&lt;/p&gt; &lt;p&gt;Prepare a few &amp;quot;pickup lines&amp;quot;. Just keep talking. The key is avoiding awkward silence, easier to close sales.&lt;/p&gt; &lt;p&gt;It&#39;s even better if u rmb some details if possible, establish more human touch and connection.&lt;/p&gt; &lt;p&gt;This skill is useful everywhere. #吹水讲废话&lt;/p&gt; &lt;p&gt;My dad used to call me &amp;quot;clam mouth&amp;quot;, coz my face is serious by default #他生的 and i dun talk further when customer asks for price (my mouth = clam shell = close hard 😂).&lt;/p&gt; &lt;p&gt;Many customers walked away without buying if I served last time. Cost him some lost before, haha.&lt;/p&gt; &lt;p&gt;But! I&#39;m now his favorite helper lol... compare to my brother. 🤣&lt;/p&gt; &lt;p&gt;Well, programmer better, by default can be &amp;quot;clam mouth&amp;quot;, that&#39;s the common expectation. 😆&lt;/p&gt; </content> </entry> <entry> <title>Fish 019</title> <link href="https://jec.fish/fish/20201024"/> <updated>2020-10-24T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201024</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:58.984375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201024.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201024.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201024.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201024.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Sold out all before 9. Maybe becoz ppl scare of the current political situation?&lt;/p&gt; &lt;p&gt;Today special - 7 stars grouper, hot selling.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;There&#39;s always market for good stuff, for the right one.&lt;/p&gt; &lt;p&gt;So at one point, we left about 20-ish small prawns. Kinda little to sell.&lt;/p&gt; &lt;p&gt;Me: Dad, i pack these for myself.&lt;/p&gt; &lt;p&gt;Auntie A: (overheard) Eh, u weight n see, I want!&lt;br&gt; Me: 🙄 (fine, don&#39;t hv strong craving for prawn)&lt;/p&gt; &lt;p&gt;Auntie A: Count me cheaper la, these r leftover. Too expensive I don&#39;t want.&lt;br&gt; Me: 🙄 (hello, no one asked u to buy ok)&lt;/p&gt; &lt;p&gt;Me: (big smile on face) RM 4.2. (no discount)&lt;br&gt; Auntie A: So expensive one, no discount meh. Dun wan la, u bring home eat.&lt;/p&gt; &lt;p&gt;Me: 🙄 ok. (That&#39;s the original plan ok)&lt;/p&gt; &lt;p&gt;Didn&#39;t notice Auntie B on the side.&lt;/p&gt; &lt;p&gt;Auntie B: Give me that la, since she doesn&#39;t want, I want. Give me 1kg of the big prawns too.&lt;/p&gt; &lt;p&gt;Auntie A twisted and looked at Auntie B.&lt;/p&gt; &lt;p&gt;Me: (Oops, too late liao, A. Good job, B! Discount 20 cent for u. 😁)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;There&#39;re time u might feel undervalued at work and life, feel like u need to give in more for something.&lt;/p&gt; &lt;p&gt;Examine the situation, maybe u r really lousy 🤭, or maybe not. Nt always necessary to &amp;quot;give discount&amp;quot; or improve anything.&lt;/p&gt; &lt;p&gt;Go find / Wait for the right one that values u. Don&#39;t eagerly try to fit in nor under sell yourself k. No rush.&lt;/p&gt; &lt;p&gt;If u&#39;d like to, can treat this as an love advice lol 😂 (which i think im nt qualified to give 🙈)&lt;/p&gt; &lt;p&gt;But really, just anything.&lt;/p&gt; </content> </entry> <entry> <title>Fish 020</title> <link href="https://jec.fish/fish/20201031"/> <updated>2020-10-31T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201031</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201031.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201031.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201031.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201031.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Heck, raining whole morning. Envy dad bald head, no need to cover hair. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Packing cod fish for a rich auntie. She&#39;s chit chatting with dad.&lt;/p&gt; &lt;p&gt;Auntie: Wah, ur daughter really good ah, every weekend come help u.&lt;/p&gt; &lt;p&gt;(Me intercept)&lt;/p&gt; &lt;p&gt;Me: Ya, daughter is good, but father isn&#39;t. U knw he charged me for the cod fish last last week, and he ate it. (Yes, he said MUST PAY, even he was eating oso 😤)&lt;/p&gt; &lt;p&gt;Auntie: Aiyor, did he paid u to come help out?&lt;br&gt; Me: Never.&lt;/p&gt; &lt;p&gt;Dad: Wah, she worked ady, time to pay back, IT good earning u knw.&lt;br&gt; Auntie: (Look at me) What u do ah? How much u earn ah?&lt;/p&gt; &lt;p&gt;Me: (🙄, kepochi, my dad doesn&#39;t even knw my 💰 ok)&lt;br&gt; Me: (divert topic) Eh, auntie, how much your son earn ah? I heard he earn a lot leh, is he single?&lt;br&gt; Auntie: (Proud mom speaking) ...&lt;/p&gt; &lt;p&gt;Today learning:&lt;br&gt; Learning the skill to nt answer questions directly, but still keep the conversation going, nt pissing ppl off, is a really important comm skill.&lt;/p&gt; &lt;p&gt;Divert and switch focus is a good method. I am getting better at this. Really a lot of kepochi ppl in pasar, asking direct privacy questions. Haha.&lt;/p&gt; &lt;p&gt;ps: Maybe her son really single... U nvr knw. The fact is, I don&#39;t even knw if she gt son anot, coz im nt kepochi k. 😂&lt;/p&gt; &lt;p&gt;#八卦是日常 #可能有意外收獲&lt;/p&gt; </content> </entry> <entry> <title>Fish 021</title> <link href="https://jec.fish/fish/20201107"/> <updated>2020-11-07T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201107</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:67.67578125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201107.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201107.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201107.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201107.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Woo, today sold out at 8.40am. Also first week of accepting e-payment!&lt;/p&gt; &lt;p&gt;Business needs to keep up with the trend, else probably bye bye.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Dad, as any old ppl, does nt feel secure of nt accepting cash on hand, and paying extra transaction fees (free for now). He rejected TnG installation once. However, he knw can&#39;t fight with the trend, because customers requested.&lt;/p&gt; &lt;p&gt;Conducted a training for him, taught him how to verify in the app if customers made payment.&lt;/p&gt; &lt;p&gt;Well, production is different frm testing.&lt;/p&gt; &lt;p&gt;Honestly, the app payment notifications kinda suck, need to check in inbox (few clicks away). Imagine your hands are full with dirty water and fish scales, how to check... #UXfail&lt;/p&gt; &lt;p&gt;So what we did is verify by trust. Ppl pay and show us receipt on their phone.&lt;/p&gt; &lt;p&gt;So technically, if u just show a fake screenshot, u can get fish for free! But, we hv faith in human race and pasar aunties! (Let&#39;s see if anything happens) 😆&lt;/p&gt; &lt;p&gt;During the training, dad keeps asking me where&#39;s the money goes, coz it doesn&#39;t show up in the e-wallet. Honestly, the TnG sales didn&#39;t do a good job in training non-tech savvy user lol. 😌&lt;/p&gt; &lt;hr&gt; &lt;p&gt;U knw what my dad did to me now? Usually I took fish and pay later, with the hope that he forgot to collect 💵 frm me.&lt;/p&gt; &lt;p&gt;Today he said to me: TnG me the payment immediately NOW! 🤬🙄&lt;/p&gt; &lt;p&gt;Probably he should nt keep up with the trend, also he didn&#39;t pay me training / technical support fee. 😒&lt;/p&gt; </content> </entry> <entry> <title>Fish 022</title> <link href="https://jec.fish/fish/20201114"/> <updated>2020-11-14T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201114</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:70.01953125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201114.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201114.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201114.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201114.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Well, I thought I&#39;m my dad biggest customer tdy (helping friends buy). I were proud 😎 to be the top sales for a moment.&lt;/p&gt; &lt;p&gt;Then my dad pulled out this cod fish. Someone ordered this whole. Dad 1 - Daughter 0.😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Company culture strongly influence how its employees behave, whether u aware or not, same to family culture.&lt;/p&gt; &lt;p&gt;An auntie bought a golden pomfret tdy.&lt;/p&gt; &lt;p&gt;Auntie: Golden pomfret is a forgiving fish. The meat still taste smooth even oversteam. (Some fish meat become horrible if overcook)&lt;/p&gt; &lt;p&gt;Dad: Ya la, the fish meat still way smoother than your face even oversteam! Haha.&lt;/p&gt; &lt;p&gt;Me: Walao eh, no manner, dad u so mean! Auntie, don&#39;t buy frm this kind of ppl, go buy next stall better.&lt;/p&gt; &lt;p&gt;Auntie: Haha, my face always smooth, u see how many ppl has good skin like me at this age.&lt;/p&gt; &lt;p&gt;Me: (Actually... well... Ok) Yayaya, auntie looks young always. 😆&lt;/p&gt; &lt;p&gt;(This auntie is the can-joke kind and is regular, so it&#39;s okay i guess!)&lt;/p&gt; &lt;p&gt;I hv friendsss told me im mean sometimes when talking. Now u knw whr I learned frm.&lt;/p&gt; &lt;p&gt;It&#39;s nt something I aware coz that&#39;s how my dad talked to us since young, the culture.&lt;/p&gt; &lt;p&gt;Over the years, I improved. The meanness still in my DNA, but I learned to better control it and who to mean to.&lt;/p&gt; &lt;p&gt;Now I&#39;ll mostly mean to the ppl I&#39;m closer with. So... if I&#39;m mean, lucky u! 😂&lt;/p&gt; &lt;p&gt;Or... it might be I really dislike u or unconscious act, true self hard to change I guess? 🤭&lt;/p&gt; &lt;p&gt;#鱼肉就算蒸过熟粗粗还是比你的脸滑 #这个人真的够力够胆讲 #我也是受害者 #monkeyseemonkeydo&lt;/p&gt; </content> </entry> <entry> <title>Chrome DevTools的最新功能 + Puppeteer的最新进展</title> <link href="https://jec.fish/deck/gdd-2020"/> <updated>2020-11-18T00:00:00-00:00</updated> <id>https://jec.fish/deck/gdd-2020</id> <summary>Google Dev Summit 2020 - Chrome DevTools的最新功能 + Puppeteer的最新进展</summary> <category term="deck"/> <content type="html">&lt;p&gt;在线上与大家分享了Chrome DevTools的最新功能以及Puppeteer的最新进展。&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://developersummit.googlecnapps.cn/&quot;&gt;Google 开发者大会&lt;/a&gt; (Google Developer Summit) 是谷歌面向开发者展示最新产品和平台的年度盛会。这是谷歌首次以全线上大会的形式与中国开发者相聚。&lt;/p&gt; &lt;h2&gt;Chrome 开发中工具 DevTools 的最新功能&lt;/h2&gt; &lt;p&gt;本场演说为大家介绍七个Chrome 开发者工具 (DevTools) 的新功能。&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe frameborder=&quot;0&quot; src=&quot;https://v.qq.com/txp/iframe/player.html?vid=a3203fqiili&quot; allowFullScreen=&quot;true&quot;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;h2&gt;Puppeteer的最新进展&lt;/h2&gt; &lt;p&gt;Puppeteer 是一个 Nodejs 工具库，它提供了高级的 JavaScript API 来控制 Chromium 与其他的浏览器。本次演说将为大家简单介绍 Puppeteer 的基本操作以及最新功能。&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe frameborder=&quot;0&quot; src=&quot;https://v.qq.com/txp/iframe/player.html?vid=o3203vn66r2&quot; allowFullScreen=&quot;true&quot;&gt;&lt;/iframe&gt; &lt;/div&gt; . &lt;h2&gt;场外制作&lt;/h2&gt; &lt;p&gt;It was fun making the videos, although many NGs (the subject stuttered a lot. 😂). Thanks to my friends - Lydia and See Yin who help to set up the gear, proof read my Chinese script and did the recording.&lt;/p&gt; &lt;p&gt;Wouldn&#39;t have made these videos without you girls. ❤️&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/deck/gdd-2020.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/deck/gdd-2020.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/deck/gdd-2020.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/deck/gdd-2020.jpg&quot; alt=&quot;The making of the videos&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;The making of the videos&lt;/figcaption&gt;&lt;/figure&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1329007769236606976&quot;&gt; twitter.com/jecfish/status/1329007769236606976 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Fish 023</title> <link href="https://jec.fish/fish/20201121"/> <updated>2020-11-21T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201121</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:65.72265625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201121.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201121.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201121.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201121.jpg&quot; alt=&quot;Uncle is holding a big fish&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Uncle is holding a big fish&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;No, the fish is belong to a Datin, uncle didn&#39;t buy anything. 😂&lt;/p&gt; &lt;p&gt;He passed by our stall and say this fish is beautiful, want to take picture with it. Dad approved, asked me to help him.&lt;/p&gt; &lt;p&gt;Walao, uncle got high photo requirements eh! Need to face sunlight la, try different poses and check end result.&lt;/p&gt; &lt;p&gt;After that, he told me: Your photoshooting skill nt bad ah, I can add u as fb friend. Many ppl dun knw how to take good photo.&lt;/p&gt; &lt;p&gt;Woah uncle! Should I feel honored that I qualified to be your fb friend? 😂&lt;/p&gt; &lt;p&gt;This could probably be a good pick up line if he is not my dad age. Guys, can learn that!&lt;/p&gt; &lt;p&gt;Aiya, forgot to ask uncle if he got son lol.&lt;/p&gt; &lt;p&gt;This fish is called Threadfin / Senangi / 马友.&lt;/p&gt; &lt;p&gt;No business learning this week. Super busy selling, tired. Keep hustling all!&lt;/p&gt; &lt;p&gt;*No, I didn&#39;t add him in fb.&lt;/p&gt; </content> </entry> <entry> <title>Fish 024</title> <link href="https://jec.fish/fish/20201128"/> <updated>2020-11-28T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201128</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:71.77734375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201128.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201128.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201128.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201128.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Woohoo! Today got crab. Slightly late tdy coz gt a tech talk immediately after pasar.&lt;/p&gt; &lt;p&gt;Me and my dad rarely call or text each other, except every Friday - he will text me a reminder: Remember to come earlier tomorrow.&lt;/p&gt; &lt;p&gt;Note that he always use the word &amp;quot;earlier&amp;quot;.&lt;/p&gt; &lt;p&gt;It irked me and make me wonder: Am I not coming early enough every week, so u ask me to come earlier (than last week)? Could you rephrase your reminder?&lt;/p&gt; &lt;p&gt;But then I realized I don&#39;t care about the answer so much. 😆 Coz I won&#39;t go earlier anyway even if requested. Reaching at 6.30am is the best I can do ady.&lt;/p&gt; &lt;p&gt;And to debate about that sentence with my dad seems like a dumb thing to do. There&#39;s a lot of things in life or at work u don&#39;t need to clarify, rectify or react.&lt;/p&gt; &lt;p&gt;Don&#39;t take ppl word so seriously. Close one eye and just let it go. Don&#39;t be so detailed and bitchy k.&lt;/p&gt; &lt;p&gt;Choose your battle wisely.&lt;/p&gt; &lt;p&gt;Well, write is easier than done. 😂&lt;/p&gt; </content> </entry> <entry> <title>Fish 025</title> <link href="https://jec.fish/fish/20201205"/> <updated>2020-12-05T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201205</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:58.49609375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201205.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201205.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201205.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201205.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Polices come pasar spot check today.&lt;/p&gt; &lt;p&gt;Aunties: Aiyer... faster ciao, later kena fine 1k.&lt;br&gt; Stall sellers: Haiz, later they take photos, want to rasuah is it?&lt;/p&gt; &lt;p&gt;Me: Uncle, your fish RM 10. No worries la, just follow the rules, police won&#39;t simply fine u.&lt;/p&gt; &lt;p&gt;Uncle: Confused by the rules now. Don&#39;t exactly knw what to follow, later fish jump from RM 10 to RM 1010, no money pay la. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Everyone worry about the money, not the virus.&lt;/p&gt; &lt;p&gt;Is it a problem of our system or citizen mindset? Confident to the enforcement system is so low.&lt;/p&gt; &lt;p&gt;Anyway, in a company, if unlawful thing happens, blame the system, not the employees.&lt;/p&gt; &lt;p&gt;While monetary reward/punishment could solve problems temporarily, it might not be the most effective one.&lt;/p&gt; &lt;p&gt;Wah, serious post today ah.&lt;/p&gt; &lt;p&gt;ps: I woke up late tdy because my dad didn&#39;t call me ytd to tell me &amp;quot;come earlier tmr&amp;quot; (refer to last week post). He scolded me, I said it&#39;s his fault. 😂&lt;/p&gt; </content> </entry> <entry> <title>What&#39;s G.R.E.A.T in Chrome DevTools</title> <link href="https://jec.fish/deck/cds-2020"/> <updated>2020-12-10T00:00:00-00:00</updated> <id>https://jec.fish/deck/cds-2020</id> <summary>Chrome Dev Summit 2020 - Great new features of Chrome DevTools</summary> <category term="deck"/> <content type="html">&lt;p&gt;Combined my 2 favourites together - cooking and Chrome DevTools.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://goo.gle/cds2020&quot;&gt;Chrome Dev Summit&lt;/a&gt; is an annual conference where developers can learn about the latest tools and updates coming to the Google Chrome browser.&lt;/p&gt; &lt;p&gt;My session gives you an overview of the latest and greatest features in Chrome DevTools.&lt;/p&gt; &lt;p&gt;Here are all the demos: &lt;a href=&quot;https://jec.fish/demo/cds-2020&quot;&gt;/demo/cds-2020&lt;/a&gt;.&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/QsOF9SJJdAA&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/QsOF9SJJdAA?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/QsOF9SJJdAA/maxresdefault.jpg alt=&#39;What&#39;s new in DevTools&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;What&#39;s new in DevTools&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;h1&gt;Behind the scene&lt;/h1&gt; &lt;p&gt;I set the fried rice theme and the G.R.E.A.T acronym, but I have no idea on how to deliver it. My creative friend, Aaron helped me brainstorm the idea together. Thanks Aaron! 🙇🏽‍♀️&lt;/p&gt; &lt;p&gt;Here is the prototype, haha.&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/Q2F5LIDvZTA&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/Q2F5LIDvZTA?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/Q2F5LIDvZTA/maxresdefault.jpg alt=&#39;Prototype&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Prototype&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;.&lt;/p&gt; &lt;p&gt;I have a sleepless week (or more) thinking about the making of this video. The timeline is tight. Nevertheless, it was fun! There goes my last talk in year 2020.&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1337429741352075265&quot;&gt; twitter.com/jecfish/status/1337429741352075265 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt;</content> </entry> <entry> <title>Fish 026</title> <link href="https://jec.fish/fish/20201212"/> <updated>2020-12-12T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201212</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:60.25390625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201212.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201212.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201212.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201212.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Sea cucumber #海参 selling season starts, winter solstice and Chinese New Year are coming!&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Many pasar sellers like to gamble. Morning cash in, afternoon go Genting.&lt;/p&gt; &lt;p&gt;It becomes their daily life, hobby and social activities.&lt;/p&gt; &lt;p&gt;Stall A: Walao, Genting now has many COVID cases. Scary leh.&lt;/p&gt; &lt;p&gt;Stall B: I miss going up, hand itchy (want to bet)!&lt;/p&gt; &lt;p&gt;Dad: I think Genting road gt many potholes now, coz all &amp;quot;donors&amp;quot; cannot go. 😂&lt;/p&gt; &lt;p&gt;Me: Stall C, your fish RM 50.&lt;/p&gt; &lt;p&gt;Stall C: So expensive!&lt;/p&gt; &lt;p&gt;Stall D: Stall C, how much do u want to buy Toto later, XXXX?&lt;/p&gt; &lt;p&gt;Stall C: RM 100 big, RM 100 small.&lt;/p&gt; &lt;p&gt;Me: 🙄 (Fish is expensive, but Toto is not)&lt;/p&gt; &lt;p&gt;Some stalls hv good business, but still in great debts. Some cannot afford kids for better education, some cannot afford operation freeze like MCO, some old sellers cannot retire. There are many more worse examples.&lt;/p&gt; &lt;p&gt;Why? Because they hv no saving, no proper financial planning. Money in, money goes.&lt;/p&gt; &lt;p&gt;If you are youngsters reading this, this isn&#39;t apply js to gambling - gaming spending, impulsive online shopping, etc as well.&lt;/p&gt; &lt;p&gt;It&#39;s okay to hv hobby, but pls be a responsible adult. Properly plan your spending, saving and investment.&lt;/p&gt; &lt;p&gt;Or get married and hv kids early, hope they will be grateful and support u financially when u are old lol.&lt;/p&gt; &lt;p&gt;Or... buy saving/investment plan, force yourself to do it. But I am nt an agent and this is nt an ads. Agents can leave your contact in comment. 😂&lt;/p&gt; &lt;p&gt;#今宵有酒今宵醉 #风吹鸡蛋壳 #财散人安乐&lt;/p&gt; </content> </entry> <entry> <title>Fish 027</title> <link href="https://jec.fish/fish/20201219"/> <updated>2020-12-26T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201219</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201219.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201219.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201219.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201219.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Let&#39;s talk about personal branding.&lt;/p&gt; &lt;p&gt;Dad: As long as you understand your customers, with good reputation and decent selling skill, u can sell anything.&lt;/p&gt; &lt;p&gt;My dad is a brand of himself. People buy stuff frm him because they trust him (the quality of his pick).&lt;/p&gt; &lt;hr&gt; &lt;p&gt;My best friend started a new family business recently - the homemade pork belly braised yam in the photo. #芋头扣肉&lt;/p&gt; &lt;p&gt;I asked my dad to help selling that. Unknown and not-too-cheap product like this really put his skill in test - #blowwater and #reputation.&lt;/p&gt; &lt;p&gt;A: (Take the pack, talk to dad) Wah, u made this ah?&lt;br&gt; Me: No la, homemade by my friend.&lt;/p&gt; &lt;p&gt;A: Oh. (put it back)&lt;br&gt; Dad: Not I made, but I ate the other day, quite tasty oh, can buy n try.&lt;/p&gt; &lt;p&gt;A: But expensive leh&lt;br&gt; Dad: If too cheap you don&#39;t buy lo, u tot quality meat cheap nowadays meh? This one her friend uses grade A chinese wine somemore leh.&lt;/p&gt; &lt;p&gt;Me: Yaya.&lt;br&gt; A: Ok la, give me a pack to test.&lt;/p&gt; &lt;p&gt;Well, I estimated slow selling, so I only brought 5 boxes to the pasar for trial. But wow, end up my dad sold 25 packs in a day. 😳&lt;/p&gt; &lt;p&gt;Even when the 5 physical packs are gone, he still keep selling with his talking skill and it works, customers pre-order that.&lt;/p&gt; &lt;p&gt;Well... that was unexpected. I&#39;m impressed. No wonder my mom married him last time. 😂&lt;/p&gt; &lt;p&gt;(This story happened last week, this week Im off)&lt;/p&gt; &lt;p&gt;#自媒体 #个人品牌&lt;/p&gt; </content> </entry> <entry> <title>Fish 028</title> <link href="https://jec.fish/fish/20201226"/> <updated>2020-12-26T00:00:00-00:00</updated> <id>https://jec.fish/fish/20201226</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:68.5546875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20201226.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20201226.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20201226.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20201226.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;GG, today business nt good. All eating turkey for Christmas is it? See my boss promote so hard today. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;To senior, on-the-job training is about you (trainer) or the newbie? Today dad and bro argue at the stall. 🙈&lt;/p&gt; &lt;p&gt;My bro is jobless recently, dad requested him to help at stall.&lt;/p&gt; &lt;p&gt;I reached at pasar slightly late tdy, stall was busy, and bro is thr helping ady.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Dad: (talk to me) U faster come, weight this and calculate that.&lt;/p&gt; &lt;p&gt;Me: (I saw bro is doing that already)&lt;/p&gt; &lt;p&gt;Dad: (talk to bro) No need u already, damn slow like 🐢. Faster go to the side, look after the other products.&lt;/p&gt; &lt;p&gt;Me: (brutal, but dad is always like that when he&#39;s busy)&lt;/p&gt; &lt;p&gt;Bro: (angry) Walao, u ask me to help, then u scold me like that.&lt;/p&gt; &lt;p&gt;Dad: (annoyed) Wah, is this consider scolding? U so slow, just stand on the side, learn a bit la.&lt;/p&gt; &lt;p&gt;Bro: I was looking after other good js nw, u asked me to come weight the fish! Blame me again and I will never help you.&lt;/p&gt; &lt;p&gt;Dad: (annoyed) Don&#39;t want to come then don&#39;t come la. Youngster nowadays so not teach-able.&lt;/p&gt; &lt;p&gt;(Customers watching, eating popcorn 🍿)&lt;/p&gt; &lt;p&gt;Me: Wah, u both so free fighting is it? (Stand btw them, start weighting the fish)&lt;/p&gt; &lt;p&gt;All get back to work silently.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;When bro is away, I talked to dad.&lt;/p&gt; &lt;p&gt;Me: So do u want him to help or not?&lt;br&gt; Dad: Yes, but he is so slow.&lt;/p&gt; &lt;p&gt;Me: If you need help, can u talk politely?&lt;br&gt; Dad: You see, he came a few days already, still blur blur. He doesn&#39;t learn with heart.&lt;/p&gt; &lt;p&gt;Me: Boss, u teased him like that, then u expect him to learn passionately? Dream la.&lt;br&gt; Dad: (Silent for a while)&lt;/p&gt; &lt;p&gt;Me: U should appreciate he doesn&#39;t js walk away js nw. Adjust your way talking to him lo.&lt;br&gt; Dad: Erm... Aiya, u don&#39;t understand one la...&lt;/p&gt; &lt;p&gt;I think he listened, but whether he will improve anot we shall see.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Junior might be slow in learning and making newbie mistakes.&lt;/p&gt; &lt;p&gt;Try your best to assist, teach the way they absorb. Throwing cruel words might discourage them.&lt;/p&gt; &lt;p&gt;After all, u want the junior to perform and split the workload, not bringing u more trouble. Give chance a bit la.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;I kesian my bro today, although he is really blur blur but i still guide him. My patient level is much better than dad, haha. Coz i want to escape my pasar duty. 😏&lt;/p&gt; </content> </entry> <entry> <title>Fish 029</title> <link href="https://jec.fish/fish/20210102"/> <updated>2021-01-02T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210102</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:66.89453125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210102.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210102.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210102.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210102.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;2021, a story about customer feedback and continuous business improvement. In the photo, there&#39;re packs of raw ikan bilis and fried ones.&lt;/p&gt; &lt;p&gt;Few weeks ago, dad started to pack and sell raw ikan bilis.&lt;/p&gt; &lt;h2&gt;1st week&lt;/h2&gt; &lt;p&gt;A: Ei, the ikan bilis nice anot&lt;br&gt; Dad: Nice la, u buy one home and fry.&lt;/p&gt; &lt;p&gt;A: How to fry oh, teach me la.&lt;br&gt; Dad: Blah blah blah...&lt;/p&gt; &lt;p&gt;A: Talk so much, u fried some for us to test la.&lt;br&gt; Dad: Ok&lt;/p&gt; &lt;p&gt;Anyway, the ikan bilis finished selling.&lt;/p&gt; &lt;h2&gt;2nd week&lt;/h2&gt; &lt;p&gt;Dad: Come buy the ikan bilis, come try some sample!&lt;br&gt; B: Oh, this sample is nice. U fried one?&lt;/p&gt; &lt;p&gt;Dad: Ya, very easy only, here is how: blah blah blah...&lt;br&gt; B: I lazy la, how about u just fry and sell it?&lt;/p&gt; &lt;p&gt;B didn&#39;t buy ikan bilis, but ikan bilis finished selling anyway.&lt;/p&gt; &lt;h2&gt;3rd week&lt;/h2&gt; &lt;p&gt;Dad: Wanna buy fried ikan bilis anot?&lt;br&gt; C: Oh, u fried one?&lt;/p&gt; &lt;p&gt;Dad: Yaya, homemade la. Come test and see.&lt;br&gt; C: Oh, not bad oh. Give me 2 jars.&lt;/p&gt; &lt;p&gt;Dad: Wanna buy some raw one anot? Very easy jek, i teach u.&lt;br&gt; C: Ok la, give me a raw pack to try.&lt;/p&gt; &lt;p&gt;This week we sell more ikan bilis - both raw and fried. B bought the fried one too.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;What happen if dad dun listen to those feedback? His business would be still fine, but no extra gain as a business.&lt;/p&gt; &lt;p&gt;These feedback are vague. It happens informally during conversation. It&#39;s easily ignored if you don&#39;t pay attention to details.&lt;/p&gt; &lt;p&gt;Dad is nt a detailed person, but when come to business somehow he is more sensitive.&lt;/p&gt; &lt;p&gt;Value customer input will earn u more money. Wish everyone has a huat year ahead! 💵💵💵&lt;/p&gt; </content> </entry> <entry> <title>Fish 030</title> <link href="https://jec.fish/fish/20210109"/> <updated>2021-01-09T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210109</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210109.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210109.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210109.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210109.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today I wish I am octopus, hv many hands. Ppl panic buying like no tomorrow as rumors said might mco soon. Crazy ppl.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;I like to observe ppl life through their purchasing behavior.&lt;/p&gt; &lt;p&gt;There&#39;s one Malay auntie we called her &amp;quot;Miss Malaysia&amp;quot;.&lt;/p&gt; &lt;p&gt;She will buy ~3 pieces of salmon everytime her son came home.&lt;/p&gt; &lt;p&gt;Miss Malaysia sounds extra happy everytime when buy salmon. She told us her son like to barbeque salmon for the family.&lt;/p&gt; &lt;p&gt;It has been about a month she didn&#39;t buy salmon. Today she bought crabs, only 2 small one.&lt;/p&gt; &lt;p&gt;Guess her son is nt coming back yet? Too busy today. Didn&#39;t get time to chit chat.&lt;/p&gt; &lt;p&gt;Hopefully they don&#39;t change their salmon favorite to barbeque chicken else lose business. 😂&lt;/p&gt; &lt;p&gt;Faster go home, son! Our salmon sales depends on u.&lt;/p&gt; </content> </entry> <entry> <title>Fish 031</title> <link href="https://jec.fish/fish/20210116"/> <updated>2021-01-16T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210116</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:65.625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210116.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210116.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210116.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210116.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;This is what&#39;s left at 7.52am. Ppl keep storming in after 8 but no more fish.&lt;/p&gt; &lt;p&gt;Heard frm aunties, all the surrounding pasars either closed down due to COVID cases or gt rumors about tht.&lt;/p&gt; &lt;p&gt;We r the last pasar standing at the moment, but it&#39;s js a matter of time. *Touch wood*&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Me and dad conversation ytd.&lt;/p&gt; &lt;p&gt;Me: Life is more important or money?&lt;br&gt; Dad: As long as I got life, money is important. Don&#39;t ask stupid question.&lt;br&gt; Me: (😂 Ok, u win)&lt;/p&gt; &lt;p&gt;Dad: Help me write a letter to apply operation permit frm MITI and movement approval from police station.&lt;/p&gt; &lt;p&gt;Me: Need meh? Ask ur son to help.&lt;br&gt; Dad: Ur bro English nt good.&lt;/p&gt; &lt;p&gt;Me: Ur daughter Malay nt good.&lt;br&gt; Dad: Shut up. Just do what ur dad said.&lt;/p&gt; &lt;p&gt;Me: I don&#39;t want to go pasar tmr. My life is precious.&lt;br&gt; Dad: If me and ur bro COVID positive, u think u can escape?&lt;br&gt; Me: (🙄 ... u win)&lt;/p&gt; &lt;p&gt;Dad: Now is the best time to earn money, before the rules change again.&lt;/p&gt; &lt;p&gt;Dad: We piled up stock for Chinese New Year. Hv to sell those off, else no happy new year. gg.&lt;br&gt; Me: If we all tested positive, then it&#39;s really happy new year. All gg.&lt;/p&gt; &lt;p&gt;Dad: Shut up.&lt;br&gt; Me: 🤐&lt;/p&gt; &lt;p&gt;So here I am, in pasar today. I nvr agree but I think what he said make sense, we r on the same boat. Wish my family luck.&lt;/p&gt; &lt;p&gt;Hope you learn some persuasive skills frm this post lol. 😂 To get what u want, u dun need the other parties to agree. Js need to make sure they do what u want.&lt;/p&gt; </content> </entry> <entry> <title>Fish 032</title> <link href="https://jec.fish/fish/20210123"/> <updated>2021-01-23T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210123</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:59.375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210123.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210123.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210123.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210123.jpg&quot; alt=&quot;COVID-19 test result&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;COVID-19 test result&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Many msg me about the covid cluster at the fish wholesale market.&lt;/p&gt; &lt;p&gt;Thanks for concerns. Yea, my dad went thr. He tested negative. Biz as usual tdy.&lt;/p&gt; &lt;p&gt;Dad even frames and shows the result at stall. Good marketing, but tht test was few days ago, so who knows... 🙈 &lt;em&gt;touchwood&lt;/em&gt; 🙊&lt;/p&gt; &lt;p&gt;I think, if ppl scared enough, they won&#39;t even walk closer to see the tiny &amp;quot;negative&amp;quot; word on the result.&lt;/p&gt; &lt;p&gt;Fish sold out rather early tdy.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;I was angry at my dad few days ago.&lt;/p&gt; &lt;p&gt;Dad: (Send me a photo of his friend&#39;s test result) Can u help me to create a test result like that.&lt;/p&gt; &lt;p&gt;Me: What do u mean by &amp;quot;create&amp;quot;?&lt;br&gt; Dad: U make a fake test result paper for me.&lt;/p&gt; &lt;p&gt;Me: WTF r u talking about? 🤬&lt;br&gt; Dad: I need the test result to enter the wholesale market.&lt;/p&gt; &lt;p&gt;Me: Then u go do it. U r high risk anyway.&lt;br&gt; Dad: A lot of people queue for the RM70+ test leh, I scared I will be infected at the clinic.&lt;/p&gt; &lt;p&gt;Me: Then u go do the test at hospital, no waiting.&lt;br&gt; Dad: More expensive. U pay for me is it?&lt;/p&gt; &lt;p&gt;Me: Hello, it&#39;s your biz. In fact I asked u to off for the week for safety purpose.&lt;br&gt; Dad: It&#39;s js a piece of paper, police won&#39;t really verify properly one. So u js help me to fake one. I knw u can.&lt;/p&gt; &lt;p&gt;Me: I can doesn&#39;t mean I should. I can also go report u now u know?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;So yeah, that test result is REAL, not photoshop. The QR code to the verification website is real as well, I DID NOT FAKE it for him.&lt;/p&gt; &lt;p&gt;We IT ppl can fake these shit, but let&#39;s be ethical.&lt;/p&gt; &lt;p&gt;Be a responsible person, dun try to be smart coz that&#39;s stupid.&lt;/p&gt; &lt;p&gt;Educate / Scold not js the youngster, but old stubborn ppl as well, even they r ur parents.&lt;/p&gt; </content> </entry> <entry> <title>Fish 033</title> <link href="https://jec.fish/fish/20210130"/> <updated>2021-01-30T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210130</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:72.265625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210130.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210130.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210130.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210130.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Photo shown premium prawn peeling service by me for a friend. Price x 125%. 😆&lt;/p&gt; &lt;p&gt;Serve an annoying mumbling auntie today.&lt;/p&gt; &lt;p&gt;A: (Pass me a basket of 2 mackerels) Help me reserve these.&lt;br&gt; Me: Ok. (Kept the basket. Busy packing others fishes)&lt;/p&gt; &lt;p&gt;5 seconds later&lt;/p&gt; &lt;p&gt;A: Help me keep them in the reserve box below.&lt;br&gt; Me: (Still busy) Yes I will do later. It&#39;s safe here. I rmb you. No worries.&lt;/p&gt; &lt;p&gt;ConversationAbove.loop(3 times, every 5 sec) #annoying 🙄😡😒&lt;/p&gt; &lt;p&gt;A: Do it now. Later other ppl steal my fish.&lt;br&gt; Me: 🙄 (No one will steal but ok. Pause operation, kept her 2 mackerels in a bag n put in reserve box)&lt;/p&gt; &lt;p&gt;A few moments later...&lt;/p&gt; &lt;p&gt;Dad: (Added a few more fishes in A&#39;s bag in the reserve box, WITHOUT me noticing)&lt;/p&gt; &lt;p&gt;1 hour later&lt;/p&gt; &lt;p&gt;A and B come at the similar time, asked for their fishes.&lt;/p&gt; &lt;p&gt;B: Where is my fish?&lt;br&gt; Dad: Here. Take out that bag.&lt;/p&gt; &lt;p&gt;Me: (🔍 in box) Eh, where is my bag of 2 mackerels?&lt;br&gt; Dad: Don&#39;t know.&lt;/p&gt; &lt;p&gt;A: See I told you, now my fishes missing. U lah!&lt;br&gt; Me: (Look at B&#39;s bag, look at dad) U steal my mackerels!?&lt;br&gt; Dad: Oh... that&#39;s yours ah...&lt;/p&gt; &lt;p&gt;B: Nevermind, can give her that. (B is a premium &amp;amp; easy-going customer)&lt;br&gt; A: I don&#39;t want! Doesn&#39;t look like mine. The 2 mackerels I picked js nw so chubby, these r too slim, eyes look small, bla bla bla. (Minus 3000 mumbling of her I-told-you-so 🙄)&lt;/p&gt; &lt;p&gt;Dad: It&#39;s yours la.&lt;br&gt; Me: (Losing patience) So u want anot?&lt;br&gt; A: Don&#39;t want. (Bla bla bla again.)&lt;/p&gt; &lt;p&gt;B: Help me to pack it then.&lt;br&gt; Me: Okay. (No fish for u, bye A)&lt;/p&gt; &lt;p&gt;A: (Keep mumbling. My god, can u stop.)&lt;br&gt; Dad: Enough. (Offer her a RM6 fishcake in discounted price RM5)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;So whose fault is it? Auntie, dad or me.&lt;/p&gt; &lt;p&gt;It could be dad who steal, or me coz im nt labeling the fish bag with her name. (Most of the time we dont, js by memory as quantity r small)&lt;/p&gt; &lt;p&gt;Or it could be tht auntie. If she didn&#39;t insist to put in tht reserve box, the fish could be still safe under my watch. 😆&lt;/p&gt; &lt;p&gt;Blame the system n boss lah. There should be protocol to prevent internal conflicts like this. 🙈&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Anyway im happy that annoying auntie doesn&#39;t get any fish. Cannot imagine if I&#39;m her children, keep mumbling by her. #behtahan 🙉&lt;/p&gt; </content> </entry> <entry> <title>Fish 034</title> <link href="https://jec.fish/fish/20210206"/> <updated>2021-02-06T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210206</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210206.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210206.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210206.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210206.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Last weekend before CNY. #最后冲刺 So many fishes, more than what u see in the pic.&lt;/p&gt; &lt;p&gt;Fish and prawn prices hike as well, but sold out anyway. Crazy ppl.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Let&#39;s talk about selling fish to some friends u knw, which I try to avoid most of the time, if i dun knw them well.&lt;/p&gt; &lt;p&gt;Bro gt a friend&#39;s mom bought quite some fish last week, buy again this week.&lt;/p&gt; &lt;p&gt;A: Wah, why so expensive this week?&lt;br&gt; Bro: Because CNY is coming, price hike.&lt;/p&gt; &lt;p&gt;A: I want last week market price.&lt;br&gt; Bro: There is no such thing as last week market price, market price is market price.&lt;/p&gt; &lt;p&gt;A: Wah, I buy a lot last week leh. U and my son so close still want to earn my money like that meh.&lt;br&gt; Bro: 🙄 The supply price goes up, auntie. We earn a little bit only. Already calculate u cheaper.&lt;/p&gt; &lt;p&gt;A: We all r Chinese leh, u still want to chop us like that during CNY. COVID leh, living is hard.&lt;br&gt; Bro: Ya, we r hard oso ah. Risking life to sell u fish.&lt;/p&gt; &lt;p&gt;A: ...&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Anyway, js like doing any sales, friends might nt be the easiest crowd to please.&lt;/p&gt; &lt;p&gt;Some think &amp;quot;since i knw u, u shud nt earn frm me&amp;quot;. Hello, so who pay my bills then? Too bad my family cannot survive by eating sand or grass. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Oh, one side story today. Salmon price hike from RM 70 to 80 per kg. I... forgot about that, still calculate as 70, oops. 🙈&lt;/p&gt; &lt;p&gt;Making losses for that. Dad scolded, but what&#39;s done is done, free labor (me) ain&#39;t gonna cover the losses. 😬 #果然是倒米王&lt;/p&gt; </content> </entry> <entry> <title>Fish 035</title> <link href="https://jec.fish/fish/20210213"/> <updated>2021-02-13T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210213</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:70.8984375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210213.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210213.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210213.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210213.jpg&quot; alt=&quot;steam fish&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;steam fish&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Obviously no pasar tdy but gt story.&lt;/p&gt; &lt;p&gt;As I observed, most reunion dinners hv fish on table. Tq for the businesses. ☺️&lt;/p&gt; &lt;p&gt;That&#39;s the tradition symbolizes &amp;quot;every year gt surplus&amp;quot;, js how money-minded Chinese ppl is. 😂 #年年有余🐟 #扎年&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Dad &amp;amp; bro fight few days ago before CNY. Tension has been quite some time since they pasar together.&lt;/p&gt; &lt;p&gt;Sigh, I received multiple complaint calls frm them per day. 🙉&lt;/p&gt; &lt;p&gt;**&lt;br&gt; [Calls]&lt;/p&gt; &lt;p&gt;Bro called: Can&#39;t stand your dad anymore, it&#39;s spring cleaning, he wanna keep all those useless shit. Bla bla bla~&lt;br&gt; Me: Oh.&lt;/p&gt; &lt;p&gt;Dad called: Ur bro wanna throw away everything. Useful stuff also wanna throw. Why? Bla bla bla~&lt;br&gt; Me: Don&#39;t know.&lt;/p&gt; &lt;p&gt;Bro called: I come stay with u. I don&#39;t wan to stay with him anymore. I come now.&lt;br&gt; Me: Har...&lt;/p&gt; &lt;p&gt;Dad called: Ask ur bro no need to come home anymore. I can stay myself. Ask him forever don&#39;t need to come back.&lt;br&gt; Me: Har...&lt;/p&gt; &lt;p&gt;**&lt;br&gt; Dad called: U come help me sell fish tmr. Don&#39;t need ur useless bro anymore.&lt;br&gt; Me: Cannot. I am busy working.&lt;/p&gt; &lt;p&gt;Dad: Shut up. U r my daughter, come help me, it&#39;s an order.&lt;br&gt; Me: He is also your son. U go settle with him. Why u two so funny one...&lt;/p&gt; &lt;p&gt;**&lt;br&gt; Afternoon. Bro showed up at my place.&lt;/p&gt; &lt;p&gt;Me: It&#39;s almost CNY. What happen to u both oh...&lt;br&gt; Bro: Ur dad really xyzzzzz bla bla bla~&lt;/p&gt; &lt;p&gt;Me: So reunion dinner how?&lt;br&gt; Bro: Don&#39;t care. Ask the old man eat himself.&lt;/p&gt; &lt;p&gt;Me: Har...&lt;br&gt; Bro: I wanna stay with u till end of month.&lt;/p&gt; &lt;p&gt;Me: Cannot. Max can stay 1 day only.&lt;br&gt; Bro: Walao, u only hv one bro. Why u treat me like that!&lt;/p&gt; &lt;p&gt;Me: U only hv one dad oso. U hv to go pasar tmr. Why both of u so childish!&lt;/p&gt; &lt;p&gt;**&lt;br&gt; Night. After bro talked a lot and ate some ice cream, fruits, CNY biscuits, etc (ate a lot) at my place, he became happier.&lt;/p&gt; &lt;p&gt;Bro: I can go home now.&lt;br&gt; Me: Oh, not going to overnight ya?&lt;/p&gt; &lt;p&gt;Bro: Nvm la, I forgive him.&lt;br&gt; Me: Thanks God. Everytime u come I need to restock my food. Pls go away.&lt;/p&gt; &lt;p&gt;**&lt;br&gt; Family, is family. No overnight hatred we said. Support and forgive.&lt;/p&gt; &lt;p&gt;I am nt a good conflict resolver but I think learning nt to throw harsh words during argument is essential (They r bad examples).&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Anyway, reunion dinner did happened, in the messy home with lots of useless shit. 😂&lt;/p&gt; &lt;p&gt;That&#39;s the fish I cooked for our reunion dinner. Wish I got surplus 🐟 frm both of them on mahjong 🀄 table.&lt;/p&gt; </content> </entry> <entry> <title>Fish 036</title> <link href="https://jec.fish/fish/20210220"/> <updated>2021-02-20T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210220</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:65.234375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210220.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210220.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210220.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210220.jpg&quot; alt=&quot;abalone&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;abalone&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar still off tdy. That&#39;s the sea cucumber and fish maws my dad sold. Yum yum.&lt;/p&gt; &lt;p&gt;There&#39;re abalone in it too. But that&#39;s a low quality one. Why?&lt;/p&gt; &lt;p&gt;Dad: Wah, ppl come back and find the abalone we sold.&lt;br&gt; Me: Oh?&lt;/p&gt; &lt;p&gt;Dad: Ppl said it&#39;s good. Gt an auntie even came back and buy 6 more.&lt;br&gt; Me: Doesn&#39;t matter to us. U didn&#39;t even left one for us. #再好吃都不关我们事&lt;/p&gt; &lt;p&gt;Dad: This one we r eating r given by supplier one.&lt;br&gt; Me: No wonder. U cheapskate so ppl give u cheap abalone oso la. 😂&lt;/p&gt; &lt;p&gt;Dad: Cheapskate what. Got abalone is good enough ady. Still want to talk 3 talk 4 tokok. Children at Africa gt nothing to eat u knw.&lt;br&gt; Me: (Since when u care about Africa, u don&#39;t even care about us.) 🙄&lt;/p&gt; &lt;p&gt;I hope parents these days don&#39;t keep talking about Africa children like that. It&#39;s nt exactly like that lol.&lt;/p&gt; &lt;p&gt;Anyway, Gong Xi Fatt Chai all!&lt;/p&gt; </content> </entry> <entry> <title>Crosshair Highlight in Google Sheets with Apps Script</title> <link href="https://jec.fish/blog/highlight-apps-script"/> <updated>2021-02-24T00:00:00-00:00</updated> <id>https://jec.fish/blog/highlight-apps-script</id> <summary>Crosshair Highlight in Google Sheets with Google Apps Script</summary> <category term="blog"/> <content type="html">&lt;p&gt;Let&#39;s create a new Highlight menu in Google Sheets with Google Apps Script to perform row, column and crosshair highlight.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.4453125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/highlight-apps-script-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/highlight-apps-script-01.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/highlight-apps-script-01.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-01.jpg&quot; alt=&quot;The Highlight menu and crosshair highlight&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;The Highlight menu and crosshair highlight&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;If you don&#39;t care about the steps to do it, feel free to scroll to the end and copy paste the code! 😆&lt;/p&gt; &lt;h2&gt;Background&lt;/h2&gt; &lt;p&gt;&lt;a href=&quot;https://www.google.com/sheets/about/&quot;&gt;Google Sheets&lt;/a&gt; has &lt;a href=&quot;https://stackoverflow.com/a/25815667&quot;&gt;keyboard shortcuts&lt;/a&gt; to perform row and column highlight but not both:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;CTRL&lt;/code&gt; + &lt;code&gt;SPACE&lt;/code&gt; highlights the column&lt;/li&gt; &lt;li&gt;&lt;code&gt;SHIFT&lt;/code&gt; + &lt;code&gt;SPACE&lt;/code&gt; highlights the row&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;However, I&#39;ve configured my MacBook &lt;code&gt;CTRL&lt;/code&gt; + &lt;code&gt;SPACE&lt;/code&gt; shortcut to something else and it overridden the Sheets shortcut. 🤷🏽‍♀️ It&#39;s annoying and Sheets doesn&#39;t support crosshair highlight yet which is extremely useful for viewing big data sheet.&lt;/p&gt; &lt;p&gt;So... let&#39;s roll our own function with &lt;a href=&quot;https://developers.google.com/apps-script&quot;&gt;Google Apps Script&lt;/a&gt; to do so.&lt;/p&gt; &lt;h2&gt;Creating the Highlight menu&lt;/h2&gt; &lt;p&gt;In a spreadsheet, Open &lt;strong&gt;Tools&lt;/strong&gt; &amp;gt; &lt;strong&gt;Script editor&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;Create a new &lt;strong&gt;File&lt;/strong&gt;, name it &lt;strong&gt;Code.gs&lt;/strong&gt; or whatever name you like.&lt;/p&gt; &lt;p&gt;We will be creating a new &lt;strong&gt;Highlight&lt;/strong&gt; menu with 3 sub menus:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Highlight row&lt;/li&gt; &lt;li&gt;Highlight column&lt;/li&gt; &lt;li&gt;Highlight crosshair&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Here is the code:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;createHighlightMenu&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; SpreadsheetApp&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveSpreadsheet&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addMenu&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Highlight&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightRow&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightColumn&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight crosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightCrosshair&#39;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightRow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// code later&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// code later&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightCrosshair&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// code later&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;In the &lt;code&gt;createHighlightMenu&lt;/code&gt; function, the &lt;code&gt;name&lt;/code&gt; under the &lt;a href=&quot;https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet#addMenu(String,Object)&quot;&gt;&lt;code&gt;.addMenu&lt;/code&gt;&lt;/a&gt; function refers to the menu display name on the Sheets UI and &lt;code&gt;functionName&lt;/code&gt; is the name of the function. We will code these functions in a bit.&lt;/p&gt; &lt;h2&gt;Add Highlight menu automatically&lt;/h2&gt; &lt;p&gt;Now we have the function to create &lt;strong&gt;Highlight&lt;/strong&gt; menu, we need a way to add the menu automatically everytime when we open the Sheets.&lt;/p&gt; &lt;p&gt;We can use &lt;a href=&quot;https://developers.google.com/apps-script/guides/triggers&quot;&gt;Triggers&lt;/a&gt; to do so.&lt;/p&gt; &lt;p&gt;On the left menu, select &lt;strong&gt;Triggers&lt;/strong&gt;, then &lt;strong&gt;create a new Trigger&lt;/strong&gt;.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:53.515625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/highlight-apps-script-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/highlight-apps-script-02.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/highlight-apps-script-02.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-02.jpg&quot; alt=&quot;Steps to open Triggers&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Steps to open Triggers&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Follow my configuration below and save it:&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:96.58203125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/highlight-apps-script-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/highlight-apps-script-03.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/highlight-apps-script-03.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-03.jpg&quot; alt=&quot;Trigger configuration&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Trigger configuration&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Basically we are setting our &lt;code&gt;createHighlightMenu&lt;/code&gt; function earlier (the Highlight menu) to run everytime when the spreadsheet opens.&lt;/p&gt; &lt;p&gt;Next, go back the spreadsheet and hit refresh. Wait for a moment, the Highlight menu should appear at the end of the menu.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:26.66015625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/highlight-apps-script-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/highlight-apps-script-04.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/highlight-apps-script-04.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-04.jpg&quot; alt=&quot;The Highlight menu&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;The Highlight menu&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Creating the Highlight functions&lt;/h2&gt; &lt;p&gt;Go back to our &lt;code&gt;Code.gs&lt;/code&gt; file. Let&#39;s start coding the Highlight functions. The basis of all 3 highlight functions (row, column, crosshair) are the same. Therefore, in order to save some coding effort, we will add one more function &lt;code&gt;highlight(type)&lt;/code&gt; with a parameter to handle the actual operation.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// code later&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightRow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightCrosshair&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;crosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Great, now let&#39;s look at the &lt;code&gt;highlight&lt;/code&gt; function.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; ss &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; SpreadsheetApp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActive&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; s &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveSheet&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; a &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveCell&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; col &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; row &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; maxColumns &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMaxColumns&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; maxRows &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMaxRows&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; c &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; col&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; maxRows&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// the whole column&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; r &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;row&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; maxColumns&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// the whole row&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; ar &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;row&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; col&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// the current active cell&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token comment&quot;&gt;// Highlight properly based on type&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; ranges &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;type &lt;span class=&quot;token operator&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;r&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;type &lt;span class=&quot;token operator&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;c&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;ar&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRangeList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;ranges&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;activate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Let&#39;s walkthrough the code together:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;First we need to get the current selected cell &lt;a href=&quot;https://developers.google.com/apps-script/reference/spreadsheet/sheet#getactivecell&quot;&gt;&lt;code&gt;ss.getActiveCell()&lt;/code&gt;&lt;/a&gt;.&lt;/li&gt; &lt;li&gt;Then from the current selected cell, we can get the column, row information. We also need to get the max row and column number because we need to highlight the whole row and column later.&lt;/li&gt; &lt;li&gt;Next, we use the &lt;a href=&quot;https://developers.google.com/apps-script/reference/spreadsheet/sheet#getrangerow,-column&quot;&gt;&lt;code&gt;getRange(row, column, numRows?, numColumns?)&lt;/code&gt;&lt;/a&gt; function to set the appropriate highlight range - column, row and the current cell &lt;code&gt;ar&lt;/code&gt;.&lt;/li&gt; &lt;li&gt;Depending on the type, we will highlight the appropriate ranges with this line &lt;code&gt;ss.getRangeList(ranges).activate();&lt;/code&gt;. For example, if it&#39;s &lt;code&gt;row&lt;/code&gt; type (&lt;code&gt;if (type != &#39;column&#39;)&lt;/code&gt;), then we won&#39;t highlight column.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;Save your code and viola. Run it yourself and see it in action! 😃&lt;/p&gt; &lt;p&gt;Here are the demos:&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-05.gif&quot; alt=&quot;Row highlight&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Row highlight&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-06.gif&quot; alt=&quot;Column highlight&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Column highlight&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-07.gif&quot; alt=&quot;Crosshair highlight&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Crosshair highlight&lt;/figcaption&gt;&lt;/figure&gt; &lt;h2&gt;Bonus tip: Highlight on select&lt;/h2&gt; &lt;p&gt;Says, if you want the crosshair highlight happens automatically when you select a cell, you can add this function in the code.&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;onSelectionChange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;crosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;p&gt;&lt;a href=&quot;https://developers.google.com/apps-script/guides/triggers#onselectionchangee&quot;&gt;&lt;code&gt;onSelectionChange(e)&lt;/code&gt;&lt;/a&gt; is basically a trigger provided by the Sheets.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:51.125%&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/highlight-apps-script-08.gif&quot; alt=&quot;Crosshair highlight on selection change&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Crosshair highlight on selection change&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Save your code and test it on your page. Take note that the performance is quite slow. It takes a few seconds to crosshair highlight after you select a cell.&lt;/p&gt; &lt;h2&gt;Final code&lt;/h2&gt; &lt;p&gt;Finally, the complete code:&lt;/p&gt; &lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* Code.gs */&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;createHighlightMenu&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; SpreadsheetApp&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveSpreadsheet&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addMenu&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Highlight&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightRow&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightColumn&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Highlight crosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; functionName&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;highlightCrosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; ss &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; SpreadsheetApp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActive&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; s &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveSheet&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; a &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getActiveCell&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; col &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; row &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; maxColumns &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMaxColumns&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; maxRows &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getMaxRows&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; c &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; col&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; maxRows&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; r &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;row&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; maxColumns&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; ar &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; s&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRange&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;row&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; col&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;br&gt; &lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; ranges &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;type &lt;span class=&quot;token operator&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;r&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;type &lt;span class=&quot;token operator&quot;&gt;!=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;c&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; ranges&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;ar&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getA1Notation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; ss&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getRangeList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;ranges&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;activate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightRow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;row&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightColumn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;column&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;highlightCrosshair&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;highlight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;crosshair&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// Uncomment this function if you need&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// function onSelectionChange(e) {&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// highlight(&#39;crosshair&#39;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token comment&quot;&gt;// }&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1364499699386884096&quot;&gt; twitter.com/jecfish/status/1364499699386884096 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> <entry> <title>Fish 037</title> <link href="https://jec.fish/fish/20210227"/> <updated>2021-02-27T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210227</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210227.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210227.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210227.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210227.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Officially back at fish selling today. CNY js over, but I still greet every auntie Happy New Year tdy. 😁&lt;/p&gt; &lt;p&gt;We sell less stock tdy, but customer flow is smooth. I like it this way without crazy crowd coz conversations can happen.&lt;/p&gt; &lt;p&gt;My dad might think otherwise. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;A: I don&#39;t want the mouth and tail, help me chop it off.&lt;br&gt; Me: Dad, u roger that?&lt;br&gt; Dad: Okay.&lt;/p&gt; &lt;p&gt;(A few moments later)&lt;/p&gt; &lt;p&gt;Dad: Done, pack it.&lt;br&gt; A: Aiyo, why still gt head and tail one, i said dun wan ady. Why dun listen to me?&lt;/p&gt; &lt;p&gt;Me: Haiya, he is old ady, memory faded easily nowadays, haha. Will cut it for u now ya.&lt;/p&gt; &lt;p&gt;Dad: CNY leh, no head no tail nt good. Symbolize u do work nt complete and nt responsible leh. (做事无头无尾）&lt;/p&gt; &lt;p&gt;A: (Worried) Har, like that one meh, but CNY is over ady, js cut la. Should be fine right?&lt;/p&gt; &lt;p&gt;Me: Dad, forgot to cut say forgot la, stop bluffing k. 😂&lt;/p&gt; &lt;p&gt;Auntie: Ceh, don&#39;t learn frm ur dad, always talk 3 talk 4.&lt;/p&gt; &lt;p&gt;Dad, Auntie, Me: Laughing.&lt;/p&gt; &lt;p&gt;Keeping customers entertained while we making/fixing mistakes is an important skill. I think we did it well.&lt;/p&gt; &lt;p&gt;If a joke cannot fix the problem, then giving fish discount probably will. 😆&lt;/p&gt; &lt;p&gt;Have a lovely weekend all!&lt;/p&gt; </content> </entry> <entry> <title>Fish 038</title> <link href="https://jec.fish/fish/20210306"/> <updated>2021-03-06T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210306</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:78.515625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210306.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210306.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210306.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210306.jpg&quot; alt=&quot;fish packs&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish packs&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;This is how we mark customers&#39; purchases. Name on plastics.&lt;/p&gt; &lt;p&gt;Let&#39;s talk about how Chinese name relates to society progress.Then I share about a problem with the above marking method.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;The two words on plastics are common names for old old generation (50s) - 金(gold), 财(prosper). Other common ones are 银(silver), 富(rich), 发(be rich).&lt;/p&gt; &lt;p&gt;From the names, u knw how much Chinese like money 💰- that reflect the hardship and poverty the old one went thru, so they wish the next generation $$$.&lt;/p&gt; &lt;p&gt;As life getting better over time, less pressure on $$$, then naming changed for older generation (70s) - 扬(famous), 胜(win), 建(build), 丽(beautiful), 爱(love), 诗(poem).&lt;/p&gt; &lt;p&gt;See it moved frm $$$ to wishing:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;men: hv a career / society status, winning, build something, be famous #扬名立万 #名扬四海&lt;/li&gt; &lt;li&gt;women: js to be love, poetic, beautiful&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Then for the younger generation, the names become more artsy, creative and spontaneous - 雨(rain), 宇 (universe), 峰 (mountain), 紫 (purple).&lt;/p&gt; &lt;p&gt;Even better, I start seeing some parent try to make the names sound like Korean stars or just direct translated from English (For example Henry Lim - 林亨力). 😂&lt;/p&gt; &lt;p&gt;--&lt;br&gt; Names are gifts from parents to us. Hopefully parents choose their gifts wisely.&lt;/p&gt; &lt;p&gt;Make sure it at least sound acceptable in a few commonly used languages, so ur kids dun get laughed by ppl, else it become nightmare. 😆&lt;/p&gt; &lt;p&gt;--&lt;br&gt; There are a few 金(gold) and 财(prosper) in pasar, so I did mix up their fishes sometimes. 🙈&lt;/p&gt; </content> </entry> <entry> <title>Fish 039</title> <link href="https://jec.fish/fish/20210313"/> <updated>2021-03-13T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210313</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210313.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210313.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210313.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210313.jpg&quot; alt=&quot;long queue&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;long queue&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Jealous! The opposite stall is super crowded tdy. Guess what they sell? (Reveal at the end)&lt;/p&gt; &lt;p&gt;See our stall gt only 1 customer and im so free to take photo, u knw how good is our business tdy la... 🙈&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Today I got challenged again. This time is my fish picking skill.&lt;/p&gt; &lt;p&gt;Auntie: Ei, help me choose 3 pomfrets.&lt;br&gt; Me: Okay.&lt;/p&gt; &lt;p&gt;Auntie: Har, you ah? U knw hw to choose anot oh?&lt;br&gt; Me: Of course I knw, depends on whether u trust me or not jer.&lt;/p&gt; &lt;p&gt;Auntie: Err... Ok la, u choose ba. (Sound nt convincing)&lt;br&gt; Me: (Picking)&lt;/p&gt; &lt;p&gt;(Dad freed up frm fish processing)&lt;/p&gt; &lt;p&gt;Auntie: Eh, ur daughter really knw hw to pick one anot...&lt;/p&gt; &lt;p&gt;Me: 🙄🙄 (Finished pick, but I put back all the fishes) Aiya, let&#39;s my dad pick for u la, the fishes are fresher tht way.&lt;br&gt; Auntie: Haha, he is expert ma, nt like me and u.&lt;/p&gt; &lt;p&gt;Me: Haha, ya la.&lt;br&gt; Dad: (Picking the same fishes I put back)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Did I sound sarcastic? Partially.&lt;/p&gt; &lt;p&gt;Am I fed up? Nah, I put back the fishes nt becoz i 😠, js because I can read her mind. She is happier if it&#39;s dad&#39;s pick.&lt;/p&gt; &lt;p&gt;It&#39;s my dad&#39;s stall, let him be the face of the business, I don&#39;t mind.&lt;/p&gt; &lt;p&gt;It&#39;s nt perception, it&#39;s the fact tht my dad IS MORE experienced than me, but all fishes r fresh and frm the same pool, no special picking skill needed.&lt;/p&gt; &lt;p&gt;U don&#39;t always need the most experienced to do a simple job.&lt;/p&gt; &lt;p&gt;Js saying, give some chance to junior la. 😆&lt;/p&gt; &lt;hr&gt; &lt;p&gt;That&#39;s a vegetarian food stall, only operate on 1st and 15th (lunar calendar). #初一十五&lt;/p&gt; &lt;p&gt;Usually my dad&#39;s stall is the busiest. This is an exception, and cant believe it&#39;s a vegetarian stall. 😆&lt;/p&gt; &lt;p&gt;Taste good. I knw coz an auntie customer helped me to queue and buy js nw. Good auntie.&lt;/p&gt; </content> </entry> <entry> <title>Fish 040</title> <link href="https://jec.fish/fish/20210320"/> <updated>2021-03-20T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210320</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:60.3515625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210320.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210320.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210320.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210320.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Super busy day. Many fishes, many customers, partly coz my dad was off ytd due to a rat visiting our house. 🙈&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Today I became a superstar in the pasar, because... my dad bought the #feminine magazine few days ago, put at the stall let ppl read. 🙄&lt;/p&gt; &lt;p&gt;He also shared my &lt;a href=&quot;https://youtu.be/kEieXe-3DGU&quot;&gt;videos&lt;/a&gt; and &lt;a href=&quot;https://feminine.com.my/news/choosetochallenge-%e8%b0%b7%e6%ad%8c%e6%8a%80%e6%9c%af%e5%bc%80%e5%8f%91%e5%a5%b3%e4%b8%93%e5%ae%b6-%e9%98%ae%e8%b4%9d%e7%90%aa%e4%b8%8d%e5%ae%b9%e5%bf%8d%e6%80%a7%e5%88%ab%e6%ad%a7/&quot;&gt;interview URLs&lt;/a&gt; with some customers and pasar sellers. 🙄&lt;/p&gt; &lt;p&gt;Dad: Did the fruit stall auntie asks u anything?&lt;br&gt; Me: Ya, she asked about the interview.&lt;/p&gt; &lt;p&gt;Dad: She always like to show off her children ma, so I purposely shared with her.&lt;br&gt; Me: So what&#39;s the difference btw u and her since u show off oso?&lt;/p&gt; &lt;p&gt;Dad: I won&#39;t if she doesn&#39;t.&lt;br&gt; Me: But in the interview I did point out tht u treat son better wor, even educational wise. #重男轻女&lt;/p&gt; &lt;p&gt;Dad: Doesn&#39;t matter, that&#39;s common thinking in old generation. I&#39;m js one of them. The point is that train u well.&lt;/p&gt; &lt;p&gt;Me: 🙄 (Should I say thank you)&lt;/p&gt; &lt;p&gt;Well, I don&#39;t enjoy limelight in pasar setting. So many kepochi questions I need to entertain, and no aunties offer to introduce me their sons. 😂&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://feminine.com.my/news/choosetochallenge-%e8%b0%b7%e6%ad%8c%e6%8a%80%e6%9c%af%e5%bc%80%e5%8f%91%e5%a5%b3%e4%b8%93%e5%ae%b6-%e9%98%ae%e8%b4%9d%e7%90%aa%e4%b8%8d%e5%ae%b9%e5%bf%8d%e6%80%a7%e5%88%ab%e6%ad%a7/&quot;&gt;Feminine Magazine&lt;/a&gt; - A popular long running local Chinese magazine. I did an interview with them.&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 041</title> <link href="https://jec.fish/fish/20210327"/> <updated>2021-03-27T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210327</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.25%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210327.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210327.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210327.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210327.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Today specialty - 9-section shrimps. #九节虾&lt;/p&gt; &lt;p&gt;Sold out, nt manage to hide some beforehand, ish. 🙄&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Today is questions time! (A pasar auntie spotted me eating with a guy closely &amp;amp; reported to dad few days ago)&lt;/p&gt; &lt;p&gt;Dad: So u don&#39;t need to go to Germany ady is it?&lt;br&gt; Me: Don&#39;t knw yet. Why?&lt;/p&gt; &lt;p&gt;Dad: Then why u paktor?&lt;br&gt; Me: Har, cannot meh? U want me to go Germany and find an angmo is it?&lt;/p&gt; &lt;p&gt;Dad: No la, but what&#39;s your plan then?&lt;br&gt; Me: What plan? No plan.&lt;/p&gt; &lt;p&gt;Dad: Later marry, baby all these how?&lt;br&gt; Me: Walao, eh! Boss, chill! Don&#39;t think so long first k.&lt;/p&gt; &lt;p&gt;Dad: Har? Then what for u paktor!?&lt;br&gt; Me: Because I feel like it, cannot meh!&lt;/p&gt; &lt;p&gt;Dad: If I say cannot u listen meh?&lt;br&gt; Me: Since u knw I dun listen, then y u still mumbling like those pasar aunties!!!&lt;/p&gt; &lt;p&gt;Dad: ... 🤦(Continue cut fish, thinking what kind of daughter is this)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;In fact I got many similar &amp;quot;caring&amp;quot; queries and congrats messages everywhere.&lt;/p&gt; &lt;p&gt;As Chinese saying - &amp;quot;boat will be straight when reach to jetty&amp;quot; lah. (All issues will hv solution when the time comes) #船到桥头自然直&lt;/p&gt; &lt;p&gt;Whatever u ask me, pls go and ask God. Coz only She knows.&lt;/p&gt; &lt;p&gt;I don&#39;t/can&#39;t think too far ahead, js go with the flow. So pls stop &amp;quot;caring&amp;quot; / kepochi me k!&lt;/p&gt; </content> </entry> <entry> <title>Fish 042</title> <link href="https://jec.fish/fish/20210403"/> <updated>2021-04-03T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210403</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:73.92578125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210403.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210403.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210403.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210403.jpg&quot; alt=&quot;fish packs&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish packs&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Ishh, today morning drizzling, make me work OT...&lt;/p&gt; &lt;p&gt;These 2 bags got premium packing (with ice), premium marking (with emoji) and premium delivery service by me. 😎&lt;/p&gt; &lt;hr&gt; &lt;p&gt;9.30 am still left 5 white pomfrets #白昌&lt;/p&gt; &lt;p&gt;Me: Dad, do u want to see top sales in action?&lt;br&gt; Dad: I am the top of the top already.&lt;/p&gt; &lt;p&gt;Me: 🙄 Walao, so u want me to help sell all these fishes anot?&lt;br&gt; Dad: Want lah. Can ah?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Call 1&lt;/p&gt; &lt;p&gt;Me: (Calling Kenneth) Jie ah, wanna buy pomfret? Good for babies.&lt;br&gt; Ken: How much?&lt;/p&gt; &lt;p&gt;Me: Buy 2 la, RM 39.&lt;br&gt; Ken: RM 39 each or total?&lt;/p&gt; &lt;p&gt;Me: (The fact he asked that question mean he doesn&#39;t usually buy fish 😂) It&#39;s total lah.&lt;br&gt; Ken: Ok.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Call 2&lt;/p&gt; &lt;p&gt;Me: (Calling Hugo) Kwan ah, wanna buy pomfrets for ur family?&lt;br&gt; Hugo: Oh, ok.&lt;/p&gt; &lt;p&gt;Me: How many u want? 2?&lt;br&gt; Hugo: Ok.&lt;/p&gt; &lt;p&gt;Me: (Didn&#39;t even ask price. 😂)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Sell 4 fishes in 5 min. Not bad ah. 😎&lt;/p&gt; &lt;p&gt;Just when I wanna make another call to sell the last one, 1 auntie passed by.&lt;/p&gt; &lt;p&gt;Me: Wah, auntie, lucky u, left the last pomfret waiting for u.&lt;br&gt; Auntie: Really ah? Fresh anot?&lt;/p&gt; &lt;p&gt;Me: (Straight weighting) As fresh as your look today. Last one sell u cheap cheap, RM 18. (Actually I didn&#39;t discount)&lt;br&gt; Auntie: Haha, okay, help me pack it.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Woohoo, sold out. Off work!&lt;/p&gt; &lt;p&gt;Me: How&#39;s your daughter performance?&lt;br&gt; Dad: U can inherit my fish business ady.&lt;/p&gt; &lt;p&gt;Me: 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Learning today: It&#39;s okay to utilize your friends sometimes, especially it&#39;s for their own good, fresh fishes! 😂&lt;/p&gt; &lt;p&gt;Thanks my friends Hugo and Kenneth for giving me a chance to be the top of the top sales today!&lt;/p&gt; </content> </entry> <entry> <title>Fish 043</title> <link href="https://jec.fish/fish/20210410"/> <updated>2021-04-10T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210410</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:86.1328125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210410.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210410.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210410.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210410.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;That&#39;s what left at 8.40 am. I leave the stall, off work.&lt;/p&gt; &lt;p&gt;Energy was running low for both dad and me for the week. We hv our own issues to deal with and family one.&lt;/p&gt; &lt;p&gt;Dad has nt been operating biz for the whole week. Pasar aunties were quite concern.&lt;/p&gt; &lt;p&gt;A: Wah, my grandchild has no fishes to eat for a week ady.&lt;br&gt; B: Where were u go holiday?&lt;br&gt; C: Fuiyor, rich ady hor, no need work.&lt;br&gt; D: Wow, u still alive, thought u r dead. (In fact a few pasar operators js passed away)&lt;/p&gt; &lt;p&gt;In fact, my dad feels boring and lonely, also... lazy. I support he took time off, coz he really doesn&#39;t need to work hard.&lt;/p&gt; &lt;p&gt;His loneliness isn&#39;t something me as a children can help with. He did hang out with friends everyday, but I guess that&#39;s different too.&lt;/p&gt; &lt;p&gt;What he is looking is a companion. The feeling that someone is thr when he&#39;s home.&lt;/p&gt; &lt;p&gt;The fact tht he&#39;s alone (even with kids) facing 4 side of walls in home/room scares him.&lt;/p&gt; &lt;p&gt;I think many of us face similar feeling sometimes. It&#39;s ok, js need to deal with it.&lt;/p&gt; &lt;p&gt;If anyone has aunties wanna intro him, pm lol! 😂&lt;/p&gt; &lt;p&gt;#CMB for dad.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://coffeemeetsbagel.com/&quot;&gt;CMB&lt;/a&gt; - Coffee meets Bagel, a dating app.&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 044</title> <link href="https://jec.fish/fish/20210417"/> <updated>2021-04-17T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210417</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:86.1328125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210417.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210417.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210417.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210417.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Oops, 9.30am, still left a flounder, golden pomfret, salmon, and a few black pomfrets. Nt good, nt good.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Me: So do u hv anything to say to me?&lt;br&gt; Dad: So fast one. Why ah? Is it because of reason x.&lt;/p&gt; &lt;p&gt;Me: No, because he is a jerk.&lt;br&gt; Dad: Men don&#39;t deserve good treatment frm girls unless they prove otherwise.&lt;/p&gt; &lt;p&gt;Me: Wise. Including you.&lt;br&gt; Dad: Ya, men are bad. Don&#39;t waste your kindness on them. #犯贱&lt;/p&gt; &lt;p&gt;Me: I&#39;ll take ur advise and this cod fish.&lt;br&gt; Dad: (Weight) Ok, RM 32.&lt;/p&gt; &lt;p&gt;Me: U don&#39;t deserve my kindness too. U took advantage of me, free labor n charge me for this tiny piece of fish.&lt;br&gt; Dad: ...&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Well, my friend asked: What would you say looking back.&lt;/p&gt; &lt;p&gt;Me: I completed a full cycle of dating app experience. Achievement unlocked.✌️&lt;/p&gt; &lt;p&gt;Friend: Is it worth all the heartache though.&lt;br&gt; Me: Worth, I learned my lesson ma. Warm up engine. 😂&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Life lesson: There are many greater things to focus in life, there&#39;re ppl who worth it.&lt;/p&gt; &lt;p&gt;Thanks buddies who send regards, dessert, free meals, wine, beer, companionship my way. Overload with love, u all knw who u r. 🥰&lt;/p&gt; &lt;p&gt;Make me realized, I am such a great person to be with. 😎&lt;/p&gt; &lt;p&gt;I&#39;m fine, for real, else I don&#39;t deserve all your kindness too.&lt;/p&gt; </content> </entry> <entry> <title>Fish 045</title> <link href="https://jec.fish/fish/20210424"/> <updated>2021-04-24T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210424</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:63.76953125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210424.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210424.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210424.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210424.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;A gg day, both me and the pasar business. Raining, customers all hv good sleep didn&#39;t come pasar. Me still woke up at 6 despite sleeping at 3am, tired. 🥺😴&lt;/p&gt; &lt;hr&gt; &lt;p&gt;&amp;quot;You should treat all customers equally, u r being unfair,&amp;quot; an auntie told dad today.&lt;br&gt; The conversation started coz my dad has a whole bag of hidden glutinous fishes #糯米糍 (nt putting on the table coz all pre-booked, such hot fish).&lt;br&gt; Auntie A noticed it when my dad took it out for a pre-booked customer.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;A: Eh, why got glutinous fish. I want.&lt;br&gt; Dad: All booked ady, limited.&lt;/p&gt; &lt;p&gt;A: Aiyo, I told u long time ago to reserve for me if got stock.&lt;br&gt; Dad: Is it, I forgot.&lt;/p&gt; &lt;p&gt;(Dad packing glutinous fishes for a premium customer 😎)&lt;br&gt; A: (Triggered) Am I not a big customer so u didn&#39;t reserve for me?&lt;br&gt; Dad: No la, limited stock really. Next time sure reserve for u.&lt;/p&gt; &lt;p&gt;A: But u could hv give the limited stock to me. I buy fish frm u every week leh. Always spend quite a bit, am I not a big customer?&lt;br&gt; A: You should treat all customers equally, u r being unfair. I am big customer also.&lt;br&gt; Dad: (Squeeze out a glutinous fish somewhere) Ok la, give u one la, took frm another customer one.&lt;/p&gt; &lt;p&gt;A: Haiz, u knw I hv big family, I want two.&lt;br&gt; Dad: Really don&#39;t hv ady. Do u want it?&lt;/p&gt; &lt;p&gt;A: Don&#39;t want, I want two.&lt;br&gt; Dad: Really dun hv. Next time la.&lt;/p&gt; &lt;p&gt;B: Give me that as well.&lt;br&gt; A: (Paused for a min) I think I js take the one.&lt;br&gt; B: No, js now u said dun want already.&lt;br&gt; A: But now I want it.&lt;/p&gt; &lt;p&gt;Me: (gg la, customers fight)&lt;br&gt; Dad: (Talk to 😎 Js give her the one la.&lt;/p&gt; &lt;p&gt;B: Cannot, I lazy to come out buy fish tmr and she didn&#39;t want it js nw.&lt;br&gt; A: Why are you all being so unfair to me, it supposed to be mine, bla bla bla~~~&lt;/p&gt; &lt;p&gt;Me: 🥱 (It&#39;s js a fish!)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;What is equality? Standard service are available to all customers (clean, pack, pretty smiles by me, etc).&lt;br&gt; As a biz, of course there&#39;re service offered based on tier lol.&lt;/p&gt; &lt;p&gt;Anyone can reserve fish, but the fish availability is subject to market and... priority.&lt;br&gt; I mean, seriously. Premium customers who generate have higher priority.&lt;/p&gt; &lt;p&gt;Is it unfair? That&#39;s js the life fact one needs to accept. Upgrade your membership if u want it, stop act and think you are one coz...&lt;/p&gt; &lt;p&gt;YOU. ARE. NOT. AS. PREMIUM. AS. YOU. THOUGHT.&lt;/p&gt; &lt;p&gt;#不要自以为是个人物&lt;/p&gt; </content> </entry> <entry> <title>Fish 046</title> <link href="https://jec.fish/fish/20210501"/> <updated>2021-05-01T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210501</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:78.125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210501.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210501.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210501.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210501.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;No pasar fish story this week because im off! 👋&lt;/p&gt; </content> </entry> <entry> <title>Fish 047</title> <link href="https://jec.fish/fish/20210508"/> <updated>2021-05-08T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210508</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:77.1484375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210508.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210508.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210508.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210508.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Fuiyoh, today sold out at 7.55 am! No fish next week due to Raya celebration and COVID cluster in the wholesale market.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;My dad doesn&#39;t hv high education so his English sucks. A regular customer came today.&lt;/p&gt; &lt;p&gt;Dad: Take out Angie&#39;s fishes frm the secret box.&lt;br&gt; Me: Ok. What fishes are those ah?&lt;/p&gt; &lt;p&gt;Dad: You find la, I wrote her name on it already.&lt;br&gt; Me: (Looking for ANGIE but cannot find.)&lt;/p&gt; &lt;p&gt;Me: Don&#39;t hv leh, u sure ah?&lt;br&gt; Also me: (Spot the plasctic with N.G on it.) N G !?!?&lt;/p&gt; &lt;p&gt;Dad: Ya lah, this one. So stupid u, so obvious also need to find so long.&lt;/p&gt; &lt;p&gt;Ok, you win. Me burst into laugher. The customer as well. 🤣&lt;/p&gt; &lt;p&gt;In fact this is nt the first time. Another customer name &amp;quot;Irene&amp;quot; but my dad always called her &amp;quot;Ee Ren&amp;quot;. 😂&lt;br&gt; Well, whatever it is, the level of English proficiency doesn&#39;t matter to his business. However broken his English is, customer can still understand somehow.&lt;/p&gt; &lt;p&gt;Language is about communication. Successfully deliver the right message is more important than grammar correctness.&lt;br&gt; No need to shy about or look down on yourself for nt good enough at it. The more u unconfident, the worse u speak.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;That being said, I will continue to laugh at my dad, and ppl will continue to bash my Google videos on my Asian English accent.&lt;/p&gt; &lt;p&gt;Both of us will continue ignore those, and do what we r doing. 😆&lt;/p&gt; </content> </entry> <entry> <title>Fish 048</title> <link href="https://jec.fish/fish/20210515"/> <updated>2021-05-15T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210515</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:71.6796875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210515.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210515.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210515.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210515.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;No fish selling today coz it&#39;s Hari Raya, but got story.&lt;/p&gt; &lt;p&gt;My dad recently keep saying something like these.&lt;/p&gt; &lt;p&gt;Dad: My friend A&#39;s son so good. Give him X amount of monthly allowance.&lt;br&gt; Me: So?&lt;/p&gt; &lt;p&gt;Dad: Friend&#39;s B&#39;s daughter also good. Give family Y amount of $.&lt;br&gt; Me: (Knowing where is this going but act stupid) So?&lt;/p&gt; &lt;p&gt;Dad: Don&#39;t u think u should contribute more?&lt;br&gt; Me: Why should I? Don&#39;t u hv enough?&lt;/p&gt; &lt;p&gt;Dad: Because I&#39;m your dad. Their children don&#39;t earn as much but give family almost half their salary as allowance. Look at u...&lt;br&gt; Me: Appreciate what u already hv. Don&#39;t keep comparing with others, else you won&#39;t be happy ya.&lt;/p&gt; &lt;p&gt;Me: This is how u taught us during child time. No extra $ without valid and strong reasons. U taught me well ya, so no points asking. 😂&lt;br&gt; Dad: ...&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Supporting parents financially is our responsibility as children, but nt blindly.&lt;/p&gt; &lt;p&gt;Well, dad doesn&#39;t increase my angpao money even I complain every Chinese New Year. So same concept apply lol. 😆&lt;/p&gt; </content> </entry> <entry> <title>Chrome DevTools for designers</title> <link href="https://jec.fish/deck/io-2021"/> <updated>2021-05-19T00:00:00-00:00</updated> <id>https://jec.fish/deck/io-2021</id> <summary>Google IO 2021 - Chrome DevTools for designers</summary> <category term="deck"/> <content type="html">&lt;p&gt;Chrome DevTools is your DesTools (Designer Tools) too! Adam and I share about how to use Chrome DevTools in solving day-to-day design challenges.&lt;/p&gt; &lt;p&gt;Have been attending &lt;a href=&quot;https://g.co/io&quot;&gt;Google IO&lt;/a&gt; for a few years. Google IO 2021 was supposed to be the first IO (https://g.co/io) that I would be speaking on stage.&lt;/p&gt; &lt;p&gt;Well, end up I speak virtually at home with Adam, haha.&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/yNwwEu3Kcbs&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/yNwwEu3Kcbs?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/yNwwEu3Kcbs/maxresdefault.jpg alt=&#39;Chrome DevTools for designers&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Chrome DevTools for designers&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;Miss the pre-covid time where we get together at Mountain View, under hot sun, shouting, get excited when there are new features announced.&lt;/p&gt; &lt;p&gt;Till we meet again, stay safe, miss you all!&lt;/p&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1409350391427264523&quot;&gt; twitter.com/jecfish/status/1409350391427264523 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt;</content> </entry> <entry> <title>Fish 049</title> <link href="https://jec.fish/fish/20210522"/> <updated>2021-05-22T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210522</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:60.15625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210522.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210522.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210522.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210522.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Sold out at 8am, this is a big red snapper pre-ordered by a customer.&lt;/p&gt; &lt;p&gt;Hot pasar topic tdy: Will the govt announce &amp;quot;MCO 3.0 (Full)&amp;quot; version later today? 🤨&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Customers expect us to remember their and their family purchase history.&lt;/p&gt; &lt;p&gt;Uncle A: Did my wife bought pomfret ytd?&lt;br&gt; Me: Huh? Who is your wife? (Look at dad)&lt;br&gt; Dad: Ya, she bought only a small one ytd, did you all ate ytd? Tdy can buy this grouper.&lt;/p&gt; &lt;p&gt;Auntie B: Did I bought prawn ytd?&lt;br&gt; Me: (Walao auntie, can call n ask ur hubby instead of me)&lt;br&gt; Dad: U didn&#39;t ytd, but you bought Thurs. It&#39;s ok la, MCO might come, buy and keep la.&lt;/p&gt; &lt;p&gt;Auntie C: Give me these 3 fishes, split it, one is for my mom.&lt;br&gt; Dad: Har, ur mom js came and bought one js nw.&lt;br&gt; Me: 😳&lt;/p&gt; &lt;p&gt;Auntie C: Is it? My mom already come js nw?&lt;br&gt; Dad: Yaya, so 2 enough or 3?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Omg, remember customer family tree ady hard. Somemore need to track individual preference and purchase history, that&#39;s really require extra RAM and database (brain).&lt;/p&gt; &lt;p&gt;Not sure how my dad did that. Impressive and wondering at the same time because... he doesn&#39;t even remember my birthday nor my food preference lol. 🙄😂&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;hhttps://en.wikipedia.org/wiki/Malaysian_movement_control_order&quot;&gt;MCO&lt;/a&gt; - Movement Control Order (FMCO)&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 050</title> <link href="https://jec.fish/fish/20210529"/> <updated>2021-05-29T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210529</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:72.75390625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210529.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210529.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210529.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210529.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;6.15am, sky still dark. Stall filled with crazy crowd. All fishes sold out at 7.30, then receive many why-no-reserve-fish-for-me complains.&lt;br&gt; I thought SOP mentioned operation should start at 8am!? Fine (Saman) all these ppl la! 🙈&lt;/p&gt; &lt;hr&gt; &lt;p&gt;8am in the morning.&lt;/p&gt; &lt;p&gt;Auntie A: Har, no fish already?&lt;br&gt; Me: No more. Even I don&#39;t get time to steal some. Crazy crowd.&lt;/p&gt; &lt;p&gt;A: Can reserve fish for me tmr?&lt;br&gt; Dad: Call me tmr 5am.&lt;/p&gt; &lt;p&gt;A: I woke up 5am already today, but I follow SOP. Scare got fine. No police come patrolling?&lt;br&gt; Dad: Maybe police has nt wake up yt.&lt;/p&gt; &lt;p&gt;A: What fish u hv tmr, can I js preorder?&lt;br&gt; Dad: Not sure what fishes we&#39;ll hv tmr. Call me 5am la.&lt;/p&gt; &lt;p&gt;A: (Walk away and come back in 1 hr) Eh, how about u just reserve me whatever fishes u hv tmr ok? Any fishes will do.&lt;br&gt; Me: Har? Any fishes?&lt;/p&gt; &lt;p&gt;A: Ya, just any. As long as fishes.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Wow, people really so desperate about fishes! So many preorders today.&lt;br&gt; Crisis time, all stuck at home. One of the joy/activity one can have is eating/cooking something good.&lt;br&gt; As a fish seller, the least we can do is pick fresh stock n provide to customers. Not saving-the-world kind of mission, but does make tiny impact to lifes.&lt;br&gt; Eat healthy, stay safe and happy all!&lt;br&gt; Tmr is a fish selling day for me as well in view of tdy crowd, what a poor free labor. 😌&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://www.mkn.gov.my/web/ms/sop-pkp/&quot;&gt;SOP&lt;/a&gt; - Standard operating procedure, here refer to Malaysia COVID-19 lockdown SOP&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 051</title> <link href="https://jec.fish/fish/20210530"/> <updated>2021-05-30T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210530</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:72.265625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210530.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210530.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210530.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210530.jpg&quot; alt=&quot;7 star groupers&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;7 star groupers&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;7 star groupers kind of day. 🐟 I draw that ⭐! #七星斑&lt;/p&gt; &lt;p&gt;5am reach at pasar, 7am sold out. Question of the day - can morning roadside pasar operates during FMCO?&lt;/p&gt; &lt;p&gt;Not sure yt, but hopefully not. The &amp;quot;F&amp;quot; in FMCO could means Full or Failed.&lt;/p&gt; &lt;p&gt;Dear govt, pls granted my wish 🙏, need proper weekend break! 😬&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://www.iproperty.com.my/lifestyle/fmco-sops/&quot;&gt;FMCO&lt;/a&gt; - Full Movement Control Order (FMCO)&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 052</title> <link href="https://jec.fish/fish/20210605"/> <updated>2021-06-05T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210605</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:72.75390625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210605.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210605.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210605.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210605.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Woohoo, no fish selling this week. God granted my wish lol, long weekend break!&lt;/p&gt; &lt;p&gt;This is a photo frm last Sunday, spot the yellow eels, tofu fish and seven stars groupers - if u know which is which.&lt;/p&gt; &lt;p&gt;My dear diver friends, can&#39;t do Fish ID (identify fish types &amp;amp; names) in the sea now, come do in pasar la! 😆&lt;/p&gt; </content> </entry> <entry> <title>Debugging with Chrome DevTools</title> <link href="https://jec.fish/deck/jsnation-2021"/> <updated>2021-06-11T00:00:00-00:00</updated> <id>https://jec.fish/deck/jsnation-2021</id> <summary>JSNation 2021 - Debugging with Chrome DevTools</summary> <category term="deck"/> <content type="html">&lt;p&gt;Sharing some tips and tricks to help you debug your web app effectively with Chrome DevTools.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://live.jsnation.com/&quot;&gt;JSNation Live 2021&lt;/a&gt; is a 3-day conference on all things JS.&lt;/p&gt; &lt;p&gt;In case the video below isn&#39;t working, you can watch it in &lt;a href=&quot;https://portal.gitnation.org/contents/debugging-with-chrome-devtools&quot;&gt;portal.gitnation.org/contents/debugging-with-chrome-devtools&lt;/a&gt;.&lt;/p&gt; &lt;div style=&quot;padding:56.25% 0 0 0;position:relative;&quot;&gt;&lt;iframe src=&quot;https://player.vimeo.com/video/559950111?title=0&amp;byline=0&amp;portrait=0&quot; style=&quot;position:absolute;top:0;left:0;width:100%;height:100%;&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;script src=&quot;https://player.vimeo.com/api/player.js&quot;&gt;&lt;/script&gt; &lt;!-- &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1409349445381083136&quot;&gt; twitter.com/jecfish/status/1409349445381083136 &lt;/a&gt; &lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; --&gt;</content> </entry> <entry> <title>Fish 053</title> <link href="https://jec.fish/fish/20210612"/> <updated>2021-06-12T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210612</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:71.09375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210612.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210612.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210612.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210612.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar still closed. 😊&lt;/p&gt; &lt;p&gt;Hv been sick for the week, never usually sick that long. I went n did my first PCR covid test, coz the kiasu thinking of &amp;quot;although I think it&#39;s nt Covid, but what if it is?&amp;quot;. Anyway, test result is negative. 😃&lt;/p&gt; &lt;p&gt;Dad purposely sent me the famous Chinese medicine which rumors said it might cure COVID (莲花清瘟胶囊).&lt;/p&gt; &lt;p&gt;Initially dad asked my bro to send me, but my bro refused.&lt;/p&gt; &lt;p&gt;Bro: Ur daughter doesn&#39;t eat this kind of medicine. N it&#39;s rumors.&lt;br&gt; Dad: It&#39;s effective, trust me. U js send her la.&lt;/p&gt; &lt;p&gt;Bro: (Call me) If I send u tht, will u eat?&lt;br&gt; Me: U knw ur sis well ya. 😂&lt;/p&gt; &lt;p&gt;Bro: (Tell dad) No need la, your daughter doesn&#39;t even take medicine usually.&lt;br&gt; Dad: Shut up. If u don&#39;t want to send, then I send myself.&lt;/p&gt; &lt;p&gt;Then the 莲花清瘟胶囊 appeared at my doorstep. Touching, aw. 🥺&lt;/p&gt; &lt;p&gt;If it&#39;s you, will you eat it or lied to dad that you&#39;ve eaten (even if u don&#39;t)? 🤔&lt;/p&gt; &lt;p&gt;Also guess what I did at the end? 😏&lt;/p&gt; &lt;p&gt;#世纪难题 #要辜负老人家一番心意 #还是乖乖吃掉可能是假药&lt;/p&gt; </content> </entry> <entry> <title>Fish 054</title> <link href="https://jec.fish/fish/20210619"/> <updated>2021-06-19T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210619</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:62.5%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210619.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210619.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210619.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210619.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar is going to stop for... 2 more months or longer? According to the National Recovery Plan.&lt;/p&gt; &lt;p&gt;How will the rakyat survive then? Some pasar sellers with stable customer base start taking online (phone line) orders, process and deliver to customers.&lt;/p&gt; &lt;p&gt;Some are taking time to rest. My dad is doing hybrid. Taking small orders only when there are big orders, so work only once or twice a week.&lt;/p&gt; &lt;p&gt;The reason being is it&#39;s energy draining and time consuming to do the additional cleaning at home afterwards and the delivery.&lt;/p&gt; &lt;p&gt;Are there way to improve? Certainly. Worth the effort? Probably not. Just rest la~&lt;/p&gt; &lt;p&gt;For those sellers who don&#39;t hv stable customer base, that&#39;s suck, especially those who hv kids to feed. 😌&lt;/p&gt; &lt;p&gt;God bless all get through this covid economy crisis.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://www.theedgemarkets.com/article/highlights-national-recovery-plan&quot;&gt;National Recovery Plan&lt;/a&gt; - A four-phase exit strategy from the COVID-19 crisis based on 3 indicators - no. of daily infections, bed utilisation rate in ICU wards, vaccination rates.&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;https://translate.google.com.my/?sl=ms&amp;amp;tl=en&amp;amp;text=rakyat&amp;amp;op=translate&quot;&gt;Rakyat&lt;/a&gt; - the people, usually refer to the people of a country&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Browser Automation with Puppeteer</title> <link href="https://jec.fish/deck/workerconf-2021"/> <updated>2021-06-25T00:00:00-00:00</updated> <id>https://jec.fish/deck/workerconf-2021</id> <summary>WorkerConf 2021 - Browser automation with Puppeteer</summary> <category term="deck"/> <content type="html">&lt;p&gt;Sharing a bit of my hike and bike experience and Browser automation with Puppeteer.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://www.worker.sh/&quot;&gt;WorkerConf 2021&lt;/a&gt; is a tech conference with bike and hike action for open source.&lt;/p&gt; &lt;p&gt;My session gives you an overview of what is Puppeteer.&lt;/p&gt; &lt;div class=&quot;video-wrapper&quot;&gt; &lt;iframe src=&quot;https://www.youtube.com/embed/mqu3h84os-Y&quot; srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/mqu3h84os-Y?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/mqu3h84os-Y/maxresdefault.jpg alt=&#39;Browser automation with Puppeteer&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Browser automation with Puppeteer&quot;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;p&gt;Stay safe all during this COVID-19 time!&lt;/p&gt; &lt;p&gt;Here&#39;s the slides:&lt;/p&gt; &lt;script async=&quot;&quot; class=&quot;speakerdeck-embed&quot; data-id=&quot;932c979363e94deba3b04814cab38cb2&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;https://speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt; &lt;noscript&gt; Download the slides here: &lt;a href=&quot;https://speakerdeck.com/jecfish/workerconf-2021-browser-automation-with-puppeteer&quot;&gt;https://speakerdeck.com/jecfish/workerconf-2021-browser-automation-with-puppeteer&lt;/a&gt; &lt;/noscript&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1409349445381083136&quot;&gt; twitter.com/jecfish/status/1409349445381083136 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt;</content> </entry> <entry> <title>Fish 055</title> <link href="https://jec.fish/fish/20210626"/> <updated>2021-06-26T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210626</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:75.390625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210626.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210626.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210626.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210626.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;The 3rd closing week. I did miss pasar aunties a little.&lt;/p&gt; &lt;p&gt;FMCO does impact my mental health a little. The feeling of stuck strikes more often, sometimes lonely. Anyone feel the same?&lt;/p&gt; &lt;p&gt;Unsurprisingly, I hv many friends (mostly IT ppl) doing all right during this period. Make me wonder, why couldn&#39;t I? Am I nt IT!?&lt;/p&gt; &lt;p&gt;If u r thinking &amp;quot;Aiya, u r very lucky ady, u dun hv to worry about food and money, js stay at home also complain so much, so difficult meh, js hang in thr.&amp;quot;, u r nt wrong, but blaming isn&#39;t helping.&lt;/p&gt; &lt;p&gt;Social interaction is a need. One can pause for a while (coz unlike food, u won&#39;t die immediately without that) but the longer the time, it&#39;s getting harder. It impacts mental health, and might leads to greater problems.&lt;/p&gt; &lt;p&gt;Stay negative (covid) all. Gambateh! No advice for u, but let&#39;s nt dismiss your feeling, get vaccinated, stay strong and get through this together. Fighting! 💪&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://www.iproperty.com.my/lifestyle/fmco-sops/&quot;&gt;FMCO&lt;/a&gt; - Full Movement Control Order (FMCO)&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 056</title> <link href="https://jec.fish/fish/20210703"/> <updated>2021-07-03T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210703</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:79.296875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210703.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210703.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210703.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210703.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar still close. A random conversation with dad.&lt;/p&gt; &lt;p&gt;Dad: You thought being a dad easy?&lt;br&gt; Me: Difficult meh, I see ur life now pretty chill.&lt;/p&gt; &lt;p&gt;Dad: U don&#39;t knw the hardship I went through being the sole bread winner when u all r kids.&lt;/p&gt; &lt;p&gt;Dad: So many &amp;quot;mouths&amp;quot; waiting for food, need to make sure I earn enough to provide.&lt;/p&gt; &lt;p&gt;Dad: The fact that u r still here, talking so much, nt die due to hunger is already a good achievement of me.&lt;br&gt; Me: Oh...&lt;/p&gt; &lt;hr&gt; &lt;p&gt;With sis out of job, bro forced to take long unpaid leaves, dad can&#39;t operate fish biz, I feel the need of nt losing my income.&lt;/p&gt; &lt;p&gt;The pressure of bread winner must be 9999x than that, especially those out of job, with kiddo, old parents waiting for food, plus this unknown pandemic end date, really holly shit, feeling future-less.&lt;/p&gt; &lt;p&gt;Some who did well before COVID, and struggle since then find it hard to ask for help - &amp;quot;feeling no face&amp;quot; (shameful).&lt;br&gt; Suicidal rate increase significantly since pandemic. Between ending life and raising white flag (asking for help, nt give up), choose the latter.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Kerajaan failed us, nt the first time, wont be the last. Biar #KitaJagaKita, donate and help if you can.&lt;br&gt; Hang in there all! 💪&lt;/p&gt; </content> </entry> <entry> <title>Fish 057</title> <link href="https://jec.fish/fish/20210710"/> <updated>2021-07-10T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210710</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:79.296875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210710.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210710.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210710.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210710.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Pasar still close, but shopping mall reopened today!?&lt;/p&gt; &lt;p&gt;Dad fell down and hurt his arm few days ago when delivering fish to a customer.&lt;/p&gt; &lt;p&gt;Me: Why you fell down ah? Never see road properly?&lt;br&gt; Dad: The floor is slippery. My slippers has no pattern already (worn out).&lt;/p&gt; &lt;p&gt;Dad: You know what. Luckily I always drink milk.&lt;br&gt; Me: Huh?&lt;/p&gt; &lt;p&gt;Dad: See my bone is so strong now. Even I fell, it js hurt a little bit.&lt;br&gt; Me: 😂 Keep your positivity on!&lt;/p&gt; &lt;p&gt;Me: (Secretly think: But if it&#39;s that strong, u dun even need to go clinic ah... 🙊)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Case rises, but let&#39;s keep your positivity on.&lt;/p&gt; &lt;p&gt;At least I am happy that my dad can go get a pair of slippers coz shopping mall is open! 🙈&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;https://www.freemalaysiatoday.com/category/nation/2021/07/09/netizens-puzzled-over-reopening-of-department-stores-in-kl/&quot;&gt;The reopening of several department stores in Kuala Lumpur has left netizens puzzled since the federal territory is still under Phase 1 of the national recovery plan.&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </content> </entry> <entry> <title>Fish 058</title> <link href="https://jec.fish/fish/20210717"/> <updated>2021-07-17T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210717</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:79.4921875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210717.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210717.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210717.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210717.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Woot, COVID cases are rising but EMCO ended mostly. Stationary and phone shops can resume biz but roadside pasar still can&#39;t operate! 😳&lt;/p&gt; &lt;hr&gt; &lt;p&gt;There are some roadside pasar stalls start operating illegally. 🙊&lt;/p&gt; &lt;p&gt;Me: How ah? Nt scare police come saman meh?&lt;br&gt; Dad: No choice lo, need money ma. Open super early and close before police wake up.&lt;/p&gt; &lt;p&gt;Me: But in case police wake up early come raid, and the stall got fine, it&#39;s nt worth it!&lt;br&gt; Dad: Sometimes u js need to risk it. Maybe can nego ma~&lt;/p&gt; &lt;p&gt;Me: Can nego with virus ah?&lt;br&gt; Dad: ...&lt;/p&gt; &lt;hr&gt; &lt;p&gt;&amp;quot;Sometimes u js need to risk it&amp;quot; is a good life quote, but doesn&#39;t apply to everything I guess!?&lt;/p&gt; &lt;p&gt;Well, we all broke rules sometime. Who am I to judge whether it&#39;s worth it or not right? That&#39;s the risk taker&#39;s call.&lt;br&gt; Caught by police or not, stay safe and healthy all!&lt;/p&gt; </content> </entry> <entry> <title>Fish 059</title> <link href="https://jec.fish/fish/20210724"/> <updated>2021-07-24T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210724</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:123.73046875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210724.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210724.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210724.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210724.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Helping dad to process 🐟 booking this morning. The list is so long!&lt;br&gt; That&#39;s my dad&#39;s handwriting. Pretty nice huh?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;He missed some orders. There are orders he forgot to capture. He doesn&#39;t sum the quantity correctly as well for some fishes coz he count manually.&lt;/p&gt; &lt;p&gt;To do small improvements, what he needs is a printer, Google Sheets and probably a Google form for data entry.&lt;br&gt; Only if his daughter is patient enough to set that up and teach him that.&lt;/p&gt; &lt;p&gt;But I kinda like to see his handwriting, and I think writing is good to prevent Alzheimer (or similar). So should I?&lt;/p&gt; &lt;p&gt;As an unpaid non business-minded daughter, I think missing orders is fine, coz less work ma, can&#39;t hear aunties screaming in front of me anyway. 😂&lt;/p&gt; </content> </entry> <entry> <title>Fish 060</title> <link href="https://jec.fish/fish/20210731"/> <updated>2021-07-31T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210731</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:72.16796875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210731.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210731.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210731.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210731.jpg&quot; alt=&quot;Fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Another Saturday. Late pasar story today. Dad is admitted to hospital since Wednesday.&lt;/p&gt; &lt;p&gt;Still nt yt out, but in good recovery progress. Hospital bill is really nt cheap, still accumulating. 😌&lt;/p&gt; &lt;hr&gt; &lt;p&gt;What happens? Overstep on fish head last Saturday. Big toe sting by fish bone.&lt;/p&gt; &lt;p&gt;Sting by fish bone is... quite normal as a fishmonger but it was kinda deep cut this time and wound infected.&lt;/p&gt; &lt;p&gt;Went to clinic nearby initially, doctor did some jabs n monitor for a few days. The skin turns dark n infected area got bigger. Kinda scary if u think of amputation.&lt;/p&gt; &lt;p&gt;Went to hospital. COVID situation make the admission process longer even private hospital, but eventually things sorted out.&lt;/p&gt; &lt;p&gt;Ok la, so he is now enjoying his long holiday in hospital, without having to see us (no visitors allowed) and bill on us. 😒&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Me: My thumb also sting by fish bone same day as u n swollen for a few days.&lt;br&gt; Dad: Look like we r really father n daughter.&lt;br&gt; Bro: Remember the curry fish head u two cooked last week? See, its sibling now revenge lah! 😂&lt;/p&gt; &lt;p&gt;Me: (Bro, u eat oso wor...🙊)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Good la, still can joke. Stay safe n healthy all!&lt;/p&gt; </content> </entry> <entry> <title>Fish 061</title> <link href="https://jec.fish/fish/20210807"/> <updated>2021-08-07T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210807</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:74.31640625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210807.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210807.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210807.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210807.jpg&quot; alt=&quot;Fish packages&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Fish packages&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Wee! Dad is out of hospital. Bill is 9k. Cheap? Expensive? Compare to saving his foot, the price definitely worth it.&lt;/p&gt; &lt;p&gt;Bill is still rolling, coz need to return to hospital twice a week for cleaning and monitoring. 💰&lt;/p&gt; &lt;p&gt;Dad dislikes visiting hospital coz it&#39;s pain and coz higher chance for COVID. 😷&lt;/p&gt; &lt;p&gt;Me: See la, ask u dun work during EMCO, dun listen.&lt;br&gt; Me: Now the bill is more expensive than your fish earnings ady.&lt;/p&gt; &lt;p&gt;Dad: Wei, u cannot say like that la. This is accident ma.&lt;br&gt; Bro: Different la. Fish earnings goes to him ma, but hospital bill goes to us! 😂&lt;/p&gt; &lt;p&gt;Dad: I give u money and let u experience all these u want?&lt;br&gt; Me, Bro: Give us first and we&#39;ll consider. 😂😂😛😛&lt;/p&gt; &lt;p&gt;COVID cases went up to 20k. No eyes see but life goes on. As long as we&#39;re alive, stay healthy, happy and safe, buddies! 💪&lt;/p&gt; </content> </entry> <entry> <title>Fish 062</title> <link href="https://jec.fish/fish/20210814"/> <updated>2021-08-14T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210814</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210814.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210814.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210814.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210814.jpg&quot; alt=&quot;Tiger prawns&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Tiger prawns&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;I wanna to eat prawn! But dad nt back in business yet. 🥺&lt;/p&gt; &lt;p&gt;Had dinner with dad last night. His phone kept ringing - text, calls, voice messages non-stop.&lt;/p&gt; &lt;p&gt;A,B,C...Z: Are you open tmr? Can I order fish? I want fish xxx tmr ...&lt;br&gt; Dad: Aiya, I&#39;m still in recovering. Hopefully back in biz next week!&lt;/p&gt; &lt;p&gt;Me: Wah, so busy hor. U really popular aren&#39;t you?&lt;br&gt; Dad: Haiz, I feel sad.&lt;/p&gt; &lt;p&gt;Me: Why sad? Seeing all the money (potential earnings) fly away? Or feel sorry to the customers?&lt;br&gt; Dad: (Didn&#39;t answer, but show sad face) Haiz. 😟&lt;/p&gt; &lt;p&gt;Me: No worries about customers la, they will go get fish somewhere else temporarily.&lt;br&gt; Me: Maybe temporary become permanently then u gg. 😆&lt;/p&gt; &lt;p&gt;Me: Anyway, u guai guai recover first, don&#39;t rush it.&lt;br&gt; Me: Else later u operate, and infection again, earn a bit but another few k gone. 💰 Cannot la!&lt;/p&gt; &lt;hr&gt; &lt;p&gt;It&#39;s a risk when u, as a business, don&#39;t operate consistently, coz customers will buy from somewhere else, and might switch forever if find it better.&lt;/p&gt; &lt;p&gt;However, without a healthy body, you can do nothing.&lt;/p&gt; &lt;p&gt;Can only follow up with them on phone lo, beat competitors with the relationship u build over years. Hopefully they&#39;ll be back when u r back again. 💪&lt;/p&gt; &lt;p&gt;Again, stay healthy all! Probably watch more meme and funny videos to stay sane! 😆&lt;/p&gt; </content> </entry> <entry> <title>Fish 063</title> <link href="https://jec.fish/fish/20210821"/> <updated>2021-08-21T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210821</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:67.48046875%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210821.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210821.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210821.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210821.jpg&quot; alt=&quot;Salmon&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;Salmon&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Back in business today. Celebrate Malaysia got a new prime minister wee! 🤦‍♀️&lt;br&gt; Today an auntie said swear words to my bro. Half is auntie rudeness, half is our fault. 🤬&lt;/p&gt; &lt;hr&gt; &lt;p&gt;The auntie is a regular customer which i labelled her as #ddly - request a lot, buy little.&lt;/p&gt; &lt;p&gt;She likes to pick a few slices of fish, ask to weight, then complain about the price, usually buy none.&lt;/p&gt; &lt;p&gt;Once in a blue moon, she might buy one, after some very heavy discount 🙄.&lt;/p&gt; &lt;p&gt;Many times, she shows #behsong face and slap-throw my fish slices back to the base after checking the price as if my fish doesn&#39;t has mother. 😡&lt;/p&gt; &lt;p&gt;Today she came again, and my bro handles her. Hoho~ 🍿🍿 kan we shud provide intensive training for newbie? 😈&lt;/p&gt; &lt;p&gt;X: Weight these A, B, C fish slices for me.&lt;br&gt; Bro: Ok, price A B C.&lt;/p&gt; &lt;p&gt;X: Expensive, how about E F?&lt;br&gt; Bro: Price E F.&lt;/p&gt; &lt;p&gt;X: I take B, 17.8? RM 17 will do.&lt;br&gt; Bro: Cannot la.&lt;/p&gt; &lt;p&gt;X: U blood sucker stall, always expensive.&lt;br&gt; Dad: Ok la, RM 17.&lt;/p&gt; &lt;p&gt;(Bro distracted by other customer)&lt;br&gt; (I pack and put aside, collect money as well)&lt;/p&gt; &lt;p&gt;X: Chang my mind, wanna swap probably. How about slices G H I?&lt;br&gt; Bro: 🙄 These r price G H I.&lt;/p&gt; &lt;p&gt;X: Ok la, I want this H - RM 21.9 eh, 20 cannot?&lt;br&gt; Dad: Cannot la. Cincai la, RM 21.&lt;br&gt; X: Ok la.&lt;/p&gt; &lt;p&gt;(Bro took out the RM 17 slice coz he thought it&#39;s a swap and she didn&#39;t pay yet, then pack and collect RM 21.)&lt;br&gt; (30 min later)&lt;/p&gt; &lt;p&gt;X: (Shouting) Missing one fish, why missing? I paid for 2!&lt;br&gt; Bro: Huh, i tot u wanna swap? U only pay me once!&lt;/p&gt; &lt;p&gt;X: What the f*** r u talking? I pay u twice js nw.&lt;br&gt; Bro: Huh?&lt;/p&gt; &lt;p&gt;Me: Yaya, she paid me once, then pay u another one.&lt;br&gt; Bro: Oh sorry, I didn&#39;t notice, sorry.&lt;br&gt; X: Damn, now I don&#39;t hv grouper to eat, n****.&lt;/p&gt; &lt;p&gt;Me: Sorry, let me refund to u, RM 17.&lt;br&gt; X: Refund me 21. The expensive slice is missing.&lt;/p&gt; &lt;p&gt;Me: 🙄 Give me the fish, I weight for u. (Weight) It&#39;s the 21 la. So i refund 17.&lt;br&gt; X: No, u shud refund me 17.8.&lt;/p&gt; &lt;p&gt;Bro: Har? We discounted js now right? It&#39;s 17.&lt;br&gt; X: No, it&#39;s 17.8. N****, why do u want to tipu my money.&lt;br&gt; Me, dad: Ok ok, give 17.8.&lt;/p&gt; &lt;p&gt;(X kept mumbling and go away.)&lt;/p&gt; &lt;hr&gt; &lt;p&gt;She was on wheelchair quite sometimes already, also staying alone, so me n dad is more tolerate. However, tbh, that doesn&#39;t give her the right to be rude.&lt;/p&gt; &lt;p&gt;The fact is she can pick cheaper fish, but she js like to target expensive fish and hope the price is cheap! How possible lah~~&lt;/p&gt; </content> </entry> <entry> <title>Fish 064</title> <link href="https://jec.fish/fish/20210828"/> <updated>2021-08-28T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210828</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:95.41015625%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210828.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210828.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210828.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210828.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Drizzling morning, but good start! See the big tail of grouper on the left? Supposed to cut and sell by pieces. An auntie just come and said: wow, nice tail, give me all. Then, we sold out at 8am. 🤩&lt;/p&gt; &lt;hr&gt; &lt;p&gt;An auntie asked my dad.&lt;br&gt; A: Do u knw where can order fish in PJ?&lt;/p&gt; &lt;p&gt;Dad: Why?&lt;br&gt; A: My sister at PJ doesn&#39;t dare to go out buy fish. Do u hv any fish seller friend in PJ?&lt;/p&gt; &lt;p&gt;Dad: Don&#39;t hv. Buy online la.&lt;br&gt; A: She doesn&#39;t knw how to buy online. Do u deliver?&lt;/p&gt; &lt;p&gt;Dad: So far away, no.&lt;br&gt; Me: We can help u Lalamove thr. The delivery fee would be ~RM25 I think.&lt;/p&gt; &lt;p&gt;A: Har, so expensive. No other options ah?&lt;br&gt; Me: (Got, u buy and deliver yourself lo) No wor...&lt;/p&gt; &lt;p&gt;A: She missed eating fish a lot. Why u dun hv fish seller friend in PJ?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;&amp;quot;Does your dad knw anyone selling fish x at area y?&amp;quot; is a very common question I got frm friends.&lt;/p&gt; &lt;p&gt;I wonder why ppl think fish seller got fish seller friends. In fact, my dad doesn&#39;t hv any fish seller friends. Only some fish supplier contacts.&lt;/p&gt; &lt;p&gt;Oh, and he feel threatened by other rivals (fish sellers) at the same pasar. So no fish friends even same area. 😂&lt;/p&gt; &lt;p&gt;#同行如敌国&lt;/p&gt; </content> </entry> <entry> <title>Fish 065</title> <link href="https://jec.fish/fish/20210904"/> <updated>2021-09-04T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210904</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:79.58984375%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210904.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210904.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210904.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210904.jpg&quot; alt=&quot;fish in basket&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish in basket&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;This week no selling, because we &amp;quot;heard&amp;quot; police and DBKL are coming!&lt;br&gt; Don&#39;t ask me how we &amp;quot;heard&amp;quot;. You know there are ways. 😏&lt;/p&gt; &lt;p&gt;Me: Why no selling since we are legal business?&lt;br&gt; Dad: To avoid whatever potential troubles.&lt;/p&gt; &lt;p&gt;Me: What sorta trouble we can get in oh?&lt;br&gt; Dad: U know... there are this new SOP requires pasar to hire RELA to take care of the crowd queue and registration.&lt;/p&gt; &lt;p&gt;Me: Good SOP, hire la.&lt;br&gt; Dad: One RELA costs about RM 80, and we need a few.&lt;br&gt; Me: Then? Price ok ma, and u all sellers split the cost anyway.&lt;/p&gt; &lt;p&gt;Dad: Expensive la, it&#39;s only less than 4 hours. My hourly wage is less than that.&lt;br&gt; Dad: Pasar is not crowded. Many still don&#39;t dare to come out.&lt;/p&gt; &lt;p&gt;Dad: Also many sellers nt willing to pay. Why throw money into the sea?&lt;br&gt; Me: Yayaya... Many not willing to pay, including YOU.&lt;/p&gt; &lt;p&gt;Dad: You get a free rest day now, not happy?&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Errr... Generally I think the SOP is a right thing to do. But I also understand the profit vs cost concerns of the pasar sellers.&lt;/p&gt; &lt;p&gt;Let&#39;s say 10 sellers splitting the cost of 6 RELA, each seller needs to fork out RM 48. Not a lot from my perspective, but...&lt;br&gt; RM 48 could be a seller&#39;s whole morning income or a big portion of it.&lt;/p&gt; &lt;p&gt;Need to work on driving down the RELA headcount or nego a better price then. That&#39;s none of my business~&lt;/p&gt; </content> </entry> <entry> <title>Fish 066</title> <link href="https://jec.fish/fish/20210911"/> <updated>2021-09-11T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210911</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210911.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210911.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210911.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210911.jpg&quot; alt=&quot;fish stall&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;fish stall&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Operate today! Successfully nego with the local authority. Instead of RELA, we hire old uncles frm the neighborhood to take care of the registration. Half the price and very responsible~ win win win. 👍&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Erm... recently me and my bro realized my dad is more forgetful after the operation. Is he becoming like goldfish??? (It&#39;s false btw, scientists proved that goldfish has &amp;gt;3s memory 😆)&lt;/p&gt; &lt;p&gt;Bro called dad: Help me tapao later.&lt;br&gt; Dad: Okay.&lt;/p&gt; &lt;p&gt;(Dad went home without food.)&lt;/p&gt; &lt;p&gt;Dad: Eh, why are you home?&lt;br&gt; Dad: Why u didn&#39;t ask me to tapao for u since u r home?&lt;/p&gt; &lt;p&gt;Bro: What? I just called u one hour ago eh!&lt;br&gt; Dad: Is it? No la, u didn&#39;t.&lt;/p&gt; &lt;p&gt;Bro: I did.&lt;br&gt; Dad: No, u didn&#39;t.&lt;br&gt; Bro: Check your phone log.&lt;/p&gt; &lt;p&gt;Dad: ... How u insert fake record to my phone log?&lt;/p&gt; &lt;p&gt;(Okay, u win 😂😂😂)&lt;/p&gt; &lt;p&gt;This is js one of the few examples. Is this defined as &amp;quot;forgotten&amp;quot; or &amp;quot;lost of memory&amp;quot;? He couldn&#39;t recall that at all.&lt;/p&gt; &lt;p&gt;These only happened recently. Not sure if it&#39;s aging or short term (due to the strong doses of antibiotics). Let&#39;s monitor. 😧&lt;/p&gt; &lt;p&gt;Good thing is he still rmb how to win mahjong and calculate winning amount in light speed. 😆&lt;/p&gt; &lt;hr&gt; &lt;p&gt;If one day, he is going to lost his memory, I hope he at least rmb us children. Else, send him to old folks home! 😂&lt;/p&gt; </content> </entry> <entry> <title>Fish 067</title> <link href="https://jec.fish/fish/20210918"/> <updated>2021-09-18T00:00:00-00:00</updated> <id>https://jec.fish/fish/20210918</id> <summary>Pasar fish stories</summary> <category term="fish"/> <content type="html">&lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:100%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/fish/20210918.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/fish/20210918.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/fish/20210918.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/fish/20210918.jpg&quot; alt=&quot;otak-otak banner&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;otak-otak banner&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;Fuiyoo, overhead ppl talking about going Klang for seafood, family outing and more. I&#39;m both happy and worried. 😬&lt;/p&gt; &lt;hr&gt; &lt;p&gt;We sell much less otak-otak than usual today. Here is why.&lt;/p&gt; &lt;p&gt;Usually dad placed the otak-otak right next to the its banner (in photo). However, he is lazy today. 🙄&lt;/p&gt; &lt;p&gt;Me: (taking out otak-otak and wanted to put next to it)&lt;br&gt; Dad: Aiya, no need la. Later need to put it back to freezer if nt finish selling.&lt;br&gt; Dad: We sell quite a while ady. Ppl knw that. See the banner so big, obvious enough liao.&lt;/p&gt; &lt;p&gt;Me: Huh, u sure?&lt;br&gt; Dad: Ya.&lt;/p&gt; &lt;hr&gt; &lt;p&gt;End of morning, only 2 packs of otak-otak sold.&lt;/p&gt; &lt;p&gt;Dad: Eh, why do we sell so little today?&lt;br&gt; Me: 😤😤😤&lt;/p&gt; &lt;hr&gt; &lt;p&gt;Actually I expected a drop of sale by no display. But didn&#39;t expect that much. 2 vs 20. 🙈&lt;/p&gt; &lt;p&gt;Seeing the real things trigger ppl intention to buy, the banner is only helping, nt the main attraction.&lt;/p&gt; &lt;p&gt;Not everyone notice the banner. Some might also thought the otak-otak are sold out without asking (coz we usually display if we hv).&lt;/p&gt; &lt;p&gt;Good learning by earning less. Production testing failed. Padan muka! 😂&lt;/p&gt; </content> </entry> <entry> <title>Conferences 2023</title> <link href="https://jec.fish/blog/conf-2023"/> <updated>2022-12-27T00:00:00-00:00</updated> <id>https://jec.fish/blog/conf-2023</id> <summary>Jecelyn Yeen will be speaking at these conferences 2023!</summary> <category term="blog"/> <content type="html">&lt;p&gt;In-person events are back! These are the conferences I will be speaking and attending at in 2023. Looking forward to meet you at these amazing events.&lt;/p&gt; &lt;figure&gt;&lt;div class=&quot;pic-wrapper&quot;&gt; &lt;picture class=&quot;pic&quot; style=&quot;padding-bottom:56.4453125%&quot;&gt; &lt;source media=&quot;(min-width: 501px)&quot; srcset=&quot;https://jec.fish/assets/webp/blog/conf-2023.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/webp-500/blog/conf-2023.webp&quot; type=&quot;image/webp&quot;&gt; &lt;source media=&quot;(max-width: 500px)&quot; srcset=&quot;https://jec.fish/assets/img-500/blog/conf-2023.jpg&quot;&gt; &lt;img src=&quot;https://jec.fish/assets/img/blog/conf-2023.jpg&quot; alt=&quot;The conferences I will be speaking at&quot;&gt; &lt;/picture&gt; &lt;/div&gt;&lt;figcaption&gt;The conferences I will be speaking at&lt;/figcaption&gt;&lt;/figure&gt; &lt;p&gt;&lt;em&gt;[Last updated: July-2023]&lt;/em&gt;&lt;/p&gt; &lt;p&gt;🙊 - Attending&lt;br&gt; 🎤 - Speaking&lt;/p&gt; &lt;ol&gt; &lt;li&gt;✅ Jan - 🙊 &lt;a href=&quot;https://www.meetup.com/munich-frontend-developers/events/290551896/&quot;&gt;Frontend Munich New Year Meetup&lt;/a&gt; @ Munich, Germany&lt;/li&gt; &lt;li&gt;✅ Jan - 🎤 &lt;a href=&quot;https://gdg.community.dev/events/details/google-gdg-berlin-presents-web-in-2023-meet-the-chrome-team/&quot;&gt;GDG Berlin Meetup: Web in 2023 - Meet the Chrome Team&lt;/a&gt; @ Berlin, Germany&lt;/li&gt; &lt;li&gt;✅ Feb - 🎤 &lt;a href=&quot;https://jsworldconference.com/&quot;&gt;JSWorld&lt;/a&gt; @ Amsterdam, Netherlands - &lt;a href=&quot;https://youtu.be/6vwWBKfwTWk&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Feb - 🎤 &lt;a href=&quot;https://www.alpine-conferences.com/agent-conf-2023/&quot;&gt;AgentConf&lt;/a&gt; @ Dornbirn, Austria - &lt;a href=&quot;https://youtu.be/pul2qnJFZnw&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Mar - 🎤 &lt;a href=&quot;https://london.cityjsconf.org/&quot;&gt;CityJS&lt;/a&gt; @ London, UK - &lt;a href=&quot;https://youtu.be/RdiXuoMPtUA?t=4450&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Apr - 🎤 &lt;a href=&quot;http://jsday.it/&quot;&gt;JSDay&lt;/a&gt; @ Verona, Italy - &lt;a href=&quot;https://vimeo.com/showcase/10333657/video/831903182&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Apr - 🙊 &lt;a href=&quot;https://www.meetup.com/munich-frontend-developers/events/292126956/&quot;&gt;Frontend Munich April meetup&lt;/a&gt; @ Munich, Germany&lt;/li&gt; &lt;li&gt;✅ May - 🎤 &lt;a href=&quot;https://github.com/GitNation/JavaScript-frameworks-devs-summit&quot;&gt;JavaScript Frameworks Developers Summit&lt;/a&gt; @ Amsterdam, Netherlands&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://jsnation.com/&quot;&gt;JSNation&lt;/a&gt; @ Amsterdam, Netherlands - &lt;a href=&quot;https://portal.gitnation.org/contents/modern-web-debugging&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://romaniatesting.ro/speakers/jecelyn-yeen/&quot;&gt;Romanian Testing Conference (RTC)&lt;/a&gt; @ Cluj, Romania&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://me.linkedin.com/posts/jecfish_saucelabs-webinar-chromedevtools-activity-7067381073101381633-jwFs&quot;&gt;Sauce Labs meetup&lt;/a&gt; @ Berlin, Germany - &lt;a href=&quot;https://saucelabs.com/resources/webinar/test-easier-with-google-chrome-devtools-and-sauce-labs&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://conference.eurostarsoftwaretesting.com/&quot;&gt;EuroSTAR Software Testing Conference&lt;/a&gt; @ Antwerp, Belgium&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://rsvp.withgoogle.com/events/ioconnect-amsterdam&quot;&gt;I/O Connect Amsterdam&lt;/a&gt; @ Amsterdam, Netherlands&lt;/li&gt; &lt;li&gt;✅ Jun - 🎤 &lt;a href=&quot;https://rsvp.withgoogle.com/events/ioconnect-bengaluru&quot;&gt;I/O Connect Bengaluru&lt;/a&gt; @ Bengaluru, India&lt;/li&gt; &lt;li&gt;✅ Sep - 🎤 &lt;a href=&quot;https://smashingconf.com/freiburg-2023&quot;&gt;SmashingConf&lt;/a&gt; @ Freiburg, Germany - &lt;a href=&quot;https://youtu.be/ssrKTDmDo4c?si=kTQHyA50Wv2gLvj2&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Sep - 🙊 &lt;a href=&quot;https://www.meetup.com/munichjs-user-group/events/295733864/&quot;&gt;MunichJS September meetup&lt;/a&gt; @ Munich, Germany&lt;/li&gt; &lt;li&gt;✅ Oct - 🎤 &lt;a href=&quot;https://dev.events/conferences/dev-fest-nantes-nantes-9-2023&quot;&gt;DevFest Nantes&lt;/a&gt; @ Nantes, France - &lt;a href=&quot;https://youtu.be/CNrTlXOtcnE?si=FWMCYLDfdixi0MKv&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Oct - 🎤 &lt;a href=&quot;https://biznagafest.com/&quot;&gt;BiznagaFest Malaga&lt;/a&gt; @ Malaga, Spain&lt;/li&gt; &lt;li&gt;✅ Nov - 🎤 &lt;a href=&quot;https://fequan.com/2023/&quot;&gt;FEDAY (前端日) Conference&lt;/a&gt; @ Hangzhou, China - &lt;a href=&quot;https://www.bilibili.com/video/BV1mG411i7f2&quot;&gt;watch 📺&lt;/a&gt;&lt;/li&gt; &lt;li&gt;✅ Nov - 🙊 &lt;a href=&quot;https://www.meetup.com/munichjs-user-group/events/296532615/&quot;&gt;MunichJS November meetup&lt;/a&gt; @ Munich, Germany&lt;/li&gt; &lt;li&gt;✅ Nov - 🎤 &lt;a href=&quot;https://epichey.dev/&quot;&gt;EpicHey! Conference&lt;/a&gt; @ Lisbon, Portugal&lt;/li&gt; &lt;li&gt;✅ Dec - 🎤 &lt;a href=&quot;https://www.facebook.com/gdggeorgetown/&quot;&gt;DevFest Georgetown&lt;/a&gt; @ Penang, Malaysia&lt;/li&gt; &lt;/ol&gt; &lt;div class=&quot;comments&quot;&gt; &lt;p&gt; &lt;em&gt;Have something to say? Leave me comments on Twitter 👇🏼&lt;/em&gt; &lt;/p&gt; &lt;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot;&gt;&lt;p lang=&quot;en&quot; dir=&quot;ltr&quot;&gt; &lt;a style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish/status/1607750323598413825&quot;&gt; twitter.com/jecfish/status/1607750323598413825 &lt;/a&gt; &lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt; &lt;em&gt;Follow my writing: &lt;a class=&quot;twitter-follow-button&quot; style=&quot;word-break: break-all;&quot; href=&quot;https://twitter.com/jecfish&quot; data-size=&quot;large&quot;&gt;@jecfish&lt;/a&gt;&lt;/em&gt; &lt;/p&gt; &lt;/div&gt; </content> </entry> </feed>