Chanon S.

Web Developer & Game Developer
SolidJS is my weapon of choice

[Chanon S. @chanons]

It's live!

Relax with a game of Solid Solitaire!
https://t.co/97kDe1nBqy

My goal was to create one of the best solitaire implementations online!
- Free to play on mobile and desktop browsers
- WebGL 3D graphics
- AI assists when you're stuck
- Klondike Turn 1, Turn 3, Spider, and FreeCell

It's built using
- Babylon3D for the 3D game
- SolidJS for the UI

#buildinpublic #solitaire #playingcards #webgames #browsergames #gamedev #indiedev #solidjs #babylonjs

[Chanon S. @chanons]

After almost a week, I finally finished extracting my re-usable frontend code to a separate git repo that I can now quickly add to new projects as a git submodule.

This should accelerate my productivity a ton going forward, letting me easily create new projects and share code between them.

Now starting that new project I wanted to. I've got so many projects going at the same time. Maybe not the best way to go about it, but I love being able to switch projects when I'm bored and also believe in putting my eggs in multiple baskets.

[Chanon S. @chanons]

I figured out the easiest solution for sharing code across my pnpm monorepos - turns out just using git submodules is easiest! At least IMO. Easier than any private npm package solution.

Just add the submodule and add the packages inside it to the outer project's pnpm-workspace.yaml

Then the outer project's packages can reference the submodule packages using "workspace:*"

So simple!

[Chanon S. @chanons]

One other thing I did today, was a new UnoCSS variants function that allows lightening and darkening any color easily.

It allows doing, for example:

bg-lighter-red-500 <- a lighter red bg color

text-darker-40-green-500 <- 40% darker version of green-500

bg-red-500 hover:bg-darker-20-red-500 <- 20% darker red on hover

It can be used anywhere colors are used and with any color! It works by using the newish "color-mix" CSS function together with UnoCSS's powerful ability to add custom variants.

(there's the word variant again, but different meaning this time!)

[Chanon S. @chanons]

Here's how my last 3 days went:
- Wanted to start work on a new project.
- Realized I should put all my SolidJS components into a reusable library.
- Realized I should make them easily re-themable so each project can have it's own look if needed.
- Discovered CVA and Tailwind Variants
- Realized since I'm using UnoCSS I need something else
- Rolled my own CVA style lib, but (IMO) it has better DX!
- To use: define a default theme, add a bit of boilerplate code,
- Extend theme if needed
- Get all the 'variant props' as props on the component itself and type safety when choosing options

Now to add completely new props that control visual stuff in components, I can just update to the component's theme file.

No need to mess with any conditional classname code or even edit the component's source code!

Love the power of SolidJS + UnoCSS.

[Chanon S. @chanons]

@__theSeyram Spotify, because with my Youtube Premium I can just use Youtube Music without ads.

[Chanon S. @chanons]

As someone new to posting on X, I'm beginning to think I'm overthinking it. I see people sharing strategies on how to craft the perfect posts for engagement. Even SaaS tools made specifically for that purpose!

Quite overwhelming for a noob like me. Instead gonna just start posting whatever comes to mind that is interesting without trying to 'craft' the perfect image/story/post.

If people find it useful, they will follow. If not I'm not wasting time I could use building instead.

[Chanon S. @chanons]

Alright, this is the beginning of my "Build In Public" journey with just 5 followers!

I've got 6+ apps I want to build. Hoping at least 1 is successful.

First up is the one I've always wanted. A todo app that is NOT simple. Cause I'm a BUSY professional juggling LOTS of stuff!

[Chanon S. @chanons]

I built this in silence over many months so I think this fits!
https://t.co/wNIrtaDJtP
- Soothing 3D card animations powered by WebGL (babylonjs)
- AI solver helps you whenever you get stuck
- Leaderboards, unlockable card back and background designs and other features