A Minimal Page for Javascript#

I suck in frontend development and it has been like that for a very long time. It’s not I that I am totally clueless about HTML and CSS, but I can’t create a web page based on a design, for example.

I do want to get better and I’ve tried to read a lot about it and just pick up stories in projects that are related to this. Sometimes I have all these fun ideas that involve frontends, but haven’t been able to really work on it.

I think one of the reasons I am not at an acceptable level is because I haven’t really been playing around with it myself. I should be trying things out more.

Now that my personal page and blog section are on a acceptable level, I decided to add another section where I can just play around, called Playground. Now when I read something, I’m forcing myself to actually try it out and change things to these existing pages.

I’m also trying out minimal pages, just so I can quickly play around with some ideas. Just an HTML file without tools like node that build things.

In the case of Javascript, I came up with the following:

<!DOCTYPE html>
<script type="module">
    console.log = (text) => document.body.append(
        document.createTextNode(text),
        document.createElement("br"));

    console.log("Hello World");
</script>

Things like this has become my public static void. A bit of overhead, just to quickly play around with things without other tools that might need some debugging, configuration of figuring out what it actually is. Web development was actually meant to be as simple as this, so people with minimal programming skills could still create simple web pages.

It starts with <script type="module"> so you can also import other Javascript modules. It overrides the console.log function which most tutorials will use to let you print something to the screen. It uses an arrow function (text) => {} to keep it short. Because I want to just see the result in a web page (without opening the Developer Tools), I append the given text with a break element to the document.body.

A lot of other parts of a normal HTML page are missing in that piece of code, but because of the DOCTYPE notation at the start, current browsers will try to show users a web page anyway.

Bash Jobs   Deploy to K3D without container registry