Forem: Min

Welcome to Sunset Avenue

Min — Wed, 09 Jul 2025 22:28:11 +0000

What if I could live in a beautiful town with all my favorite people as neighbors?
Would’ve been nice if someone told me earlier that dream’s basically impossible.
(Seriously, have you seen the property market? It’s wild.)

🏠Sunset Avenue is my way of holding onto that vibrant childhood dream.
Each 3D house syncs with an online calendar — so you can see how vibrant everyone’s life is, no matter where they are.

In this post, I’ll quickly walk through how I built it.
No heavy tech talk — just a simple, fun read.

Let’s get started.

1. Structure Summary

Framework(Library) : React
3D scene : Three.js via React Three Fiber
Calendar Data Fetching : ical format with ical.js
Backend Hosting : Glitch.io

To start a JavaScript project, you need a code editor like VS Code.
Then, install Node.js to use the npm command for installing libraries.
Optionally, Git helps track code changes over time.

In coding, a library is like a set of pre-made ingredients you can use in your project.
As a developer, you can choose the right libraries and mix them as you want.

npm install react.js three.js react-three-fiber ical.js

React renders 2D website elements like layouts and buttons.
Three.js renders 3D graphics in the browser.
React Three Fiber integrates Three.js smoothly into React.
ical.js parses iCal calendar data into easy-to-use JSON.

2. Go Fetch!

When I start a new project, the first thing I tackle is what I know the least.
If any part turns out to be impossible, the whole effort feels pointless.
For this project, that tricky part was fetching the calendar data.

When you develop something, there are two sides: frontend and backend.
The frontend is what you and other users see and interact with.
The backend is the hidden hand managing data across different servers.

Fetching calendar data from online requires some backend work.
For this, I used Glitch to host a free backend server.
I created a new project on Glitch and added the following code to the bottom of server.js:

fastify.post('/fetch-ical', async (req, reply) => {
  try {
    const res = await fetch(req.body.url);
    const icalData = await res.text();  // iCal data as plain text
    return reply.send({ icalData });    // Send it back as JSON
  } catch (error) {
    // handle error here
  }
});

What’s happening here:

The Glitch server accesses the URL sent in req.body.url
It fetches some iCal data from that address
It wraps the data in JSON and sends it back to the frontend

Of course, this only runs when a request is made.
Here’s what the frontend can send to trigger it:

const requestData = { url: icalUrl };

fetch(myGlitchURL + '/fetch-ical', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(requestData)
})
.then(res => res.json())
.then(async data => {
  // Yay, data arrived!
});

One of the biggest downsides of using iCal is that you can’t request just a little bit of data — you have to fetch the whole thing.
It’s kind of like shopping at Costco as a bachelor: you don’t really need that much of everything, but that’s the only size available.

If I had used something like the Google Calendar API, this could’ve been solved.
I’d be able to fetch only the data I need, and even set up webhooks to trigger when events are created or deleted — meaning the frontend could stay updated in real time.

But unfortunately, I was running out of time. So I went with the bulk option.
Big bag of data it is.

🤷‍♀️Why Calendar?
There used to be a routine builder in an older version of this project (a couple of years ago).
Each house acted like a routine you’d set: open the curtains, close the curtains — that kind of thing.
I ended up scrapping the whole feature after spending way too long on it… because the more I built it, the more it just turned into a regular calendar.
😂 You live and learn.

2. Paint Sunset

I wasn’t really a sunset person. I never quite understood why people would suddenly stand up and stare at the sky like something magical was happening.
But one day, I was just sitting on the grass near my home, and out of nowhere, I felt this strange, unexplainable bond with a bunch of strangers — just from watching the same sunset together.

And in that moment, I wished I could share that same feeling with people I actually care about, even if they’re on the other side of the world.
(But I knew I couldn’t. And that made me a little sad.)

The name of this project came from that moment.

The sunset is a key part of this project — I had to get it right.
I wanted the sky to look a little different every day, so I built it using a procedural method.

First, I created some random shapes in Photoshop and turned them into tangent normals.
Then, I distorted the cloud image using Perlin noise to give it some organic motion.
After that, the image gets repainted with new colors.

