I was trying to automate my apartment a bit. I want my room to be cool already by the time I arrive, so when I say to Google Assistant: “I’m arriving,” it should turn on my lights, my plugs, and the air conditioner (which can only be controlled using an infrared remote).

Note: I am writing this mostly for my own reference… This article assumes familiarity with setting up a Linux server, using Node.js, and Python.

For lights, I use Philips Hue, and for the plugs, I use TP-Link Kasa. …


San Francisco, macOS’ System Font, comes with several “stylistic sets” to be used in different contexts. They can be activated from CSS using these properties:

  • font-feature-settings: "ss01" on makes the sides of 6 and 9 straight.
  • font-feature-settings: "ss02" on for “open 4.”
  • font-feature-settings: "ss03" on makes colon vertically-aligned, even in awkward positions.
  • font-feature-settings: "ss06" on adds a slash to 0 (to distinguish itself from O), and some serif to I and l, making it easier to tell them apart. Also enables straight-sided 6 and 9, and open 4.
  • font-feature-settings: "ss07" on makes a one storey.
  • font-variant-numeric: tabular-nums makes each number…

An oft-overlooked tradeoff when writing functional code in JavaScript.

When learning functional programming in JavaScript, it is very tempting to write code in a pointfree style as much as possible.

What is pointfree style?

Writing functions in pointfree-style means you write a function without mentioning the input argument.

Consider this function that takes an object representing a person, and returns the full name:

function fullName (personObject) {
return [
personObject.firstName,
personObject.middleName,
personObject.lastName
]
.filter(element => element)
.join(' ')
}
const me = {
firstName: 'Thai',
lastName: 'P'
}
fullName(me)
// => 'Thai P'

Notice the names, personObject and element. …


I have a challenge for you to try. First, please look at this code.

function unspiral (i, j) {
const n = Math.max(Math.abs(i), Math.abs(j))
return 4 * n * n + (j > i ? -1 : 1) * (2 * n - i - j)
}

By reading the code, did you understand what the code does?

How long did it take you to figure that out?

The spiral

Here’s a 2D spiral pattern:

As you can see in the diagram above, the spiral is centered at (0, 0). …


It so happens when I test an app on the staging environment, somehow, the app failed to boot up. A dreaded blank page appears!

This is very strange, because we’ve already put in error handling code inside the app. The error page should have appeared instead.

Opening the Chrome DevTools, a stack trace appears.

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
at https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:191090
at i (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:207476)
at Generator._invoke (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:208572)
at Generator.t.(anonymous function) [as throw] (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:207655)
at r (https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:187550) …

I want my code to fail loudly when there is an unexpected error. It’s usually bad when uncaught errors go unnoticed as it usually leads to incorrect behavior down the line.

For example, consider this Node.js script:

async function main () {
await meow
}
main()

Although the program is incorrect, running this code in Node 8.2.1 will not crash the program. Instead a warning is printed:

(node:69836) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): ReferenceError: meow is not defined
(node:69836) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js…

I just tried out Prepack, which is open-sourced by Facebook several hours ago.

Here is a test file:

Compiled with webpack:

Putting that 928-line bundle through Prepack, and here’s the result:

I am amazed that Prepack could turn a 900-line bundle back into a single line. Check it out:


without ejecting or custom build steps

When you use create-react-app, by default it builds a blank HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,initial-scale=1">
<link
rel="shortcut icon" href="/favicon.ico">
<title>
React App</title>
<link
href="/static/css/main.dbf5d3f5.css" rel="stylesheet"></head>
<body>
<div
id="root"></div>
<script
type="text/javascript" src="/static/js/main.f4ad8021.js"></script>
</body>
</html>

This means when a user enters my app, they will see a blank page until the script is loaded.

I can write some splash screen logic into the template file (public/index.html), but that means more code for me to maintain.

One solution is to prerender the app’s initial markup into the template file, so that the user sees this while the…


First, a word of caution. In this article, I am not saying that MobX is better, or that I prefer it, or anything.

I use both Redux and MobX.

I like both of them and probably will use both of them again.

This article only gives an artificial example of an application that is easy to write with MobX but very hard with Redux, if we need it to run at the same performance level. Had I not been clear, this is an unfair comparison.

Therefore this article is not a comprehensive comparison at all and should not be considered…


Why use Immutable.js instead of normal JavaScript object?

Treating your data as immutable brings many benefits. In fact, that’s a principle behind React: React elements are immutable. You might also be interested in learning about an Immutable App Architecture.

But what’s the benefit of using Immutable.js:

function toggleTodo (todos, id) {
return todos.update(id,
(todo) => todo.update('completed',
(completed) => !completed
)
)
}

…over using normal JavaScript objects (and treating them as immutable, optionally using helpers such as seamless-immutable), like this?:

function toggleTodo (todos, id) {
return Object.assign({ }, todos, {
[id]: Object.assign({ }, todos[id], {
completed: !todos[id].completed
})
})
}
// Using updeep
function toggleTodo (todos, id) {…

Thai Pangsakulyanont

(@dtinth) A software engineer and frontend enthusiast. A Christian. A JavaScript musician. A Ruby and Vim lover.

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