Forem: Bryan Liao

Building in Public - 5

Bryan Liao — Sat, 27 Jul 2024 22:28:58 +0000

I added the use of localStorage to my React project. Since my app is client-only, it felt like the right thing to do to allow some data persistence.

I created two functions: one to load data from localStorage and another one to add data. The key-value pairing in localStorage is just strings, so I had to use JSON.stringify() and JSON.parse() to manipulate the data:

const context = {...};
localStorage.setItem('appData', JSON.stringify(context));

const localData = localStorage.getItem('appData');
if(localData){
const parsedData = JSON.parse(localData);
...
}

Initially I was calling the add data function in my form submissions, but since I was using React I found it easier to use stick it in useEffect instead. Using the existing data as a dependency, I could update localStorage any time it changed.

I also called my data loading function within useEffect. I used useRef to determine the first render in order to swap between loading previously saved data and updating localStorage when the data changed. Hooray for data persistence 🎉

Building in Public - 4

Bryan Liao — Mon, 22 Jul 2024 02:48:08 +0000

Continuing my data export journey from last time, I wanted to learn how to copy data to a clipboard. It’s a simple feature, but I always appreciate it when a site has click to copy buttons for code blocks, API keys, etc.

There’s a navigator object within the browser that contains access to the clipboard API. Using this API, one can copy designated text to the user’s clipboard (and paste too)! Here’s a simple implementation that I added to my app that utilized the writeText() function:

const context = {
    users: [{
        'id': 123,
        'name': 'user1'
        },
        {
        'id': 321,
        'name': 'user2'
        },
    ],
};

  const copyDataToClipboard = () => {
    navigator.clipboard.writeText(JSON.stringify(context)).then(() => {
      const copyButton = document.getElementById('copyButton');
      copyButton.innerHTML = 'Copied!';
      setTimeout(() => {
        copyButton.innerHTML = 'Click to copy data';
      }, 3000);
    });
  };

<button id='copyButton' onClick={() => copyDataToClipboard()}>Click to copy data</button>

There’s an added bonus that it may feel safer to copy something to your clipboard and paste it into your own text file than to download one directly from a website 🙂

Building in Public - 3

Bryan Liao — Fri, 19 Jul 2024 00:31:57 +0000

I wanted import and exporting files to be the main part of how to save/transfer data around in my app. Since I have previously learned how import works, it’s time to work on export.

I learned that exporting through the filesystem was only accessible by a server, so my client-only constraint would need a slightly different approach.

I found a workaround solution on StackOverflow that allowed for creating a downloadable text file link. It’s fairly simple to implement and reuses the concept of using Blobs to represent the data. Personally I think the harder part would be properly validating and parsing through the imported files, depending on how meticulous you want to be.

Building in Public - 2

Bryan Liao — Tue, 11 Jun 2024 04:30:05 +0000

I haven’t worked with file uploads from scratch before, so I did some exploration.

Adding a component for file uploads is actually quite simple, it’s adding an <input> tag with a type="file" attribute. Through normal browser code, you can access this using document.getElemenyById and add an event listener to work with the upload. Since I’m using React I used the onChange attribute and a state hook.

Something that caught me off guard was the callback. I usually use e.target.value , but I learned that this will just be a filepath as a String, not the actual file itself. Instead, I had to use the files property (i.e e.target.files) to access the FileList from the input element and could read the file contents from that.

The more you know 🌟

Building in Public - 1

Bryan Liao — Sat, 08 Jun 2024 01:20:14 +0000

I’m building a client-only version of Splitwise for fun and practice. One thing that I’m trying to figure out is how to persist data without using a server or database. Some client-based options are localStorage and indexedDB, but what if I wanted to collaborate with others or switch computers? At some point, I’d need to save the information somewhere and be able to transfer it somewhere else.

Taking some inspiration from video games, and something I noticed with Pokeclicker, what if it in addition to local storage, I was able to create encoded text files for data? That way I can work locally, save it to my computer or phone, email it elsewhere, etc. Who needs to pay for server hosting 😛

Something to think about, and something I’m going to explore.

Recovering from burn out by building in public

Bryan Liao — Thu, 06 Jun 2024 13:00:00 +0000

Working in big tech really burned me out.

Honestly I thought I’d have been over it by now having been out of my company for 2 months now, but that doesn’t seem to be the case. Probably not realistic when I was on a slow burn for over a year. What sucks is that I still like programming and building things, at least the idea of it. Problem solving is fun, technology is fun, why aren’t I having any fun using technology to solve problems?

The weird combination of circumstances that I led me to quit my job made me question a lot of my identity as a developer, but part of why I quit was to work past my previous experienced.

Therefore, I’m trying something new. As an independent developer I represent myself and I have to keep myself accountable to improving not just my skills but my overall attitude towards programming. I’m starting a “Build in Public” series so I can do both in a more consistent (and public) way. Cheers! 🥂

You should probably have a Bragging Doc

Bryan Liao — Mon, 03 Jun 2024 21:27:13 +0000

Getting a dev job is one thing, but being recognized at that job is another.

Expanding on the advice of advocating for yourself, it’s important that you keep track of your own accomplishments and contributions to the company. I’ve personally been pretty terrible at keeping track of the work that I’ve done and had trouble showing the “impact” that I’ve had on my team. I had the mentality that my work would speak for itself.

Silly me, that’s incorrect and a terrible way to think 🙂

When performance reviews came around I was scrambling to remember everything I had worked on in the past year and talk up how much I was improving the product. There’s also a social aspect of contribution that’s harder to track down.

Aside from performance reviews, I believe it’s also a good idea to keep a bragging doc handy for when you’re trying to get promoted. At least where I’ve worked, there’s usually some process of collecting proof that you’re performing at the next level. There’s more involvement with your manager, but the idea is similar on your end.

It may sound like a lot of work to maintain, but it’ll save you a lot of cramming and searching once you start. Future you will thank you. Probably 😛

Switching to Vite from React-Scripts

Bryan Liao — Mon, 27 May 2024 04:19:34 +0000

I have a silly react project that I’m working on that I made using create-react-app. By default, these kinds of projects build and run using react-scripts which uses webpack under the hood for building projects. Vite is generally known to be faster than Webpack ⚡ so I was curious about how to swap them.

Installation is simple enough, there’s two dev dependency modules that need to be included:
Vite and Vite’s React Plugin

To utilize Vite, start by creating a vite.config.js file. Here’s a very basic example of what I added:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()].
    root: 'src',
});

Since Vite uses index.html as the entry point for the application, I moved it out of my public folder and into my src folder. I removed the %PUBLIC_URL% part from my HTML file and added a script to point to where my react root was created:

<script type='module' src='./index.tsx'></script>

All that’s left is to replace the scripts in package.json to use vite commands instead and remove react-scripts as a dependency. 🎉