I asked the designer if he had ideas on the hover or active states of the buttons. He came with a pretty flashy codepen: “Maybe something like this?”

I tried making the thing myself. It was pretty complicated since it had a background/foreground etc so i tried a couple of things with :before :after but to no avail. I gave up and decided to give it another try the next morning.

Next morning i started to copy paste the existing code from the codepen.
Quickly i discovered what a pile of shit was send to me. This button had twice as much lines then needed and above all; it wasn’t scalable at all.

I reworked the code removed everything i didn’t need and now have decent animating button. Which is flashing the eyes out of the visitors. But hey, it’s flashy!!

IoT project, end user needs to turn light on device from phone.

Ultimately though, all thats happening is a 0 somewhere in the underlying JSON is getting changed to a 1.

So, I put a checkbox.

But, that's not visually pleasing enough, so we change it to a fancy Apple-like toggle. Fine, there's 100 different toggles out there, I find one that works by overriding the checkbox and implement it.

But wait, sometimes the device won't respond immediately, and the user can't wait 5 seconds without some indicator, so now we need a progress spinner.

And the toggle can't toggle right away... it should be greyed out and disabled so the user can't send a second signal.

So now we literally have a 4 state toggle button. Off, waiting for on, On, waiting for off.

And legit, between front and back end on this task I think I'm at about 16 hours.

For a fucking toggle.

Just so the user can change a 0 to a 1 without fucking it up.

@HiFiWiFiSciFi I built one of those. Was not too hard, just made sure the users click did not toggle it, but once the state was updated the toggle would toggle.
Okay not a 5 second delay but worked fine for a machine (500ms delay) this way the user could never fuck it up and the ui always reflected what's underneath .

But yeah, front end development is severely underrated.

I hate checkboxes now 😄