A little progress

I’ve got a fairly simple posting interface for my notes. A small textarea, an optional file upload, some checkboxes for syndicating to Twitter and Flickr, and a submit button.

Notes posting interface

It works fine although sometimes the experience of uploading a file isn’t great, especially if I’m on a slow connection out and about. I’ve been meaning to add some kind of Ajax-y progress type thingy for the file upload, but never quite got around to it. To be honest, I thought it would be a pain.

But then, in his excellent State Of The Gap hit parade of web technologies, Remy included a simple file upload demo. Turns out that all the goodies that have been added to XMLHttpRequest have made this kind of thing pretty easy (and I’m guessing it’ll be easier still once we have fetch).

I’ve made a little script that adds a progress bar to any forms that are POSTing data.

Feel free to use it, adapt it, and improve it. It isn’t using any ES6iness so there are some obvious candidates for improvement there.

It’s working a treat on my little posting interface. Now I can stare at a slowly-growing progress bar when I’m out and about on a slow connection.

Responses

3 Likes

# Liked by Jan Skovgaard on Sunday, May 29th, 2016 at 8:53pm

# Liked by Oliver Joseph Ash on Sunday, May 29th, 2016 at 9:55pm

# Liked by MrMartineau on Sunday, May 29th, 2016 at 10:26pm

Related posts

Pickin’ dates

HTML web components for augmenting date inputs.

Progressive disclosure defaults

If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.

Schooltijd

Going back to school in Amsterdam.

event.target.closest

DOM scripting and event handling.

Multi-page web apps

A question via email…

Related links

New Web Development. Or, why Copilots and chatbots are particularly bad for modern web dev – Baldur Bjarnason

The paradigm shift that web development is entering hinges on the fact that while React was a key enabler of the Single-Page-App and Component era of the web, in practice it normally tends to result in extremely poor products. Built-in browser APIs are now much more capable than they were when React was first invented.

Tagged with

“Just” One Line - Jim Nielsen’s Blog

There’s a big difference between the interface to a thing being one line of code, and the cost of a thing being one line of code.

A more acute rendering of this sales pitch is probaly: “It’s just one line of code to add many more lines of code.”

And as Chris puts it:

Every dependency is a potential vulnerability

Tagged with

HTMX Is So Cool I Rolled My Own! – David Bushell – Freelance Web Design (UK)

Call it HTMLX or call it Hijax, what matters isn’t the code so much as the idea:

Front-end JavaScript fatigue is real. I’m guilty myself of over-engineering JS UI despite preferring good old server templates. I don’t even think HTMX is that good but the philosophy behind it embarrasses the modern JavaScript developer. For that I appreciate it very much.

Tagged with

How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer

This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!

Tagged with

These are my jams · Paul Robert Lloyd

I like how Paul has recreated his own version of This Is My Jam and I really like how he’s done it with an HTML web component.

Tagged with

Previously on this day

9 years ago I wrote 100 words 068

Day sixty eight.

21 years ago I wrote Gaming for good, not evil

According to recently published research that has geeks the world over rubbing their hands with glee, playing video games may actually be quite beneficial: