The Web: Docs, Streams, Apps, Voice

Teach Them Separately

On the one hand you have people arguing that the entire web should all just be JavaScript, that even a blog should be an app running on React.

On the other you have people arguing for simplicity and “reader” friendly HTML and CSS only, some even advocate turning JavaScript off entirely. This camp includes Medium.

Yet another group just sees the web as a video and audio streaming platform, basically a replacement for radio and television.

None is particularly wrong or bad. But they are significantly different.

Which HTML should I use?

I wrote a little about this already in The Static Web Returns, but as I contemplate leaving a lot of HTML tags out of my Fundamentals of Modern Programming curriculum I realize Medium’s courage to leave out so much has bolstered my resolve to do the same.

Here’s the reality.

About half of the HTML official tags are never used by most developers.

Why?

Because they are just not needed. The premise for their existence was well-intended but turns out to be completely irrelevant for modern web programming.

Then it occurred to me.

Why not sort all the HTML tags into those that every doc web programmer should learn (which is everyone) and those that every app web developer needs to learn? The two lists can even be taught separately to different students wanting different things from the web. Of course, a book-type-thing would also be a nice way to codify it, sort of like JavaScript: the Good Parts but without all the Crockford all over it.

The Doc Web

The web was invented to replace shared emails and news servers for CERN physicists. That is why all web pages fundamentally still look like email messages at the lowest level. It is why all web content still uses MIME types (the second M is for Mail).

The web was really created to replace books and scientific papers. Perhaps that is why the term “document” stuck so well.

But no one looking at the web today would call most of the content “pages” and “documents.” No, the web has become a platform, and in the case of Chromebooks, practically an operating system.

No, the doc web is what the web should have started out as. I described this in HTML was a Bad Idea.

Enter Medium.

Medium has a audacity to suggest that you actually do not need ultimate freedom in how you use words and limited images to communicate.

In the process Medium has perhaps unwittingly defined a working standard for the doc web (which I once called the “essential web”). I went on to suggest removing the web from the equation might leave something called the knowledge net. But if you leave the web in you clearly get document web.

Whatever we call it, we actually have been given an opportunity to capitalize on Medium’s audacity by codifying the minimum HTML required to render a Medium post, which turns out to be the same as that rendered by BaseML, my unapologetic simplification of CommonMark to something that everyone can easily write and parse.

The Streaming Web

Anyone born after 2013 really doesn’t know what television is—even if they have parents that watch it. I have noticed every student between 10 and 13 is obsessed with becoming a YouTube sensation.

I don’t know why but this interest wanes for most by their teens (usually when they discover 3D games, hacking, cars, and puberty).

Suffice it to say web streaming is one of the most important, most ubiquitous uses of the Web. We forget that Netflix and movies on Amazon and YouTube are all web-based technologies these days.

As an educator it can be daunting to even touch this subject, but even if you are just teaching basic HTML tags you will have to cover it when you cover the audio and video elements. It is easy for that to dovetail into an entire course just on how to create, edit, and publish that content not to mention complicated conversations about why hosting on a service is usually better for most. This can be a great opportunity to bring up operations and hosting and Linux and web servers and all of that. But if you just want to get through a course about the core HTML5 tags it can bog you down.

So should you teach the streaming/media tags with the rest?

My vote is yes. But only mention them. Then have an entire course for Creating and Streaming MultiMedia Web Content that includes learning the main tools for creating, editing, and hosting YouTube videos, podcasts, music and more.

The App Web

When you remove the text and multimedia everything left is the app web. The fundamental units of this web is reactive components. This obviously includes <canvas> but also includes <div>.

It should probably involve learning the DOM and the major alternatives to it (React, Vue, Angular).

It should also involve websockets which require a core understanding of network programming.

It must cover web workers and progressive web apps.

That is a lot of content to cover. In fact, this is likely several courses under a general course umbrella Developing Reactive Web Applications.

Some people really rage at pages completely filled with <div> and <span> tags but this has become the app standard—even if you prefer Vue over React (which I definitely do).

And what about Web Assembly? Those folks have simply thrown the entire original use of the web completely and totally out the window. You don’t even need a DOM at all. In fact, you would have to make your own widget library just to use any AI at all.

All of these innovations to the “web platform” are not bad, they are just very definitely in the opposite direction of readable documents.

The advantage of this is that the web is unifying our computing experience. We have the hope of one day actually having a central standard for all things that run on a computer, and a relatively safe sandbox in which to do it (uhem, Chromebooks).

Does anyone learning to make a web page instead of writing a paper for school so they can include videos, images, and formatting and share it with everyone need to learn the <div> tag? Not really. But no self-respecting instructor would leave them out. They just have to be categorized properly.

The Voice Web

There is one other web emerging, the voiceable or just voice web. You could argue that the voice web is the catalyst that will finally separate the app web from the doc web because the voice web is a subset of the doc web. When you think about this for two minutes you realize Medium may have inadvertently ushered in the most important web innovation of our time enabling further progress.

My favorite part of the voice web revolution is that both blind and deaf people are actually being considered again. People promoting an only app web world are being either completely insensitive or completely oblivious to the problem. Luckily most voice applications require text formats that can be easily uttered as speech.

In fact, in creating my content about HTML tags asking myself, “what would a voice synthesizer do with this tag” has become a key question. The other, of course, is “how would this render responsively on a mobile phone.”

By the way <tables> don’t.

Hybrid (Harry Potter) Content

Since I have started using Vuepress with its ability to embed highly interactive components in an otherwise flat web document I have come to see a Harry Potter-like value in creating documents that seem like they are alive, nothing like your traditional text book. In fact, these documents include technologies that make them impossible to render to a flattened printed page.

This caused a dilemma.

“Do I create content that can go into a book?”

“Do I create all rich multimedia content they can watch?”

“Do I create interactive tutorials they can code on with challenge bots that check their work?”

“Do I create content that can be easy spoken by a speech synthesizer that has multiple flows customized for the learning experience in a pseudo-A-I way?”

The answer is yes.

Vuepress may be the first platform to provide all of this provide I follow a few specific conventions for myself:

  • Only BaseML which can be easily voiced and copied to Medium.
  • No embedded video, only links.
  • Video is secondary to speak-able text and animated gifs.
  • Use a lot of animated gifs.
  • Clearly separate tutorial-like components.
  • Have the components be supplementary to the text itself.
  • Always ask, “How would this be uttered by a voice synthesizer?”

In fact, I plan to create a plugin that will enable voice on every page if they prefer.

Updates: Changed from just Docs and Apps to more.