[HN Gopher] Next Gen Static Blogging
       ___________________________________________________________________
        
       Next Gen Static Blogging
        
       Author : mmackh
       Score  : 179 points
       Date   : 2021-01-09 15:25 UTC (7 hours ago)
        
 (HTM) web link (inoads.com)
 (TXT) w3m dump (inoads.com)
        
       | pickpuck wrote:
       | If the only thing being removed were <div> tags, which don't have
       | structural or semantic meaning, it would probably be just as easy
       | to parse for screen readers and robots.
       | 
       | Two problems I see:
       | 
       | 1. Where you have a heading you may want it and its associated
       | content wrapped in a <section>. Where you have a separated
       | paragraph you really do probably want a <p>.
       | 
       | So these newlines aren't always just replacing <div>s. The page
       | has no structure except what can be derived from headings.
       | 
       | 2. Wrapping everything in a <code> tag seems like it could cause
       | issues. It would probably be better to use <main> and apply the
       | clever one line of CSS mentioned in the post.
        
       | thayne wrote:
       | So how would you do a code snippet with syntax highlighting?
        
       | kome wrote:
       | it's like a, messy, non-standard semantic web... at this point,
       | and i'm totally serious, why not starting again to work on XHTML
       | 2.0 standard? We need it badly.
        
       | arvindamirtaa wrote:
       | A neat little css property aside, isn't the separation of
       | concerns a cornerstone of web pages?
       | 
       | Html - structure of the document CSS - appearance JS -
       | interactivity
       | 
       | I could be wrong, but that's how I remember it. Is there an
       | advantage to moving away from this fairly simple and unambiguous
       | paradigm?
        
         | k__ wrote:
         | Separation of concerns is still seen as the way to go. People
         | just have different opinions about what a concern is.
         | 
         | It started with markup, styling, and interactivity. But many
         | people think, this is a too technical perspective and software
         | should be split up into non-technical concerns (i.e.
         | microservices).
        
         | tannhaeuser wrote:
         | This structure vs appearance dichotomy was added after the
         | fact, though, since CSS came significantly later than HTML. It
         | has been used as a (misguided IMO) narrative to defend CSS's
         | complexity and redundancy and is partially to blame for HTML
         | and the web ceasing to be a straightforward medium for simple
         | publishing, seized by big media and ad networks.
        
         | [deleted]
        
       | Brajeshwar wrote:
       | Cool. Go one step further and render the CSS inline.
       | 
       | Of late, I have been writing with just MarkDown and dropping in
       | some of the simplest tool (Pandoc, Jekyll) possible to render as
       | HTML.
        
         | smlckz wrote:
         | Here's some crazyness:
         | https://dataswamp.org/~solene/2019-08-26-minimal-markdown.ht...
         | 
         | I suppose it is not much hard to translate this into PHP...
        
           | icy wrote:
           | I built mawkdown[0] off of solene's initial awk
           | implementation!
           | 
           | [0]: https://github.com/icyphox/mawkdown
        
             | smlckz wrote:
             | I do not have much experience in awk, but after reading
             | Solene's and your code, I am curious about why < > are
             | escaped with \ ?
             | 
             | In your m.awk, I also noticed that the markdown formattings
             | (bold, inline and links) are not turned off in code blocks.
        
       | xwdv wrote:
       | This is ridiculous, only two articles on this blog and one is
       | about static blogging.
       | 
       | In the next generation, I implore people to focus on _content_ ,
       | not the tech.
        
         | mmackh wrote:
         | Yep, this is not my first run at blogging. Looking forward to
         | writing more content.
        
           | xwdv wrote:
           | I'll be watching to see if you do.
        
       | teekert wrote:
       | Yeah if browsers would just render markdown nicely that'd be
       | great.
        
       | codazoda wrote:
       | I ran to my desktop to load this up and have a look. I'm ALWAYS
       | looking for a more simple blogging solution. I was hoping for
       | mostly plain text plus an em tag here or there. It's a little
       | more involved than that, but it's given me some ideas.
       | 
       | Shameless plug, I created the NeatCSS framework to have this
       | "simple" look and feel. On that, however, I didn't try to avoid
       | your typical HTML code.
       | 
       | https://neat.joeldare.com
        
         | clintonb wrote:
         | > I'm ALWAYS looking for a more simple blogging solution.
         | 
         | Why?
        
           | unicornporn wrote:
           | > Once you choose the technology that runs your blog, use it.
           | Don't replace it, ever. Never ever rewrite it.[1]
           | 
           | [1] https://macwright.com/2019/02/06/how-to-blog.html
        
             | clintonb wrote:
             | The antithesis of this is exactly why I asked the question.
             | I was reminded of a tweet/post describing that most blogs
             | have a single post: the one that describes how the author
             | built their own static site generator/blog framework. After
             | that, they are too tired/unmotivated to write anything
             | else.
             | 
             | I was on WordPress. Now I'm on Jekyll. I occasionally think
             | of changing the theme, then I remember how little that will
             | benefit me or my few readers.
        
             | approxim8ion wrote:
             | This is good advice, for anything that can be tinkered
             | with. Just as applicable to setting up a window manager on
             | Linux, for example. It's an amazing rabbit hole, but it can
             | consume you.
        
       | ricardolopes wrote:
       | Interesting concept. This seems to simplify the writing part.
       | What about the rest? Is the list of posts generated automatically
       | (if so, how?), or does it require manual management? Do you need
       | the code tag, or could it be something more semantically
       | relevant, such as article?
        
         | Tomte wrote:
         | You can have it auto-generated using directory indexes in
         | Apache. You can even customize them (within limits).
         | 
         | I've toyed with having a minimal blog, where I simply drop text
         | files with file names beginning with their date in a folder and
         | rely on directory indexes as a "home page".
        
           | ricardolopes wrote:
           | I too was toying with a similar idea, but was finding the
           | devil was in the details.
           | 
           | For instance, you want to sort by publish date, which isn't
           | the same as file creation date. If you add it to the file
           | name, to sort by that, then you can no longer use file names
           | for urls, at least without some transformation.
           | 
           | So I was really curious how others were dealing with that in
           | a clean way.
        
         | iamtedd wrote:
         | I found that using w3.org's CSS validator shows reference to
         | the page's URI as '[...].php'. http://jigsaw.w3.org/css-
         | validator/validator?uri=https%3A%2F...
         | 
         | With that and the author's mention of using PHP for a custom
         | blogging setup, I'm guessing it's being dynamically generated
         | by PHP still.
        
       | toddmorey wrote:
       | Build setups can get complicated and simple sites can send way to
       | much javascript to the browser. But neither one of these are
       | required outcomes.
       | 
       | I think it's ok to have build tools that do small automations to
       | make writing more pleasant yet keep the markup semantic and
       | accessible.
        
       | demifiend wrote:
       | I'm glad I'm not so blind that I need a screenreader for this
       | site, because @mmackh doesn't seem to have given any
       | consideration to accessibility.
       | 
       | https://wave.webaim.org/report#/https://inoads.com/articles/...
       | 
       | If this is "next gen", I think I'll stick to using emmet-mode in
       | Emacs to write raw HTML, templating with m4 macros, validating
       | with tidy, and doing the build and deployment with a makefile.
        
         | richsu-ca wrote:
         | Made me realize my own site needs work. Thank you for sharing
         | this
        
         | rayrag wrote:
         | I bet that blind people can't wait for next 'next-gen' static
         | blogging:
         | 
         | html::after { content: "Welcome to my blog" }
        
           | demifiend wrote:
           | Whenever people do stuff like this, alternative text
           | protocols like Gemini make more sense.
        
         | Ryan_Goosling wrote:
         | I thought the crowd on HN was more technically versed than this
         | post. This self-titled "next-gen" blogging solution disregards
         | SEO and accessibility. Am I wrong?
        
       | tomtomtom777 wrote:
       | I like the white-space: pre-line trick and very much like the
       | omission of unnecessary <html> and <head> tags as the parsing of
       | such valid source is neatly prescibed.
       | 
       | But abusing <code>, <h4> and <h5> like that is a horrendous and
       | pointless. Please use the proper tags to keep the web clean.
        
       | Tomte wrote:
       | It is a neat idea, but the purist in me misses those <p> tags,
       | even though they are the main reason why I don't like writing
       | HTML by hand.
        
         | Izmaki wrote:
         | What about the standard
         | <html><head>...</head><body>...</body></html> tags?
        
           | Tomte wrote:
           | What about them? They occur exactly once, and I probably have
           | a prepared file with them already in it.
           | 
           | But for every paragraph I write I need to type <p> (and maybe
           | even </p>, if I choose to).
           | 
           | That's exactly the use case for Markdown, to get rid of that
           | tedious stuff.
        
             | schwartzworld wrote:
             | A lot of modern text editors will let you type 'p' and then
             | tab and they will create the opening and closing tag for
             | you.
        
               | Tomte wrote:
               | Sure, I can type "<p", but that's still annoying.
               | 
               | Look, I don't hate hand-written HTML. I actually like it
               | better than Markdown.
        
               | z3t4 wrote:
               | What about Enter, Enter to get <p>|</p>
        
               | Tomte wrote:
               | I'm not interested in you selling me an editor or IDE.
               | 
               | And I have zero idea why you all insist that I _must_
               | love writing HTML.
               | 
               | Leave me alone!
        
           | JimDabell wrote:
           | All of those tags are optional. It's perfectly valid to omit
           | them.
        
             | iamtedd wrote:
             | Not according to w3.org's validator. https://validator.w3.o
             | rg/nu/?doc=https%3A%2F%2Finoads.com%2F...
             | 
             | Edit: Actually, seems you're right. Though doctype is not
             | there, and there are other problems with the markup.
        
             | Tomte wrote:
             | Correct, documented at https://html.spec.whatwg.org/multipa
             | ge/syntax.html#optional-...
        
       | andyp-kw wrote:
       | Maybe an expert can confirm, but my understanding is that this
       | would be poor from an SEO standpoint.
       | 
       | I don't really see how this can be next-gen when it strips out
       | any semantic elements.
        
       | timwis wrote:
       | Wow, never heard of that CSS property -- cool!
       | 
       | Regarding medium, I think the biggest barrier is the
       | network/promotion you get from medium. Discovery and sharing
       | within the network brings audiences you'd otherwise have to work
       | quite hard for on your own site.
        
         | swsieber wrote:
         | IIRC there is some sort of tool for generating inter-blog
         | links. Maybe by our stavros? My memory is fuzzy here.
        
         | MaxBarraclough wrote:
         | You can always publish on both Medium and your own blog.
         | https://indieweb.org/POSSE
        
       | sedatk wrote:
       | It's funny that we've come full circle. The web had started with
       | static web sites. Many of them had misused HTML tags to take
       | shortcuts, and to achieve a certain look, including `<pre>`,
       | `<table>`, etc. That had eventually caused so many compatibility
       | issues that we thought malformed documents were a problem, so we
       | defined a rigid structure for HTML called XHTML. We discovered
       | the value of semantics and separated style from content with CSS.
       | Then, we thought XHTML was too much work and just went back to
       | loose style with HTML5 for ease of use. Then, people thought CSS
       | was so much work that they applauded Tailwind for brining styling
       | back into HTML. And three decades later, "next-gen static
       | blogging" is about misusing HTML tags to take shortcuts, and to
       | achieve a certain look. :)
        
         | still_grokking wrote:
         | Given that we're paying per CPU-seconds and MBs transmitted
         | while running our stuff again on mainframes (The Cloud) this
         | makes perfect sense, doesn't it?
        
       | sradman wrote:
       | <body style="white-space: pre-line">             The idea is that
       | an extra newline within a block with style="white-space:
       | pre-line" acts like &lt;p&gt; paragraph elements.
       | This is a separate paragraph.         </body>
        
       | mmackh wrote:
       | Author here: Sorry for not considering accessibility more. I use
       | solarize everywhere - I'll look into fixing the low contrast
       | issue. As for whether my approach is correct from an SEO or HTML5
       | validation perspective - evidently not. But I do value the
       | feedback and will take your comments into consideration when
       | expanding my personal site. It's still a WIP.
        
         | angus_gh wrote:
         | You could also override the font-family of the main <code> to
         | make it more readable; since it isn't code there's no need to
         | use a monospace font.                   body code {
         | font-family: sans-serif;         }
        
       | akkartik wrote:
       | https://developer.mozilla.org/en-US/docs/Web/CSS/white-space...
        
       | MoOmer wrote:
       | This was my experience...
       | 
       | 1. Read first sentence,                   Take a look at the
       | source code of this page - I rely mostly on CSS for the rendering
       | of this article.
       | 
       | 2. Right click, "View Page Source" on Firefox (`84.0.2
       | (64-)bit)`)                   Edit: adding that I do have
       | `NoScript 11.1.8` and `uBlock origin 1.32.4` installed.
       | 
       | 3. Close source pop-up/tab.
       | 
       | 4. It takes ~10 seconds to re-render the page (with spinner gif
       | running, in the meanwhile).
       | 
       | 5. Tab completely frozen.
        
       | codingdave wrote:
       | Excellent performance, sketchy accessibility. But I applaud the
       | effort to look for simplicity, even if it wouldn't work for many
       | production use cases.
        
       | egeozcan wrote:
       | If I'm understanding correctly, here, the semantic value of the
       | <code /> element is ignored to increase DX.
       | 
       | I personally wouldn't make that compromise, why is pre-processing
       | not simple enough?
        
         | lobsang wrote:
         | You could use <article /> instead (which I probably would).
         | Jest tested it using dev tools, seems to work.
        
           | z3t4 wrote:
           | Using some HTML elements like section makes Safari switch to
           | "reader" mode. Which is broken.
        
         | chrismorgan wrote:
         | The outer <code> here is simply a very poor choice due to what
         | I can only imagine is ignorance. It would be better removed,
         | and the `code` rule in the stylesheet changed to `body` and
         | `font-family: monospace` added. (And `code code` would need to
         | be changed to `code`.)
        
       | robertoandred wrote:
       | Why is he bragging about being awful at web dev? <p> tags exist
       | for a reason. You're not cool for omitting them, you're hurting
       | your users.
        
       | beefman wrote:
       | Is this better than my 2001 solution of wrapping everything in a
       | <pre> tag?
       | 
       | http://lumma.org/microwave/
        
         | dasil003 wrote:
         | Main benefit I see is text wrapping on small viewports
        
         | Tomte wrote:
         | Also a neat idea!
         | 
         | That's like a text file blog, but with the ability to have real
         | hyperlinks.
        
       | hashkb wrote:
       | > No need for JavaScript or any other complicated backend or
       | client-side frameworks. I can use PHP to introduce dynamic
       | elements to the page, but that's optional.
       | 
       | This isn't the same "dynamic" - the author must know that JS can
       | provide interaction without a page refresh; PHP (alone) cannot.
        
       | onion2k wrote:
       | I think it's a bit of a shame that this discussion has focused on
       | the tech and (slightly odd) HTML choices here. Those are probably
       | the least interesting parts of any discussion around what a "next
       | gen" blog platform might look like.
       | 
       | Where the author is correct about next-gen blogging (in my
       | opinion anyway) is in the attempt to reduce the friction to
       | publishing a new post. What tech stack you use, whether it's
       | static, what your HTML looks like, are all entirely secondary to
       | whether or not you actually use your blog to build a corpus of
       | content that shows off your opinions, expertise, and insights
       | over time. That's what a blog is. It isn't HTML tags and CSS.
       | It's the content within the tags. For me any next-gen blog tech
       | has to make 3 things trivially easy -
       | 
       | - it needs to be simple to set up and maintain. If my laptop dies
       | and I can't just clone my blog's repo and run a couple of
       | commands to get back to where I was it won't work.
       | 
       | - it needs to be _really_ simple to publish a post. Most blogs
       | use Markdown with either front matter or a specific file path.
       | That 's OK but it puts most of the cognitive load on me. I'm sure
       | there's a better way but I don't know what it is. I use 11ty for
       | my blog which is very good, and if I didn't worry about URLs as
       | much as I do it would be could actually work. But I do.
       | 
       | - there's nothing that pushes me to write more. This is the
       | kicker, and no one has ever solved it. I think a blog platform
       | that recommends posts I should write, and that praises me for
       | writing, would drive me to actually write far more than I do. So
       | far the only blog platform I've seen come close is Hashnode, but
       | even that doesn't do it very well.
        
         | rayrag wrote:
         | Author created static website where he manually links to each
         | page and he claims this is 'next-gen' of blogging. You know
         | what's next gen of blogging? Substack. You know why? It's
         | because for most people rss is "hard" to use (mostly because
         | they aren't familiar with it, thanks Google!), meanwhile
         | everyone is familiar with email clients.
         | 
         | Author says: > Managing this blog is a little more involved
         | than dynamically generating everything.
         | 
         | and
         | 
         | > Simplicity is key.
         | 
         | If he will blog for long enough that simplicity might become a
         | technical debt. Right know this 'next-gen' blog doesn't even
         | have an rss feed.
        
         | billbrown wrote:
         | For me, the power of a blogging platform is in automating
         | boilerplate. This lacks:
         | 
         | - search - categories - RSS - archive pages -
         | header/footer/navigation
         | 
         | It's great that the content area is simpler, but if I just
         | typey-typey for the blog post and then have to manually create
         | backlinks and the RSS feed item then forget it.
         | 
         | There is such a thing as _too_ simple.
        
         | jl6 wrote:
         | IMHO blogs are documents, and HTML is no longer designed for
         | documents but web applications.
         | 
         | Blogs need to go back to document publishing formats.
         | 
         | I'm switching to PDF/A: https://lab6.com/0#page=2
        
       | lawwantsin17 wrote:
       | Cool. But yellow on green is more readable?
        
       | chiefalchemist wrote:
       | How does this play with Assistive Technology?
        
       | lrossi wrote:
       | Even simpler: serve txt files. Browsers display them just fine.
        
       | meisel wrote:
       | Agree that static blogging is nice, but I think this specific
       | look needs some tweaking - for example, there's too low contrast
       | in color between the links and the background at
       | https://inoads.com/blog
        
         | zbrozek wrote:
         | I had to copy all the text out into a text editor to be able to
         | read the article, not just the links. Contrast is out of vogue
         | I guess.
        
           | hedora wrote:
           | I don't understand the current fashion of making everything
           | off-gray on off-gray. I guess it keeps designers employed.
        
             | conductr wrote:
             | Hypothesis: Whenever you're building it, you spend hours
             | looking at it, and want to reduce harshness of contrast.
             | The reader is only going to spend 5 minutes and prefers
             | contrast as it allows quick scanning of the text.
        
         | mmackh wrote:
         | Thanks for the feedback. The colour scheme uses
         | https://ethanschoonover.com/solarized/ as a foundation. This is
         | how I have all my editors / IDEs set. I'll look at implementing
         | this next: https://developer.mozilla.org/en-
         | US/docs/Web/CSS/Media_Queri...
        
       | varajelle wrote:
       | What I think is missing for static blogs are comments.
        
         | demifiend wrote:
         | I can't and won't speak for anybody else, but if I wanted to
         | provide random strangers with a free soapbox I wouldn't bother
         | with a static blog. I'd just fire up a new Fediverse instance.
         | 
         | IMO, there's no need for comments. If people can't either send
         | you an email or quote your blog with a link in their own blog,
         | then they probably don't have much of value to say.
        
       | martinsb wrote:
       | How well is this handled from the accessibility point of view? I
       | imagine that wrapping text in consecutive "p" tags is
       | semantically clearer, however on the other side it shouldn't be
       | too hard for any accessibility software to recognize this pattern
       | described in the article.
       | 
       | EDIT: some wording changes.
        
       | chinathrow wrote:
       | I think you have the year off by one (2020) on your datestamp.
        
         | mmackh wrote:
         | Thank you, completely missed this.
        
       | john-doe wrote:
       | If you're into the monospace look, .txt is cool too.
        
         | Ryan_Goosling wrote:
         | epic
        
         | giantrobot wrote:
         | For the web plain text is pretty terrible. Web browsers are
         | terrible plain text readers, mobile browsers doubly so.
         | 
         | Browsers render content in a "viewport". On the desktop the
         | viewport width is the width of the window but on mobile
         | defaults to 960 CSS pixels (pixels adjusted for screen DPI).
         | When a page is rendered it's as if the browser window is 960px
         | wide. This can be controlled with the viewport meta tag where
         | you explicitly tell the browser the viewport is the window
         | width, on desktop browsers that doesn't change anything but
         | mobile browsers use their screen width rather than the default.
         | 
         | When it comes to plain text there's no way to tell the browser
         | to do that. So if the plain text doesn't have a hard column
         | wrap it's rendered as if it's in a 960px wide window. If it
         | _is_ hard column wrapped it 's probably to some common terminal
         | width like 40 or 80 characters. At 80 characters the default
         | font size ends up causing really awful wrapping in the
         | viewport. Pinch to zoom doesn't change the font size but the
         | viewport magnification do that doesn't help readability.
         | 
         | You also lose hyperlinks and in-line images. The web could do
         | with fewer stupid images bulking up pages but without
         | hyperlinks you don't really have a web. Putting all links at
         | the bottom of a document HN style isn't a great solution.
         | Visitors still need to copy and paste links which is a pain in
         | the ass at best and inaccessible at worst.
         | 
         | If you want a monospace "look" just put 'body {font-
         | family:monospace;}' in a style tag and you're all done. You get
         | all the benefits of a real HTML document and the terminal chic
         | of a monospace font. Don't waste everyone's time with plain
         | text on the web.
        
       | heroku wrote:
       | I've built the simplest static site generator.
       | https://github.com/eguneys/jener
        
       | throwaway4good wrote:
       | So instead of a body tag you have a code tag?! Is that next gen?
        
       | Ennea wrote:
       | That <date> tag you are using does not exist in the specs. You
       | may want to change that to <time>.
        
       | Ryan_Goosling wrote:
       | So I'm guessing this isn't accessible for screen readers?
        
       | chacha2 wrote:
       | It would be nice to read a static blog that talks about more than
       | creating a static blog.
        
       | thotsBgone wrote:
       | > The experience to writing this blog entry is very similar to
       | using a dedicated word processor
       | 
       | Except for the fact that a word processor does more than break
       | lines. For example, when you type ", your word processor will
       | convert this to a left opening quote or a right closing quote
       | based on context. But the " in this article are still ". I guess
       | they could have used a word processor after all.
        
       | rayrag wrote:
       | So, instead of using semantic html and css like 'white-space:
       | pre-line' and 'max-width: 40ch' author wrapped content of his
       | blog post into 'code' tag and called it 'next-gen'. What is
       | 'next-gen' about it? Either I am missing something or I'm not
       | drunk enough. Worst thing it has 100 upvotes :/
       | 
       | >Simplicity is key
       | 
       | This isn't simplicity...
       | 
       | I need a beer.
        
         | rpdillon wrote:
         | The CSS the author uses (style.css) has both 'white-space: pre-
         | line;' (line 6) and 'max-width: 640px;' (line 18).
         | 
         | https://inoads.com/style.css
        
           | rayrag wrote:
           | Then he could use div tag instead of code tag but then it
           | wouldn't be 'next-gen' I assume.
        
         | ilovefood wrote:
         | I wholeheartedly agree with you but there isn't any amount of
         | beer or misuse of standard HTML tags that could fix this. It
         | kind of anti-resonates a lot with the other post currently on
         | the front page "Woo for its own sake". It also shows how the HN
         | crowd is split in two, those who like this kind of stuff and
         | those who don't. For my part and in my day job these are the
         | kind of things that I actively fight against. As a fun exercise
         | I still appreciate OP's effort for trying out something new,
         | it's always welcomed and I think this forum is all about that.
         | However, I don't agree with the clickbaity title techniques. I
         | hope it doesn't normalize the practice here otherwise I'd throw
         | in some Vodka as well :)
        
       | susam wrote:
       | Note that closing </p> tags are optional _+_ , so one can be an
       | HTML purist and still write a decent HTML document with a
       | relatively clean markup like this:                   <!DOCTYPE
       | html>         <html lang="en">         <title>Lorem Ipsum</title>
       | <h1>Lorem Ipsum</h1>         <p>         Lorem ipsum dolor sit
       | amet, consectetur adipiscing elit.         Duis id maximus
       | tortor. Sed nisi ante, fermentum vel nunc         et, tincidunt
       | sagittis magna. In ultrices commodo lacus, id         tristique
       | ipsum euismod laoreet.         <p>         Maecenas at neque
       | posuere, aliquet erat at, vehicula est.         Duis aliquet elit
       | et arcu laoreet, id pulvinar eros pretium.         Quisque
       | consectetur, enim semper facilisis feugiat, velit         sapien
       | semper arcu, eu mollis libero est et odio.         <p>
       | Curabitur fringilla interdum ante vel ultricies. Mauris
       | volutpat nisi sed turpis elementum elementum. Mauris nec
       | eleifend lorem. Sed ac vulputate libero.
       | 
       | A valid HTML5 document does not require _+_ explicit  <head>,
       | <body>, or the closing </p>, </html> tags. See the spec for
       | optional tags at
       | https://html.spec.whatwg.org/multipage/syntax.html#optional-...
       | for more details. Similarly, the markup for lists and tables can
       | be cleaned up too because the closing </li>, </tr>, </th>, </td>
       | tags are optional _+_.
       | 
       | Note that the opening <html> tag is optional _+_ too but I
       | retained it in the above example to specify the lang attribute
       | otherwise the W3 markup validator warns,  "Consider adding a lang
       | attribute to the html start tag to declare the language of this
       | document."
       | 
       |  _+ These tags are optional provided certain conditions are met.
       | See the spec for full details. In practice, one rarely has to
       | worry about these conditions._
        
         | chrismorgan wrote:
         | And since we're talking about optional things:
         | <link rel="stylesheet" href="/style.css" />       <meta
         | name="viewport" content="initial-scale = 1.0,maximum-scale =
         | 1.0" />
         | 
         | Trailing slashes on HTML tags are useless. They're _allowed_ on
         | void elements, for XML compatibility, but are by definition
         | simply ignored. I recommend against including them, because
         | they're simple visual noise, and misleading because they don't
         | actually close tags--you can only use them on on elements that
         | are defined as having no children.
         | 
         | (Note that I say _HTML_ tags; on foreign elements--meaning
         | inline SVG and MathML--trailing slashes _do_ make tags self-
         | closing, XML-style.)
         | 
         | Also since I'm writing, that viewport declaration is wonky. It
         | should have device-width, and it should not have maximum-scale
         | which is user-unfriendly.
         | 
         | All up:                 <link rel="stylesheet"
         | href="/style.css">       <meta name="viewport" content="device-
         | width,initial-scale=1">
         | 
         | And for completeness,
         | https://html.spec.whatwg.org/multipage/syntax.html#elements-...
         | defines void and foreign elements.
        
         | kubanczyk wrote:
         | > the opening <html> tag is optional too but I retained it in
         | the above example to specify the lang
         | 
         | > <html lang="en">
         | 
         | Yeah, no. The text is in Latin (la), not in English (en).
        
           | susam wrote:
           | ~Any references to support your claim?~
           | 
           |  _[Edit: I notice now that the content is indeed written in
           | Latin. It contains the "Lorem Ipsum" placeholder text. Nice
           | catch! :-)]_
        
             | Natfan wrote:
             | To be fair, you _did_ write your post in Latin:
             | 
             | > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             | 
             | > Duis id maximus tortor. Sed nisi ante, fermentum vel nunc
             | 
             | > et, tincidunt sagittis magna. In ultrices commodo lacus,
             | id
             | 
             | > tristique ipsum euismod laoreet.
        
               | teekert wrote:
               | Hmm I always thought lorem ipsum was a text with letter
               | usage histograms similar to English, without distracting
               | the reader with meaning. I could have sworn I read that
               | somewhere...
        
               | spijdar wrote:
               | Lorem ipsum is words/phrases copied from one of Cicero's
               | writings, "De finibus bonorum et malorum". It's not a
               | straight copy, kind of like if you copied every other
               | word in places, but it's definitely Latin.
               | 
               | It does likely have relatively similar usage patterns to
               | English in terms of letter distribution, if only because
               | they're both indo-european languages and English has deep
               | vocabulary ties to Latin through Norman influences.
        
               | pvorb wrote:
               | This is true. And still it is (nonsensical) Latin. It's
               | chosen because Latin looks quite similar to English text.
               | They use the same alphabet and word length tends to be
               | similar.
        
               | zwog wrote:
               | You are almost right: The distribution of letters and
               | length of words is similar to that of the Latin language.
               | But it is not Latin and the text does not make sense.
               | It's gibberish.
        
               | datapolitical wrote:
               | Those are Latin words, drawn from a Latin source.
               | 
               | "Pencil what comma building twenty section human fedora"
               | 
               | is English, even if it makes no sense.
        
               | thotsBgone wrote:
               | The words are English words, but many would argue it's
               | not an English sentence.
        
           | brodie wrote:
           | la-gb? (Latin, Gibberish?)
        
         | galaxyLogic wrote:
         | This is great point. Doesn't it mean that "markdown" is kind of
         | redundant ?
        
         | tannhaeuser wrote:
         | That's right, but it's probably more interesting that HTML 5
         | simply hard-coded these rules based on the tag inference
         | features of SGML and the particular per-element tag omission
         | indicators of HTML 4 and earlier SGML DTDs for HTML (see links
         | on how head and body elements in your example document are
         | inferred by SGML in detail).
         | 
         | [1]:
         | https://www.youtube.com/watch?v=jy-b4jeJSas&list=PLQpqh98e9R...
         | 
         | [2]: http://sgmljs.net/blog/blog1701.html (the "Talk" link for
         | slides)
        
         | fsiefken wrote:
         | It would be valid, but wouldn't Google penalize it for being
         | poor html?
        
         | still_grokking wrote:
         | Please never ever break XML compatibility!
         | 
         | Not having valid XML in the first place complicates any further
         | processing quite a lot. Also you're going to run into annoying
         | and / or strange issues with tooling.
         | 
         | Those HTML shortcuts are just not worth it. Their value is
         | "questionable" (to put it kindly) but down the road their cost
         | can become surprisingly high.
        
         | cwackerfuss wrote:
         | Frontend developer here --
         | 
         | Although you could omit the closing tags, I don't see the
         | benefit of doing so. If you know HTML, nesting is fundamental
         | and not explicitly closing dom nodes would lead to confusion.
         | You would also need to concern yourself with the "certain
         | conditions" that must be met for it to work. Consistency and
         | clarity over brevity!
        
           | breck wrote:
           | The man who collects rocks in his pockets eventually drowns.
        
           | majormjr wrote:
           | Especially with HTML as it's going to get minimized and
           | hacked up to reduce the filesize. Including the closing tags
           | makes the transpilers job easier and less error prone.
        
             | susam wrote:
             | A transpiler that gets confused when optional tags are
             | missing (a feature explicitly allowed by the spec) is a
             | broken transpiler and it needs to be fixed. This is like
             | the automatic semicolon insertion of JavaScript
             | debate[1][2] all over again. These things are spelled out
             | in the standards and tools that do not adhere to the
             | standards are broken.
             | 
             | [1] https://web.archive.org/web/20201206065632/http://inimi
             | no.or...
             | 
             | [2] https://blog.izs.me/2010/12/an-open-letter-to-
             | javascript-lea...
        
           | chrismorgan wrote:
           | I write plenty of HTML by hand, for myself. I prefer to omit
           | things like </p>, </li>, </td> and </tr>, because it takes
           | less effort (and I hate text editor plugins that
           | automatically add closing delimiters of any form, because
           | they _always_ do the wrong thing a meaningful fraction of the
           | time in a way that I have to think about, more than if I just
           | type the delimiters myself, though an accurate "insert at the
           | cursor whatever is needed to close the last thing" shortcut
           | might be handy), and reduces visual noise.
           | 
           | I also normally omit quotes on attribute values if correct to
           | do so.
           | 
           | I mostly do these things when working on things of my own,
           | when I know no one else needs to worry about them. When
           | working on things others will touch, I don't drop quite as
           | many closing tags, and will normally leave attribute values
           | quoted.
        
             | alpaca128 wrote:
             | > I hate text editor plugins that automatically add closing
             | delimiters
             | 
             | Glad I'm not the only one. The less an editor does
             | automatically to "help" me the better. I agree, a shortcut
             | to close the last opening syntax element would be nice, but
             | for this to work properly the editor needs to be aware of
             | how all the syntax elements interact, e.g. to differentiate
             | between '<' used in a logical comparison and the same
             | symbol as start of an XML tag. Or to correctly close an XML
             | tag no matter if it has attributes.
             | 
             | I have a shortcut in Vim for three different kinds of
             | brackets but it's a bit janky. Still better than the
             | automatic stuff the typical IDE and modern editor does
             | without asking, though.
        
           | susam wrote:
           | I am not a frontend developer. I agree with you. I write my
           | blog posts with handwritten HTML because that is how I began
           | writing blog posts many years ago when Markdown was not as
           | popular as it is now. Indeed I never omit any optional tags
           | while writing my blog posts or blog layout.
           | 
           | I am not necessarily recommending that one should omit the
           | optional tags. However, it is worth noting that the option to
           | do so while conforming to the HTML5 spec is there. The
           | "certain conditions" are not really much to worry about. I
           | think they are drafted quite carefully and are quite
           | sensible. If one is writing simple HTML documents, say, for
           | blog posts, text-based articles, etc. one can safely omit the
           | optional tags without running into issues due to the "certain
           | conditions".
        
       | ms123 wrote:
       | I've been using this technique on midnight.pub as well, and it's
       | working surprisingly well.
        
       | Priem19 wrote:
       | I applaud that simplicity seems to be trending, but the benefits
       | of not having paragraph tags don't seem to outweigh the
       | downsides. It's not that big of a deal, and it enables reader
       | mode.
       | 
       | Leaving as much as possible left to default is what I prefer; it
       | supports the greatest number of browsers and assume is the
       | fastest. https://www.quitfacebook.org/file/play.html
        
       | Scaevolus wrote:
       | Many static site generators, including Hugo and Jekyll, have file
       | watching support and even automatic page reloads, so their
       | workflow is barely different from editing raw html. You have to
       | jump through some more hoops for raw html, but I expect you save
       | time overall.
        
       | ffpip wrote:
       | Your site is too hard to read on. Make the color of the font
       | darker or the background lighter please.
       | 
       | I had to copy to a notepad so I could read it.
       | 
       | Edit:
       | 
       | Apparently, dark mode users get this -
       | https://i.imgur.com/5PHYac1.png
       | 
       | I get this - https://i.imgur.com/5PHYac1.png
       | 
       | Light mode is terrible, dark mode is okay. Please increase the
       | contrast in both places.
        
         | city41 wrote:
         | You linked the same image twice. I'm curious what the other
         | image was.
         | 
         | edit: nevermind, switched to dark mode using the dev tools. It
         | looks like this just to be complete:
         | https://i.imgur.com/qPv7guO.png
        
         | bhauer wrote:
         | Lower the contrast? Strongly disagree. Its use of gray text on
         | a dark blue background is pretty common. If anything, the
         | contrast is too low; I'd brighten the text if I were the
         | designer. But it's readable.
         | 
         | In my opinion, what makes it a bit difficult to read is the use
         | of a fixed-width font for body text. Fixed width is great for
         | code, but proportional-width fonts are easier for reading
         | prose.
        
           | mixedmath wrote:
           | There is an interesting thing happening here. It appears the
           | colors on the site are largely either similar to solarized-
           | light or solarized-dark, depending on whether the user's
           | browser has a dark-preference or not.
           | 
           | The OP comment evidently looks at the light version (which is
           | grey text on tan background, and which I also find a bit
           | annoying to read). I would guess that the parent comment is
           | seeing the dark-mode version.
        
           | susam wrote:
           | I agree with ffpip's comment. I too found the contrast to be
           | too low for my comfort. Here are the colors used for the body
           | element in the CSS (see https://inoads.com/style.css):
           | background-color: #FDF6E3;       color: #657B83;
           | 
           | Now plug those values into
           | https://webaim.org/resources/contrastchecker/ and we can see
           | that this color scheme fails even the WCAG AA check (see
           | https://i.imgur.com/iK7FRfU.png for a screenshot). I think
           | the WCAG AA is the absolutely bare minimum accessibility
           | guideline any color scheme should conform to, otherwise we
           | risk making the text hard to read for many people just like
           | the text in this website is hard for me to read.
        
             | bhauer wrote:
             | Ah, it seems this site is aware of my preference for a dark
             | color scheme.                   @media (prefers-color-
             | scheme: dark) {           /* defaults to dark theme */
             | body {             background-color: #002B36;
             | color: #AAA;           }         }
             | 
             | You are seeing the bright color scheme and I am seeing the
             | dark. So when ffpip said either "darken the text or
             | brighten the background," and I'm looking at the _dark
             | theme_ , that would mean _reduce the contrast_.
             | 
             | I think we're all of the same opinion: the contrast
             | should/could be higher.
        
               | susam wrote:
               | Ah! That makes sense. Indeed you had mentioned in your
               | comment:
               | 
               | > Its use of gray text on a dark blue background is
               | pretty common
               | 
               | That should have been a clue for me that you were seeing
               | the dark color scheme.
        
         | _4570 wrote:
         | You can do that yourself as a one-off change using the web
         | tools. On Chrome, just right click on some whitespace and click
         | inspect. On the bottom right, you'll find an option to the
         | change the background color of the body section. There's
         | something similar on firefox as well.
         | 
         | (ideally, the website should get the fix rather than you doing
         | it... but this works better than notepad!)
        
       ___________________________________________________________________
       (page generated 2021-01-09 23:01 UTC)