Design implementations with little to no JavaScript

As some of you may know I've been writing articles on Medium on a variety of topics. The past week or two I've had a running theme of "do ___ without JavaScript", and today I put up one that requires minimal scripting.

Just thought you folks might find these techniques handy.

Tabbed Interfaces Without JavaScript:
https://levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8

Modal Dialog Driven Websites Without JavaScript
https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780

Day/Night Colour Switching Using Minimal JavaScript

https://medium.com/@deathshadow/day-night-colour-switching-using-css3-variables-and-minimal-vanilla-javascript-a54fa36c550f

Code (markup):

(had to code tag that last one as it's not been curated yet, and this forum software chokes on @ signs in URI's)

It's amazing how powerful CSS has become, and how much smoother/cleaner you can do things now than when JavaScript had to be used to even TRY to accomplish half this stuff.

These articles are all actually building towards a greater project I hope to have coded the full Beta by January, with a March release. Sadly as a side-project finding time for it is tricky, but I think it will be worth it. Documenting it - as always -- is going to be the "slow" part.

 

=

At last.... we can gain from you.
Thank you.

Have you tried using a Link Shortening service?

 

Yup, DigitalPoint's copy of Xenforo screws that over too, because they reject redirects as well, and that's all link shorteners are.

Even for established members, posting links here has inhaled upon the proverbial equine of short stature for near on a decade now.

 

hahahahaha oh that's true.
I totally forgot...

 

Too bad it counts down remaking articles you can read for free for the month. The modal one is what I'm looking for.

 

It's here as well: https://cutcodedown.com/for_others/medium_articles/modalSite/modalSite.html

 

Thank you,

You still understand with that typo? That's marvelous!

 

I shouldn't say this since members viewing my articles has paid out more in three months -- on 1/100th the traffic -- than the past decade on my adsense account but...

Delete your cookies and localstorage, boom you can view again.

That said, the "meat" of the article, the actual code, is here:
https://cutcodedown.com/for_others/medium_articles/modalSite/

The follow up that adds a day/night toggle is here:
https://cutcodedown.com/for_others/medium_articles/nightAndDay/

In general the code for any of my medium articles that "break new ground" will be here:
https://cutcodedown.com/for_others/medium_articles/

In keeping with the 20 year plus tradition of that folder on my hosting. Also note I'm making sure to put .rar in there so people can just download the whole shebang in one hit.

 

Will it work on mobile devices?

 

All tests I've run say yes. Shrink your browser window to phone size, and you'll get an idea how it does. You can also try your browser's phone emulation in the developer tools.

For example the images in this directory:

https://cutcodedown.com/for_others/medium_articles/modalSite/mobileExampleImages/

Reflect all the varying states of the modal demo in action on what Chrome things a Galaxy S5 would show, which is comparable to what both my BluBoo S8 and Ulefone Armor 6 deliver.

Because of how the HTML and its hooks are arranged, it's also screen reader / braille reader friendly. It all works via hash links, so when CSS is irrelevant/inapplicable it just behaves like a page that's cross-linking itself.

--edit-- excuse the extreme resolution of those sample images. Workbench is 4k now.

 

Oh, side note, for those who wonder what it does in IE and what the X-UA setting it to IE9 with all those CC's are for...



Because at this point, I'm done trying to send style or scripting to ANY version of Internet Explorer unless the client is willing to pay extra. I suggest everyone else do the same. Between outdated/insecure/to oft outright missing modern TLS/SSL support, to the trident engine itself just being way too far past its "best used by" date... Enough. It's 2020 ... going on 1934... ENOUGH!

If the vanilla semantic markup and graceful degradation isn't "good enough" for them, they can join us in using browsers made in THIS decade.

It's also nice to be able to see the page this way in IE, as it's basically what screen readers, braille readers, and search engines are stuck working with. No CSS, no Scripting, just the content and the semantics. @JEET, this should address the problems we were talking about with your "dark mode" and IE when using JAWS. I'm telling all versions of IE to ignore the style.

 

Who uses IE in 2020? As a web dev i hope that they will just remove IE so i dont have to bother adapting pages to browser almost nobody uses.

 

Is it possible to build local ecommerce without JS? I head that google likes CSS+HTML more that JS

 

Of course, just use normal forms and pageloads for everything. That's what SHOULD be done first anyways if you give a flying purple fish about usability and accessibility.

And it's where a LOT of ecommerce software screws the pooch as they don't do that and REQUIRE JavaScript to work.

Now I'm not saying you can't ENHANCE the already working page with scripting for a smoother user experience, but too many people look at JS as their be-all end-all answer to every blasted problem. That's where -- at least from an accessibility and efficiency standpoint -- things go bits-up face-down.

Just look at how most people crap together pages using angular, vue, or react for proof enough of that.

 

@deathshadow Nice to see you here.. I revisited this forum after several years and good to see you still in top form! I've learned lot of you and admire your approaches (minimum code, nothing fancy, frameworks suck, HTML5 is not a giant leap after HTML4 etc)
However, I cannot fathom the today's web without all the fancy stuff like SPA for example; I see you still prefer classic sites. Again, this is not the issue here, more like a side-note. Back to what I wanted to say: As I admire your "minimum code and don't use technologies that you don't need to get the job done" philosophy, I was looking forward to check out the demo from your article:
https://cutcodedown.com/for_others/medium_articles/modalSite/modalSite.html
But I don't see any modals, Chrome nor FF. What am I missing?

 

Sorry I just realized there's a Sub menu link in the header.. my bad

 

"Submenu", "Search", and "Log in" should all open modal dialogs. Just as if you make the screen small enough for a mobile hamburger, you get modals there too.

My next slew of personal site updates is likely implementing all this. When / if I have the time to even do so since I've got paying jobs ahead of that in the queue.