Forem: Henry Lim

5 Game-Changing Chrome DevTools Updates You Need to Try in 2025

Henry Lim — Fri, 05 Dec 2025 22:31:27 +0000

This is an article version of my talk “Chrome DevTools LIVE LIVE LIVE” presented at DevFest Venice 2025 and DevFest Birmingham 2025.*

In this article, we dive into the latest updates in Chrome DevTools designed to help developers cut through the complexity of auditing web pages for performance. We'll explore how Live Metrics Page offers instant, user-centric data; how CPU and Network Throttling can be used to accurately simulate real-world device performance and connection conditions; and how AI is finally making the notorious performance "waterfall" readable.

Live Metrics Page

(Credit: "IWOMM - It Works on My Machine" by Torsten J. Zelger)

"Hey, the website feels very snappy on my computer," says the developer using an M5 MacBook Pro with 32GB of RAM, costing 2,299 Euro.

It is important to know the real-world performance results for your users. Thankfully, Chrome collects this data globally in the Chrome User Experience Report (CrUX). This report measures essential web performance metrics, known as Core Web Vitals, such as Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

With that, we can use the Live Metrics Page to get a high-level understanding of web performance by opening the Performance panel. The metrics data is live, as the INP and CLS scores will keep updating as you interact with the page. It will also point out your LCP element, identify which element is causing CLS, and show the history of interactions.

CPU Throttling Calibration

One way to simulate real user environments for accurate local metrics is to use CPU throttling. DevTools added CPU throttling back in 2015; however, the current 4x or 20x (CPU) slowdown options are quite limited, making it difficult to accurately simulate real-world performance. For example, with the 20x CPU slowdown throttling selected, your expensive M5 MacBook Pro could be faster than the performance of your user’s device.

In Chrome 134, DevTools added CPU throttling calibration, which allows you to simulate CPU throttling with a more accurate result. By running the CPU throttling calibration, DevTools will generate "low-tier mobile" and "mid-tier mobile" throttling presets, specific to your development machine.

Individual Request Throttling

Network Throttling was added to Chrome DevTools back in 2014. For the past 11+ years, network throttling has always applied to all network requests.

As of November 2025, Individual Request Throttling has been added to Chrome Canary. With this feature, you can now throttle a specific network request to a specific speed. You can customize the request in the “Request conditions” tab (previously called “Network request blocking”).

You can use network throttling profiles to create a custom network throttling profile, allowing you to customize download/upload speeds, network latency, packet loss percentage, and packet queue length.

To enable Individual Request Throttling, you need to install the latest version of Chrome Canary and enable “Enable individual request throttling in DevTools” in chrome://flags.

Example use case for Individual Request Throttling:

Scenario: You want to test if your web font loading strategy prevents "Flash of Invisible Text" (FOIT), but you don't want to slow down your JS bundles.
How to test it:
1. Open the Network Panel.
2. Right-click a specific resource (e.g., roboto.woff2).
3. Select "Throttle requests" > “Throttle request URL”.
4. In the “Request conditions” tab, change the network preset as you like, “Slow 4G” for example.
5. Refresh the page, notice the color for roboto.woff2 in Network Panel has now changed to yellow.

By only slowing down the roboto.woff2, you can now check if your font-display: swap fallback strategy is working correctly without affecting the rest of the page to load.

AI Assistance for Performance

The "Waterfall" (or inverted flamechart) in the Performance panel has been notoriously difficult to read and understand. Things just get worse with modern web frameworks, which bombard the waterfall with even more noise.

Tip: There are two ways to navigate the waterfall using a keyboard: Modern (use scrollwheel to scroll) and Classic (use scrollwheel to zoom). Click the question mark icon in the top right corner in the performance panel. And use “W” and “S” for zooming, “A” and “D” for panning left or right.

Another Tip: If you are using Angular v20 or React 19.2, you will now see custom tracks that provide more detailed information about your Angular/React app's performance thanks to the console.timeStamp API and User Timings API.

AI Annotation

Understanding the waterfall is the first step to analyze web performance. Annotation on the waterfall could be very useful, as you can label the track with your own words. This is also very useful if you need to share the findings with your colleagues. With the help of AI, DevTools can automatically generate the label for you based on the context.

To do this, double-click on one of the main tracks, then click on "Generate label". AI will suggest a label based on the stack trace.

Debug with AI

In the AI assistance panel, you can simply ask “What performance issues exist with my page?”, and you will be able to look at the potential performance issues from a higher level before diving deeper.

Or in the performance waterfall, right-click on any stack, then you can use AI to assess the purpose, identify time spent, find improvements, or just ask AI any question in the chat (AI assistance panel) in plain language

Note: This feature was previously called “Ask AI”, it was renamed to “Debug with AI” in Chrome 142.

Chrome DevTools MCP

The Chrome DevTools MCP is the most powerful feature added to Chrome DevTools this year. It allows your coding agent (such as Gemini CLI, Copilot, Cursor, etc) to control and inspect a live Chrome browser, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

This is significantly more powerful than the built-in AI assistance within Chrome DevTools because it has direct access to your source code. Previously, the AI suggestions from your IDE were generated without runtime context. Now with Chrome DevTools MCP, it can cross-reference your source code with live browser behavior, including performance trace, network requests, and console errors.

For example, you can ask the AI, localhost:8080 is loading slowly. Make it load faster. Chrome DevTools MCP will start a performance trace and use performance_analyze_insight to gather Core Web Vitals metrics like LCP, CLS, and INP.

Since it also has access to your source code, it can pinpoint the culprit and provide accurate fixes. It can even re-measure performance after the fix to verify that the changes actually worked.

// Detect dark theme var iframe = document.getElementById('tweet-1970505063064825994-323'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1970505063064825994&theme=dark" }

Performance auditing is just one use case for the Chrome DevTools MCP. Addy Osmani’s article covers even more scenarios, such as verifying code changes, performing network diagnosis, simulating user behavior for testing, and more.

Conclusion

In conclusion, optimizing web performance is very important for providing a good user experience. By using these 5 game-changing DevTools features, including the Live Metrics Page, advanced throttling options, and powerful AI Assistance, you can move beyond local benchmarks to accurately understand and optimize Core Web Vitals for every user.

However, these features are just the tip of the iceberg; Chrome DevTools is significantly more powerful than you might expect. With the Chrome DevTools MCP still improving, I can’t wait to see more advanced use cases emerge that redefine performance auditing.

Find me on social media!

LinkedIn: https://www.linkedin.com/in/henrylim96/
Bluesky: https://bsky.app/profile/henrylim96.bsky.social
Website: https://limhenry.xyz/

Turn Any Bluetooth Speaker into an AirPlay Speaker with Shairport Sync

Henry Lim — Fri, 29 Aug 2025 20:34:22 +0000

Got a mini-PC, SBC, or Raspberry Pi speaker lying around? You can pair it with a Bluetooth speaker to create your own AirPlay receiver, letting you stream music from any Apple device. This guide uses DietPi and Shairport Sync to build a dedicated, budget-friendly audio streamer.

What You'll Need

