Free and Secure Messaging on Raspberry Pi with Telegram Bots

Sunday, July 25, 2021

Telegram is a free and cross-platform instant messaging software. Telegram also offers a way to set up your own messaging bots. With Telegram bots, it’s easy to set up a tight interface with which you can talk to your home automation Raspberry Pi on the go without having to expose your whole Raspberry Pi as server. P.S. Telegram bots can do a lot more , though we only focus on a small use case here.…

Set up rust + wasm + TypeScript without webpack

Sunday, April 25, 2021

1 Set up the rust code and wasm-pack install wasm-pack Set up a new project with wasm-pack. Run 1 2 $ wasm-pack new hello-wasm $ cd hello-wasm Build with this command 1 $ wasm-pack build --target web This should produce a pkg/ directory which should contain some d.ts file, a .wasm file and a .js file in ES6 module format. 2 Set up the TypeScript code Now we should set up a JavaScript project.…

Set Up A Raspberry Pi As An Auto-refreshing Web Dashboard

Saturday, April 3, 2021

Set up a Raspberry Pi to run Chromium in kiosk mode credit: This section is mostly based on https://die-antwort.eu/techblog/2017-12-setup-raspberry-pi-for-kiosk-mode/ with some tweak to work with the auto-refresh section later. Set up First, start with a fresh install of Raspbian Lite - we don’t want all the bloat because we are only using the Raspberry Pi to display a dashboard Then, we perform the usual Raspberry Pi setups, including things like updating password or enabling SSH.…

Roll Your Own CSS-in-JS Library (5) - Tagged Templates

Wednesday, March 24, 2021

In this post, we will explore a different CSS-in-JS syntax. CSS-in-JS but using CSS syntax End result: Notice that we get to write CSS similar to template strings rather than as objects. This has a few advantages: Our CSS code now looks closer to vanilla CSS. We can sequence CSS properties. We can duplicate CSS properties to support fallback behavior. In practice, 1 is probably the strongest driver for adopting this syntax, as typically there’s no benefit in sequencing CSS properties except for fallback behavior.…

Roll Your Own CSS-in-JS Library (4) - Static Extraction

Monday, March 15, 2021

Static extraction is HARD Firstly, the set-up of static extraction is more complicated - there needs to be a build process, and the static extractor needs to fit into that build process. More importantly, static extraction will require some form of static evaluation. Take the following code for example: 1 2 3 4 5 import getColor from "helpers"; const Block = styled({ color: getColor("block"), }); In order to statically generate the css styles, the extractor needs to look at at least one other file called “helpers”.…

Roll Your Own CSS-in-JS Library (3) - Using CSS Variables

Saturday, March 13, 2021

In this post we will discard our changes in the previous post and switch to a new approach. End result CSS variables CSS variables are also known as CSS Custom Properties. At a very high level: We can set some value on a variable using --variable-name: value. The variable name has to start with --, and the definition has to happen within some selector or as inline styles. We can then read the value of a variable and supply it to some CSS property with the var() function, e.…

Roll Your Own CSS-in-JS Library (2) - Dynamic Styles

Friday, March 12, 2021

In our last post we developed a simple CSS-in-JS library, but it was missing an important feature - supporting dynamic styles. We will patch that in this post. End result Dynamic styles are more useful when we are building components. In this post, we will use React as our component library. Here’s how our library may be used in production: Dynamic class names This is the simplest approach that requires making the smallest change to our little library.…

Roll Your Own CSS-in-JS Library (1) - Introduction

Sunday, March 7, 2021

CSS-in-JS is an idea to tackle various issues with CSS by writing them in JavaScript (or whatever else that can compile to JavaScript, such as TypeScript). Some popular examples include libraries like styled component , emotion and JSS . I originally started this series to document some of my experiments with CSS-in-JS, but it later turned out to be a fun investigation project. In total, this series will cover The basic idea of run-time static CSS-in-JS (this post) The basic idea of run-time dynamic CSS-in-JS Run-time dynamic CSS-in-JS with CSS variables An extremely simplified approach to build-time CSS-in-JS A simple approach to implementing tagged template based CSS-in-JS Please note that this series focus on the high level ideas with a simple demo, so expect to notice a lot of missing features.…