Here’s a sneak peek at the new Site.js web site/page for the next version of Site.js.

No frameworks or build systems for such a simple thing. Just hand-written HTML, CSS, and JS. All minified and packaged up as a single 146KB HTTP request currently being served from my laptop at home:

dev.ar.al

When I say Small Web, I mean *small* ;P

PS. If you notice any issues, typos, etc., please do let me know.

(Depending on when you hit it, I might have turned the server off.) :)

Just a quick heads-up, I’m about to start working on it again so the link above may be on/off/broken/mid-development, etc. Feel free to keep peeking if you like – just know that’s the URL I expose via ngrok and use when testing stuff locally :)

Show thread

PS. If you notice any issues with the site and want to let me know or just want to see how it gets bundled together or anything, the source code is here: github.com/small-tech/sitejs.o

Show thread
Follow

Think I’ve worked out the remaining kinks in the layout of the site. Also, it’s now one 117KB request not 146KB, since I moved syntax highlighting of code to build time and don’t have to include highlight.js.

Let me know if you notice issues :)

dev.ar.al

@aral I reckon I can squeeze a few bytes out of those SVGs if you're interested?

@Edent Hah, thanks. I think I’m good for now. I do want to actually work on the curves in the header image when I have some time but have a few bigger fish to fry right now :)

@aral Nice reduction!
However, nothing seems to be copied to the clipboard at all when clicking on code examples now in Chrome Version 85.0.4164.4 and Firefox Nightly 78.0a1 (2020-05-22), both on Windows, nor in Firefox Focus for Android.

Also, not sure if it is related, but the console shows this a log statement for "displaying instructions for windows" combined with the definition (?) rather than the results of querySelectorAll():

@aral ah! Looks like your code examples are now only wrapped in <pre> tags, and no longer in <pre><code>, so your script to add the event listeners is now longer finding the right elements as it searches for the css selector 'pre code'. :)
I guess this is related to you moving the syntax highlighting from highlight.js to a compile time solution.

@FiXato Hmm, will look into it tomorrow, thanks. The clipboard and permissions APIs (especially the latter) seem to be rather sketchy.

@FiXato Ah, I see what happened: it’s a bug in my build script. Will sort that out tomorrow. Thanks again, appreciate the help :)

@FiXato Heya, I should have fixed the issues you ran into and I also updated the WebSocket example and the syntax highlighting is much better now (with mixed language examples getting far better treatment) :)

@FiXato (I have dev.ar.al on; about to call it a night but will leave it on in case you want to take a look) :)

@aral unfortunately I'm quite knackered by now, but I'll have a look tomorrow!

Copying code samples at least works on my desktop browser now :) (both the selection as well as the full sample copy options)

One thing perhaps worth noting btw, based on your earlier post about Windows CLIs and the annoying BOM characters:
Even though you suggest Windows Terminal with Power Shell, you'll still get the BOM character in it when forcing UTF8 encoding, at least on PS versions older than PS7.

@aral

For example, with PS7 (aka #PowerShellCore):
echo 'Hello, world' | Out-File -Encoding UTF8 .\helloworld.txt && C:\cygwin64\bin\file.exe .\helloworld.txt
.\helloworld.txt: ASCII text, with CRLF line terminators

However, with PS6:
echo 'Hello, world' | Out-File -Encoding UTF8 .\helloworld.txt; C:\cygwin64\bin\file.exe .\helloworld.txt
.\helloworld.txt: UTF-8 Unicode (with BOM) text, with CRLF line terminators

(yes, I actually had to use ; rather than && because PS6 doesn't support it...)

@aral so it might be a good idea to explicitly recommend #PowerShell 7, which would also mean you can just use > again, since PS7 actually handles that fine too now:

PS6:
echo 'We got the æ, ø, å' > .\helloworld.txt; C:\cygwin64\bin\file.exe .\helloworld.txt
.\helloworld.txt: Little-endian UTF-16 Unicode text, with CR line terminators

PS7:
echo 'We got the æ, ø, å' > .\helloworld.txt; C:\cygwin64\bin\file.exe .\helloworld.txt
.\helloworld.txt: UTF-8 Unicode text, with CRLF line terminators

@aral (caveat: it *might* be that this isn't default behaviour, as it is possible that I've tweaked some environment settings in the past to improve unicode support. e.g. I am not use if codepage 65001(UTF-8) actually is default, or if I changed it for cmd.exe in the past and that carried over...)

@aral sent in a PR for the aforementioned typo in the </body> closing tag in the examples (also noticed a similar issue with </h1> at the same time).

Sign in to participate in the conversation
Aral’s Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!