The state of modern Front End

Let's talk about front-end. There'll be a lot of swearing, I'm sorry.

About once every six months another blogger bursts into HackerNews/Twitter trends, saying - hey, enough of that JavaScript bloat, let's all use modern HTML controls!

There's <dialog> for modal dialogs, there's <input type=datetime-local> for date and time pickers, <input type=color> for colors, and for progress bars there's <progress>

Last week another passionate young man has made a romantic statement, scored almost 1000 upvotes on HN and rode into the sunset.

And you know what, I agree. Makes me a believer every time, so I rush into rewriting everything. Happened again this last week.

I mean, honestly. It's 2023 out there. Why is there no damn "select date/time" button in browsers? Why am I dragging a 100-kilobyte JS datetime picker dependency everywhere? I'm done. Enough! Let's rewrite everything to native datepickers. It's fast, lighweight, works natively on smartphones and supports dark theme out of the box.

Aaaah-nd here comes... First, it turns out that <input type=date> does not support placeholder. That'd be the first JS workaround.

Then it turns out you can not automatically show the dropdown on focus. More hacks. And no, "onfocus" won't work, hahah. "Onclick" is unreliable too.

Some guy at Stackoverflow suggests making the dropdown icon transparent (!) and stretching it to the entire container. So, like, wherever you click - you hit that invisible icon. And everyone's like "oh, fuck... well, let's try."

Then it turns out that the datepicker has weird box-sizing and you have to hardcode pixels in CSS, otherwise it sticks out and looks different from all the other inputs.

Oh, and it's also buggy in both Edge and even Chrome 114. Try giving it a date with seconds, then change the seconds in the UI and... it won't let you submit the form for some reason! And the validation error conviniently pops up UNDERNEATH the freaking dropdown. Come on, it's not even funny anymore

...And in the end, mobile Safari will definitely break. Because it always breaks in the end.

Native inputs my ass.

And the icing on the cake: it turns out that Firefox... just doesn't support date-time picker at all. Ahaha. Because fuck you, that's why. "Can-i-use" says it should work, "MDN" says it should work, but - nope... It just falls back to date-picker, there's no time picker at all, nada, not there. And "onchange" doesn't fire properly. And if a user selects the date only, and leaves the time empty (of course he fucking does, because there is no damn time picker!!!!11), then the entire input returns NULL. So what if you've picked the date - the whole damn thing gives you NULL in the POST-data too. Deal with it. And there's a bug at Firefox issue tracker unfixed for three years now, but hey, they'd rather work on fucking "Firefox Send", it's obviosly more important.

I swear a couple more hours and I'm rolling it all back.

Meanwhile clients are sending us support tickets "uhm, hi, your new date widget is kinda... weird..." Yeah, well, it's not fûcking ours 𝕩ÿya E ᵒh fuckingi no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̍ͫͥͨ ̟e ̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ TH̘Ë͖̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝Sͯ ̨̥̫͎̭̔̀ͅ

(send help)