[HN Gopher] Writing HTML in HTML (2019)
       ___________________________________________________________________
        
       Writing HTML in HTML (2019)
        
       Author : blakewatson
       Score  : 45 points
       Date   : 2024-01-12 03:07 UTC (2 days ago)
        
 (HTM) web link (ankarstrom.se)
 (TXT) w3m dump (ankarstrom.se)
        
       | proc0 wrote:
       | Sure, when your site looks like it's from 1995. Client apps today
       | have hundreds of custom features running simultaneously.
        
         | superkuh wrote:
         | Of course you wouldn't use this if you're being paid to make an
         | application for profit. You use less good technologies that
         | make it easier to collaborate with other employees, or more
         | importantly: whatever buzzword tech of the year gets you hired.
         | But for personal sites where you get to choose? HTML.
         | 
         | The commercial app you write will last a few years before
         | breaking. But the HTML site will last forever.
        
         | ben_w wrote:
         | > Sure, when your site looks like it's from 1995
         | 
         | Tail end of 96 at least, even the link uses CSS. In principal
         | you can also write JS manually within HTML.
         | 
         | > Client apps today have hundreds of custom features running
         | simultaneously.
         | 
         | How many of those features are adverts and user-unwanted
         | tracking that you need a GDPR compliance team for?
        
         | MathMonkeyMan wrote:
         | A blog is a blog. There's always CSS and the "class" attribute
         | to make things look however you want. Reading text and images
         | doesn't require interactivity or scripting.
        
         | akie wrote:
         | The site could benefit enormously from these 10 lines of CSS:
         | https://news.ycombinator.com/item?id=32972004
         | 
         | It makes the site look modern instantaneously.
        
       | gerikson wrote:
       | Updated post from 2020:
       | https://ankarstrom.se/~john/articles/html2/
       | 
       | Also, I don't want to dump on this dude but I've authored
       | literally hundreds of entries on my 2 blogs since 2019 using
       | Markdown. I doubt I'd ever bother to write that many using plain
       | HTML.
        
         | omoikane wrote:
         | I think what the author is arguing for is not so much about
         | writing in pure HTML, but the fact the levels of indirections
         | added by most existing site-generating frameworks restricts
         | them from doing something that would have been possible with
         | just pure HTML. This second article seem to argue for owning
         | your own site generator that is a thin wrapper around HTML, to
         | deal with more dynamic content while maintaining flexibility.
         | 
         | I have being doing the same for my website since ~20 years ago,
         | where my input is mostly pure HTML, and I generate static HTML
         | pages from those with a few scripts. My website does look
         | rather antiquated, but I consider that a feature.
        
       | Semiapies wrote:
       | On the one hand, I think everyone should try to put together a
       | simple website with a few pages in raw HTML, just to get an idea
       | of how it works. And actual, semantic HTML is not terrible in
       | this day and age, much better than it used to be. You don't have
       | to learn a static generator to put up a website, because you're
       | the static generator.
       | 
       | On the other hand, I've written a lot of HTML since the 90s. And
       | there's a dirty secret behind why so many static generators exist
       | --the effort of slapping together something that builds a site
       | how you want it is similar to learning an existing system. Often,
       | that's a short build script rather than some expansive framework.
        
       | jdthedisciple wrote:
       | Here is a better solution: You write your blog post md directly
       | into the body and deploy a builtin minimal md engine.
       | <html>              <body>         # Blog Post Title         <br>
       | Welcome to this simple blog post         </body>
       | <js>         document.body.innerHTML =
       | document.body.innerHTML.split('<br>').map((line) =>
       | line.trim().startsWith('# ') ? `<h1>${line}</h1>` :
       | `<p>${line.split('# ')[1]}</p>`).join(''); // add more md
       | features here if desired         <js/>              </html>
       | 
       | (replace js with script, which i cant write here on hn
       | apparently)
       | 
       | Obviously move the JavaScript to its own file and embed it to
       | avoid repetition across blog entries. Plus, move it into
       | 'DOMContentLoaded' event handler to be safe.
       | 
       | Could it get any more elegant and beautiful?
        
         | ravenstine wrote:
         | Actually, yes. You can eliminate the body and HTML tags.
        
           | codetrotter wrote:
           | Here is an example of the kind of pretty minimal but valid
           | HTML5 that I usually write when I write html by hand:
           | <!doctype html>         <html lang=en>         <meta
           | charset=utf-8>         <title>Hello</title>         <style>
           | /* css here */         </style>         <header>
           | <h1>Cool beanz</h1>         </header>         <nav>
           | <ul>         <li>Home         <li><a href=/foo.htm>Foo</a>
           | <li><a href=bar.htm>Bar</a>         </ul>         </nav>
           | <article>         <h2>The Life and Dreams of Irish
           | Setters</h2>         <p>Widely appreciated for their
           | qualities, the Irish Setter is a breed of dog to behold.
           | <p>Lorem ipsum and so on and so forth.         </article>
           | <footer>         <p>Copyright (c) 2024, Bob Schmob
           | </footer>
           | 
           | Check it :)
           | 
           | > Document checking completed. No errors or warnings to show.
           | 
           | https://validator.w3.org/nu/#textarea
        
             | mikae1 wrote:
             | Don't forget Server Side Includes :)
             | <!--#include file="/includes/header1.html" -->       The
             | Page Title       <!--#include file="/includes/header2.html"
             | -->       The Article Title       <!--#include
             | file="/includes/header3.html" -->       <p>The article
             | content</p>       <!--#include file="/includes/footer.html"
             | -->
        
             | robador wrote:
             | I've got to ask, the H1, why is the site name the main
             | heading and not the title of the article?
        
         | mikae1 wrote:
         | I do not understand peoples problem with writing HTML. You
         | could use an editor that auto-completes elements if you find
         | that they're too long to type. Also remember that there are a
         | few common elements, like <p> and <li>, that you usually don't
         | need to close.
         | 
         | I use Hugo and I actually prefer writing HTML over MD.
        
           | bentley wrote:
           | > Also remember that there are a few common elements, like
           | <p> and <li>, that you usually don't need to close.
           | 
           | <p> and <li> don't _ever_ need to be closed, do they? Closing
           | would only be necessary if leaving them open would introduce
           | ambiguity, but it never does.
        
             | mikae1 wrote:
             | Nope. But if you don't use a closing tag and put, say, an
             | <img> tag below a <p>, the image will be child of the
             | paragraph. Perhaps that's not always what you want.
        
             | toyg wrote:
             | _Cries in XHTML_
             | 
             | Close your tags, people. Make your intent non-ambiguous.
             | It's basic hygiene.
        
               | AlienRobot wrote:
               | It's a paragraph, not a div, the intent is clear by
               | definition.
        
               | bentley wrote:
               | Do you always specify <tbody> in your tables?
        
         | JonChesterfield wrote:
         | You could use the parser from commonmark instead of diy'ing
         | your own
        
         | xXx_uwu_xXx wrote:
         | Every time you use innerHTML, a kitten dies. How dare you!?
        
       | hiAndrewQuinn wrote:
       | When I remember to update https://build-100-websites.fun/ with my
       | recent antics (whew it's been a while), I like to write it in raw
       | HTML just so I remember why I never ever do that anywhere else.
       | 
       | My typical tool of choice for static sites and plain old
       | prototyping remains Hugo, which rounds out at least half a dozen
       | other websites I'm the sole contributor to right now, like
       | https://hiandrewquinn.github.io/selkouutiset-archive/. Like
       | everything you have to amortize the one time cost of learning it
       | over the n times you use it. If you only ever make one website,
       | raw HTML might be fine -- if you're trying to make 100, some
       | experimentation might be worthwhile.
        
       | jrm4 wrote:
       | It is _so_ hard not to feel REALLY SMUG reading stuff like this,
       | as someone who has run my own website as the working primary
       | source for my college instruction for the past 15 years or so
       | using https://zim-wiki.org. (before Markdown was much of a
       | thing!)
       | 
       | It's borderline bizarre to have watched this method of doing
       | things kind of die out, and then also come back in the form of
       | "static site generators" -- which, frankly, are still way
       | clunkier than this.
       | 
       | Write in Zim, export to html, rsync to site. Easy.
        
         | account-5 wrote:
         | Do you use the built in "theme" or style of the output html?
         | Much as I love zim-wiki for my notes I really dislike the green
         | on white coloring.
        
         | FourthProtocol wrote:
         | My website started as html in 1995, vanilla html, not even css
         | or Javascript. It has evolved to accommodate stats, and at some
         | point (whenever it was that it was first released) I created an
         | ASP template to manage headers, footers, contacts.
         | 
         | Used to update things whenever a new ASP version was released,
         | but haven't bothered for years.
         | 
         | Process is simple - copy ASP template, rename, fill in the
         | content, FTP to hosting Co and done.
        
       | ulrischa wrote:
       | Dreamweaver was perfect for this. It has templates and libraries
       | and you wrote in a split editor with html and wysiwyg. Why was it
       | abandoned by many web developers?
        
         | JodieBenitez wrote:
         | We abandoned this because it produced markup that was horrible
         | to maintain.
        
       | CM30 wrote:
       | I'm not sure I agree that HTML is unpleasant to write. Honestly,
       | even when I'm writing blog posts or articles, I often fall back
       | to writing the HTML myself. It feels about as simple/complex as
       | writing markdown, or using a WYSIWYG editor.
       | 
       | Maybe I just don't like being limited by abstractions.
        
         | jwells89 wrote:
         | The main thing that bugs me about HTML is how it's so easy to
         | goof up closing tags and attributes. Yeah browsers can deal
         | with malformations to some extent and modern editors help
         | prevent them but it still feels not-great.
         | 
         | That's why I like HTML for the site's frame and markdown for
         | the content. The amount of HTML is then finite and easy to keep
         | correct and Markdown is harder to mess up due to its
         | simplicity.
        
           | mikae1 wrote:
           | Remember that there are a few common elements, like <p> and
           | <li>, that you usually don't need to close.
        
           | bentley wrote:
           | Funny, that's a complaint I have about Markdown. Anytime I
           | use superscript or subscript, or try to nest markup within a
           | list or table or something, I always get the formatting
           | wrong. Whereas in HTML it's always easy to nest things
           | properly, even when dropping implicit end tags (which I
           | always do), because the rules are both self-consistent and
           | standardized across implementations.
        
       | malkosta wrote:
       | I stopped looking at SSGs after this:
       | 
       | for file in _.md; do pandoc --quiet --template template.html
       | $file -o "${file%._}.html" done
        
         | Tomte wrote:
         | So no index or other listing of articles. No RSS.
         | 
         | I've been tempted a few times, as well, but it's a little bit
         | too sparse for me.
        
       | JonChesterfield wrote:
       | I'm really liking writing HTML in markdown. Write the markdown,
       | feed it to commonmark's parser, splice the text together in ad
       | hoc sorts of ways. Robust, trivial.
       | 
       | Css on the other hand I hate more every day I look at it. Write
       | some, see if it behaved as expected, it did not. Iterate until
       | angry. There's something fundamentally wrong in my mental model
       | for what the style text is likely to do to the appearance of the
       | page.
        
         | ahmedfromtunis wrote:
         | For years, I had the same experience you're describing. Writing
         | CSS felt more like guessing than anything else.
         | 
         | A few weeks ago I decided that enough's enough. After years of
         | writing CSS, I decided to refresh my knowledge with an
         | intermediary level course. It turns out, a lot of stuff got
         | mixed out, a gaps formed and grew over time.
         | 
         | Now, I enjoy writing CSS again as I find it more predictable
         | and behaves as expected.
        
       ___________________________________________________________________
       (page generated 2024-01-14 23:01 UTC)