Software Engineer β’ https://nitter.cf/t.co/r7afLUegoV β’ https://nitter.cf/t.co/7ZjbftwiYb
Pekalongan, Indonesia
Joined August 2023
- Tweets241
- Following438
- Followers242
- Likes5.3K
> users sometimes couldn't tell which elements were links and which ones would simply perform an action on the current page.
We can simply look at the bottom-left corner of the browser.
`cursor: pointer` (ππ½) on every interactive element:
Over the years, whenever I get the chance, I run some informal usability tests to see if adding `cursor: pointer` to all interactive elements on a page really provides the best user experience.
The Ariakit site uses `cursor: pointer` only on `<a>` tags and form submit buttons. When I watch someone use the site on a computer, I ask them to hover around the page and answer the following questions:
1. Is this element clickable?
2. Will clicking it take you to a different page or perform an action on the current one?
3. Can you open it in a new tab (using whatever method you're used to)?
Then, I have them use another site that I know uses `cursor: pointer` for everything and ask them the same questions.
As long as an element had a clear hover state, using `cursor: pointer` only for links and form submit buttons yielded the best results. Most people could predict an element's exact behavior just by hovering over it. On sites that used `cursor: pointer` for all interactive elements, users sometimes couldn't tell which elements were links (that would navigate to a new page and could be opened in a new tab) and which ones would simply perform an action on the current page.
This was enough to convince me that using `cursor: pointer` only for links and submit buttons offers a better UX, but my findings aren't conclusive.
Despite this being the browser and OS default, most of the web now uses `cursor: pointer` on every interactive element, so that's probably the safest option. Still, I wish we had more formal research on this so we wouldn't have to rely solely on opinions like mine.
Afifudin π retweeted
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. β¬οΈ
Afifudin π retweeted
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.
afiiif.github.io/blog/reimplβ¦
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..
I dislike both.
Prefer this:
if (user == null) return "No User";
const name = user.getName();
if (name == null) return "No Name";
return name.toUpperCase();
Playing with Proxy, improved my library.
Result: floppy-disk.vercel.app/
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.
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.
afiiif.github.io/floppy-diskβ¦
Afifudin π retweeted
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.
I hate it when Gemini-AI suggest to add unnecessary useCallback on my teammate's PR.
They'll just follow it blindly.
I know exactly the case when it was necessary/unnecessary, but don't have enough energy to explain the whole thing.
I should feed AI with this great article.
Ainun ini standarnya rendah.
Misal keluarganya kena musibah, dan pemerintah sebenernya mampu menolong keluarganya tp malah lalai:
Maka ketika pemerintah minta maaf padanya (tanpa ganti rugi), dia akan memaafkan, walaupun pemerintah sudah membuat keluarganya sengsara berhari2.
