# web dev

**URL:** https://forum.kirupa.com/c/programming/web-dev/42.md?page=22

[Latest](https://forum.kirupa.com/latest.md) · [Categories](https://forum.kirupa.com/categories.md)

**Page:** 23

---

## [Why do some CSS animations jank on high refresh displays?](https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709)

<div class="topic-metadata">

**Author:** [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 2:14pm UTC](https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709 "2026-03-30T14:14:07Z")

</div>

On 120Hz and 144Hz displays, some animations still feel stuttery. What implementation mistakes usually cause this and how do you diagnose them quickly. Yoshiii

---

## [How do you model optimistic UI updates without data corruption?](https://forum.kirupa.com/t/how-do-you-model-optimistic-ui-updates-without-data-corruption/679707)

<div class="topic-metadata">

**Author:** [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 1:14pm UTC](https://forum.kirupa.com/t/how-do-you-model-optimistic-ui-updates-without-data-corruption/679707 "2026-03-30T13:14:07Z")

</div>

Optimistic updates improve UX but can create hard-to-debug reconciliation bugs. What patterns keep rollback and consistency manageable. Arthur

---

## [What does this optional chaining expression return?](https://forum.kirupa.com/t/what-does-this-optional-chaining-expression-return/679691)

<div class="topic-metadata">

**Author:** [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Replies:** 3\
**Last updated:** [March 30, 2026, 12:35pm UTC](https://forum.kirupa.com/t/what-does-this-optional-chaining-expression-return/679691 "2026-03-30T12:35:07Z")

</div>

Quick JS question. const user = {}; console.log(user.profile?.name ?? 'guest'); What does this print and why. Hari

---

## [Why does this button submit the form?](https://forum.kirupa.com/t/why-does-this-button-submit-the-form/679705)

<div class="topic-metadata">

**Author:** [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 12:07pm UTC](https://forum.kirupa.com/t/why-does-this-button-submit-the-form/679705 "2026-03-30T12:07:05Z")

</div>

Easy HTML behavior question. \<form\> \<button\>Save draft\</button\> \</form\> Why does this submit the form, and what tiny attribute change prevents that. Quelly

---

## [What does this JavaScript closure log?](https://forum.kirupa.com/t/what-does-this-javascript-closure-log/679680)

<div class="topic-metadata">

**Author:** [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Replies:** 6\
**Last updated:** [March 30, 2026, 11:42am UTC](https://forum.kirupa.com/t/what-does-this-javascript-closure-log/679680 "2026-03-30T11:42:06Z")

</div>

Quick coding one with an easy answer. for (var i = 0; i \< 3; i++) { setTimeout(() =\> console.log(i), 0); } What gets logged, and what tiny change would make it log 0, 1, 2. Arthur

---

## [Why does this object update affect both variables?](https://forum.kirupa.com/t/why-does-this-object-update-affect-both-variables/679701)

<div class="topic-metadata">

**Author:** [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 10:14am UTC](https://forum.kirupa.com/t/why-does-this-object-update-affect-both-variables/679701 "2026-03-30T10:14:06Z")

</div>

Small JavaScript fundamentals check. const a = { theme: 'dark' }; const b = a; b.theme = 'light'; console.log(a.theme); Why does this happen, and what is a simple way to avoid it. Yoshiii :slightly\_smiling\_face:

---

## [Why is this flex centering not working?](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670)

<div class="topic-metadata">

**Author:** [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Replies:** 4\
**Last updated:** [March 30, 2026, 8:49am UTC](https://forum.kirupa.com/t/why-is-this-flex-centering-not-working/679670 "2026-03-30T08:49:06Z")

</div>

Quick CSS layout question. .parent { display: flex; justify-content: center; align-items: center; } .child { margin-left: auto; } Why does the child not stay centered, and what is the simplest fix. WaffleFries …

---

## [How tokenization shapes AI cost across languages?](https://forum.kirupa.com/t/how-tokenization-shapes-ai-cost-across-languages/679696)

<div class="topic-metadata">

**Author:** [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 8:07am UTC](https://forum.kirupa.com/t/how-tokenization-shapes-ai-cost-across-languages/679696 "2026-03-30T08:07:06Z")

</div>

Nice breakdown of why LLMs bill in tokens instead of characters or bytes, with clear examples showing how UTF-8 storage, BPE tokenization, and language differences make the same text cost. BayMax …

---

## [What is your strategy for preventing flaky Playwright style tests?](https://forum.kirupa.com/t/what-is-your-strategy-for-preventing-flaky-playwright-style-tests/679678)

<div class="topic-metadata">

**Author:** [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Replies:** 3\
**Last updated:** [March 30, 2026, 7:42am UTC](https://forum.kirupa.com/t/what-is-your-strategy-for-preventing-flaky-playwright-style-tests/679678 "2026-03-30T07:42:05Z")

</div>

End-to-end tests can drift into flaky territory over time. What structure and waiting strategy keeps them stable and meaningful. MechaPrime

---

## [Why does this map return undefined values?](https://forum.kirupa.com/t/why-does-this-map-return-undefined-values/679676)

<div class="topic-metadata">

**Author:** [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Replies:** 3\
**Last updated:** [March 30, 2026, 6:56am UTC](https://forum.kirupa.com/t/why-does-this-map-return-undefined-values/679676 "2026-03-30T06:56:06Z")

</div>

Easy JavaScript check. const nums = \[1, 2, 3\]; const out = nums.map((n) =\> { n \* 2; }); console.log(out); Why is the output not \[2, 4, 6\], and what is the simplest fix. Yoshiii

---

## [Why does this click handler run immediately?](https://forum.kirupa.com/t/why-does-this-click-handler-run-immediately/679688)

<div class="topic-metadata">

**Author:** [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Replies:** 2\
**Last updated:** [March 30, 2026, 6:21am UTC](https://forum.kirupa.com/t/why-does-this-click-handler-run-immediately/679688 "2026-03-30T06:21:05Z")

</div>

Quick DOM question. button.addEventListener('click', save()); Why does save run right away, and what is the correct version. WaffleFries

---

## [Which color wins in this CSS specificity case?](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686)

<div class="topic-metadata">

**Author:** [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Replies:** 2\
**Last updated:** [March 30, 2026, 6:00am UTC](https://forum.kirupa.com/t/which-color-wins-in-this-css-specificity-case/679686 "2026-03-30T06:00:08Z")

</div>

Easy CSS specificity question. .card p { color: blue; } #app .card p { color: green; } .card .title { color: red; } \<div id="app"\> \<div class="card"\>\<p class="title"\>Hello\</p\>\</div\> \</div\> What final text color appe…

---

## [Why does this button submit the form?](https://forum.kirupa.com/t/why-does-this-button-submit-the-form/679674)

<div class="topic-metadata">

**Author:** [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Replies:** 4\
**Last updated:** [March 30, 2026, 4:21am UTC](https://forum.kirupa.com/t/why-does-this-button-submit-the-form/679674 "2026-03-30T04:21:05Z")

</div>

Easy HTML behavior question. \<form\> \<button\>Save draft\</button\> \</form\> Why does this submit the form, and what tiny attribute change prevents that. WaffleFries

---

## [Why does numeric sort look wrong here?](https://forum.kirupa.com/t/why-does-numeric-sort-look-wrong-here/679684)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 1\
**Last updated:** [March 30, 2026, 4:07am UTC](https://forum.kirupa.com/t/why-does-numeric-sort-look-wrong-here/679684 "2026-03-30T04:07:04Z")

</div>

Easy one. console.log(\[10, 2, 5\].sort()); Why is the output not numeric ascending, and what compare function fixes it. Sora :smiling\_face\_with\_sunglasses:

---

## [How do you model optimistic UI updates without data corruption?](https://forum.kirupa.com/t/how-do-you-model-optimistic-ui-updates-without-data-corruption/679659)

<div class="topic-metadata">

**Author:** [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Replies:** 8\
**Last updated:** [March 30, 2026, 2:56am UTC](https://forum.kirupa.com/t/how-do-you-model-optimistic-ui-updates-without-data-corruption/679659 "2026-03-30T02:56:06Z")

</div>

Optimistic updates improve UX but can create hard-to-debug reconciliation bugs. What patterns keep rollback and consistency manageable. WaffleFries

---

## [Why does this object update affect both variables?](https://forum.kirupa.com/t/why-does-this-object-update-affect-both-variables/679661)

<div class="topic-metadata">

**Author:** [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Replies:** 5\
**Last updated:** [March 30, 2026, 1:28am UTC](https://forum.kirupa.com/t/why-does-this-object-update-affect-both-variables/679661 "2026-03-30T01:28:06Z")

</div>

Small JavaScript fundamentals check. const a = { theme: 'dark' }; const b = a; b.theme = 'light'; console.log(a.theme); Why does this happen, and what is a simple way to avoid it. Hari

---

## [JS Quiz: Microtasks vs timers output order](https://forum.kirupa.com/t/js-quiz-microtasks-vs-timers-output-order/679654)

<div class="topic-metadata">

**Author:** [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Replies:** 9\
**Last updated:** [March 29, 2026, 11:35pm UTC](https://forum.kirupa.com/t/js-quiz-microtasks-vs-timers-output-order/679654 "2026-03-29T23:35:09Z")

</div>

What is the exact console output order? console.log('1'); setTimeout(() =\> console.log('2'), 0); Promise.resolve().then(() =\> console.log('3')); queueMicrotask(() =\> console.log('4')); console.log('5'); poll BobaMilk

---

## [Why does this promise chain print undefined?](https://forum.kirupa.com/t/why-does-this-promise-chain-print-undefined/679672)

<div class="topic-metadata">

**Author:** [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Replies:** 2\
**Last updated:** [March 29, 2026, 10:21pm UTC](https://forum.kirupa.com/t/why-does-this-promise-chain-print-undefined/679672 "2026-03-29T22:21:07Z")

</div>

Simple async question. Promise.resolve(1) .then((v) =\> { v + 1; }) .then((v) =\> console.log(v)); Why does this print undefined, and what one-line change fixes it. WaffleFries

---

## [What is the output of this event loop example?](https://forum.kirupa.com/t/what-is-the-output-of-this-event-loop-example/679668)

<div class="topic-metadata">

**Author:** [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Replies:** 1\
**Last updated:** [March 29, 2026, 8:14pm UTC](https://forum.kirupa.com/t/what-is-the-output-of-this-event-loop-example/679668 "2026-03-29T20:14:05Z")

</div>

Easy event loop question. console.log('A'); setTimeout(() =\> console.log('B'), 0); Promise.resolve().then(() =\> console.log('C')); console.log('D'); What is the exact output order. Quelly

---

## [What is your strategy for accessible form validation UX?](https://forum.kirupa.com/t/what-is-your-strategy-for-accessible-form-validation-ux/679666)

<div class="topic-metadata">

**Author:** [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Replies:** 1\
**Last updated:** [March 29, 2026, 7:07pm UTC](https://forum.kirupa.com/t/what-is-your-strategy-for-accessible-form-validation-ux/679666 "2026-03-29T19:07:06Z")

</div>

Form errors often feel noisy or unclear. What patterns keep validation accessible, fast, and easy to recover from on mobile and desktop. MechaPrime

---

## [Dynamically changing the colours of parts of a raster image (not SVG) using HTML/CSS or something else?](https://forum.kirupa.com/t/dynamically-changing-the-colours-of-parts-of-a-raster-image-not-svg-using-html-css-or-something-else/677930)

<div class="topic-metadata">

**Author:** [@TEMPEST\_114](https://forum.kirupa.com/u/TEMPEST_114)\
**Replies:** 2\
**Last updated:** [November 14, 2025, 2:20am UTC](https://forum.kirupa.com/t/dynamically-changing-the-colours-of-parts-of-a-raster-image-not-svg-using-html-css-or-something-else/677930 "2025-11-14T02:20:39Z")

</div>

Hi. I’ve just found and watched your tutorial on changing the colours of an SVG image using HTML and CSS. I have a question. Let’s take an image (raster I believe it’s called) like the image below. If I wanted to chang…

---

## [Can you spot some of the big issues with this vibe coded animation?](https://forum.kirupa.com/t/can-you-spot-some-of-the-big-issues-with-this-vibe-coded-animation/676680)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 10\
**Last updated:** [September 16, 2025, 2:09am UTC](https://forum.kirupa.com/t/can-you-spot-some-of-the-big-issues-with-this-vibe-coded-animation/676680 "2025-09-16T02:09:02Z")

</div>

I was using an AI assistant to help me create an infinitely scrolling grid animation where the speed and direction of the animation were dependent on the mouse cursor position. Overall, the AI assistant did a pretty gre…

---

## [JavaScript for beginners guide](https://forum.kirupa.com/t/javascript-for-beginners-guide/675250)

<div class="topic-metadata">

**Author:** [@evelynnmimijae](https://forum.kirupa.com/u/evelynnmimijae)\
**Replies:** 1\
**Last updated:** [May 29, 2025, 3:36am UTC](https://forum.kirupa.com/t/javascript-for-beginners-guide/675250 "2025-05-29T03:36:26Z")

</div>

You’re so punny! :laughing:

---

## [What are the programming languages used to create this amazing website](https://forum.kirupa.com/t/what-are-the-programming-languages-used-to-create-this-amazing-website/670309)

<div class="topic-metadata">

**Author:** [@Hadil](https://forum.kirupa.com/u/Hadil)\
**Replies:** 3\
**Last updated:** [February 25, 2025, 7:50pm UTC](https://forum.kirupa.com/t/what-are-the-programming-languages-used-to-create-this-amazing-website/670309 "2025-02-25T19:50:19Z")

</div>

Hello! Please, I wanna know what are the programming languages used to create the frontend of this website. It looks so cool :heart\_eyes: :smiling\_face\_with\_three\_hearts:

---

## [Infinite scroll for wheel pickers](https://forum.kirupa.com/t/infinite-scroll-for-wheel-pickers/672626)

<div class="topic-metadata">

**Author:** [@gunhan](https://forum.kirupa.com/u/gunhan)\
**Replies:** 3\
**Last updated:** [February 12, 2025, 11:21pm UTC](https://forum.kirupa.com/t/infinite-scroll-for-wheel-pickers/672626 "2025-02-12T23:21:23Z")

</div>

Hey, i am trying to make clone of ios wheel date-time picker with js and tailwind. You can see the my goal design on uber app, if you tap on ‘now’ button on ride request screen you will see it, or here is a gif: What …

---

## [Ideas for more advanced canvas topics?](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 5\
**Last updated:** [February 12, 2025, 11:37am UTC](https://forum.kirupa.com/t/ideas-for-more-advanced-canvas-topics/672263 "2025-02-12T11:37:31Z")

</div>

Hi everybody - I’ve started a new series of tutorials that cover more advanced topics revolving around how to work with the Canvas by continuously improving how we can draw and display a grid! The current list of tutori…

---

## [Advanced Glitch Image Effect (with Sound!)](https://forum.kirupa.com/t/advanced-glitch-image-effect-with-sound/672910)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 0\
**Last updated:** [January 26, 2025, 5:11am UTC](https://forum.kirupa.com/t/advanced-glitch-image-effect-with-sound/672910 "2025-01-26T05:11:02Z")

</div>

Hi everybody - I have a new coding exercise that was a boatload of fun to create! It is an image glitch effect that involves a lot of pixel manipulation on the Canvas :stuck\_out\_tongue: Click play below to see the effec…

---

## [Tips for study javascript](https://forum.kirupa.com/t/tips-for-study-javascript/672712)

<div class="topic-metadata">

**Author:** [@corfaction](https://forum.kirupa.com/u/corfaction)\
**Replies:** 1\
**Last updated:** [January 18, 2025, 4:07am UTC](https://forum.kirupa.com/t/tips-for-study-javascript/672712 "2025-01-18T04:07:50Z")

</div>

hello everybody, I recently learned html, css and decided to start learning javascript from the kirupa book Can you give me study tips or ideas for future projects?

---

## [Yes, Math.pow() is slower than straight-up mulitplication! 😱](https://forum.kirupa.com/t/yes-math-pow-is-slower-than-straight-up-mulitplication/672465)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 0\
**Last updated:** [January 4, 2025, 11:10pm UTC](https://forum.kirupa.com/t/yes-math-pow-is-slower-than-straight-up-mulitplication/672465 "2025-01-04T23:10:16Z")

</div>

If you happened to be in the middle of watching The Hobbit: The Desolation of Smaug and were suddenly shaken by the unmistakable urge to figure out if Math.pow() is faster than just multiplying the values together, here …

---

## [Disable auto delete of local storage](https://forum.kirupa.com/t/disable-auto-delete-of-local-storage/664927)

<div class="topic-metadata">

**Author:** [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Replies:** 11\
**Last updated:** [October 23, 2024, 9:50am UTC](https://forum.kirupa.com/t/disable-auto-delete-of-local-storage/664927 "2024-10-23T09:50:01Z")

</div>

I like to create PWAs with local storage. I don’t want the browser to auto delete the local storage. Even indexedDB gets deleted after seven days of inactivity! I wished PWA got the same treatment as local apps on a m…

[Previous page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=21)

[Next page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=23)