For this recoloring process, I used another map as a sampler:

    vec3 cloudShadow = texture2D( uSkyColorMap, vec2( 3.0/5. +.1, fract(uTime) ) ).xyz;
    vec3 cloudHighlight = texture2D( uSkyColorMap, vec2( 4.0/5. +.1, fract(uTime) ) ).xyz;
    vec3 cloudColored = mix(cloudShadow, cloudHighlight, cloudsMixed.x );

This is how I sample the color using UV coordinates.
These sampled colors are then used in various shaders across the scene — on houses, trees, the ocean… basically anything that needs to feel like it’s part of the same sky.

3. House Designer

I imagined endless possibilities for designing the houses — all kinds of shapes, styles, and details.
But the truth is, the more options you offer, the more pressure the user feels.
So I decided to keep it simple: one house geometry, a few color choices.

Keeping each house as a single mesh also reduces render calls, which helps with performance.
Sometimes less really is more — both for the user and the GPU.

4. Grid System

The grid shown in the town editor mode is baked directly into the 3D file as a renderable mesh.
That’s because the town is hilly — it needs its own custom grid geometry that follows the surface properly.

When the FBX file is loaded, it stores the transform data (position and rotation) of each grid cell in an array:

const gridTransforms = [];

_fbxFile.traverse(_child => {
  if (_child.parent.name === "grid") {
    const pos = new Vector3();
    _child.getWorldPosition(pos);

    const rot = new Euler();
    const quat = new Quaternion();
    _child.getWorldQuaternion(quat);
    rot.setFromQuaternion(quat, "XYZ");

    const cellTransform = { position: pos, rotation: rot };
    gridTransforms.push(cellTransform);
  }
});

Then, when rendering a house, the system looks up the right transform from that array:

<House property={{ cellNumb: 12 }} />
// This finds the corresponding transform from the grid array

5. Custom Pixelation Effect

I didn’t originally plan to render this in a pixel art style.
But I’ve always liked the old-school, low-key vibe of pixel art — and it felt like a natural fit for the mood of Sunset Avenue.
There’s something about it that gives more weight and solidity to the scene than smooth 3D rendering does — kind of like turning a watercolor into thick acrylic paint.

For post-processing effects, I used the postprocessing library — a common choice in Three.js projects.
It’s great for things like color adjustment and bloom.
It even has a built-in pixelation effect, but the result wasn’t quite what I wanted.

Take a look at the right side of the comparison below — you’ll notice some strange tiling in the sky gradient.
That’s called color banding, and it’s a common issue when compressing images (like tiny GIFs) or using low-res color sampling.

The default pixelation effect samples every block evenly, regardless of how small the color difference is — which makes gradients look chunky and artificial.
Unfortunately, I couldn’t tweak it enough to fix that.

But then I stumbled upon this article, which helped me get the exact look I was after:

void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
  // Calculate pixel grid size based on pixelSize and resolution
  vec2 dxy = pixelSize / resolution;
  float offset = 1.5 / pixelSize;
  vec2 pixelUv = vec2(
    (floor(uv.x / dxy.x) + offset) * dxy.x,
    (floor(uv.y / dxy.y) + offset) * dxy.y
  );
  vec4 color = texture2D(tDiffuse, pixelUv);
}

The key here is float offset = 1.5/pixelSize;
That offset shifts the sample point away from the block edge and closer to the center — helping reduce color banding in gradients.
If the offset is too small, you’ll sample near edges, causing artifacts.
If it’s too large, you’ll drift too far into the block, possibly distorting the grid and stretching colors slightly.

1.5 turns out to be a sweet spot — smooth gradients, preserved pixelation, and no weird tiling.

PS. Thank you,Matías Fernández and power of internet community :D

6. Sort Events

When event data arrives, each one needs to be duplicated based on its repetition rule.
These rules follow the RRULE format — things like daily, weekly, or from a certain date to another.

Example:
FREQ=WEEKLY;BYDAY=TU;UNTIL=20251230

To decode that into something usable, I used the rrule JavaScript library:

import { RRule } from "rrule";

