Alternative Title: How I hacked Xiaomi Mi Scale with Web Bluetooth Scanning API

Image for post
Image for post
Mi Body Composition Scale (Image source: Xiaomi Website)

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

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.


Learn how I create the Malaysia Flag with HTML and CSS (only)!

Image for post
Image for post

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 🇲🇾


您將會在這篇文章中學會如何使用preact-i18n來国际化 (i18n) 您的Preact項目。

Image for post
Image for post

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

什麼是國際化 (i18n)?

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

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

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

$ npm install -g preact-cli


Learn how you can add Internationalization (i18n) to your Preact Application with preact-i18n.

Image for post
Image for post

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

What is Internationalization (i18n)?

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

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


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

Image for post
Image for post

What is Trusted Web Activity?

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.


Image for post
Image for post

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

Home & Upload Page


Image for post
Image for post
I/O Attendees from Asia Pacific @ Google I/O 2017

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?


Image for post
Image for post

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


Image for post
Image for post

About

Henry Lim

Google Developer Expert in Web Technologies | Front-end Web Developer | Making the web better with Preact, Polymer, Web Components, PWA & Firebase

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store