A Linux-compatible computer (like a mini-PC, SBC, or Raspberry Pi)
A microSD card with DietPi installed
A Bluetooth adapter (if your computer doesn't have built-in Bluetooth, a simple one like the TP-Link UB400 will work)
A Bluetooth speaker

A Note on DietPi

While you could do this on any Linux distribution like Ubuntu or Debian, DietPi is a great choice because it's lightweight and its user-friendly command-line interface makes installing software and configuring your device much simpler.

1. Install the Software

First, get your computer ready. After installing DietPi, use its built-in software installer to get the two main programs we need.

Open the DietPi software menu: dietpi-software.
Install Shairport Sync (AirPlay 2) (#37) and ALSA (#5).

2. Enable Bluetooth and Pair

Next, you need to enable Bluetooth on the computer and pair it with your speaker.

Enable Bluetooth in the DietPi configuration menu: dietpi-config -> Advanced Options -> Bluetooth -> [On].
Install the necessary utilities: apt install bluez-alsa-utils.
Now, use bluetoothctl to connect your computer to the speaker. Be sure to replace the example MAC address (02:50:41:A4:DE:6B) with your speaker's actual address.
- bluetoothctl
- power on
- scan on
- Wait for your Bluetooth speaker's MAC address to appear in the list. Note down the address and then turn off the scan.
- scan off
- trust 02:50:41:A4:DE:6B
- connect 02:50:41:A4:DE:6B
For a cleaner setup, you can rename your computer's Bluetooth broadcast name.
- system-alias AirPlay # Rename it to "AirPlay"

3. Configure Audio Routing

To ensure audio is sent through Bluetooth, we'll edit the ALSA configuration file.

Open the file: nano /etc/asound.conf.

Replace the entire content with the following code. This tells ALSA to route all default audio to the Bluetooth speaker.

pcm.btreceiver {
    type plug
    slave.pcm {
        type bluealsa
        device "02:50:41:A4:DE:6B"
        profile "a2dp"
    }
    hint {
        show on
        description "Bluetooth Receiver"
    }
}

pcm.!default {
    type plug
    slave.pcm "btreceiver"
}

4. Automate the Connection

To make this setup seamless, we'll create a script that automatically connects to the speaker whenever AirPlay starts.

Create the script file: nano /usr/local/bin/shairport-sync-connect.sh.

Add this simple script to the file:

echo "Connecting to Bluetooth Speaker ..."
bluetoothctl connect "02:50:41:A4:DE:6B"
sleep 3
exit 0

Make the script executable: chmod +x /usr/local/bin/shairport-sync-connect.sh.

5. Finalize Shairport Sync Settings

Finally, we'll update the Shairport Sync configuration to use the new script and give your AirPlay device a friendly name.

Open the configuration file: nano /usr/local/etc/shairport-sync.conf.
Find and change these three lines:
- general.name = "Bluetooth Speaker"
- sessioncontrol.run_this_before_entering_active_state = "/usr/local/bin/shairport-sync-connect.sh"
- sessioncontrol.wait_for_completion = "yes"

6. Restart the Service

To apply the changes you just made, you need to restart the Shairport Sync service.

Run the following command to restart the service: systemctl restart shairport-sync

That's it! Now your computer will appear as an AirPlay speaker on your Apple devices, ready to stream music. Enjoy your new, custom-built sound system!

Enhancing Link Shortener App with Google Gemini

Henry Lim — Sat, 28 Jun 2025 12:35:15 +0000

In this article, we'll learn how to enhance a link shortener app with Google Gemini. We will use Node.js and Express for our backend, Gemini to generate an easy-to-remember short link, and Puppeteer to extract useful context from web pages.

What We'll Learn Today:

How to set up the Google Gen AI JS/TS SDK
How to use Gemini to generate text output
How to generate structured output (JSON) with Gemini
How to use Puppeteer to get a page title
Bonus: How to run Gemini Nano on Chrome locally

1: Set Up Google Gen AI SDK

First, install the @google/genai JS/TS SDK by running npm install @google/genai.

Next, you'll need to get your Gemini API Key from https://aistudio.google.com/apikey.

It's always good practice not to expose the API key on the client side; therefore, we'll run the code on the server side (Node.js).

import { GoogleGenAI, Type } from "@google/genai";

const GEMINI_API_KEY = process.env.GEMINI_API_KEY;

const ai = new GoogleGenAI({ apiKey: GEMINI_API_KEY });

2: Text Generation with Gemini

Now that we've set up the Google Gen AI SDK, it's time to write the prompt. Google has an excellent guide on how to write the most efficient prompts: https://ai.google.dev/gemini-api/docs/prompting-strategies.

Here is our prompt to generate the short link:

You are a link shortener application. Your task is to generate a concise, human-readable, unique, compact, memorable short URL.
Only use lowercase, replace spaces with hyphens, and avoid special characters. Only return the URL slug, do not include the domain.

Shorten to URL for "https://blog.google/products/photos/updates-ask-photos-search/"

We will select gemini-2.5-flash as our model, and provide the contents and system instruction to Gemini by calling the generateContent function:

export const generateShortUrl = async (longUrl) => {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents:
      'Shorten to URL for "https://blog.google/products/photos/updates-ask-photos-search/"',
    config: {
      systemInstruction:
        "You are a link shortener application. Your task is to generate a concise, human-readable, unique, compact, memorable short URL. Only use lowercase, replace spaces with hyphens, and avoid special characters. Only return the URL slug, do not include the domain.",
    },
  });

  return response.text;
};

3. Structured Output

By default, the SDK returns unstructured text. While this is useful for building chatbots, it's not ideal for automating the short link generation process.

Fortunately, you can configure Gemini to return structured output, ensuring consistent and predictable results.

export const generateShortUrl = async (longUrl) => {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: `Shorten to url for "https://blog.google/products/photos/updates-ask-photos-search/"`,
    config: {
      systemInstruction:
        "You are an URL shortener application. Your task is to generate a concise, human-readable, unique, compact, memorable short URL.",
      responseMimeType: "application/json",
      responseSchema: {
        type: Type.OBJECT,
        properties: {
          shortUrl: {
            type: Type.STRING,
            description:
              "Only use lowercase, replace spaces with hyphens, and avoid special characters. Only return the URL slug, do not include the domain.",
          },
        },
        required: ["shortUrl"],
      },
    },
  });

  return JSON.parse(response.text);
};

In this case, the output will look like this: { "shortUrl": "google-photos-search" }.

4. Providing More Context with Puppeteer

Currently, we're only providing Gemini with the page URL. Sometimes, URLs can be very abstract, like "https://www.bbc.com/news/articles/cpw77qwd117o".

In such cases, Gemini won't be able to generate a meaningful short link unless we provide more context, such as the page title.

We can use Puppeteer to scrape the page title and send it to Gemini.

export const getMetadata = async (longUrl, title) => {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();
  await page.goto(longUrl, { waitUntil: "domcontentloaded", timeout: 15000 });

  const metadata = await page.evaluate(() => {
    return {
      title: document.title || null,
    };
  });

  await browser.close();

  return metadata;
};

export const generateShortUrl = async (longUrl, title) => {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: `Shorten to url for "${longUrl}". The page title is ${title}`,
    // ...
  });

  return JSON.parse(response.text);
};

In this case, Gemini will return { "shortUrl": "ai-chatbot-google-search" } instead of { "shortUrl": "cpw77qwd117o" }.

5. Create an API Endpoint with Express

Now that we have all the functions ready, we can create an Express server and expose our function via an API endpoint so it can be accessible from the frontend.

import express from "express";
import { generateShortUrl } from "./src/gemini.js";
import { getMetadata } from "./src/puppeteer.js";

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware to parse JSON
app.use(express.json());

// Endpoint to generate short link
app.post("/generateShortUrl", async (req, res) => {
  const { longUrl } = req.query;
  const title = getMetadata(longUrl);
  const shortUrl = await generateShortUrl(longUrl, title);
  res.json(shortUrl);
});

// Start the server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Bonus: Run Gemini Nano on Chrome Locally

Chrome is currently experimenting with the ability to run Gemini Nano locally. The Prompt API is currently still in the Early Preview Program (EPP) and is not production-ready at the moment. You can learn how to set it up here: https://developer.chrome.com/docs/ai/get-started.

Currently, it's nice to have the ability to run Gemini Nano locally, but make sure you have provided a cloud-based solution as a fallback.