const evtRRule = `FREQ=WEEKLY;BYDAY=TU;UNTIL=20251230`;

const options = RRule.fromString(evtRRule).options;
const rule = new RRule(options);

const DateFromNow = (days) => new Date().setDate(new Date().getDate() + days);
const recentOccurrences = rule.between(DateFromNow(-10), DateFromNow(+10), true);

It’s important to limit the range using between() —
if the rule creates infinite events, you don’t want to generate thousands at once.
Your app (and your sanity) will thank you.

Once you’ve expanded all the events, sort them by their start time:

evts = evts.sort((a, b) => a.startMoment.diff(b.startMoment));

🤪Fun Neighbours
To fill up the town, I needed more houses — and more calendars.
So I copied iCal data from my own Google Calendar, saved it as a .json file in the project folder, and started to get creative.
fetch("/calendars/bs.json")  
// Fetching directly from the public folder, no backend needed
One of the "residents" is めんこいラーメン, a ramen shop that occasionally gets caught up in awkward situations involving the owner’s ex-wife.
Local drama… now in your browser.

7. Control Time

One variable that needs to be shared across multiple components is time.
It drives everything — from how shaders animate to determining which calendar event is currently active for each house.

I created the time variable as a React context, which acts as a global variable within the app.

const TimestampContext = React.createContext();
const UpdateTimestampContext = React.createContext();

export function EnvProvider({ children }) {
  const [timestamp, setTimestamp] = useState(new Date().valueOf());

  return (
    <UpdateTimestampContext.Provider value={setTimestamp}>
      <TimestampContext.Provider value={timestamp}>
        {children}
      </TimestampContext.Provider>
    </UpdateTimestampContext.Provider>
  );
}

The timestamp is updated every minute using an interval:

useEffect(() => {
  const interval = setInterval(() => {
    updateTimestamp(new Date().getTime());
  }, 60000); // update every one minute

  return () => clearInterval(interval);
}, [updateTimestamp]);

Now, whenever the timestamp updates, a few things get triggered:

const House = () => {
  const timestamp = useTimestamp();

  useEffect(() => {
    // 1. Update all material shaders' uTime
    materials.forEach(mat => {
      mat.uniforms.uTime.value = timestamp;
    });

    // 2. Get the current calendar event based on time
    const pastEvents = events.filter(evt =>
      evt.endMoment.isBefore(new moment(timestamp))
    );

    setCurrentEvent(events[pastEvents.length]);
  }, [timestamp]);

  // ...
}

9. Lastly

This project isn’t perfect yet, but I’m happy to share the progress I’ve made so far.

I still have plenty of ideas I’d love to add — more features, polish, maybe even a few surprises.
But time’s a bit limited these days, so I’ll be contributing in small bits when I can.

Anyway, thank you so much for reading!
If you have any questions, thoughts, or just want to chat — I’d be happy to hear from you.

Working alone is so exhausting so I created my own assistant

Min — Tue, 15 Mar 2022 02:18:47 +0000

Working alone is great... but... I am so tired of dealing with all of these.. these shitty uninspiring, repetitive, tedious tasks...

I didn't realize how many emails I had to reply to and how many invoices I had to make on my own. How many tasks do I have to manage and schedule?!

I sometimes freaked out alone because I was too busy, and sometimes I freaked out because suddenly there's nothing to do..

Console.log( my_life )

I need something stabilizes me all the time no matter what happens to me. Maybe I need a manager. Manage me! (Funny to say that because I left work to not be managed by others.LOL)

For a sec, I think about hiring somebody, but I don't have money for that.(of course)

So here is my attempt to create my personal assistant with discord and notion API and, what I learned from this project.

If there is anything incorrect, please let me know. I'd love to learn from you!

1. I learned NLP

The first thing in my head to create a chatbot is how a chatbot analyze the intention of my text. People say the same thing in various forms of expression

How are you?
How's it going?
What's up?

I can write the code like if( text.includes('how are you') ) for every expression, but how inefficient would it be? This is the time when NLP is useful.

Natural language processing (NLP) is the ability of a computer program to understand human language as it is spoken and written -- referred to as natural language. It is a component of artificial intelligence (AI). NLP has existed for more than 50 years and has roots in the field of linguistics. from techtarget.com

