Thoughts on code and people

Jest with TypeScript and aliased imports (custom paths)

February 7, 2023

How to configure Jest with a TypeScript project, while also using custom path mapping.

2022

Cleaner imports with aliases in React & TypeScript

July 3, 2022

Using aliased instead of relative imports in React & TypeScript.

How to handle boolean values in SQLite using JavaScript Proxies

March 22, 2022

If you've ever worked with SQLite, you should be aware of the supported data types and Boolean isn't one of them.

2021

Real-time app using React, Redux, Tailwind CSS & Firebase - Part 3

October 24, 2021

In this part we are going to

Debug Electron production binaries on Windows, Mac & Linux

October 20, 2021

In this short article, I would like to show you how to debug Electron production binaries on Windows, Mac & Linux.

Conditional GitHub action based on commit message

October 13, 2021

It's really annoying having a certain build/deployment GitHub action run on every push.

You can use this to run it based on the commit message's content:

name: Publish

on:
  push:
    branches:
      - master

jobs:
  publish:
    if: "contains(github.event.head_commit.message, '[build]')"

Feel free to change the '[build]' part with whatever string you want.

You can also put a ! at the beginning to invert the logic (Run the action on commit messages that DON'T contain a certain string)

Browser frame budget

July 25, 2021

A refresh rate of 60 FPS is typical for any device these days. This means that in the timeframe of 1 second, the browser has to draw 1 frame on the screen, which in turn means that each frame has a time budget of 16.6ms (1 second / 60 frames = 16.66ms). Drawing this frame in 16.6ms includes:

Executing JS
Calculating styles
Calculating layout
Painting pixels on layers
Compositing those layers

Since all of these tasks run in a single thread, when they take more than ~10ms (not 16ms, because there is also other work being done by the browser), frames start to drop. Drop enough frames and visually perceptible lagginess starts to occur.

Sources: Rendering Performance by Paul Lewis

CRLF: Mind the line

June 15, 2021

Problems line endings might create, why different operating systems sometimes use different line endings and how to configure git to save yourself from headaches.

SQLite UPSERT & RETURNING clauses

May 28, 2021

Quick post about the SQLite UPSERT and the new RETURNING clause.

Real-time app using React, Redux, Tailwind CSS & Firebase - Part 2

May 1, 2021

In this part we are going to setup Redux, connect it to Firebase and create our first component.

How to compare accented strings in JS

April 28, 2021

It's a very common scenario when you have to compare strings ignoring their case. The usual approach is to convert both of them to upper or…

Real-time app using React, Redux, Tailwind CSS & Firebase - Part 1

April 25, 2021

In this first part we are going to take a look at the requirements, plan the application structure, initialize a React app and set up Firebase.

Quick tips on writing better React code

February 27, 2021

In this short post I am sharing some best practices that I've learned, during my journey writing React applications.

2020

Creating a linked list in JavaScript

December 20, 2020

In layman's terms, a linked list is a list of nodes, where each node holds two things: a value and a pointer to the next node in the list. Let's see how we can implement one using JavaScript.

Don't git pull, use git pull --rebase instead

December 8, 2020

Use git pull --rebase to keep a tidy commit history.

Useful git commands to get you started

December 5, 2020

Git can be very useful and at the same time very frustrating, if you don't know what you are doing. Spending a little time to get familiar with some workflows and commands are going to make for a great investment in your career!

Arrays passed to template literals get coerced to strings

December 4, 2020

Nice little thing I learned today: When you pass an Array as a value to a template literal, it gets implicitly coerced into a String. Behind the scenes String.prototype.concat is used, as stated in the ECMA-262 specification document.

const fruits = ['apples', 'oranges'];
console.log(`${fruits}`); // 'apples,oranges'

Tips on getting your first job as a dev

November 21, 2020

So, you've just finished college or maybe you are just thinking of getting into software development. First thing that comes into your mind is how you are going to get your foot in the door, find a job and bootstrap your career.

Emmanouil Liakos