export const generateShortUrl = async (longLink, title) => {
  const session = await LanguageModel.create({
    initialPrompt: [
      {
        role: "system",
        content:
          "You are an URL shortener application. Your task is to generate a concise, human-readable, unique, compact, memorable short URL.",
      },
    ],
  });

  const prompt = `Shorten to url for "${longLink}". The page title is ${title}`;

  const result = await session.prompt(prompt, {
    responseConstraint: {
      shortUrl: {
        type: "string",
        description:
          "Only use lowercase, replace spaces with hyphens, and avoid special characters. Only return the URL slug, do not include the domain.",
      },
    },
  });

  return JSON.parse(result); // { shortUrl: "example-short-url" }
};

Conclusion

In this article, we explored how to build a link shortener using Node.js and Express, enhancing it with AI using Google Gemini.

We learned how to set up the Google Gen AI SDK, how to write a prompt to generate text output, and how to use structured output to generate JSON responses. We also learned how to use Puppeteer to extract more context, like page titles, which improves the relevance and meaningfulness of the generated short links. As a bonus, we also learned how to generate text content locally with Gemini Nano on Chrome.

AI in Chrome DevTools: Apply CSS Changes Directly to Your Local Source Code with AI Assistance

Henry Lim — Wed, 21 May 2025 18:32:23 +0000

Chrome DevTools introduced AI Assistance in October 2024. Initially, AI assistance could only modify page content, but it couldn't apply those changes directly to your local source code.

At Google I/O 2025, a new feature was introduced, allowing you to apply changes from AI assistance directly to your local source code. This means any modifications made with AI assistance will now be persistent.

To enable this, you need to connect your source code to Chrome DevTools via Workspace.

Automatic Workspace Folders

Manually connecting source code can be inconvenient, especially when working on multiple projects. Fortunately, you can now automatically connect your source code to Chrome DevTools using Automatic Workspace Folders.

For Automatic Workspace Folders to work, you need to create a com.chrome.devtools.json file inside a .well-known/appspecific folder. The com.chrome.devtools.json file should look like this:

{
  "workspace": {
    "root": "/Users/foo/bar",
    "uuid": "53b029bb-c989-4dca-969b-835fecec3717"
  }
}

workspace.root is the absolute path to your project folder (where your source code is located).
workspace.uuid is a valid UUID, ideally a randomly generated v4 UUID, which you should generate when setting up your project folder.

You can generate a UUID using any online UUID generator tool, by running the command npx --package uuid uuid v4 in your terminal, or by calling crypto.randomUUID() in JavaScript.

Alternatively, you can generate the com.chrome.devtools.json file using the following script:

mkdir -p .well-known/appspecific
echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"`npx --package uuid uuid v4`\"}}" > .well-known/appspecific/com.chrome.devtools.json

If you are using Vite, you can install Vite Plugin for DevTools Project Settings (npm install -D vite-plugin-devtools-json). Add this plugin to your Vite configuration, and it will automatically create the .well-known/appspecific folder in your Vite cache with a randomly generated UUID.

import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson(),
    // ...
  ]
});

AI Assistance in Action

Once your source code is connected to Chrome DevTools (either manually or automatically), and you've confirmed AI assistance is enabled in Chrome DevTools, you can begin using AI assistance for persistent CSS fixes.

Here's how to use it:

Open Chrome DevTools.
In the Elements panel, right-click the element you want to modify, and select "AI Assistance."
Enter a prompt to make styling changes to your element (e.g., "Change font color to red" or "Set the image aspect ratio to letterbox").
Follow the conversation to apply the changes temporarily.
Click "Apply to workspace" to make the changes persistent in your local source code.

Conclusion

Getting AI to help with CSS changes right in Chrome DevTools is a good step forward for web developers. While AI can't do everything yet, but this small feature stops you from manually copying and pasting CSS from AI Assistance. This makes your work smoother and helps you get things done a bit faster. It's a handy tool to have.

Reading Xiaomi Mi Scale data with Web Bluetooth Scanning API

Henry Lim — Sun, 10 May 2020 13:32:54 +0000

The Web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy (BLE) peripherals. It was introduced in Chrome 56 on macOS back in January 2017.

Reading the weight data

Note: This demo only works on the first generation of Mi Body Composition Scale which was released in 2017 (Model Number: XMTZC02HM).

To capture the BLE advertising packets from the Xiaomi Mi Scale, we will need to use the Web Bluetooth Scanning API.

However, the Web Bluetooth Scanning API is still under development. You need to use Chrome 79+ with the chrome://flags/#enable-experimental-web-platform-features flag enabled to use the API.

navigator.bluetooth.requestLEScan() will start scanning for the advertising packets. Right before that, the permission prompt will popup asking the user for permission to access Bluetooth.

After the user has granted permission, we can listen to the advertising packets by using the advertisementreceived event:

The advertisementreceived event will return information like Device Local Name, Device ID, Received Signal Strength Indicator (RSSI), Transmit power (TX Power), Service UUIDs, Manufacturer Data, and Service Data.

To retrieve the payload data from Xiaomi Mi Scale, we need to get the data from serviceData.

The output result of "valueDataView.buffer"

The payload format for the Mi Scale

Next, to get the weight data, we need to get the value of bytes 11 and 12 (which are little-endian) then divide the value by 200.

With that, we have successfully retrieved the weight data from Xiaomi Mi Scale using the Web Bluetooth Scanning API.

Extra: Reading the Impedance Data

The Xiaomi Mi Scale is also able to measure information like muscle mass, bone mass, body fat, and more through Bioelectrical Impedance Analysis (BIA).

We can get the impedance data from bytes 9 and 10:

Next, we can convert the impedance value using this algorithm. The output should look something like this:

Try It Out

