Comment by modeless

Comment by modeless 8 hours ago

19 replies

View on Hacker News

HTML becomes pretty delightful for prototyping when you embrace this. You can open up an empy file and start typing tags with zero boilerplate. Drop in a script tag and forget about getElementById(); every id attribute already defines a JavaScript variable name directly, so go to town. Today the specs guarantee consistent behavior so this doesn't introduce compatiblity issues like it did in the bad old days of IE6. You can make surprisingly powerful stuff in a single file application with no fluff.

I just wish browsers weren't so anal about making you load things from http://localhost instead of file:// directly. Someone ought to look into fixing the security issues of file:// URLs so browsers can relax about that.

HarHarVeryFunny 6 hours ago

A workaround for the file:// security deny is to use a JavaScript file for data (initialized array) rather than something more natural like JSON.

Apparently JavaScript got grandfathered in as ok for direct access!

Reply View 0 replies
circuit10 8 hours ago

Wow, I had never heard of that ID -> variable feature

Reply View 7 replies
  • modeless 7 hours ago

    Yeah it was hard to believe when I first learned about it, but it's true. I think I first found out when I forgot to put in a getElementById call and my code still worked.

    Reply View 0 replies
  • chmod775 7 hours ago

    More specifically it becomes a property of window, which is the global object.

    So <div id="hello"> becomes accessible as window["hello"], which means you can just directly write hello.innerText = "Hi!".

    Since this may conflicts with any of the hundreds of other properties on window, it's generally not something that should be used.

    Historically it wasn't too uncommon to see it, but since it doesn't work well with typescript, it's very rare now.

    Reply View 1 reply
    • AlienRobot 6 hours ago

      You can make it work with typescript by declaring it as an HTMLElement without defining it.

      Reply View 0 replies
  • halapro 7 hours ago

    It's been there since the beginning but it has several exceptions, like it's not available in strict mode and modules. Ask your ChatGPT if implied globals are right for you.

    Reply View 0 replies
  • BiteCode_dev 7 hours ago

    Also window.document.forms gets you direct access to all forms, "name" automatically attach an attribute to the parents and "this" rebind to the current element on inline event handler.

    The DOM API may have been very messy at creation, but it is also very handy and powerful, especially for binding to a live programming visual environment with instant remote update capabilities.

    Reply View 2 replies
    • halapro 7 hours ago

      Speaking of forms: form.elements.username is my preferred way of accessing form fields. You can also use a field .form prop to access its connected form. This is fundamental when the field exists outside <form> ;)

      Reply View 1 reply
      • eastbound 6 hours ago

        You mean there is bidirectional binding between form.elements.username and the UI value? Why did we need React! HTML should have IFs and FOR loops…

        Reply View 0 replies
marcosdumay 6 hours ago

> Someone ought to look into fixing the security issues of file:// URLs

If you mean full sandboxing of applications with a usable capability system, then yeah, someone ought to do that. But I wouldn't hold my breath, there's a reason why nobody did yet.

Reply View 0 replies
carshodev 7 hours ago

Yes i love quickly creating tools in a single file, if the tool gets really complex I'll switch to a sveltekit Static site. I have a default css file I use for all of them to make it even quicker and not look so much like AI slop.

I think every dev should have a tools.TheirDomain.zzz where they put different tools they create. You can make so many static tools and I feel like everyone creates these from time to time when they are prototyping things. There's so many free options for static hosting and you can write bash deploy scripts so quickly with AI, so its literally just ./deploy.sh to deploy. (I also recommend writing some reusable logic for saving to local storage/indexedDB so its even nicer.)

Mine for example is https://tools.carsho.dev (100% offline/static tools, no monetization)

Reply View 0 replies
SoftTalker 7 hours ago

What are the security issues of file:// URLs?

Reply View 5 replies
  • williamcotton 7 hours ago

      fetch("file:///C:/Users/You/Documents/secrets.txt")
    Reply View 4 replies
    • SoftTalker 5 hours ago

      As long as same-origin is enforced this is probably OK? I'm going to steal my own secrets?

      Reply View 0 replies
    • vedmakk 7 hours ago

      "Chrome wants to access 'secrets.txt'. Allow | Deny"

      Reply View 2 replies
      • AlienRobot 6 hours ago

        Imagine a very plausible situation. You have 1 HTML file at the top that wants to access hundreds of files in a subfolder. There is no way you can show Allow | Deny for every one of them. On the other hand, it's also possible for someone to take that file and put it in a folder like Documents or Downloads, so blanket allowing it access to siblings would allow access to all those files.

        This could easily be solved by some simple contract like "webgame.html can only access files in a webpage/ subdirectory," but the powers that be deemed such thing not worth the trouble.

        Reply View 0 replies