The Inventing Of A Product; Or, Growing Up In The Age of Artificial Intelligence

We start, at the center of your powers, Artificial Intelligence, Relevant Authentic Education…

And above all by revealing a problem everybody has, and no one has time to repair.

Artificial Intelligence is good at programming, JavaScript is the friendliest and most popular language.

Learning JavaScript worth your time, not a lesson here will ever be a waste of time.

And the problem that everybody has, is something you can sink into for decades even.

Is the User Interface, we will make you dominate the area, and learn invaluable lessons, while AI does the programming.

By creating a User Interface Library, defined by fewest possible lines of code.

Bootstrap currently, the top UI Framework, can make a hundred claim about their usefulness.

Including powerful things like accessibility and screen reader support, for people with visual impairments.

You will only make a single claim, my components with wisdom in mind have the fewest possible lines of code.

One of your challenges will be writing extensive documentation, for massive components that just run on 15 lines of code.

A library like this, is only as powerful as it is community.

Therefore, you will employ artificial intelligence, for maintenance – and unbelievably, more importantly – customization.

This project will use dual licensing, open source license that demands customers make their code available.

And a proprietary commercial license, available for purchase, for projects that do not wish to disclose modifications.

You will also accept donations, and research what others are doing to monetize.

For example you can sell themes, mountains of snippets and graphic styles.

Under the watchful eye of the same AI, that performs the maintenance on the components.

There is an important rule that you must never break: “If it can’t be done simply, don’t do it.”

The IBM carbon design system for example features an accordion, that consists of two web components:

cds-accordion and cds-accordion-item, I consider this a wrong that makes perfect sense.

You should study this example, as you progress in your education.

The simplest accordion solution is the use of details and summary, a set of standard HTML elements that already work in the browser.

You can use details with name attribute, to create exclusive accordions, that unfold just one pane.

Where you go from here, will set you apart from other programmers, who are looking to solve the same problem.

Now, let us talk about the artificial intelligence.

Ever since the discovery of artificial intelligence, most inauthentic professionals have been embarrassing themselves.

I just had to recover from a movement of cringe, as a powerful CEO, paraded their useless language.

Explained that there must be something better, where you don’t have to write your app three times.

Which is known JavaScript, but he blocked that out, and then he pivoted into insanity.

Hallucinating himself into a language based on English, that controls objects, I am sure that will make their stock go up.

Of course, in his madness, he did not take wisdom into consideration, and the very fact that all he described only limits AI.

His dreams are small, like the future of his company.

You are already beginning with an unrestrained AI, and beyond unnecessary accordions.

With a sharp edge, because you know to add to your AI prompts, “simple and lightweight”.

“With as fewer lines of code as it is possible, without making the code obfuscated.”

“Ensuring that the code is modern ES2025 JavaScript and beyond, and beautiful, and outstanding.”

Here you are, on top of the world.

Watching babbling CEOs hallucinate, that they re still relevant in the age of AI.

Let us take a closer look at the creating of an Offcanvas Panel, basically a menu that slides in from the side of the screen.

I used accordion, as an example of excess.

The Offcanvas Panel, is a piece of screen real estate that comes out of nowhere.

You only call it when you need it, it can be a hamburger icon, or three vertical dots.

Or a cute little arrow tab, that sits at the side of your screen.

Think of the standard Offcanvas Panel as not being part, of the standard workflow on an application.

But rather serving as an escape hatch to higher functions, a new game menu, a project management menu.

Now, when you put a Offcanvas Panel on your right hand side, it becomes the opposite.

It can be seen as a properties panel, a thing that drills even deeper into application.

An Offcanvas Panel that opens on top of the screen, can serve as a console, or a heads up display.

An Offcanvas Panel on the bottom of the screen, can show history, a terminal, a debugger or logger.

Or all of the above, if you nest a tabbed control in it, something you will also have to create eventually.

But nesting, under our lightweight architecture, means web components.

I have created a test project named webkin, and provide a 180 line Offcanvas Panel component.

It is AI generated, it is way too big, and it is missing, the backdrop that should cover a page when it is open.

And a focus manager, that traps your tab key, to tab through the user interface controls in the Offcanvas Panel.

The backdrop should be a standalone component, that will be useful, for alerts popups, and modal windows.

And the focus trap manager is reusable, for whatever popup type thing Offcanvas or Modal is on the screen.

The demo page or index.html in the root of the project, has some extra CSS that should fall under the umbrella of a UI reboot.

The reboot, is about making consistent choices for all the browsers.

Before AI, this would be an amazing project to learn from, with AI … this is something else.

Yes. AI can help you manage such a project in its entirety, it can fix bugs, and provide custom components for your customers.

The AI is giving you a way to learn, to become a professional, to have an amazing portfolio, to build your won companies or get a nice job.

High School, will not do any of that, you will learn Biology or Chemistry faster, by working on related software.

So you don’t even have an argument here, the subjects are part of your learning.

This code that you see, here, is some of the most powerful stuff ever coded.

Jsdeliver stats reveal that bootstrap is the top download, downloaded fourteen billion, nine hundred sixty-nine million, eight hundred thirty-five thousand, seven hundred forty-three in the past month.

Those 180 lines of code, represent the future for a programmer, the singe most useful web project tin the world.

If you build your won bootstrap, you will become one of the worlds top programmers.

If you keep memorizing for quizzes in high school, in the age of AI …

Well, I’ll let you figure that one out on your own.

But please remember, you are tasked with growing all the way up.

And that means, art, knowledge, mastery, wisdom, philosophy, joy of life, and greatness.