Note: There's no way to get the impedance data if you are wearing socks, but I don't want to show my ugly feet… (And yes, that's a T-Rex socks)

Demo: https://scale.limhenry.xyz
GitHub (Source Code): github.com/limhenry/web-bluetooth-mi-scale

References

Web Bluetooth Documentation: Link
Web Bluetooth Scanning API Sample: Link
Xiaomi Mi Scale BLE (Unofficial) Documentation: Link
TypedArray or DataView: Understanding byte order: Link

How to Create Malaysia Flag with HTML and CSS 🇲🇾

Henry Lim — Fri, 30 Aug 2019 08:20:24 +0000

Malaysia is now 62-years old! 🎉 Happy birthday, Malaysia! 🎂

To celebrate this big day, I have decided to create the Malaysia flag using HTML and CSS (only), and without using any JavaScript, SVG, and of course, without using any images.

Um … But technically I can use emoji right? Or maybe I can use this NPM package?

Flag of Malaysia - Jalur Gemilang 🇲🇾

The flag of Malaysia, also known as the Malay: Jalur Gemilang ("Stripes of Glory"), is composed of a field of 14 alternating red and white stripes along the fly and a blue canton bearing a crescent and a 14-point star known as the Bintang Persekutuan (Federal Star).

Here are the components that I need to create using HTML and CSS:

14 Alternating Red and White Stripes: Sounds easy 😎
Crescent: Hmm, a big circle and a small circle inside? 🤔
14-Point Star: I have completely no idea how to do this 🤭

Step 1: Create Flag Layout with CSS Grid

(Source: Wikipedia)

Firstly, I am going to create the flag layout with CSS Grid.

It's pretty straight-forward, I will use grid-template-rows and grid-template-columns properties to create the flag layout with 2 rows and 2 columns.

Then, I will use grid-column: span 2 to expand the bottom column into a full row (or 2 columns).

I am also using CSS Variable too

CSS Grid Layout for Jalur Gemilang

Step 2: 14 Alternating Red and White Stripes

The Jalur Gemilang consists of 7 red stripes and 7 white stripes. 8 of the stripes are located at the upper-right quarter, and the rest of the 6 stripes are located at the bottom part of the flag.

7 red stripes + 7 white stripes

What I need to do now, is to create 14 <div> and use CSS's :nth-child(even) and :nth-child(odd) rules to style the stripes.

But is there any other better method to do this? 🤔

Hmm … how about using repeating-linear-gradient?

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. - MDN Web Docs

With that, I can use repeating-linear-gradient to create the 14 red-white stripes without writing 14 <div>! CSS FTW! 🎉

Step 3: Crescent 🌙

The crescent can be created using a circle with an inner shadow, which can be done using the inset value. (Thanks Google!)

I found this method online ¯\_(ツ)_/¯

Here's how the flag looks like (so far)

Step 4: 14-point star

That's the moment, I realized I have completely no idea how to create a 14-point star using CSS. (And I also forgot how to draw the 14-point star by hand 🤦‍♀️)

Yes, it's really difficult to draw the 14-point star 🤣 (Image: submerryn.com)

So after some simple research (aka Google Search), I found 3 ways how to draw a 14-point star:

Method 1: Draw 7 lines, then draw a "V" between each tip.

😀 Very easy to draw on paper
😕 No idea how to recreate it with CSS

Draw 7 lines, then draw a "V" between each tip (Image Source: submerryn.com)

Method 2: 14 triangles surrounded by a circle.

😀 Easy to draw on paper
☹️ Hard to recreate it using CSS

14 triangles surrounded by a big circle?

Method 3: 7 long diamond shapes with different rotation values.

🤷‍♀️ I guess no one uses this method to draw on paper?
😍 Very easy to recreate it using CSS

7 long diamond shapes with different rotation values

Ok, now I have found a way to create the 14-point star using CSS, the next step is to create 14 long diamond shape with different rotation values.

Long diamond shape = 2 isosceles triangles

The long diamond shape can be created using 2 isosceles triangles. The code should look something like this:

The next step is to duplicate the long diamond shape for 6 more times, and add the CSS rotate function to it. As a result, the code should look like this:

Result 🇲🇾

Here you have it, I have successfully created the Malaysia flag using 30 lines of HTML and ~120 lines of CSS. 🎉

https://codepen.io/limhenry/pen/mdbEGYg

You can look at the full code on CodePen: codepen.io/limhenry/pen/mdbEGYg

What's next?

However, this is not perfect yet. Few more things can be improved:

😤 Issue #1: Sub-pixel Rendering

Sub-pixel rendering issue on Firefox

If you open the CodePen link in Firefox, you might notice the sub-pixel rendering issue (The weird line in the 14-point star).

However, it's actually possible to fix it using transform: translateZ(1px); (Refer to line 111). By doing this, the browser will render it using hardware acceleration or GPU acceleration, instead of the browser's slower software rendering engine.

😅 Issue #2: Flag is Not Responsive

This can be done with a few lines of JavaScript code, but maybe I can write another article just for this? 🤔

Anyway, it's time for me to go eat some Nasi Lemak 😋 Happy Birthday Malaysia! 🎉

HAPPY BIRTHDAY, MALAYSIA! 🇲🇾🎂 (Image: NG-MY KIA / 📸 Myself)

How to Add Internationalization (i18n) to your Preact application

Henry Lim — Tue, 18 Jun 2019 14:45:26 +0000

🇹🇼 中文版 (Chinese Version): https://dev.to/henrylim96/i18n-preact-3pie

What is Internationalization (i18n)?

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

In this article, you are going to use the preact-i18n library to add internationalization to your Preact application.

Step 1: Setup Preact CLI & Create new project

Side Note: If you are already familiar with Preact, you may skip to the next step.

If you haven't installed the Preact CLI on your machine, use the following command to install the CLI. Make sure you have Node.js 6.x or above installed.

$ npm install -g preact-cli

Once the Preact CLI is installed, let's create a new project using the default template, and call it my-project.

$ preact create default my-project

Start the development server with the command below:

$ cd my-project && npm run start

Now, open your browser and go to http://localhost:8080, and you should see something like this on your screen:

Step 2: Add preact-i18n library

Install the preact-i18n library to your project using the command below:

$ npm install --save preact-i18n

preact-i18n is very easy to use, and most importantly, it's extremely small, around 1.3kb after gzipped. You can learn more about the library here: https://github.com/synacor/preact-i18n

Step 3: Create a definition file

Once you have the library installed, you will need to create a definition file, which you will store all the translate strings in a JSON file.

In this case, you will need to save this file in src/i18n/zh-tw.json:

{ 
  "home": {
    "title": "主頁", 
    "text": "這是個Home組件。"
  }
}

Step 4: Import IntlProvider and definition file

Next, open the app.js file, which is located in the src/components folder. Then, import the IntlProvider and your definition file to the app.js file:

import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';

Step 5: Expose the definition via IntlProvider

After that, you will need to expose the definition file to the whole app via <IntlProvider>. By doing this, you will be able to read the definition file everywhere in the app.

render() {
  return(
    <IntlProvider definition={definition}>
      <div id="app" />
    </IntlProvider>
  );
}

At this moment, here's how your app.js file should looks like:

import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';
// Import IntlProvider and the definition file.
import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';
export default class App extends Component {

 handleRoute = e => {
  this.currentUrl = e.url;
 };
render() {
  return (
   // Expose the definition to your whole app via <IntlProvider>
   <IntlProvider definition={definition}>
    <div id="app">
     <Header />
     <Router onChange={this.handleRoute}>
      <Home path="/" />
      <Profile path="/profile/" user="me" />
      <Profile path="/profile/:user" />
     </Router>
    </div>
   </IntlProvider>
  );
 }
}

Step 6: Use Text to translate string literals

You are almost done, now you just need to replace the text in the page with <Text>. In this case, you will need to update the content of the home page (src/routes/home/index.js) by adding the <Text> inside the <h1> and <p> tags.

import { Text } from 'preact-i18n';
const Home = () => ( 
  <div> 
    <h1> 
      <Text id="home.title">Home</Text> 
    </h1> 
    <p> 
      <Text id="home.text">This is the Home component.</Text> 
    </p> 
  </div> 
); 
export default Home;

Fallback Text

In order to prevent blank text being rendered in the page, you should set a fallback text to the <Text>. If you didn't include the definition for unknown.definition, the library will render any text contained within <Text>…</Text> as fallback text:

<Text id="unknown.definition">This is a fallback text.</Text>
// It will render this text: "This is a fallback text."

Localizer and MarkupText

If you want to translate the text of the HTML attribute's value (ie: placeholder="", title="", etc …), then you will need to use <Localizer> instead of <Text>.

However, if you want to include HTML markup in your rendered string, then you will need to use <MarkupText>. With this component, your text will be rendered in a <span> tag.

In the example below, you are going to add few more lines of code to your definition file. first_name and last_name will be used for the <Localizer>'s example, and link for the example for <MarkupText>.

{ 
  "first_name": "名",
  "last_name": "姓",
  "link": "這是個<a href='https://www.google.com'>連結</a>"
}

With this, you will able to use <Localizer> and <MarkupText> in the page. Please take note that you need to import Localizer and MarkupText to the src/routes/home/index.js file.

import { Text, Localizer, MarkupText } from 'preact-i18n';
const Home = () => ( 
  <div> 
    <Localizer> 
      <input placeholder={<Text id="first_name" />} /> 
    </Localizer> 
    <Localizer> 
      <input placeholder={<Text id="last_name" />} /> 
    </Localizer> 
    <MarkupText id="link"> 
      This is a <a href="https://www.google.com">link</a>
    </MarkupText>
  </div>
);
export default Home;

Templating

If you want to inject a custom string or value into the definition, you could do it with the fields props.

First, you will need to update the definition file with the {{field}} placeholder. The placeholder will get replaced with the matched keys in an object you passed in the fields props.

{
  "page": "{{count}} / {{total}} 頁"
}

Next, you will need to add the fields attribute together with the value into the <Text />. As a result, your code should looks like this:

import { Text } from 'preact-i18n'; 
const Home = () => ( 
  <div>
    <h2> 
      <Text id="page" fields={{ count: 5, total: 10 }}>
         5 / 10 Pages
      </Text> 
    </h2> 
  </div> 
); 
export default Home;

Pluralization

With preact-i18n, you have 3 ways to specific the pluralization values:

"key": { "singular":"apple", "plural":"apples" }
"key": { "none":"no apples", "one":"apple", "many":"apples" }
"key": ["apples", "apple"]

For the next example, you will combine both pluralization and templating. First, you will need to update the definition file with the code below:

{
  "apple": { 
    "singular": "Henry has {{count}} apple.", 
    "plural":"Henry has {{count}} apples." 
  }
}

Next, you will update the home page (src/routes/home/index.js) with the following code:

import { Text } from 'preact-i18n'; 
const Home = () => ( 
  <div> 
    <p> 
      <Text id="apple" plural={1} fields={{ count: 1 }} /> 
    </p> 
    <p> 
      <Text id="apple" plural={100} fields={{ count: 100 }} /> 
    </p> 
  </div> 
); 
export default Home;

With the method above, you will able to add pluralization and templating to your Preact application.

Dynamically import language definition file

In a real-world scenario, you would like to set the language site based on the user's choice, which is either based on the navigator.language or the user can change the site language on their own.

However, in order to prevent you from importing all the unnecessary definition files to the project, you can import the language definition file dynamically by using import(). By doing this, you can import the language definition file based on the user's choice.

import { Component } from 'preact'; 
import { IntlProvider } from 'preact-i18n'; 
import defaultDefinition from '../i18n/zh-tw.json'; 
export default class App extends Component { 
  state = { 
    definition: defaultDefinition 
  } 
  changeLanguage = (lang) => { 
    // Call this function to change language 
    import(`../i18n/${lang}.json`) 
      .then(definition => this.setState({ definition })); 
  }; 
  render({ }, { definition }) { 
    return ( 
      <IntlProvider definition={definition}> 
        <div id="app" /> 
      </IntlProvider> 
    ); 
  } 
}

In this case, you can call the this.changeLanguage('zh-TW') function to change the site language.

Who's using preact-i18n?

I am using preact-i18n for my side project: Remote for Slides.

Remote for Slides is a Progressive Web App + Chrome Extension that allows the user to control their Google Slides on any device, remotely, without the need of any extra hardware.

Remote for Slides Progressive Web App supports more than 8 languages, which includes: Català, English, Español, Euskera, Français, Polski, Traditional Chinese, and Simplified Chinese.

In this side project, I am using the "dynamically import language definition file" method I mentioned earlier. This could prevent the web app from loading some unnecessary definition language files, thus this will improve the page performance.

Furthermore, the Remote for Slides Progressive Web App will set the language based on the browser's language (navigator.language), or based on the URL parameter (ie: s.limhenry.xyz/?hl=zh-tw), or the user can change it from the Settings page.

You can learn more about Remote for Slides here:

Meet Remote for Slides, a new way to control your presentation slides

Henry Lim ・ Apr 2 '19

#pwa #web #android #googleslides

Resources

如何國際化(i18n)您的Preact項目

Henry Lim — Tue, 18 Jun 2019 14:45:16 +0000

🇺🇸 English Version (英文版): https://dev.to/henrylim96/how-to-add-internationalization-i18n-to-your-preact-application-5gd6

什麼是國際化 (i18n)？

國際化 (Internationalization)，也被稱為i18n，意思指i和n之间有18个字母。國際化是指修改軟體使之能適應目標市場的語言、地區差異以及技術需要。

在這篇文章中，我們將會使用preact-i18n來國際化您的Preact項目。

步驟 1：設置Preact CLI, 並創建一個新的項目

注: 如果您已經熟悉Preact了，您可以跳到下一步。

如果您還沒有將Preact CLI安裝到您的電腦，請使用以下的命令來安裝Preact CLI。這CLI需要Node.js 版本 6.x 或以上。

$ npm install -g preact-cli

當您已經成功將Preact CLI安裝到您的電腦中，我們將會使用以下的命令來創建一個名為my-project的項目。在這個項目中，我們將會使用default模板。

$ preact create default my-project

之後呢，您可以使用以下的命令來啟動本地測試服務器。

$ cd my-project && npm run start

這個時候，我們需要打開我們的遊覽器，並前往http://localhost:8080, 你將會看到像這樣類似的畫面：

步驟 2：安裝preact-18n

我們將會使用以下的命令來安裝preact-i18n到您的項目中。

$ npm install --save preact-i18n

preact-i18n是非常容易使用的。更重要的是，這preact-i18n在gzip之後才佔據不到1.3kb的大小。

步驟 3：創建definition文件

當你已將preact-i18n安裝到您的項目之後，我們將會創建一個definition文件。我們將會把我們要翻譯的文字和句子，儲存在這個JSON文件中。

我們將會把這個definition文件儲存在src/i18n/zh-tw.json。

{ 
  "home": {
    "title": "主頁", 
    "text": "這是個Home組件。"
  }
}

步驟 4：導入IntlProvider及definition文件

接下來，我們將會從src/components中打開app.js。我們將會在這個文件中導入IntlProvider及definition文件。

import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';

步驟 5：把IntlProvider放在項目中最高層級的組件

然後呢，我們將會在把<IntlProvider>放在項目中最高層級的組件，也就是我們的app.js。這樣子，我們就能在這Preact項目中的任何一個組件中讀取到definition文件。

render() {
  return(
    <IntlProvider definition={definition}>
      <div id="app" />
    </IntlProvider>
  );
}

在這個時候，您的app.js文件的內容應該是要跟以下的例子類似:

import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';
// 導入 IntlProvider 及 definition 文件。
import { IntlProvider } from 'preact-i18n';
import definition from '../i18n/zh-tw.json';
export default class App extends Component {

 handleRoute = e => {
  this.currentUrl = e.url;
 };
render() {
  return (
   // 把 <IntlProvider> 放在項目中最高層級的組件
   <IntlProvider definition={definition}>
    <div id="app">
     <Header />
     <Router onChange={this.handleRoute}>
      <Home path="/" />
      <Profile path="/profile/" user="me" />
      <Profile path="/profile/:user" />
     </Router>
    </div>
   </IntlProvider>
  );
 }
}

步驟 6：使用Text來顯示翻譯字符串文字

我們只差一步就成功了。在以下的例子中，我們將會翻譯主頁(src/routes/home/index.js)中所有的文字。現在，我們只需要把網頁中的字改成<Text>。因此，我們將會把<Text>添加進<h1>和<p>裡。

import { Text } from 'preact-i18n';
const Home = () => ( 
  <div> 
    <h1> 
      <Text id="home.title">Home</Text> 
    </h1> 
    <p> 
      <Text id="home.text">This is the Home component.</Text> 
    </p> 
  </div> 
); 
export default Home;

後備文字

為了避免網頁中出現空白，我們應該在<Text>中輸入後備文字。如果preact-i18n無法在您的definition中找到相關的文字或句子，那preact-i18n將會使用你剛才在 <Text>…</Text>輸入的後備文字。

<Text id="unknown.definition">This is a fallback text.</Text>
// 這將會渲染: "This is a fallback text."

Localizer 和 MarkupText

如果您是想要翻譯HTML屬性中的文字 (比如說 placeholder=""或是title=""等等)，您應該使用<Localizer>，而並不是使用<Text>。

相反的，如果您是想要在您的翻譯的文字或句子中使用HTML Markup, 您必須使用<MarkupText>。<MarkupText>將會把已翻譯好的文字或句子渲染在一個<span>tag中。

在以下的例子中，我們將會在我們的definition文件中添加多幾行的代碼。first_name及last_name，將會使用在<Localizer>中的例子。而我們會在<MarkupText>中的例子使用link。

{ 
  "first_name": "名",
  "last_name": "姓",
  "link": "這是個<a href='https://www.google.com'>連結</a>"
}

在你更新主頁(src/routes/home/index.js)中的內容之前，記得將Localizer和MarkupText導入到該頁中：

import { Text, Localizer, MarkupText } from 'preact-i18n';
const Home = () => ( 
  <div> 
    <Localizer> 
      <input placeholder={<Text id="first_name" />} /> 
    </Localizer> 
    <Localizer> 
      <input placeholder={<Text id="last_name" />} /> 
    </Localizer> 
    <MarkupText id="link"> 
      This is a <a href="https://www.google.com">link</a>
    </MarkupText>
  </div>
);
export default Home;

模板 (Templating)

如果您想要在您的definition中注入一些自定義的字符串，您可以使用fields屬性來實現。

首先呢，我們需要先更新我們的definition文件。在我們的definition文件中，我們需要將我們要被自定義的字符串替代的文字，更改成像{{count}}或者是{{total}}這樣子的佔位符。

{
  "page": "{{count}} / {{total}} 頁"
}

之後呢，我們需要在我們的<Text />中加入fields屬性。因此，您的代碼應如下所示：

import { Text } from 'preact-i18n'; 
const Home = () => ( 
  <div>
    <h2> 
      <Text id="page" fields={{ count: 5, total: 10 }}>
         5 / 10 Pages
      </Text> 
    </h2> 
  </div> 
); 
export default Home;

复数 (Pluralization)

如果您要翻譯的語言有复数的話(比如說像英文：apple / apples)，您可以使用以下其中一個方法，來把已翻譯好的文字和句子放進您的definition文件裡。

"key": { "singular":"apple", "plural":"apples" }
"key": { "none":"no apples", "one":"apple", "many":"apples" }
"key": ["apples", "apple"]

在以下的例子中，我們將會把模板和复数的例子結合在一起。但在那之前，我們需要更新我們的definition文件：

{
  "apple": { 
    "singular": "Henry has {{count}} apple.", 
    "plural":"Henry has {{count}} apples." 
  }
}

接著，我們將會把以下的代碼粘貼到src/routes/home/index.js中：

import { Text } from 'preact-i18n'; 
const Home = () => ( 
  <div> 
    <p> 
      <Text id="apple" plural={1} fields={{ count: 1 }} /> 
    </p> 
    <p> 
      <Text id="apple" plural={100} fields={{ count: 100 }} /> 
    </p> 
  </div> 
); 
export default Home;

根據以上的步驟，你就能在您的Preact項目中使用模板和复数。

動態導入definition文件

在現實情況中，您將會根據用戶的選擇來設定網頁的語言。

您可以使用遊覽器的語言(通過navigator.language)，或者是讓用戶自己手動更換語言。

然而，為了避免我們將不必要的definition文件導入進去，我們可以使用import()來實現動態導入definition文件。這樣一來，我們只會導入用戶所選擇的語言所需要的definition文件。

import { Component } from 'preact'; 
import { IntlProvider } from 'preact-i18n'; 
import defaultDefinition from '../i18n/zh-tw.json'; 
export default class App extends Component { 
  state = { 
    definition: defaultDefinition 
  } 
  changeLanguage = (lang) => { 
    // 我們可以使用這個函數來更換語言
    import(`../i18n/${lang}.json`) 
      .then(definition => this.setState({ definition })); 
  }; 
  render({ }, { definition }) { 
    return ( 
      <IntlProvider definition={definition}> 
        <div id="app" /> 
      </IntlProvider> 
    ); 
  } 
}

根據以上的例子，我們可以使用這函數:this.changeLanguage("zh-TW") 來導入definition文件並更改網頁的語言。

誰在使用preact-i18n？

我自己的業餘項目: Remote for Slides，正在使用著preact-i18n。

Remote for Slides是一個漸進式網絡應用程序(PWA) + Chrome 擴充器。這能讓用戶在任何設備上，遠程遙控Google簡報。是時候跟昂貴的翻頁筆說再見了。

Remote for Slides 漸進式網絡應用程序支持多達8個語言，包括了英文、繁體中文、簡體中文、加泰羅尼亞文、西班牙文、法文、波蘭文、以及Euskera。

在這個項目中，我也使用了我在剛才提到的 "動態導入definition文件" 的方法。這可以避免應用程序導入一些沒使用到的definition文件。這將會提升應用程序性能。

除此之外，Remote for Slides 漸進式網絡應用程序也將會自動地設置語言。這應用程序將會根據遊覽器的語言(navigator.language)、或者是根據URL中的parameter (ie: s.limhenry.xyz/?hl=zh-tw)來更改語言。當然，用戶也可以從設置中更改語言。

您可以在這裡知道關於Remote for Slides更多的訊息：

Meet Remote for Slides, a new way to control your presentation slides

Henry Lim ・ Apr 2 '19

#pwa #web #android #googleslides

Adding Splash Screen to Trusted Web Activity with Android’s FileProvider

Henry Lim — Fri, 03 May 2019 15:08:14 +0000

⚠️ THIS ARTICLE IS MORE THAN 1 YEAR OLD.
Please refer to this article on how to add splash screen to Trusted Web Activities.

Learn how you can add a splash screen to your Trusted Web Activity (TWA) with Android’s FileProvider.

What is Trusted Web Activity?

Trusted Web Activities (TWA) are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on Custom Tabs.

⚠️ This method is NOT production ready, and it only works on Chrome 75+. You have been warned!️ ️️⚠️

Step 1: Add Logo

Add your app logo to the drawable folder (using Asset Studio). In this case, I set the logo size to 96dp and named it ic_splash.

drawable/ic_splash

Step 2: Create an XML file

Create a new XML file in the XML resources folder. In this case, I’m calling it file_path.xml.

Adding "file_path.xml"

Then, add the following code to the XML file you just created:

Step 3: Update AndroidManifest.xml

Update your AndroidManifest.xml file by adding a new <meta-data> and <provider>:

AndroidManifest.xml

Step 4: Update the Trusted Web Activity Library

Make sure you are using the latest build of Chrome Tabs Client (or at least build 3679335).

Check the latest build here: https://chromium.googlesource.com/custom-tabs-client/+log

You can update the library in the build.gradle file:

build.gradle

Step 5: Party Time 🎉

Now you should see your app logo showing in the splash screen. Yay!

Remote for Slides Lite Splash Screen

CSS Tricks has an awesome article about how you can implement Trusted Web Activity to your Progressive Web App, you can learn more here:

https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/

Note: This method is based on the doc from the custom-tabs-client library:

https://chromium.googlesource.com/custom-tabs-client/+/refs/heads/master/customtabs/src/android/support/customtabs/trusted/LauncherActivity.java

Meet Remote for Slides, a new way to control your presentation slides

Henry Lim — Tue, 02 Apr 2019 15:18:11 +0000

Say hello to Remote for Slides. Remote for Slides allows you to control Google Slides on any device, remotely, without the need of any extra hardware.

Getting Started with Remote for Slides

Install Remote for Slides Chrome Extension from the Chrome Web Store.
Open your Google Slides in Editor Mode, then click on the "Present with Remote" button.
Next, click on the "Start Remote" button to show the 6-digit code.
Enter the 6-digit code in the Remote for Slides Progressive Web App or in the Remote for Slides Lite Android App, and you are ready to go!

What’s new in Remote for Slides

✅ Control presentation slide (Next/Previous slide)
✅ View speaker notes with adjustable font size
✅️ View timer
✅ Dark mode
✅ Black mode (Works best with OLED screen)
✅ Multiple languages support

Speaker notes & Timer

You can now view your speaker notes directly in the Remote for Slides Progressive Web App or in the Remote for Slides Lite Android App. To make sure you can keep track of time, we also added a timer at the bottom of the screen. We want you to have a successful presentation!

Dark Mode & Black Mode

Are you going to giving a presentation in a dark environment? You can now enable the dark mode from the settings page. And if you are using a device with an OLED display, we recommend you to enable the black mode.

Multiple languages support

Remote for Slides Progressive Web App and Remote for Slides Lite Android App are now available in 8 languages: Català, English, Español, Euskera, Français, Polski, Simplified Chinese, and Traditional Chinese.

Remote for Google Slides works on everywhere

Try out Remote for Slides today:

Remote for Slides Chrome Extension (Chrome Web Store)
Remote for Slides Progressive Web App (s.limhenry.xyz)
Remote for Slides Lite Android App (Google Play Store)

We’d love to hear what you think. Please let us know how we can improve on Twitter (@remoteforslides).

Want to support this project? You can make a donation here!

Case Study: Preview Your Launcher Icon Design with icon.limhenry.xyz

Henry Lim — Thu, 21 Mar 2019 06:10:37 +0000

"Launcher Icon Previewer allows you to preview your launcher icon design on your mobile devices."

Launcher Icon Previewer is a project created by me and Taylor Ling, the co-founder of Fabulous app, and he’s also a Google Product Design Expert.

You can learn more about Launcher Icon Previewer here: icon.limhenry.xyz

This post was originally published on medium.com.

Technologies

We decided to use all the greatest and latest technologies to develop Launcher Icon Previewer, which includes:

Home & Upload Page

"Home & Upload Page" (Select Icon page, Preview Icon page, and Uploading page)

The "Home & Upload Page" consists of 3 parts: Select Icon, Preview Icon, and Uploading.

On the "Preview Icon*" page, once the user clicked on the blue "Upload Icon" button, the icon will upload to the Cloud Storage. Once the icon is uploaded, it will return a download URL for the icon.

After that, we will store the icon’s URL, together with other information like the icon’s dimension, icon’s file type, app name, timestamp to Firebase Realtime Database.

Once everything is completed, the page will redirect to the "Preview & Share Page".

Preview & Share Page

"Preview & Share Page"

Generate QR Code

We added a QR code on the "Share Page", this will make it easier for the user to open the page on another device. In this case, we are actually using a deprecated Google Charts API.

Well, it’s still working perfectly ¯\_(ツ)_/¯

By using the URL below, we are able to generate the QR code on the fly with a URL GET request.

https://chart.googleapis.com/chart?chs=256x256&cht=qr&chld=L|1&choe=UTF-8&chl=https://icon.limhenry.xyz/123456

Service Worker

It’s important to register the service worker correctly since one of the criteria for add to home screen is to have a registered service worker.

In this case, we need to set the scope of the service worker to /<id>/ instead of the root of the page. By doing this, the service worker will only control the requests of the page from icon.limhenry.xyz/<id>/, but not from icon.limhenry.xyz/.

Web App Manifest & Add to Home Screen

Adding Your App Icon to the Home Screen (Chrome for Android)

In order to show the "Add to Home Screen" button in the preview page (see screenshot above), we are using the beforeinstallprompt event to show the button on the screen:

The browser will fire a "beforeinstallprompt" event is the site meets the Add to Home screen criteria

Take note this beforeinstallprompt event is still an experimental technology, and it’s only working on Chrome 45 and above. However, for those using browsers that don’t support the beforeinstallprompt event, they still can add the page to the home screen from the menu options.

Dynamically generate "manifest.json" using Express

To generate the web app manifest dynamically, we are using Express which is running on the Cloud Functions for Firebase. This allows us to generate a custom web app manifest with different app icon, start URL and app name on the server.

Cross-Platform Support

Initially, we built this Launcher Icon Previewer just for the Chrome browser, but we tried our best to make sure it works fine on other platforms too.

Launcher Icon Previewer running on Safari for iOS

In this case, we want to make sure Launcher Icon Previewer is working on Safari for iOS. However, there’s a problem: Safari doesn’t support web app manifest.

Meet PWACompat, PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps. By adding PWACompat to the site, it will dynamically generate the appropriate meta icon tags needed to meet to criteria for add to home screen.

Launcher Icon Previewer running on the desktop (Chrome for MacOS)

Furthermore, with the support of Desktop Progressive Web App on the latest version of Google Chrome for Chrome OS, MacOS, Windows and Linux, Launcher Icon Previewer will also work on the desktop platform.

In conclusion, the user can now preview their app icon on:

App Drawer, Home Screen (Android & iOS)
Start menu, Taskbar (Windows)
Launchpad, Dock (MacOS)
App Launcher, Shelf (ChromeOS)

Optimization: Auto delete icons after 24 hours

This project is currently using Firebase Spark (free) plan, hence we only can store total 5GB of data per month on Cloud Storage for Firebase, with 1GB of download traffic per day.

To prevent us from exceeding the limit, we need to delete the old, unused icon files from Cloud Storage periodically.

Dashboard of cron-job.org

In this case, we are using cron-job.org to schedule the Cloud Functions to execute every 24 hours.

The Cloud Functions will check the upload timestamp, and it will delete the icon from the Cloud Storage if it’s older than 24 hours. By using this method, we can (hopefully) make sure this project can runs perfectly without exceeding the limit of Firebase free plan.

Launcher Icon Previewer is currently in beta, as we aren’t sure if there will be any more issue, but feel free to share it out! 🎉

Psst, are you a public speaker or you are going to give a presentation soon?

Try out Remote for Slides. It is a Chrome Extension and a Progressive Web App that allows you to control Google Slides on any device, remotely, without the need of any extra hardware.

Want to support these projects? You can make a donation here!

30 Events & 10 Websites later — My journey with Google Developer Group Kuala Lumpur

Henry Lim — Mon, 18 Mar 2019 14:37:21 +0000

I/O Attendees from Asia Pacific @ Google I/O 2017

This post was originally published on medium.com.

TL;DR: On October 2015, I joined GDG Kuala Lumpur as a committee member. In the last 3 years, I have learned and grown a lot with this amazing community. Without all of this, I would not be who I am today.

3 years later, after I volunteered and organized more than 30 events, I stepped down the role of the main organizer at GDG Kuala Lumpur, and say goodbye to this big family.

Here’s my journey from the past few years:

What is Google Developer Groups?

Google Developer Groups (GDGs) are local groups of developers who are specifically interested in Google products and APIs. Each local group is called a GDG chapter and can host a variety of technical activities for developers - from just a few people getting together to watch our latest videos, to large gatherings with demos and tech talks, to hackathons.

2014: The beginning of this epic journey

Event Volunteered: 2

June 2014: It was the beginning of the journey: My first year as a computer science student at Multimedia University, Cyberjaya.

The campus of my university: Multimedia University, Cyberjaya

Few months later, I found out there was a Google program happening on my campus: the Google Student Ambassador Program.

The Google Student Ambassador (GSA) Program was a global program that was aimed at active tertiary students from all academic backgrounds. It was an opportunity for students to act as liaisons between Google and their universities and also an opportunity for Google to contribute to the education of future leaders.

I was a big fan of Google technologies during that time. Unfortunately, I was too late to apply to become one of the GSA. Opportunely, I was lucky enough to have the chance to become a volunteer at some of the events organized by the GSA at that time: Anonoz Chong.

Android Meetup, Multimedia University, Cyberjaya (2014)

2015: Joining GDG Kuala Lumpur + My Very First Tech Talk

Event Organized: 2
Event Website: 2
Public Speaking: 1

July 2015: I attended my first GDG Kuala Lumpur event — I/O Extended Kuala Lumpur 2015. This was where I met Yohan Totting for the first time and learned about the Google Developer Experts program.

Google Developers Experts (GDEs) are a global network of experienced product strategists, designers, developers, and marketing professionals actively
supporting developers, startups, and companies changing the world through web and mobile applications.

Yohan Totting was the first Google Developer Expert I ever met — I/O Extended Kuala Lumpur 2015

October 2015: All thanks to JT Liew, I got the chance to use the knowledge I learned from the past few months: Polymer and Firebase, to build my first website for one of the GDG Kuala Lumpur’s event: GDG DevFest Kuala Lumpur 2015. This was my first time involved in a GDG Kuala Lumpur event.

My very first website for GDG Kuala Lumpur event: GDG DevFest Kuala Lumpur 2015

December 2015: Also at the same year, I started to fall in love with public speaking. I always love to share my knowledge with everyone around me. Hence, I gave my very first talk about Polymer and Firebase at BarCamp Cyberjaya 2015.

Me talking about Polymer & Firebase — BarCamp Cyberjaya 2015

2016: More Events, More Talks, Lucky Year

Event Organized/Volunteered: 10
Event Website: 4
Public Speaking: 7

February/March 2016: I found out there was a worldwide virtual competition organized by Firebase called Static Showdown.

Without the slightest hesitation, I decided to join the hackathon, and I built a Progressive Web App using Polymer and Firebase. One week later, out of my surprise, I won the Best Progressive Web App category! Thanks, Michael Bleigh and Firebase for this amazing competition!

// Detect dark theme var iframe = document.getElementById('tweet-705204198229422080-393'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=705204198229422080&theme=dark" }

May 2016: Few months after the Static Showdown hackathon, I found out there was another competition organized by Firebase: Firebass ARG Challenge.

// Detect dark theme var iframe = document.getElementById('tweet-736301472770494464-329'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=736301472770494464&theme=dark" }

** Drum Roll ** and … I completed the challenge and I became the 51st person (out of 100 winners) to complete the challenge and won a free ticket to Google I/O 2017!

July 2016: I gave a talk about Progressive Web App and Polymer together with 2 amazing Googlers: Bok Thye Yeow and Marcus Foon at my university. Over 200 people attended the event!

Me showing off my T-Rex pillow — Tech Talk Thursday with Google & GDGKL, Multimedia University, Cyberjaya

July 2016: I shared my story of winning the Firebase Challenge at I/O Extended Kuala Lumpur 2016. I was also part of the organizing committees for that conference.

Me sharing my story of winning the Firebass Challenge — I/O Extended Kuala Lumpur 2016

Nov 2016: I was fortunate enough to get the chance to receive the invite from Google DevRel team to attend Progressive Web App Roadshow in Bangkok. (Thanks Chelle and Bok!). It was my first time to attend a tech event outside Malaysia.

Chrome Team x GDG Thailand x GDG Kuala Lumpur — PWA Roadshow Bangkok 2016, Thailand

2017: More Events, Websites & Talks + GDG Summit & Google I/O

Event Organized/Volunteered: 11
Event Website: 5
Public Speaking: 6

¯\_(ツ)_/¯ — JomCode Kuala Lumpur 2017, Google Malaysia Office

April 2017: With the help from Nazlina Quadir and Google Malaysia, I was lucky enough to have the chance to share my story of winning the Firebass Challenge with two local media outlets: Digital News Asia and Oriental Daily (東方日報).

Hey mom, I got featured in the newspaper!

May 2017: I attended my first Global GDG Leaders Summit and Google I/O 2017 in Bay Area, California. This was also my first time traveled to a different continent.

🇲🇾 GDE x GDG x Googler — I/O 2017, Mountain View, United States

Can you find where I am? — GDG Global Summit 2017, San Jose, United States

Firebass Challenge Winner @ Google I/O 2017

July 2018: I celebrated my 21st birthday with the GDG Kuala Lumpur family at I/O Extended Kuala Lumpur 2017. Thanks Chelle Gray for the super cute cake! (Finally I can drink alcohol legally)

September 2017: We had a community booth at Google Cloud Summit Kuala Lumpur together with the TensorFlow User Group Malaysia. What a fun day!

GDG Kuala Lumpur Community Booth — Google Cloud Summit Kuala Lumpur 2017

October 2017: The GDG Kuala Lumpur committees joined the Firebase AppFest Hackathon Malaysia and … we won the second prize! Hooray! (Read the full story here.)

Fun fact: This was my third time winning the competition held by the Firebase team! Thank you Firebase!

GDE x GDG x Googler — Firebase AppFest Hackathon Malaysia 2017

2018: Became a GDE + Time to Say Goodbye to GDGKL

Event Organized: 5
Event Website: 3
Public Speaking: 11

Feb 2018: I was referred by Robert Nyman to become a Google Developer Expert in Web Technologies. OMG!

April 2018: It marked another major milestone in my life. I passed the Google Developer Expert interview and became the youngest Google Developer Expert in South East Asia! (Read the full story here.)

South East Asia Google Developer Experts — GDE Summit 2018, Sunnyvale, United States

July 2018: I organized my last conference for GDG Kuala Lumpur — I/O Extended Kuala Lumpur 2018. The conference was a huge success: over 400 people attended the event.

Speaker dinner for I/O Extended Kuala Lumpur 2018

At the same time, we also broke the record of the turn-up rate for GDG Kuala Lumpur events: 96.25%. Kudo to the teams: Jecelyn Yeen, Lim Shang Yi and Eric Ngu!

I/O Extended Kuala Lumpur 2018 Core Organizing Team

Group Photo! — I/O Extended Kuala Lumpur 2018

I/O Extended Kuala Lumpur 2018 Progressive Web App

October 2018: All good things must come to an end. After organized more than 30 events and developed more than 10 websites for GDG Kuala Lumpur, it was time to say goodbye to GDG Kuala Lumpur. I stepped down as GDG Kuala Lumpur organizer, and moved to Bangkok to begin my next step in my career.

Goodbye GDG Kuala Lumpur! Goodbye Malaysia! You will be missed. 👋🏻

All the websites I designed for GDG Kuala Lumpur (2015–2019)

"GDGKL is not only an ordinary tech community, but it’s a community with lots of love. This is a big family." — Me

Photos with the GDGKL Family

Selfieeeeee with Googlers (DevRel, Web/Chrome, Firebase, Flutter, and Material Design)

One of my favorite Googler: Chelle Obligacion-Gray (Now a Xoogler)

If you ask me, what’s the best part of being a committee of a GDG chapter? I would say it feels like a big family.

It has been an honor and pleasure to have the chance to meet with all of these awesome local developers, GDG volunteers and committees, Google Developer Experts, and Googlers from all over the world.

What’s Next?

I still have a long journey to go. All of these are just the tip of the iceberg. Although I am not part of the GDG Kuala Lumpur committee anymore, my heart is still with them.

In the end, I wanted to say thank you to everyone that guided me, helped me, supported me for the past 4 years. Without your help and support, all of these would not have been possible.

THANK YOU, Anonoz Chong, JT Liew, Chelle Gray, Bok Thye Yeow, Jecelyn Yeen and everyone else for everything in the past few years.

Note: I am currently still active in the Google Developers community as a Google Developer Expert. I stepped down the role of the main organizer at Google Developer Group Kuala Lumpur as I don’t live in Malaysia anymore. Anyway, if you are going to Google I/O 2019, see you there!

Psst, are you a public speaker or you are going to give a presentation soon?

Try out Remote for Slides. It is a Chrome Extension and a Progressive Web App that allows you to control Google Slides on any device, remotely, without the need of any extra hardware.