Afifudin 🍉

Software Engineer • •

[Clair 光 @lynxluna]

Hi Webdev 🙋🏽‍♂️

Bosen ngulik web cuma DOM & framework?

Aku ada materi2 webdev non framework, non DOM. ADHD friendly yang kukumpulkan dari isi otak aku dan tentu saja gratis karena saya ga pinter jualan kaya @lwastuargo

Krn gratis jadi kalo bahasanya slop, maklumin aja. ⬇️

[shadcn @shadcn]

The most important coding skill: read.

Teach yourself how to read.

Read the agent output. Read the blog post. Read the paper. Read the code (if it applies to you).

Don't summarize.

[Shu @shuding]

13 years ago, Apple asked a question that hits me harder today than ever:

If everyone is busy making everything, how can anyone perfect anything?

Every day, I see a world flooded with effortless AI slops. I’m realizing that to build something truly great today, you need a level of focus the world has never demanded before.

It feels like trying to write a quiet, beautiful song in a room full of loud noise.

[Afifudin 🍉 @digimushrm]

https://t.co/xIspgq7bs3

Lately, I've been practicing my storytelling skills by writing blog posts.
Besides helping me improve, I hope it can be useful for you too..

[Afifudin 🍉 @digimushrm]

https://t.co/rk6uMxisak

[Afifudin 🍉 @digimushrm]

So I finally started to write articles on my personal website.

Not sure if, in the AI era you guys still care about technical stuff or enjoy reading engineering stories, wkwkwk...

[Afifudin 🍉 @digimushrm]

@volkovsergei96 @thekitze One of the alternative solution for the "I hate explicitly selecting slices"

[Afifudin 🍉 @digimushrm]

@EOEboh Nothing wrong with storing token in localStorage.

Here we go again, endless debate with people who don't fully understand frontend world.

I'll leave these 2 articles:

1.) https://t.co/Va2x03B4tU

2.) https://t.co/1tXZdABAPe

[Afifudin 🍉 @digimushrm]

@Nandapagi @fmgono Contoh konkret:
Svelte sebenernya technically lebih performant dibanding React.

Tapi punya non-technical cost:
Nyari dev yg bener2 bagus di Svelte lebih susah, familiarity di AI, library pendukung yg nge-cut development time gak sebanyak React.

[Afifudin 🍉 @digimushrm]

@Nandapagi @fmgono Knp gak pake lib/framework lain?
Ya ada alasan technical dan non-technical.
Tapi pd byk case, yg lebih dititikberatkan mostly bakalan non-technical reason.

[Afifudin 🍉 @digimushrm]

I dislike both.

Prefer this:
if (user == null) return "No User";
const name = user.getName();
if (name == null) return "No Name";
return name.toUpperCase();

[SumitX @Sumits_X]

Which one do you prefer 1 or 2 ?

// 1
if (user != null) {
if (user.getName() != null) {
return user.getName().toUpperCase();
} else {
return "No Name";
}
} else {
return "No User";
}

// 2
return Optional.ofNullable(user)
.map(User::getName)
.map(String::toUpperCase)
.orElse("No User");

[Afifudin 🍉 @digimushrm]

@indrazulfi Tp kalo APInya expected diconsume specific FE, sung aja sesuaikan dg business requirements

[Afifudin 🍉 @digimushrm]

@indrazulfi Kalo API nya expected utk diconsume multiple clients: better dibikin fleksibel sekalian,
?created_at=lt.<x>&created_at=gte.<y>

- lt: less than
- lte: less than or equal to
- gt: greater than
- gte: greater than or equal to

[Afifudin 🍉 @digimushrm]

@wesbos @syntaxfm Working on https://t.co/8TiT5ZssWU

[Afifudin 🍉 @digimushrm]

Also found interesting thing:
We actually don't need useInfiniteQuery.

Infinite scroll can be done purely using component composition.

useInfiniteQuery = you fetched 10 pages, when you fetch next page the prev 10 pages got re-rendered.

https://t.co/4HOB5sE4zb

[Afifudin 🍉 @digimushrm]

Playing with Proxy, improved my library.
Result: https://t.co/2ipqAxIHO3

Like Zustand, but no need selectors (auto optimize).

Async support like TanStack Query, but DX is very similar to Zustand: Store is available globally, access/modify state from anywhere.

0 dependencies.

[Shu @shuding]

In case you didn’t know, React didn’t invent RSC, SSR, or Hydration, conceptually:

SSR is Express:

app.get('/', (req, res) => {
res.render('index', { name: 'John' })
})

RSC is Pug:

if name == "Bob"
button(class="btn") Hello Bob
else
button(class="btn") My name is #{name}

Hydration is jQuery:

$('.btn').click(...)

That’s why there’s no window in SSR, and you can’t set onClick in RSC, and you have hydration errors in jQuery too (such as a typo of .btn) but with a less fancy name.