DEV Community: Keng Hong

Installing Realtek 802.11ac driver for Kali Linux

Keng Hong — Sat, 08 Aug 2020 08:36:32 +0000

This is a short snippet of code on the installation of Realtek 802.11ac driver for Kali Linux.

apt update
apt install bc -y
git clone https://github.com/cilynx/rtl88x2BU_WiFi_linux_v5.3.1_27678.20180430_COEX20180427-5959.git
cd rtl88x2BU_WiFi_linux_v5.3.1_27678.20180430_COEX20180427-5959
VER=$(sed -n 's/\PACKAGE_VERSION="\(.*\)"/\1/p' dkms.conf)
sudo rsync -rvhP ./ /usr/src/rtl88x2bu-${VER}
sudo dkms add -m rtl88x2bu -v ${VER}
sudo dkms build -m rtl88x2bu -v ${VER}
sudo dkms install -m rtl88x2bu -v ${VER}
sudo modprobe 88x2bu

How to maximise browser compatibility for rel value "preload"

Keng Hong — Tue, 04 Aug 2020 16:57:36 +0000

When using Google Lighthouse to optimise the web performance, a common recommendation by Lighthouse would be to preload key requests by using <link rel="preload">. However, the rel value preload is not supported by some major browsers like Firefox.

To maximise the use of rel value preload for most major browsers and to provide a fallback method at the same time, the most commonly adopted approach seems to be to use both the default rel value and the rel value preload together. For instance, in loading css stylesheets, we can do something like <link rel="preload stylesheet">. This way, browsers that support preloading would preload as intended and browsers that do not would load the stylesheets the regular way. Further, only 1 request would be sent for the stylesheets when the page loads.

Credits to Stack Overflow for the nifty workaround!

Observables - Cold, Hot or Warm?

Keng Hong — Sun, 12 Jul 2020 14:34:53 +0000

The world of observables can be intimidating for beginners. At least it was for me. It certainly took me a while to grasp the difference between cold, hot and warm observables and I would like to share the simple example that lit the light bulb in my head.

Observables are cold by default. In a cold observable, the data producer is created when the observable has a new subscription. Hence in the example below, both subscribers have independent sets of values (1, 2, 3) emitted from the producer. Using the analogy of show streaming, a new subscriber would have to watch the show from the start irregardless if the show was live.

However if we want to emulate the live streaming behaviour of a show, we need to use a hot observable instead. This can be achieved using publish() and connect(). As seen in the example below, only the value 2 is logged for the second subscriber since the subscription is initialised only after approximately 2 seconds.

Finally, as mentioned in this article, there is a third form of observables known as warm observables. The key difference between a hot and warm observable is that in a warm observable, the data producer only starts emitting values when the first subscription is initialised on the observable. Going back to the live streaming analogy, it means the show only starts when the first subscriber arrives. The publish() and refCount() operators can be used to create a warm observable. As illustrated below, the value 0 is logged for the first subscriber even though it is initialised after 1 second.

Hope these would be useful for anyone getting their feet wet with observables in RxJS!

Readings
https://softchris.github.io/books/rxjs/hot-n-cold-observables/

REMs and pixels - enjoy the best of both worlds

Keng Hong — Sun, 14 Jun 2020 14:38:41 +0000

In the frontend teams I have worked in, it is not uncommon for team members to be debating over the use of REMs versus pixels(px) as units of measurement in our CSS.

TL;DR:

REMs allow for font-sizes across the application to scale according to the user's default browser setting
However, mockups from designers are typically delivered in pixels and we as developers are accustomed to pixels.

Turns out there is actually an easy solution to this debacle. We can use a PostCSS plugin to convert pixels to REMs in our application build files. Here is an example of how it can be done.

First, we need to set up a starter project with webpack.

mkdir starter
cd starter
npm init -y
npm install webpack webpack-cli --save-dev
mkdir src
touch src/index.js src/style.css webpack.config.js postcss.config.js

Your file structure should look like this at this point.

starter
│───src
│   │───index.js
│   └───style.css
│
│───node_modules       
│───package-lock.json   
│───package.json
│───webpack.config.js 
└───postcss.config.js

Let's add some trival JS and CSS codes.

/** src/index.js **/
import "./style.css";

function component() {
  const element = document.createElement("div");
  element.classList.add("hello");
  element.textContent = "HELLO!";
  return element;
}

document.body.appendChild(component());

/** src/style.css **/
.hello {
  font-size: 16px;
  width: 16px;
  color: red;
}

Now let's add the relevant dev dependancies. We would go into detail what each dependancy does below.

npm install --save-dev css-loader style-loader postcss-loader postcss-pxtorem

css-loader The css-loader interprets @import and url() like import/require() and will resolve them.
style-loader Inject CSS into the DOM.
postcss-loader Loader for webpack to process CSS with PostCSS
postcss-pxtorem A plugin for PostCSS that generates rem units from pixel units.

We need to update both webpack.config.js and postcss.config.js respectively too.

/** webpack.config.js **/
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

/** postcss.config.js **/
module.exports = {
  plugins: [require("postcss-pxtorem")],
};

Finally, update package.json to add script to build using webpack.

/** package.json **/
...
"scripts": {
  "build": "webpack"
}
...

Run npm run build and you should see a build file dist/bundle.js. If you were to inspect dist/bundle.js, you would see all pixels notations have been converted to REMs. And there you have it, the debate of pixels versus REMs addressed.

The demo source code can be found here.