It’s a video, in a single graphic.

Generating a graphic from video frames, image by author

This project was inspired by a chance encounter on reddit about “movie barcodes” and thought that it was pretty genius — a movie represented in what’s essentially a series of coloured bars (more examples can be found here). In a subsequent thought, I wanted to try making graphical barcodes on a smaller scale, of videos.

Making Barcodes

A summary of various approaches to style a webpage to match the user’s system theme using CSS, HTML and native javascript.

Approach 1: Just CSS — `prefers-color-scheme’

The classic method: detect user’s theme preference with CSS media feature prefers-color-scheme .

While a completely different set of styles can be specified for each theme; using CSS variables allows for less repetition.

Link to full code

/* file: style.css *//* default: light theme colours */
:root {
--bg-colour: #fafafa; /* white */
--font-colour: #212529; /* dark grey*/
--primary-colour: #2196f3; /* blue */
--link-colour: #2962ff; /* blue */
--alt-bg-colour: #fff; /* white */
/* if system…

Call it a marriage of interests.

A person holding a katana.
A person holding a katana.
Photo by Krys Amon on Unsplash

It was a long commute and I was reeling from finishing Kimetsu no Yaiba (Demon Slayer) and thought that the coding experience can be explained with the show’s “water breathing techniques” (a combat style in the show) levels.

1st Form: Water Surface Slash hello world”, it begins with the shallow cuts — the basic functions, algorithms, the basic satisfaction of getting things to run

2nd Form: Water Wheel → the thrill in the realisation that code is a maker’s medium, that code implement ideas

3rd Form: Flowing Dance → the flow when it’s…

What is in an Information Systems Degree

people throwing graduation hats
people throwing graduation hats
Photo by Pang Yuhao on Unsplash

Between the national efforts to control the spread of COVID-19 and delayed job start date, I’ve had a lot of time to look back and graph the past 4 years that I spent getting my degree (FYI: from School of Information Systems (SMU)). In essence, what follows is a representation of my transcript in graphs.

Reading Notes:

  • “Module” is interchangeable with “class”, “course”
  • The modules in SMU are offered by different schools (which in other universities are called “faculties”)

1. Most of my time was spent in tech

Make plots more readable and easily understandable

Photo by KOBU Agency on Unsplash

In the course of my data exploration adventures, I find myself looking at such plots (below), which is great for observing trend but it makes it difficult to make out where and what each data point is.

Kaili Chen

Student of tech, working in tech.

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