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…

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 package?

Flag of Malaysia — Jalur Gemilang 🇲🇾

🇺🇸 English Version (英文版): https://medium.com/@limhenry/how-to-add-i18n-to-preact-dff1bf19917

什麼是國際化 (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

當您已 …

🇹🇼 中文版 (Chinese Version): https://medium.com/@limhenry/how-to-add-i18n-to-preact-chinese-b49cfaf3a07b

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…

⚠️ THIS ARTICLE IS MORE THAN 1 YEAR OLD.

Please refer to this article on how to add splash screen to Trusted Web Activities.

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.

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.

“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:

Technologies

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

• Firebase Realtime Database
• Firebase Hosting
• Cloud Storage for Firebase
• Cloud Functions for Firebase
• Add to Home Screen, Web App Manifest and Service Worker
• Express and EJS

Home & Upload Page

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…

Need an easier way to test your launcher icon design on a real device home device?