← Back to context

Comment by Gualdrapo

1 day ago

> Along with introducing multi-language support, the JavaScript code also inserts an SVG book icon.

Wait - using JS for dynamic content is understandable, but why using it for inserting a static SVG?

12 comments

Gualdrapo

Reply
worg  1 day ago

Reducing egress bandwidth, if you have automated clients that don't support JS you save precious bytes from being served by not embedding the SVG, which at example.com scale may be worth it

  • autoexec  1 day ago

    Wouldn't removing the pointless SVG image entirely save the most precious bytes from being served no matter if JS (or SVG) is supported or not?

    • schiffern  20 hours ago 

        >pointless SVG image

      Why aren't we all eating inexpensive gruel instead of "pointless" food? Same reason.

      It's good to have a little color/flavor/spice in life.

      2 replies →

hiccuphippo  3 hours ago

I wonder if it's injecting both through javascript to minimize breaking people's tests. Trying to reduce dealing with non-ascii characters and svg tags.

domh  12 hours ago

Why does this site need JS at all? It appears to inject all of the other languages via client side JS. Why can't they all just be served from the server?

  • TheCoelacanth  23 minutes ago

    To minimize their hosting costs. They get a large amount of automated traffic that won't actually render the content, so moving as much content as possible out of the initial HTML document is more efficient.

afavour  1 day ago

Simple answer is the article is wrong, I tried it with disabled JS and still see the SVG.

The whole article reads like something put together with AI, so maybe it’s not too surprising.

  • ajcp  1 day ago

    You may want to check your settings again or clear you cache as there is definitely a `s.js`[0] file that inserts the `<svg>` element into the HTML DOM[1], which you can see does not contain the element itself.

    0

    ```

    var B = document.body, P, p; B.children[0].insertAdjacentHTML("afterend", "<p lang=ar dir=rtl>هذا النطاق مُخصص للاستخدام في أمثلة التوثيق دون الحاجة إلى إذن. هذه ليست خدمة، يُرجى تجنب الاعتماد عليها لأغراض الاختبار والمراقبة.</p><p lang=zh>该域名仅用于文档示例，无需获得许可。这并非一项服务，请勿将其用于测试和监控目的。</p><p lang=fr>L’usage de ce domaine est réservé à des exemples de documentation, sans autorisation préalable. Il ne s’agit pas d’un service ; son utilisation à des fins de test ou de surveillance est à éviter.</p><p lang=ru>Данный домен предназначен для использования в примерах документации без необходимости получения предварительного разрешения. Это не сервис; не рекомендуется его использование для тестирования и мониторинга.</p><p lang=es>Este dominio está destinado al uso en ejemplos de documentación sin necesidad de permiso. Esto no es un servicio; evitar utilizarlo para realizar pruebas o monitoreos.</p><a href=https://iana.org/help/example-domains>Learn more</a>"); P = [...B.querySelectorAll("p")]; P[0].lang = "en"; navigator.languages.some(l => p = P.find(p => p.lang == l.split("-")[0])); p = p || P[0]; B.prepend(p); B.insertAdjacentHTML("afterbegin", '<style>svg{display:block;margin:-2.75em auto 0;opacity:.55}p+p{font-size:.875em;opacity:.6}</style><svg viewBox=0,0,20,20 width=44 height=44 fill=currentColor aria-hidden=true><path fill=none stroke=currentColor stroke-width=1.3 stroke-linejoin=round d="M6 4H3v12q4 0 7 1.5-1-3.5-4-4.5V2q3.5 1 4 3v12.5q3-1.5 7-1.5V4q-4.5 0-7 1"/><g transform=rotate(-6,13.6,8.3)><path id=q d="M11.5 6.6h1.8v1.8l-1 1.6-.6-.3.8-1.3h-1z"/><use href=#q x=2.4 /></g></svg>')

    ```

    1

    ```

    <!doctype html> <html lang=en> <head> <meta charset=utf-8> <link rel=icon href=data:,> <meta name=viewport content="width=device-width,initial-scale=1"> <title>Example Domain</title> <style> html { color-scheme: light dark; background: light-dark(#eee,#222) }

                body {
                font: 16px/1.6 system-ui,sans-serif;
                max-width: 26em;
                margin: auto;
                padding: 25vh 2em 2em;
                text-align: center
            }
        </style>
    </head>
    <body>
        <p>This domain is for use in documentation examples without needing permission. This is not a service; avoid relying on it for testing and monitoring purposes.</p>
        <script src=/s.js></script>
    </body>

    </html>

    ```

    • notpushkin  17 hours ago

      ``` doesn’t work on HN, prepend two spaces to each line to get a code block.

      Regardless, it’s a lot of code, so maybe better move it out to a pastebin/gist?