WebDev intro course: what small changes towards progressive enhancement?

Open in a window
Article lobste.rs

WebDev intro course: what small changes towards progressive enhancement?

For $REASONS, I ended up in control (probably temporarily) of a rather introductory «Web Development» course with a bit of HTML/CSS/JS/Docker that I plan (and promised) to keep in a mostly recognisable shape.

I do want to add more reminders that progressive enhancement is good, though; and I ask for advice on good points/references.

I am going to keep NodeJS backend assumption, so any JavaScript-the-language feature can be demonstrated on backend. So just learning to use JS in general is not as much of an excuse for silly things in-browser.

My plan includes telling more than before about (and probably giving links to):

And I guess general stressing that document, form, and application are three different things.

I would be grateful for suggestions of other/same-but-well-made points towards progressive enhancement, not spending extra effort to break accessibility, etc. Ideally I hope to cover what has normally been covered previously, but with a viewpoint shift towards healthy approaches. Active improvements to accessibility are probably beyond what would fit and beyond what I can explain well.

Discussion 9 comments · 10 points · k749gtnc9l3w · 27d
Open on Lobsters
Loading the discussion…

Domain filters

Stories from these domains are hidden from every list. Subdomains match too: blocking substack.com also hides danluu.substack.com. The list is kept in this browser only.

Help

Keyboard

j / k
Move down and up the story list. The arrow keys scroll whatever has focus.
Enter
Open the marked story in a window.
]
Open the next story in the list in place of the one in front. Back returns to it.
p
Pin or unpin the marked story, which keeps it in Pinned.
n / N
Move to the next or previous top-level comment in the window in front.
c
Collapse or expand that comment.
f
Hide or show the story list.
Esc
Close a menu or this help.
Access key m
Go to the menu bar. Most browsers take it with Alt on Windows and Linux, and Safari with Control and Option.
?
Show this help.

Windows

Each story opens in a window holding its article above its discussion; drag the bar between them to share the room differently. A window can be moved by its title bar, resized from any edge, snapped to a half or a corner by dragging it there, maximised, or minimised to the bar at the foot of the page. Open several stories to compare them, and switch between them from that bar. A window's Next story link reads on down the list in the same window.

A link in a comment or an article to another Hacker News or Lobsters thread opens that thread in a window too. A link to a single HN comment opens the comment above its replies.

While a story's window is in front, the Story and Discussion menus in the menu bar hold its commands: pinning, Next story, sorting, collapsing every thread, jumping to the first new comment. Each window also remembers where you were in its article and discussion, so a reload, or Back to a story that Next took you past, finds your place again. Closing a window forgets it.

The whole arrangement lives in the address, so a bookmark or a shared link brings it back, and Back undoes the last change. Moving between Hacker News, Lobsters, their lists, Pinned and Find changes only the list, and leaves the windows open.

The list

The pin at the start of a row keeps the story in Pinned, and the cross at its end hides it. Scroll past the end of the list to load more. Domain filters, in the View menu, hide every story from a site.

Find

Find takes any link and lists every time it was submitted to Hacker News and Lobsters, so you can read each discussion of it.

About

YAVCHN never sees your Hacker News or Lobsters login. The discussion is fetched from each site's public API; to vote or reply, follow the link above the discussion, or the arrow beside a comment, to the source's own site. Pins, hidden stories, filters and layout are kept in this browser only.

Open source: github.com/paulmooreparks/yavchn. Built with PUDL.