The Tiny Hoity Toity Codebin: Introducing JavaScript, CSS, and HTML The Right Way

I woke up this morning, having imagined the idea of a Brainy Bunch.

Nine functions in a 3x3 grid, each showing something interesting about JavaScript functions.

But slowly the dream faded, into something more interactive.

It is not a mobile web application, it requires a desktop, where you have a big screen and can even hit F12 to see your console.

The Hoity Toity Codebin, is a piece of example code, for the hoity-toity Web Component.

This little piece of code contains 29,636 lines of code, originally it had 50,000, and weighs in at 1.3 MB it is huge.

It is a Web Component based on the Code Mirror, web page based, code editor.

A code editor that runs in a web page, just about the biggest idea in programming.

It is just like a multi-line text box that you see in web forms, but it colors code, and numbers lines, and even provides code hints.

I’ve been wanting to make this thing for over a decade, but there was never time.

And I don’t see it as a happy thing, I don’t like completing things.

I liked, having the editor on my todo.

But it is a good thing, and it is good for testing code and learning JavaScript, CSS, and HTML.

The upper part of the page, is the preview part, and below you have the Web Page Trinity.

JavaScript editor that controls the text, CSS editor that sets the visuals, colors.

And HTML which is the skeleton of the web page I actually put the JavaScript and CSS in there to show the preview.

I remember early on when starting programming, I would just change words to see what happens.

And here you can change text, colors, study how a function is made, and how it is called or executed.

Programming is not exactly consistent, it is designed on layers of good ideas.

Good ideas are the only ones that last, consistency would twist and unbalance code, make it bloated or brittle.

Even so there aren’t too many deviations from the norm, if you give yourself a chance, it all clicks and becomes interesting.

The word bin in codebin, means trash can, where snippets of code go, you use it to test code, to learn something, but it is not saved.

Classical bins are public, and that means someone can send you an infinite loop.

A neat little code bin that resets to factory settings, when you hit F5 to refresh the web page, is good stuff.

Is there more to programming than this, we don’t know anymore, probably not.

Because of the power of competent AI, your biggest code asset is a set of requirements documents.

Each describing something as well rounded as the hoity-toity element, there is nothing more to add, no need to remove anything.

And AI will help you figure out the right technologies, and the right implementation steps.

Remember to ask for simple and lightweight code, you don’t want error management, you want to crash early.

You don’t want 100 lines of defensive code, where you can have just one or two.

I often ask AI for corporate level code, and it is a 100 lines of fear, of fat, of liability.

You can always ask AI to make your one lines defensive, but you can never ask AI to reduce 150 lines of bloated code to one.

It is like un-mixing coffee and sugar, it is not possible, once you get mixing.

Ignore everyone speaking negatively about AI, learn from the simple and lightweight code.

It makes you a perfect programmer, the AI grants you old wizard wisdom on day one.

Lastly, if you are not sure what to program, become a toolmaker, and code tools that help with programming.

That solve the challenges you face, as everyone else starting out with JavaScript will have them too.

Oh, and one more thing, stick to dark mode, and you will travel far, don’t worry about light mode, bright user interfaces were a mistake.