It’s a video, in a single graphic.
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.
/* 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.
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
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
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.
