Two Decades of Code in Ten Lines

 Well, actually it's more like 3 decades in 16 lines, but that headline just isn't as catchy as the current one.

I was going to write a short post extolling the praises of _hyperscript again (we'll definitely get to that), but, while looking at the code I was going to screencap, I realized there's so much more historical context present.

The code posted below generates sortable photos and captions with a vertical grip icon and utilizing the HTML Drag and Drop API:

Photos courtesy of Unsplash (Patrick Perkins and Minh Pham, respectively)

This isn't anything earth-shattering and there may even be JS libraries that duplicate the functionality in fewer lines, but I'm still impressed by the evidence of software evolution in the code snippet.  It's like looking at a digital version of the Grand Canyon striata:

Apologies for the eyechart

We'll start with the oldest technologies first.  This is a snippet of HTML code that first reached prominence in the late 1990s with the launch of the Dotcom boom (for those of you who are too young to remember that time, ask your grandmother - she was probably a webmaster somewhere for a few years before moving into real estate speculation).

HTML vocabulary was typically limited, but that vocabulary included the <img/> element so everyone could display their stills of dancing hamsters and personalize their Geocities page.

Flash (pun only intended after the fact) forward to the mid-2000s, when we were all munching on Freedom Fries and using our ever-increasing home equity to finance our molecular gastronomy addictions.

By this time, programming languages had accompanying robust web frameworks like Ruby on Rails or Django for Python (our example is a snippet from a Django template) which greatly reduced the boilerplate code needed to extract information from a database and display it to a user.

AJAX also gained traction, allowing web pages to be immediately responsive to user actions and permitting actions like drag and drop, which were previously limited to desktop apps.

Move ahead a few more years (let's call it another decade and pin it at 2015), when we were all munching shishito peppers and reveling in the stability of the American political system.  By this time, HTML frameworks like Bootstrap were solidly established, reducing the need to define custom layouts via CSS.  Bootstrap also included icons accompanying its framework (and now independent of its framework - the vertical-grab icon I'm using above), to guide the user with familiar or intuitive widgets common to the aging Web 2.0 hype. 

Outside of the HTML frameworks, there was a strong push to encompass content in <div/> elements and handle the styling and layout via CSS rather than relying on frameworks like Bootstrap which could cause sites to look similar, a big taboo when you're vying for brand differentiation and paying front-end engineers good money to chase the week's newest JavaScript build system.

Fast forward again to today, a time in which nothing of interest in the world has taken place in the last decade, and we've got a few more neat front-end constructs to examine.  Much of the heavy boilerplate HTML layout taken on by frameworks like Bootstrap has been supplanted by new CSS constructs like flex boxes and grids.  

In addition, new declarative frameworks like Tailwind CSS have taken a lot of the black magic out of styling.  I appreciate the arguments against it - it can make maintenance more of a hassle with larger teams, lacks fine-grained controls, and is repetitive - but it's helped streamline my ability to style pages much faster than plain CSS or even Bootstrap has in the past.  Tailwind CSS just gets me (*sigh*).

I really appreciate the readability of the _hyperscript syntax.  It took a few attempts to convert it from plain ol' JS, but once my brain snapped into the appropriate mode, everything was just so much cleaner and simpler.  I still appreciate the power of the more robust frameworks like React and Vue, but I'm whole-heartedly in the camp of reducing the complexity of the web.  If I can implement my ideas in a few lines with a minimal framework like _hyperscript - even if it means some repetition across the codebase, I'll choose that over the incumbents any day.

Finally, I'd be remiss not to address the tireless worker behind the scenes - our dear, dear LLMs.  GenAI has helped me significantly in bypassing a lot of the research for Django APIs.  It doesn't do well with _hyperscript, because its corpus is too small for an LLM to draw inferences off of, but it can write the JS for me that I use as a basis for _hyperscript.

And it still hallucinates enough to keep my skills as an engineer sharp (thanks, GenAI)!  In this code alone, it inexplicably assigned the Node.DOCUMENT_POSITION_FOLLOWING to the wrong integer in its explanation (Gemini, if you want to know who I'm picking on specifically), which made initial logging while testing more frustrating than it needed to be.

Luckily, in this case, I was able to trust my own intuition over the LLM and head off hours of frustration, but I will say that it had its way with me for hours when "helping" me with a form wizard.  Good to know it's still leaving something for us humans to do.

Can't wait to see what the next 10 years hold (Actually, I can.  Please!  Make it stop!  Change is frightening and confusing!)

Until next time, my human and robot friends.