While I still don't fully understand how NLP works, my understanding is so far like this.

A developer submits a set of sentences future users might send
There are three types of variables A user can assign for each text.
(1) intension: The most important part of the sentence. Only one can be assigned for one sentence. ex) I need a new iPhone! -> Request_add_wishlist
(2) Entities: This is a smaller assembly piece, basically a critical keyword to define the intention. ex) I need shopping! -> need, shopping.
(3) Traits : ( I'll ignore this part for now )
An NLP program analyzes what kind of entity composition is for specific intension.
Next time a user send complete new text, a trained NLP will spit out what a user means.

Among multiple different services to provide NLP, I chose to use wit.ai service, which is an open-source service developed by Facebook, Meta.

The useful thing about wit.ai is chatting text I sent by discord also showed up on the wit.ai training session, so even if a bot failed to understand what I meant, I can always go to wit and correct it.

The downside is documentation is not so clear, so... anyway... it's alright. I will take it...

2. I learned Discord.js

In the end, I chose to create a discord bot over a Slack bot even tho I am not really a discord user.

Some servers I joined to get help usually has too many channels on the sidebar, and too many discussion is going on. It just intimates too much. Like you entered in a club and see full of people dancing a Michael Jackson thriller perfectly, but I don't know that damn dance. "Quick, get out from that club!"

Anyway, during this project, I could learn about discord.js and at the same time a little bit more about discord itself...

npm install discord.js

The exciting thing about discord js is it gives so many options to interact with other users. Can create buttons, slash commands, interact with emoji etc.. way more than just sending a message.

The most useful message type is Embed Message.

( I set my coordinator as Tahani from the TV series 'The good place' because I love her character on the show so much. so jolly!)

Embed message returns the beautifully formatted information. You can directly add the field like this.

_embed.addFields({name : "Count", value : Count })

or you can create the dictionary and loop for each keys

Object.keys(style).forEach( k=>{
    _newEmbed.addFields({name : k , value :style[k].toString() })
})

The useful reference for discord bot -> Discord JS Guide

3. I learned Notion API

I love notionHQ. Actually, I am obsessed with it. I've been using it since it was not the mainstream. Recently I heard it acquired automate.io. Alight, NotionHQ, Let's go! Bigger and bigger! But there were a few moments.. when I was considering leaving Notion... it's because Notion doesn't have a recurring task option!

Like I wrote in the intro, repeating and repeating and repeating tasks is already so boring, and I have to create the checkbox of it every time? Oh shit, I don't want that.

I left the Notion and came back again over and over, like a troubled teenager arguing with a parent. A year ago, Notion released notion API; "This is the final, guys. I am going to build an automation system for you and going to be with you happily ever after 4everr."

npm install @notionhq/client

Notion API is great! but unfortunately, there are a few limits for (v1.0.3) right now.

Editing a block is not available yet. Basically, if you want to tick the checkbox block, you should delete the current checkbox item and append a duplicated block again. It's not impossible but kinda annoying. Duplicating a single block is not such a bad case, but how about if you want to duplicate a whole page? Sadly you still need to delete a whole page and duplicate it. If the page has a children element, the problem gets more annoying.
Get children to block only return the top-level items on the hierarchy.

   var children =  await NOTION.blocks.children.list({ block_id: _block.id });

so for example, if there's a notion block like this

The code output will be only [block_A, block_B]. So even if you duplicate the parent with its children, [block_Aa, block_Ab, block_Ba,block_Bb] won't be duplicated.

If you want all the children under parent, there's no other way than keep asking children if they has grand-grand children…

   if( block_A.hasChildren ){
    children.push( await NOTION.blocks.children.list({ block_id: block_A.id }) )
   }

Some block type is not supported. Just think non-native notion blocks such as embed tweet or embed Figma are not supported, which is totally fine, but. butttt. code blocks are also not supported, so I felt kinda sad. :(

All i want is block to save the code so I can run it by ‘eval()’ which can be just any text block. Just not pretty as I wished, that’s all. Haha

var scripts = blocks.filter( block => Object.keys(block)[0] == "callout"  )
await eval(scripts[0])

4. I learned about Cron

One of the must-have features for the coordinator bot was sending scheduled messages, so I can do the task on time.

To do so, I got to know Cron.

npm i cron

A CRON expression is a string comprising five or six fields separated by white space[16] that represents a set of times, normally as a schedule to execute some routine.
from wikipedia

***??... Another regular expression all over again.. horror.. But actually, the breakdown of cron time is pretty simple, min + hour + date + month + week.

Now I should generate cron time by ‘Date()’. This time, instead of writing in js, I wrote as notion built-in formula so even if I update the schedule by notion, the clon time value also can be updated at the same time.

min : 
empty(prop("Unit")) ? if(minute(prop("Date")) + minute(prop("Date")) == 0, format(minute(prop("Edited"))), format(minute(prop("Date")))) : if(prop("Unit") == "minute", "*/" + format(if(empty(prop("Recurring")), 1, prop("Recurring"))), if(prop("Unit") != "hour" or prop("Unit") != "minute", if(empty(prop("Date")), if(empty(prop("Date")), format(minute(prop("Edited"))), format(minute(prop("Date")))), format(minute(prop("Date")))), "*"))

Such a ugly code, for now but so far it seems working as wish. (full code is on my repo)

While I can create a new scheduled event by Notion, I wished to create the new reminder by chat as well. Luckily Wit.ai has built-in entities called "duration" and "datetime", such a lifesaver!

5. I learned Puppeteer

I started to feel more greedy and needy. Hey, bot, you can give weather and different time zone time, my today's tasks and project due date now.. how about.. recommendation for today's meal?? M.M.M

First, I found the biggest recipe API called Spoonacular API, but .. the food pictures look kinda.. not really inspiring..

So instead of food API, I decided to fetch the information directly from my favourite cooking site. I heard the Puppeteer is good for web scraping, I always wanted to try, but this is my first time trying Puppeteer!

npm i puppeteer

Puppeteer is such an amazing package, but there were a few confusing parts though.

When I tried to get element by document.querySelector() .this returned undefined or null object. I was panicked, and I thought Puppeteer failed to find the element, but it's there.. when I specifically ask textContent or src, href?

await page.evaluate(()=>{
    return document.querySelectorAll(".selector").map( sel => sel.textContent)
});

As I understand is what Puppeteer gives me is not an HTML element but something else.. ( is there anybody explain a bit easy for me? i am helpless lol)

Anyway, now I get a recommendation for a recipe. yay

6. I learned Heroku

Because my bot will be deactivated when I don't run bot.js, I needed Heroku to serve it on the cloud.

While I am hosting my sites on Netlify, I am still not familiar with the hosting service. I misunderstood Heroku and Netlify as the same kind of service, but this time, I learned they are not. Like this whole post is such lack of professional knowledge, this is my short understanding about Netlify and Heroku so far

Netlify is more for the front-end, and Heroku is more for the back-end
Netlify is always active, but Heroku fall asleep...zzz
Netlify is site hosting online, but Heroku is run the script on Linux
Netlify start charging by build time, Heroku charging with something called Dyno hours

Dyno is a container that runs the command in Linux. The busier the app will be, the more dyno is required to be purchased. Because I am a free user, I have a single dyno.

Free user has 1000 free dyno hours. It means that even if my app runs consistently without resting for the whole month, it wouldn't get over 730 hours. Free is always good. It makes me feel cosy.😊

Concluding

My Git Repo

While I want to improve more and add more features, my Tahani bot works quite wonderfully right now. Great to have a companion! (sad to say that. lol)

I tried a lot of new things this time, I learned so much; however, I also feel like I didn't spend enough time to learn about each of them more precisely. Maybe that's what I'm going to do with next dev.to

Besides having a customised virtual assistant for my daily routine, the knowledge I earned was so valuable. There are so much potential to improve my interactive character project
Thank you for reading this messy post. I am not a trained developer (I a visual artist), but I am very excited to share thoughts and get to know more about creating something cool.

Please comment on anything if you want to correct my post and educate me. It would be awesome to learn from all of you!