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

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. …


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

Image for post
Image for post
Jalur Gemilang — The Flag of Malaysia

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). …


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

Image for post
Image for post

🇺🇸 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

當您已 …


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

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. …


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?

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.

Image for post
Image for post
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.

Image for post
Image for post

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
“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. …


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?

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. …


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

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

Here’s how you can use Launcher Icon Previewer:

Step 1: Go to iconpreview.com

First, navigate to iconpreview.com, select your launcher icon. We recommend you to upload a PNG file with the image resolution of 192px × 192px.

After that, you will have the option to set the app name (it’s ok to left it blank).

Once it’s all done, just click on the Upload Icon button.

Image for post
Image for post

Step 2: Open the link on your mobile device

Now, the tool will show you a QR code and a link. Open the link using Chrome or Safari (if you are using iOS) on your mobile device. …


Image for post
Image for post

Note: I am not a security researcher, and I do not have any advance web security knowledge, etc.

Also, I did not alter any data on the Cathay Pacific’s website and I didn’t manage to use this method to change my seat. In addition, you can’t get any personal data using the method I mentioned in this article.

However, I was able to view all seat maps for all Cathay Pacific’s flight.

Also, this is not something new. You actually can do the same thing using this website: www.expertflyer.com.

Cathay Pacific, if you are reading this, please DM me on Twitter.


Learn how I build a “Nothing” Progressive Web App in 15 minutes

Image for post
Image for post

What’s Nothing?

Image for post
Image for post
Definition of “nothing”

The original version of the “Nothing” Android App was developed by Chilango Lab and it has more than 1 million downloads and 4.2 stars rating on Google Play Store 🎉.

The Nothing Android App basically does nothing, except there’s a very cool easter egg in the app ( ͡° ͜ʖ ͡°).

However, the APK size of the Nothing Android App is 14MB and it uses 19.24MB of the phone storage after the installation. So it makes me think, is there any way I can make it smaller?

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