iSHIFTLESS PROGRESSIVE ENHANCEMENT	null	(FALSE)	0
i	null	(FALSE)	0
i2024-02-06	null	(FALSE)	0
i	null	(FALSE)	0
iProgressive enhancement is a great philosophy for Web application development.	null	(FALSE)	0
iDeliver all the essential basic functionality using the simplest standards	null	(FALSE)	0
iavailable; use advanced technologies to add bonus value and convenience	null	(FALSE)	0
ifeatures for users whose platform supports them. Win.	null	(FALSE)	0
i	null	(FALSE)	0
IScreenshot showing starcharts in Three Rings. With JS disabled, all shifts within the last 3 years are shown, with a link to show historic shifts. With JS enabled, only shifts from the current calendar year are shown, with filters available to dynamically change which year(s) are covered.	/2024/02/prog-enh-3r-stars.png	danq.me	70
i	null	(FALSE)	0
iIn Three Rings, for example, volunteers can see a "starchart" of the	null	(FALSE)	0
ivolunteering shifts they've done recently, at-a-glance, on their profile page	null	(FALSE)	0
i(Assuming that administrators at the organisation where they volunteer enable	null	(FALSE)	0
ithis feature for them, of course: Three Rings' permission model is robust and	null	(FALSE)	0
ihighly-customisable. Okay, that's enough sales pitch.). In the most basic	null	(FALSE)	0
icase, this is usable in its HTML-only form: even with no JavaScript, no CSS,	null	(FALSE)	0
ino images even, it still functions. But if JavaScript is enabled, the	null	(FALSE)	0
ivolunteer can dynamically "filter" the year(s) of volunteering they're	null	(FALSE)	0
iviewing. Basic progressive enhancement.	null	(FALSE)	0
i	null	(FALSE)	0
iIf a feature requires JavaScript, my usual approach is to use JavaScript to	null	(FALSE)	0
iadd the relevant user interface to the page in the first place. Those	null	(FALSE)	0
istarchart filters in Three Rings don't appear at all if JavaScript is	null	(FALSE)	0
idisabled. A downside to this approach is that the JavaScript necessarily	null	(FALSE)	0
imodifies the DOM on page load, which introduces a delay to the page being	null	(FALSE)	0
iinteractive as well as potentially resulting in layout shift.	null	(FALSE)	0
i	null	(FALSE)	0
iThat's not always the best approach. I was reminded of this today by the	null	(FALSE)	0
iwebsite of 7-year-old Shiro (produced with, one assumes, at least a little	null	(FALSE)	0
ihelp from Saneef H. Ansari). Take a look at this progressively-enhanced theme	null	(FALSE)	0
iswitcher:	null	(FALSE)	0
i	null	(FALSE)	0
iNo layout shift, no DOM manipulation. And yet it's still pretty clear what	null	(FALSE)	0
ifeatures are available.	null	(FALSE)	0
i	null	(FALSE)	0
iThe HTML that's delivered over-the-wire provides a disabled <select> element,	null	(FALSE)	0
iwhich gains the CSS directive cursor: not-allowed;, to make it clear to the	null	(FALSE)	0
iused that this dropdown doesn't do anything. The whole thing's wrapped in a	null	(FALSE)	0
icustom element.	null	(FALSE)	0
i	null	(FALSE)	0
iWhen that custom element is defined by the JavaScript, it enhances the	null	(FALSE)	0
idropdown with an event listener that implements the theme changes, then	null	(FALSE)	0
ienables the disabled <select>.	null	(FALSE)	0
i	null	(FALSE)	0
iTheme	null	(FALSE)	0
i	null	(FALSE)	0
i        System	null	(FALSE)	0
i        Dark	null	(FALSE)	0
i        Light	null	(FALSE)	0
i	null	(FALSE)	0
iI'm not convinced by the necessity of the  if there's no HTML-only fallback...	null	(FALSE)	0
iand the  probably should use a for="..." rather than wrapping the , but	null	(FALSE)	0
iotherwise this code is absolutely gorgeous.	null	(FALSE)	0
i	null	(FALSE)	0
iIt's probably no inconvenience to the minority of JS-less users to see a theme	null	(FALSE)	0
iswitcher than, when they go to use it, turns out to be disabled. But it saves	null	(FALSE)	0
itime for virtually everybody not to have to wait for JavaScript to manipulate	null	(FALSE)	0
ithe DOM, or else to risk shifting the layout by revealing a previously-hidden	null	(FALSE)	0
ielement.	null	(FALSE)	0
i	null	(FALSE)	0
iAltogether, this is a really clever approach, and I was pleased today to be	null	(FALSE)	0
ireminded - by a 7-year-old! - of the elegance of this approach. Nice one Shiro	null	(FALSE)	0
i(and Saneef!).	null	(FALSE)	0
i	null	(FALSE)	0
iLINKS	null	(FALSE)	0
i	null	(FALSE)	0
hThree Rings	URL:https://www.threerings.org.uk/	(FALSE)	0
hShiro's art website	URL:https://shiro.ws/	(FALSE)	0
hFediverse post in which Saneef announced the launch of Shiro's website	URL:https://front-end.social/@saneef/111868783885697884	(FALSE)	0
hSaneef H. Ansari	URL:https://saneef.com/	(FALSE)	0
.