▲ 0 r/webdev

Anyone got input type="reset" horror stories or has it been unfairly demonised?

I've found keeping the reset button on a local form (yes I know action="javascript:void()" on input type="submit" is frowned upon) hidden and removed from tabindex until after the first action helps prevent it from being accidentally clicked/activated.

Has anyone found creative uses for "reset" inputs that they can share, or do you just avoid them entirely?

The UX Perspective The Developers
Accidental Clicks: Users make mistakes and lose data. Over-engineering: JavaScript developers waste time writing custom code for something the browser does natively.
Confusing Behavior: It doesn't "empty" fields; it reverts them to defaults, which confuses users on "Edit Profile" pages. Great for Filters: It is the perfect tool for massive control panels and search filter sidebars.
Redundant: Most users just change the fields they need or abandon the page entirely. Predictable: It behaves exactly according to the HTML spec every single time.
reddit.com
u/OMGCluck — 3 days ago

My desktop web folder on Linux Mint, what's your collection look like?

u/OMGCluck — 6 days ago
▲ 15 r/qrcode+1 crossposts

GB300 gaming handheld has an r/c64 easter egg written in BASIC, source in comments

u/OMGCluck — 9 days ago
▲ 17 r/c64

Experimental PoC: Emulating a .d64 inside an .svg file to play games on image sharing sites

I've only just got this running so there are some hurdles to cross, especially on mobile browsers. Here's Scoundretscii playable with keyboard in desktop Chrome and Firefox, and with a gamepad in Firefox:

https://imglink.cc/cdn/huKEDEPXZ3.svg

Chrome has a strict security policy for the Gamepad API. It completely disables navigator.getGamepads() inside frames or documents that it considers "cross-origin" or sandboxed.

iOS Safari handles <foreignObject> inside standalone SVGs poorly. It forces the HTML document inside it to render at its natural resolution (which breaks responsively) showing only the left half of the screen with no touch controls, and blocks touch event bubbles from passing down through the SVG root into the HTML canvas layers.

Android Firefox renders the C64 correctly both Mobile mode and Desktop mode. Unfortunately the emulator won't show touch controls in Desktop mode, and in Mobile mode the touch controls are partially hidden behind the screen. Also in Mobile mode the .d64 image does not get attached to load the game anyway.

I've no idea if some or any of these issues are fixable yet. Any help is appreciated since this means not needing an account or even your own website to share C64 stuff on the web, imglink.cc allows uploading .svg files anonymously.

reddit.com
u/OMGCluck — 11 days ago

.avif officially reached Baseline "Widely Available" status (in all browsers for 30 months) yet imgur has yet to allow them, what alternatives do?

Right now is probably a good time to check which image hosting sites allow .avif uploads without converting them to another format.

Anyone got suggestions of ones that do?

AVIF is an open standard not dissimilar to WEBP in that it's the image version of a video compression codec. It's capable of transparency and animations. It seems to have less perceivable artifacts at lower qualities on photo/gradient images.

reddit.com
u/OMGCluck — 18 days ago

Niche page for C64 enthusiasts which embeds their .prg files in an .svg to share via image hosts

Seeing a C64 developer struggle to reliably share a newly created C64 program file (.prg) I mentioned an embedding trick allowing the file to be shared via image hosting sites.

I then decided to automate the embedding part so you just input a screenshot (usually from the VICE emulator) along with the .prg file and it outputs an .svg you save locally:

###https://prg2svg.bonto.run/ Entirely clientside, no external resources. In fact you can just save that index.html page and run it as a local tool in your web browser🤟

Then you just upload the saved .svg file to an image host, done!

reddit.com
u/OMGCluck — 19 days ago
▲ 1 r/webdev

A 1920s themed jigsaw puzzle series which instead of tracking pieces for snap-in it does a percentage comparison of the playarea, runs offline.

Source code repository, all code is dedicated to the public domain so there is absolutely no commercial promotion or solicitation. 100% client-side code so there is no "stack". This is a text post because old.reddit doesn't allow putting comments in link posts.

###The 1920s puzzle

The visual comparison method has some quirks:

  • It snaps a piece to the correct spot even if it's nowhere near that spot but when placed onto another part of the image elsewhere happens to match that other part of the image closely enough, thanks to the image blurring needed for placement margins of error.

  • Each image has a different starting and ending percentage so I have to actually do the puzzle to find out what those are, logging each comparison to the console, before I can set the values for the progress bar math. I only have to set the start and end values thanks to the fact that I chose to use a chiral aperiodic monotile shape for every piece. Being exactly the same shape means they all take up an equal amount of area so the percentage progress is linear.

  • There's no way to save progress because the whole thing is stateless. Reloading the page resets the puzzle. The advantage is that this puzzle works in my grandma's tractor on a cheap tablet with no SIM card in her paddocks out of wi-fi range. The .svg version can be loaded locally into the browser without a server, and the Wayback Machine copy of the .svgz version is totally playable.

  • This method relies on you placing one piece into the puzzle at a time and removing it if you place it wrongly and can't get it to snap into place, so puzzlers who like to randomly place multiple pieces inside the playing area to work on "clusters" completely break the snap-in logic. I added a two-second glimpse of the complete puzzle when players tap/hover over the timer to make this one-at-a-time playing style a bit easier.

  • When I added light/dark mode toggling by tapping/clicking on "moves" the visual comparison broke because the background colour of the incomplete part of the playarea changed the start/end percentage math. For the comparison to be consistent I had to ensure the offscreen snapshot for comparison always had the same colour background.

The latest version of Safari "updated" SVG handling code which breaks this puzzle when identical puzzles worked on previous versions of mobile Safari, so even with some of the above challenges solved, this probably isn't an ideal method to adopt yourself.

u/OMGCluck — 26 days ago

Who else had a Kmart DUNK'N'SUNK, if so was "two games in one" a big selling point?

u/OMGCluck — 1 month ago