Dark Mode

darkmode

I finally found some time to complete the site’s dark mode feature. As someone who uses dark mode a lot, I couldn’t put the feature off any longer. In theory, adding a dark mode feature is not complicated. However, it can be challenging in practice when integrating the feature into someone else’s code.

The first thing is to set up a button, which is the simplest step. It enables the visitor to toggle the site’s dark mode on & off.

<button
  id="dark-mode-toggle"
  class="dark-mode-toggle"
  aria-label="toggle dark mode"
>
  <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
    <path
      fill="currentColor"
      d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z"
      transform="translate(-8 -8)"
    />
  </svg>
</button>

The next thing is to set up a script to listen for the user’s action and to save their preference locally with ‘localStorage’.

document.addEventListener("DOMContentLoaded", () => {
  let darkMode = localStorage.getItem("darkMode");
  const darkModeToggle = document.querySelector("#dark-mode-toggle");

  const enableDarkMode = () => {
    // add class dark mode to the body
    document.body.classList.add("darkmode");
    // update dark mode in the local storage
    localStorage.setItem("darkMode", "enabled");
  };

  const disableDarkMode = () => {
    // remove class dark mode from the body
    document.body.classList.remove("darkmode");
    // update dark mode in the local storage
    localStorage.setItem("darkMode", "disabled");
  };

  if (darkMode === "enabled") {
    enableDarkMode();
  }

  darkModeToggle.addEventListener("click", () => {
    darkMode = localStorage.getItem("darkMode");
    if (darkMode !== "enabled") {
      enableDarkMode();
      console.log("Dark mode enabled");
    } else {
      disableDarkMode();
      console.log("Dark mode disabled");
    }
  });

  // set the initial state based on local storage
  if (darkMode === "enabled") {
    enableDarkMode();
  }
});

This logic will ultimately toggle the CSS dark mode in the site’s <body> element, which can be configured on a separate stylesheet. There are some suggested color themes for dark mode online that I found useful as a starting point in deciding the dark mode theme color palette.

NYU MIAP Magnet

I was thinking of a design for a commemorative magnet for my MIAP cohort and decided on a vectorscope’s signal output. For the uninitiated, a vectorscope is an instrument that measures and visualizes chrominance (color) information encoded in a video signal.

This particular signal pattern depicts the SMPTE color bar test pattern that is widely used for video calibration, per the NTSC standard. In this instance, the lines in the vectorscope measure the hue and saturation of the colors red, magenta, blue, cyan, green, and yellow in the bars.

I made slight modifications to the vectorscope’s graticules to commemorate (probably) the program’s most international cohort 🥳 watch out world!

🇨🇳 🇮🇩 🇲🇽 🇸🇬 🇪🇸 🇹🇼 🇺🇸

magnet_1

magnet_2

magnet_4

DIY Laptop Sleeve

My long overdue project to make a new laptop sleeve is finally complete. It was time to replace my old one that saw me through film school, undergrad, and grad school. The edges had frayed, and the corners of my computer had begun to peek out. I spent an entire Friday with Fin and Mist cutting, ironing, and sewing over lots of tea and watermelon. I learned a lot, and I am quite satisfied with the overall result.

On to the next chapter!

busted_sleeve

fin_working

mist

practice

sleeve_in_progress

finished_sleeve

button_detail

Sony Mavica MD7

I am gushing over my ‘new’ Sony Mavica FD7 camera that I recently got off Facebook Marketplace. It is one of the earlier digital cameras from Sony’s discontinued Mavica (Magnetic Video Camera) line that saves digital images on 3.5” 1.4 MiB 2HD floppy diskettes in DOS FAT12 format. AFAIK, the FD7 was released in 1997 with the FD5 model where the former boasts 10x optical zoom, while the later has a fixed focal length.

The camera produces .JPG images in 640x480 resolution with its 0.38 megapixel 1/4” CCD sensor. In terms of optics, it has a focal length range of 4.2 - 42mm, which is impressive for a camera of its size. The diskettes hold up to 40 .JPG images in its ‘normal’ setting and 20 images in its ‘fine’ setting. Each image takes up to 10 seconds to be recorded on the media and the process is accompanied by the sounds of the diskette’s whirring. Fun and amusing piece of technology.

leaf

ducky

wsq

bobst

8street

Back-up Google Drive With Rclone

rclone

Rclone is a powerful command-line tool to sync files and directories to and from various cloud storage services (Azure, B2, S3, Google Cloud, etc.). It is also a great solution to download files off from Google Drive, which can be an incredibly frustrating experience when doing it manually through a web browser.

It has been a lifesaver syncing my school’s Google Drive to my local machine for backup. Google Docs, Sheets, and Slides are handled pretty well; Google Docs are downloaded as Microsoft Word, Sheets in Microsoft Excel, and Slides in Microsoft Powerpoint, while retaining the document’s original formatting. So far so good. However, it is unable to process items like Google Forms.

Rclone is available on Linux, MacOS, and Windows.

rclone copy -P remote-name: "directory" "destination"

rclone copy --drive-shared-with-me remote-name:"directory" "destination"