382 Followers
·
Follow

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

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

$ preact create default my-project

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

$ cd my-project && npm run start

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

Image for post
Image for post

步驟 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。我們將會在這個文件中導入IntlProviderdefinition文件。 …

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