SuperHTML is here to rescue you from syntax errors, and it's FOSS
- Reference: 1729679229
- News link: https://www.theregister.co.uk/2024/10/23/superhtml_live_html_syntax_checking/
- Source link:
[1]SuperHTML is a language server that talks to compatible code editing apps over the [2]Language Server Protocol (LSP). What that means is that you can plug it into Visual Studio Code – or many other [3]LSP-compatible editors , from Emacs to Kate to Vim. Or, if you prefer, run it as a standalone tool from the command line. It can also reformat your HTML for you.
That means live on-the-fly validation, and autocorrect for HTML5, as you type. Its author [4]believes this is a first , and that it's also the first built in [5]Wasm using WASI . Live HTML checking isn't unique – his blog post notes that Jetbrains' WebStorm can do it, for instance – but doing it in FOSS in a cross-editor compatible way is.
[6]
In a distant and better-forgotten era, The Reg FOSS desk built his homepage in flat static HTML because that is just how things were done around 1996 or so. Even then, we used various web page editors such as what LowEndMac called the [7]irreplaceable Claris Home Page . Syntax checking was largely limited to "does it look right in the WYSIWYG preview?" and occasionally "why is my browser crashing?" But even this doddering web geriatric recognizes that such approaches don't cut the mustard as we approach a quarter of the way through the 21st century.
[8]
[9]
This also struck SuperHTML's author, who describes what he calls the [10]Static Site Paradox : if you want to host your own website, it's considerably easier to use…
a complex CMS written in PHP that requires a web server, multiple workers, a Redis cache, and a SQL database. The site also has a big frontend component that loads as a Single Page Application and then performs navigation by requesting the content in JSON form, which then gets "rehydrated" client-side.
As opposed to:
a collection of static HTML files and one or two CSS files. No JavaScript anywhere.
[11]Want to feel old? Excel just entered its 40th year
[12]Big browsers are about to throw a wrench in your ad-free paradise
[13]Windows 7 finally checks out as POSReady 7 closes the till on an era
[14]Opening up the WinAmp source to all goes badly as owners delete entire repo
As he notes, you'd expect that uploading a couple of files to a folder somewhere was the simple approach for a non-techie, whereas an expert would go for the complex but theoretically scalable approach. In fact, today the reverse is true. It is still possible, and occasionally, people still do it, as a very techie [15]acquaintance of this vulture [16]recently demonstrated … but it is sadly rare.
We rather fear that live syntax validation as you hand-code HTML is one answer to this, but on its own isn't sufficient. But we really wish it were – and we would be very happy to be wrong.
As we have described before, there are still some ultra-lightweight web browsers out there, such as the [17]recently revived Dillo . Since that article, Dillo received another update, to [18]version 3.1.1 , which coincidentally brings its version number to parity with the [19]latest NetSurf . Perhaps someone somewhere could resurrect a competition for the tiniest and simplest fully functional website, in the spirit of [20]the 5k and the later [21]10k Apart contest. ®
Get our [22]Tech Resources
[1] https://github.com/kristoff-it/superhtml
[2] https://microsoft.github.io/language-server-protocol/
[3] https://langserver.org/
[4] https://kristoff.it/blog/first-html-lsp/
[5] https://www.theregister.com/2019/03/29/mozilla_wasi_spec/
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/applications&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2ZxkdptJudNbAEDmQc2y-eQAAAAI&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[7] https://lowendmac.com/2003/claris-home-page-3-0-still-irreplaceable/
[8] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/applications&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44ZxkdptJudNbAEDmQc2y-eQAAAAI&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[9] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/applications&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33ZxkdptJudNbAEDmQc2y-eQAAAAI&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[10] https://kristoff.it/blog/static-site-paradox/
[11] https://www.theregister.com/2024/10/22/excel_enters_its_40th_year/
[12] https://www.theregister.com/2024/10/21/ublock_firefox_chrome_issues/
[13] https://www.theregister.com/2024/10/16/windows_7_eol/
[14] https://www.theregister.com/2024/10/16/opensourcing_of_winamp_goes_badly/
[15] https://www.revk.uk/
[16] https://toot.me.uk/@revk/113345479911192823
[17] https://www.theregister.com/2024/05/07/dillo_browser_v3_1/
[18] https://github.com/dillo-browser/dillo/releases/tag/v3.1.1
[19] https://www.netsurf-browser.org/about/news
[20] https://www.the5k.org/about.php
[21] https://a-k-apart.com/index.html
[22] https://whitepapers.theregister.com/
Thank you for the point on attack surface.
In the fight to present information and a lack of actual nugatry HTML skills, the CMS is king, along with all of it's complexity and unecessary libraries and so on.
I used Dreamweaver and other IDEs back in the 90s and 00s to great effect, in fact I'm even considering posting a new website, full of my own drivel, but driven by static pages with a sprinkle of PHP for certain functions, but by no means massive attack surface.
Groundbreaking in it's return to a more simple time....... :) Maybe!
As long as I get to keep SSI with those static pages as in HTML4 so that you can include a header and footer (so that the design of the web page is separated from the content) then i'm all for it.
Right... I'm adding 'Dreamweaver' to the reg forum trigger words list....
I've written more than enough HTML in my own time to know that you need code completion as a bare minimum to get anything done and that was before it became necessary to make things pretty and all the hacks started appearing. Once we got away from using frames and tables for layout, the HTML itself became reasonably manageable but you really had to be good at CSS. Then came all the dynamic stuff for processing user input, etc. and this is when you really do start to need some kind of client + server approach, especially given the inherent restriction in http making it extremely difficult to provide the kind of feedback users need, especially after Microsoft successfully drove HTML development into a ditch for a few years. This led to an explosion in client-side scripting in Javascript and eventually into entire applications running in the browser, effectively bypassing the HTML process.
Things have sort of gone full circle since then, especially now we have some kind of persistent communication between client and server so that most work on the server is based around the data model with more or less tight-coupling with a client-side library which handles screen updates. This, ironically, means that HTML can be kept truely minimal and easy to work with, though for larger projects you'll probably want some kind of templating.
I've been away from website development for a while but have a couple of projects I'm looking forward to: some kind of static website generator like Jekyll, etc. for my ramblings; and a migration from Tumblr to Ghost. I've no great interest in Tumblr's content, but it's an excellent mobile client and we've used it for a few travel journals as an alternative to < pick the network that people have to join >. But now, along with the ads, people have to login to read our shit and posting image sets from the phone is beyond most static site generators…
[Author here]
> But has this really never been done before?
This isn't really my area -- I did without it and checked a preview pane -- but as I understand it, yes, it's been done before, but only in proprietary ways in proprietary tools. This is FOSS and works with any editor that speaks LSP, which includes dozens of them, old as well as new.
El Reg's editors were quite excited when they read my piece when I filed it. :-)
KISS
Keep It Simple, Stupid
I wish...
I had this years ago. The small amount of my content creation was purposely limited to html, CSS ( no javascript) so a tool like this would have been invaluable.
Trying to secure a web service that required the panoply of PHP, CGI, *sql etc etc for a CMS or a wiki, was a bridge too far - requestors were told to go to WordPress (or to buggery - if there's a difference.) No breaches and users often discovered there is a lot you can do with static pages and in one case augmented with Makefiles. ;)
Nikola
For my personal, self hosted [1]web site I used to use [2]Blosxom , but it's getting old in the tooth. I recently moved to [3]Nikola , available as a package in Gentoo. It's a Python program that takes as input plain text files with some HTML markup and turns them into more featured HTML. Fortunately importing my old site was pretty easy using the RSS support in Blosxom.
[1] https://wylie.me.uk/nikola/output/
[2] https://www.blosxom.com/
[3] https://getnikola.com/
Re: Nikola
Having little patience and a horrible memory, I didn't even try to find tools to use (poor memory => forever forgetting how to do the things I need to do). So, I just wrote a couple of C programs. "tnall" produced thumbnails (exec-ing a standard Linux image program to do the actual work of course). "mkpage" took a text file that listed the images for the rows on the page, possibly with individual footers, along with the text and header material, and created the static (table-full!) web page. Can't recall when I created the tools - it was a long time ago.
So, I didn't have to learn anything new, and putting up a webpage of images just required choosing the images, creating descriptions, creating the surrounding text, and deciding where it should link into my website. And yes, many would consider the pages ugly. Check the wayback machine for www.graysage.com .
Unfortunately, to keep my ISP from getting unhappy with me, I recently unpermitted most of the directories of pages. I do now have higher bandwidth, but its been over a week and the various crawlers are *still* trying to access now-unpermitted stuff!
HTML+tables+m4
Has worked for decades. The rest is just "fluff".
(... yes my websites look like crap but thats not the point ;)
If you are using tables for layout, may I refer you to shouldiusetablesforlayout.com
Heh, they should now try to center the "No." vertically and still have it render correctly on all browsers. The cowards!
> m4
M4, as in what used to make sendmail.cf _slightly_ less brutal?
Is this some sort of BDSM thing? Mortification of the flesh, for dabbling in the sins of the Web kind of thing?
Yep. And the same processor that makes GNU Autotools so *cough* beautiful to work with.
would like to see a switch back to plain old static HTML
The problem lies not so much with Content Management Systems - when new content is added regularly to a site, nobody wants to have to work with raw HTML to do so, they just want to supply the text of that content. The problem is on the Content Publishing side where every web page served gets dynamically created on the fly for each user. A great many sites that don't change content too many times daily could be made way faster and less bloated by generating new static files every time new content is added, and just serving those up.
Those serving up fancy AJAX pages that dynamically push new content to clients, and other bloated horrors would of course have to stay as they are, but the web in general has far too many over-bloated and poorly performing web sites due to poor technology choices that are completely unnecessary for what is being served up.
Re: would like to see a switch back to plain old static HTML
> they just want to supply the text of that content
I saw a blog post on the Orange Site a couple of years ago that was called "the language of the Web is HTML" or words to that effect.
In essence it said all you needed was HTML, CSS and images.
The Javascript weenies were _up in arms_, aided and abetted by the PHP folks and their acolytes. Livid they were. :-D
Me, I want to dump some Markdown in a folder and have it magically appear on the web, without anything interpreted in anything involved in between. No JS, no PHP, nothing that isn't type- and bounds-checked native code, thankyouverymuch.
I think I also saw sites where someone found a way to directly serve .TXT files over HTTP. Links were the hard bit. I saw a web page constructed without even HTML, and I kinda liked it.
Can't find either again now, sadly.
"generating new static files every time new content is added"
Storing them in some sort of IDK server-side cache ?
I find it very hard to believe that most (all?) CMS's do not offer this option already *
Regenerate-on-demand is a strategy when memory and storage is scarce and processor cycles are quite plentiful. Which might be the case for a web page that's read by millions of viewers simultaneously so you want every resource to be contention-free.
Except do you really have literally one-processor-one-viewer on those massively read sites?
And while sales presentations will no doubt tout this as a benefit who really needs this level of load. IMHO a lot of the time the biggest load on the servers is the CMS itself . The CMS task is starting to look to me more like an enhanced make utility + file system structuring problem.
*Hidden away down the obligatory umpteen levels of menu options head "Other stuff" or something equally uninformative.
I dunno. . .
What that means is that you can plug it into Visual Studio Code – or many other LSP-compatible editors, from Emacs to Kate to Vim. If I have emacs , what more could I possibly need?
Re: I dunno. . .
> If I have emacs, what more could I possibly need?
A usable, ergonomic user-interface that looks like it's at least from the 1990s?
Re: I dunno. . .
I was mostly joking with that comment but, admittedly, only mostly .
I don't want to start an editor war but. . .
I develop and maintain a complicated web application that's thousands of lines of JavaScript, HTML, and python 1 and do it all with emacs .
I've tried several IDEs and they all just introduced unnecessary complication and generally got in my way.
I find emacs to be as ergonomic as I need it to be -- my hand doesn't need to reach for the mouse every couple of seconds since the CTRL key is right there by my pinkie. CTRL-X CTRL-S is so instinctive that half the time I don't even know I've saved my work
Just for example, show me an IDE that will allow me to split a window vertically or horizontally so that I can look at two (or more) parts of the code at once or pop an entirely new window if need be and I'll be happy to look at it.
Your mileage may certainly vary and if you don't like emacs or like something else better then, well, I'm not in the royal line of succession, so I'm not going to attempt to tell you you're wrong. I like what I like because it helps me get my work done and stays the heck out of my way.
_______________
1 Don't blame me. I inherited it and I've been thinking about a rewrite but the scientists that use it are happy with it and if they're happy, I'm happy.
Re: I dunno. . .
Quote "Just for example, show me an IDE that will allow me to split a window vertically or horizontally so that I can look at two (or more) parts of the code at once or pop an entirely new window if need be and I'll be happy to look at it."
Visual Studio Code lets you do this, just right click on the tab for an open file and select 'Split
Grab any of these tabs, and pull it off the main window, and you now have an independent window, you could then drag this over to a 2nd monitor for example. (and yes, you can split this now separate window).
Making things simple is very difficult
That's basically the issue in a nutshell. It is far, far easier for developers to keep adding things other people have made until it works, than to make it themselves from an empty file. Which is why we have JQuery, Bootstrap and a million other frameworks that take you one step away from the actual website , and why those sites we have 25 nested DIVs where one would do.
I'm also going to put up my hand and say there's nothing wrong with JS. Simple JS is all you need for things like rolling quotes from customers, auto-generated indexes of blog article and so on. If you need that stuff, it can all be done client side easily enough. The problem comes - again - when you buy into the framework-du-jour to do this, which locks you into a process that is "making things simple" in a complicated way.
I had an email from a potential customer a few months ago asking if we could do some processing on his website, and sent me a sample page. Flat content clearly generated from data server-side, but no bells and whistles on the page itself. It was delivered with over 1MB of CSS , minified of course "for speed" so you wouldn't benefit from any cross-site caching. Absolute nightmare. Who was it that said when sculpting your start with a block of stone and stop when you've revealed the statue within? Websites, apparently, work the other way - start with nothing and keep adding things until you have something approximately the same weight and utility as a block of stone.
a collection of static HTML files and one or two CSS files. No JavaScript anywhere.
Damn. I've been doing it the hard way. Apparently.
Vanilla web site
I run one that's basically HTML and CSS (with a few server side includes of various .txt files so lots of stuff can just be uploaded as plain .txt files, though as all content in the .txt files is rendered as HTML any HTML markup will get processed. *)
This is for a club I am on the committee of and I update all the league & cup results and tables & so site can be nice and simple.
I have some simple code thats allow automated markup creation and upload of results / tables to the website based on results that are sent in to me (obviously, as the time spent automating saves hours and hours of hand crafting markup in the long term, relies on correct format used by people sending in results )
So, no JS anywhere, all works fine, only attack service is FTP access to the web server (plus chance of zero days / config issues on the hosting server - its not my server that hosts it, so no control over that)
Unfortunately have to use such stuff as react, angular etc. in day job, so club website makes a nice change to deal with a simple, streamlined site that loads & renders "instantly" & pulls in nothing from CDNs or similar & works for people with JS disabled & will work on any browser (within reason, e.g. if you unearthed a fossil such as original pre CSS being a thing Mosaic browser then layout might look a bit odd as CSS would not work, but nothing would actually break & all content visible ).
* If other committee members want to update content on the general information pages they can just upload appropriate .txt files via FTP (I have a little front end that makes it easy) - and as they aware that HTML is supported some use their own HTML editors to format the text (sadly, one person uses word and its ability to export / save as HTML, which creates awful markup)
"a complex CMS written in PHP that requires a web server, multiple workers, a Redis cache, and a SQL database..."
And presents and attack surface the size of a planet - I leave debate as to which planet as an exercise for the reader.
Of course, cranking raw HTML in Notepad never had any fancy language server malarkey, and I hope this doesn't give micros~1 any silly ideas. But has this really never been done before? I could have sworn Dreamweaver did some kind of code completion etc back in the earthy 2ks, but that was 20 years ago and I could easily be wrong. I do recall using an HTML validator before upload on some sites, but of course that wasn't live - more akin to a code / compile/ debug loop.
As for static pages, I'm all in favour. Simple is better, and usually faster, too.