stephen.news

hypertext, words and more

HTML

  • So long Twitter, hello fediverse

    •

    4 min read

    •

    For as long as I’ve known the web, I have known the little textarea element. It’s a simple element. In all likelihood, it’s just about as ubiquitous as the input tag on websites. It’s a captivating little thing. Before the modern inventions of React or complex JavaScript libraries, all it ever really contained was text.

    I suppose that’s the case to this today. But, it has long evolved into a springboard for authoring webpages. Modern publication inventions such as tweets, blogs, posts, blocks and countless others all stem from the textarea (sprinkle in some JavaScript magic, some drop zones and you have yourself a little “composer” where you can add images, video and more).

    Looking over the W3C spec for the textarea and looking back on SMS character limits (they were varied to say the least), it doesn’t take much imagination to see why Twitter came about in the first place. It seemed that short-form blogging was always destined to become a thing. Twitter’s success can largely be attributed to the fact that there’s really a lack of competition in the short-form blogging space.

    Tumblr and WordPress have always occupied the space between short and long-form blogging, sure. But, the spiritual successor to status messages (aka away messages)? Twitter has owned that (and marketed themselves as such) ever since it became a mainstream social network.

    While Twitter’s previous management has a long and well-documented history of running this company into the ground, Musk maintains no exception either. He’s nosediving and it’s headed for a calamitous user exodus. With no Trust & Safety board and a hostile CEO at the helm, banning tweets to Mastodon, banning journalists, then re-instating some of them — he’s clearly on a tyrannical, pathetic war path toward creating a platform that benefits Elon, elites and promotes a right-wing stochastic terrorist echo chamber.

    Needless to say, I’m getting the heck out of dodge. Like many others before me, I am kissing my neat little Twitter handle goodbye. Meanwhile, I was enthralled and delighted by Matt Mullenweg’s Decoder interview. There’s a brief point where he discusses what it means to be a good steward of Tumblr and how it has humbled him. Between Automattic’s Tumblr, the fediverse and this blog (which is also powered by WordPress an Automattic invention), I’m absolutely delighted to leave Twitter behind. Not to mention, the kind folks at Tumblr are considering adding ActivityPub support to their network which would effectively make Tumblr that largest Mastodon instance on the fediverse.

    You may be asking, “but, wait — how will I find my friends on Mastodon?!” Well, I have some good news! First off, don’t deactivate your Twitter. Follow these steps to get started with Mastodon

    1. First, join an instance. Doesn’t matter where you join! You can move freely about the fediverse. Think of each instance like an email handle.
    2. Next, add your Mastodon handle to your Twitter profile (this will make it easier for folks to find you in the fediverse).
    3. Finally, go here and sign in with your Twitter creds to find your friends who have also moved to the fediverse: movetodon.org

    With your help Twitter can be given a proper burial. It should go down as one of the worst acquisitions in business history and become the cautionary tale that it deserves. The textarea and microblogging on the other hand is never going away. In fact, I would argue that the slow death of Twitter reveals what we all want deep down — each of us want to own a little piece of web. One step closer to a de-commodified web utopia.

    Update: Elon banned links to Instagram, Mastodon and other social platforms and then reversed that decision. Then ran a poll on wether or not to step down, which ended with 58% in favor of him stepping down. Despite claiming he would abide by the results, there’s been no indication he would do so. Even more concerning, it appears he’s spellbound by the idea of restricting poll voting on Twitter to Blue subscribers. Welcome to hell, Elon.

    If you are so inclined, you can find me in several places on the web now!

    I’m on Tumblr where I may shitpost, share photos, re-blog cool things and whatnot: tumblr.com/petrey

    Elsewhere, on the fediverse I have several handles. However, I’m mostly here with my fellow hackers and unix computer club community: tilde.zone/@petrey

    Follow me wherever you’d like, but wherever you go, this blog remains ✨

  • The Origin of the Tag

    •

    1 min read

    •

    I love coming across this stuff. I always forget that Marc Andreessen is basically the father of Mosiac, Netscape and plenty of other internet startups through his VC, Andreessen Horowitz.

    Here’s Andreessen’s super-duper casual proposal over email, sent on February 25, 1993:

    I’d like to propose a new, optional HTML tag:


    IMG


    Required argument is SRC=”url”. 

    Lovely. Marc goes forward to say that browsers should support bitmap image filetypes, be flexible and recommends browser behavior when an <img> has been given a non-supported filetype in the src argument:

    Browsers should be afforded flexibility as to which image formats they
    support. Xbm and Xpm are good ones to support, for example. If a
    browser cannot interpret a given format, it can do whatever it wants
    instead (X Mosaic will pop up a default bitmap as a placeholder).

    Amazing to see how far we’ve come since then.

  • What is a Tag Anyways?

    •

    5 min read

    •

    Seriously. What the hell is a <div> tag? When I first got into web design, I had no idea how a web page worked. I had no concept of HTML elements, let alone the <div> tag. Unbeknownst to me at the time, developers were pushing the limits of CSS and Flash to make compelling, thrilling websites. 

    After sometime, it became clear that the web is made up of hyperlinked text files (and very clearly not Flash). That’s it. Plain and simple. Even to this day. At a fundamental level, servers powered by PHP, Ruby, JavaScript or whatever — all pump out text documents (encoded by a markup language called HTML) that browsers can understand and parse (despite minor rendering differences it’s amazing that it all works). These linked text documents or hypertext, are plainly speaking webpages.

    Just some <div>s hanging around.

    Learning how to write a valid HTML document took a lot of trial and error, considerable patience from my mentors, and fixing my mistakes along the way. So, if you have any hypertext mysteries let me know — I’ll pay it forward, leave me a note in the comments. ☺️ Onward!

    HTML Content Categories

    I never really was given an answer for such a seemingly simple question: what exactly is a <div> anyways? I mean there are some very obvious elements at our disposal:

    • The <p> is a paragraph tag.
    • The <blockquote> is a blockquote tag.
    • The <ul> is an unordered list tag.

    All HTML elements have inherent uses, and belong to certain content categories. The <div> belongs to the flow content category. Here’s some other HTML content categories:

    • Metadata content (out-of-band information and meta)
    • Flow content (typically contains text or embedded content such as the <div>)
    • Sectioning content (headers, footers, or sections — organizational structure is important)
    • Heading content (heading levels, sub-headings, etc.)
    • Phrasing content (these define the text and the mark-up inside paragraphs such as <em>, <strong>, or things like <span>s)
    • Embedded content (these are typically external resources such as <iframe>, <canvas> or even <svg>s)
    • Interactive content (these are your <button>, <textarea> or <label>s)
    • Palpable content (this one is a bit abstract, but these are elements who are neither empty nor hidden, important for script manipulated content) 
    • Form-associated content (these are typically children nodes of the <form> element, or children of the form attribute)

    This brings us just about up to speed to talk about the the Content Division Element, or the <div>.

    The Content Division Element, or The <div> Tag

    While some elements have a more obvious progeny, the <div> is a bit different. It’s something of a marriage between a generic container and an inline-container, but somehow… it’s neither.

    From the <div> Mozilla HTML Reference:

    The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS. As a “pure” container, the <div> element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

    There you have it. While the <div> has no stylistic weight, but it can turn some heads with a litter bit of CSS love. But it’s true purpose is one of organization. Take for example, the typical and highly sought after Holy Grail Layout:

    A basic Holy Grail setup with proper sectioning content

    Simple and empty for now, we can further sub-divide our sectioning content areas (<header>, <nav>, <main>, etc.). We’ll use <div>s to contain and organize the inner content:

    The same sectioning content, with further divisions using <div>s

    And violá! Inside your <div>s you put your heading, phrasing, or embedded content (or anything else for that matter). It’s all about organization. 👌

    The <div> Soup Problem

    It’s important we use sectioning content and flow content properly. Otherwise we’ll end up with <div> soup like Google:

    Uh…

    Look at that mess!

    While it’s not the end of the world, div soup presents a readability and productivity challegne for humans. Let’s say you inherit a project built like the figure above. There will be a considerable amount of technical debt, learning the organizational structure, and possibly re-factoring the div soup for efficiency. Web Components may be a future solution, but I don’t think it’s a winner.

    Anyways, thanks for joining me on this journey to the center of the <div>. The web’s most prolific flow container.

    Further watching:

    Professor Brailsford makes a guest appearance on Brady Haran’s Computerphile, and has some hot takes about HTML and programming. Brilliant fun.