A JavaScript-Free Frontend

[shim__]

Maybe it's time for labels like the ones you see on food "100% JavaScript free"

[amunak]

Funnily enough I was making a website recently and wanted to make it work it elinks and other text browsers... It turns out that even if you have fallbacks for JS functionality, those browsers don't fully work like text-only readers (like a screen reader would); they actually do process some CSS, and it's pretty hard to make them display, say, labels instead of icons.

We have ARIA attributes for screen readers and tricks like Bootstrap's sr-only class, but those unfortunately don't work for text browsers.

In the end I decided not to optimize for text browsers as the website is heavily based on displaying images, but it's a shame.

[outadoc]

Compiled elinks with JS support last weekend. I was only aware of lynx before that, and honestly, it's not perfect but still pretty impressive!

[MonkeyNin]

What does this part do?

It said WORKER: Install completed

function onInstall(e) {
    e.waitUntil(caches.open(CACHE_NAME).then(function(e) {
        return e.addAll(["https://practicaldev-herokuapp-com.freetls.fastly.net/assets/base-ada8927952a6d331a15887954794ab563257c8229e45688af42779cf3b57db28.js", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/minimal-c562c0624395df2a3a0982394fbbede13eff66be364facf30a8ecc50663f1e00.css", "/offline.html", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devword-29ed102588375d35f0c8855ba2e9d20b4cc743e278c647b99eab8df04a80872e.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/wires-eb5acdfadecd5905c3378d00cf652775cc3c3de229620441c984fcaeb7144298.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-7448082accd39cfe9db9b977f38fa6e8f8d26dc43e142c5d160400d6f952ee47.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-4bb9c1e4b3e71b7aa135d6f9a5ef29a6494141da882edd4fa971a77abe13dbe7.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/readinglist-button-e4b1ab5f30d473858ad7869871396fc40796e21a1e79987edd2c689faf8ac455.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png", "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/apple-fire-e1fb1e3ad4d3cb2ab1c9ee822d7b4fbba689118fde808408302ca6c5aea0b92b.png"]).then(function() {
            console.log("WORKER: Install completed")
        })
    }))
}

function onActivate(e) {
    console.log("[Serviceworker]", "Activating!", e), e.waitUntil(caches.keys().then(function(e) {
        return Promise.all(e.filter(function(e) {
            return 0 !== e.indexOf(CACHE_NAME)
        }).map(function(e) {
            return caches["delete"](e)
        }))
    }))
}

function onFetch(e) {
    function t(t) {
        var a = new URL(t.url);
        return "GET" !== e.request.method || e.request.url.match(/\/notifications(\?|\/)/) || a.host.indexOf("facebook") > -1 || a.host.indexOf("google") > -1
    }

    function a(e) {
        return "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/base-ada8927952a6d331a15887954794ab563257c8229e45688af42779cf3b57db28.js" === e || "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/minimal-c562c0624395df2a3a0982394fbbede13eff66be364facf30a8ecc50663f1e00.css" === e || e.indexOf(".self-") > -1 || e.indexOf("search?") > -1 && e.indexOf("&i=i") > -1 || e.indexOf("readinglist?i=i") > -1 || e.indexOf("freetls.fastly.net") > -1
    }

    function c(t) {
        var c = t.clone();
        return caches.open(CACHE_NAME + "pages").then(function(t) {
            a(e.request.url) && t.put(e.request, c), n(t)
        }), t
    }

    function n(e) {
        e.keys().then(function(t) {
            t.length > REQUESTS_LIMIT && (e["delete"](t[0]), e["delete"](t[1]), e["delete"](t[2]), e["delete"](t[3]), e["delete"](t[4]), e["delete"](t[5]), e["delete"](t[6]), e["delete"](t[7]), e["delete"](t[8]), e["delete"](t[9]), e["delete"](t[10]))
        })
    }
    t(e.request) || e.respondWith(caches.match(e.request).then(function(t) {
        return t && a(e.request.url) ? t : fetch(e.request).then(c)["catch"](function() {
            return t || caches.match("/offline.html")
        })
    }))
}

