1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Design implementations with little to no JavaScript

Discussion in 'HTML & Website Design' started by deathshadow, Sep 16, 2020.

  1. #1
    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
    SEMrush
    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.
     
    deathshadow, Sep 16, 2020 IP
    JEET, sarahk and malky66 like this.
    SEMrush
  2. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    88
    Likes Received:
    27
    Best Answers:
    4
    Trophy Points:
    65
    #2
    =
    At last.... we can gain from you.
    Thank you.
    Have you tried using a Link Shortening service?
     
    Efetobor Agbontaen, Sep 18, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #3
    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.
     
    deathshadow, Sep 18, 2020 IP
  4. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    88
    Likes Received:
    27
    Best Answers:
    4
    Trophy Points:
    65
    #4
    hahahahaha oh that's true.
    I totally forgot...
     
    Efetobor Agbontaen, Sep 19, 2020 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Too bad it counts down remaking articles you can read for free for the month. The modal one is what I'm looking for.
     
    ketting00, Oct 1, 2020 IP
  6. malky66

    malky66 Acclaimed Member

    Messages:
    3,994
    Likes Received:
    2,239
    Best Answers:
    88
    Trophy Points:
    515
    #6
    malky66, Oct 2, 2020 IP
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Thank you,

    You still understand with that typo? That's marvelous!
     
    ketting00, Oct 2, 2020 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Oct 2, 2020 IP
    ketting00 likes this.
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,667
    Likes Received:
    1,459
    Best Answers:
    25
    Trophy Points:
    425
    #9
    Will it work on mobile devices?
     
    qwikad.com, Oct 2, 2020 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #10
    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.
     
    deathshadow, Oct 2, 2020 IP
    blueparukia, ketting00 and qwikad.com like this.
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #11
    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...

    [​IMG]

    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.
     
    Last edited: Oct 3, 2020
    deathshadow, Oct 3, 2020 IP
  12. weFF

    weFF Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #12
    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.
     
    weFF, Oct 4, 2020 IP
  13. wrighter

    wrighter Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    Is it possible to build local ecommerce without JS? I head that google likes CSS+HTML more that JS
     
    wrighter, Oct 6, 2020 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #14
    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, Oct 6, 2020 IP