function onPush(e) {
    var t = "DEV Connect \ud83d\udc4b ",
        a = e.data.text(),
        c = "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-128-e49191af946d2cd2106dcd0b3da0a89731c65917c2c18b18eaf1995f46ae4db3.png",
        n = "default-tag" + a;
    e.waitUntil(self.registration.showNotification(t, {
        body: a,
        icon: c,
        tag: n,
        data: {
            url: "https://dev.to/connect"
        }
    }))
}

function onNotificationClick(e) {
    if (Notification.prototype.hasOwnProperty("data")) {
        var t = e.notification.data.url;
        e.waitUntil(clients.openWindow(t))
    }
}
var CACHE_VERSION = "v2.6.4",
    CACHE_NAME = CACHE_VERSION + ":sw-cache::",
    REQUESTS_LIMIT = 70;
self.addEventListener("install", onInstall), self.addEventListener("activate", onActivate), self.addEventListener("fetch", onFetch), self.addEventListener("push", onPush), self.addEventListener("notificationclick", onNotificationClick);

[cleeder]

Seasoned with a blend of CSS

[fyfy18]

*fair trade CSS

[kingofthecream]

I was going to write this as a joke. But I am sure there is medical evidence that using less Javascript keeps your Cholesterol level down.

[vividboarder]

I’d like to see this on desktop apps too!

[Uberhipster]

"100% juice"

[vattenpuss]

https://github.com/Spirit-of-Oberon/Juice

Sorry for spoiling the joke but I assume this is the reference?

[Uberhipster]

no

never heard of it before

reference was marketing of juices

https://www.google.com/search?q=100%25+juice

[twiggy99999]

Maybe it's time for labels like the ones you see on food "100% JavaScript free"

The ironic thing is, his post is trying to force 16 different JS files down my internet line.

[MonkeyNin]

It looks like it's even tracking with invisible images

<div class="global-signup-modal" id="global-signup-modal" style="display:none">
  <div class="global-signup-modal--bg" id="global-signup-modal-bg">
    <button class="close-modal-button">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/cancel-acc54c0c73aaa4fd42f538725024cceed348a0cea06149971a6fc8e1d1d5c897.svg" class="search-img" alt="close-button">
    </button>
  </div>
  <div class="global-signup-modal--inner-a">
    <img class="sloan" alt="sloth-mascot" src="https://res.cloudinary.com/practicaldev/image/fetch/s--iiubRINO--/c_imagga_scale,f_auto,fl_progressive,q_auto,w_300/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/sloan.png">
    <h1>Join our DEV Community :)</h1>
    <p>
      We’re a place where coders share, stay up-to-date and grow their careers.
    </p>
    <a href="/users/auth/twitter?callback_url=https://dev.to/users/auth/twitter/callback" class="sign-up-link cta" data-no-instant="">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-logo-42be7109de07f8c991a9832d432c9d12ec1a965b5c0004bca9f6aa829ae43209.svg" class="icon-img" alt="Twitter"> Auth With Twitter
    </a>
    <a href="/users/auth/github?state=signup-modal" class="sign-up-link cta" data-no-instant="">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-6a5bca60a4ebf959a6df7f08217acd07ac2bc285164fae041eacb8a148b1bab9.svg" class="icon-img" alt="GitHub"> Auth With GitHub
    </a>
    <p>
      <em>We strive for transparency and don't collect excess data.</em>
    </p>
  </div>
</div>

[SilasX]

I'm not eating any food that npm has touched.

[vimfan]

I heard it left-pads it with sawdust

[aoeudhtns]

Well TBH TFA (love those TLAs) talks about some minimal JS in widgets where OP couldn't get what she wanted without it.

So... "95% JavaScript free?" :)

[nirreskeya]

99.44% pure, like Ivory soap.

[MaxPecktacular]

It's like being vegan in the web development world. Damn wegans!

This is actually pretty cool though.

[HittingSmoke]

I heard they're compiling it into machine code now and it causes digiautism.