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:

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:

Show thread

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 :)

Show thread

@aral I'm seeing some lack of spacing in Firefox Focus on my Android phone:
(Not the invisible spaces in "View the source of the Linux and macOS[ ]and[ ]Windows installation scripts.")

Also, one of your examples misses a / in the </body> closing tag:

Also, tapping on the code examples will only copy up to where you tapped, or even just fragments, so you have to tap at the last word of the code example.

@aral another typo:
"To run that example with a basic web interface, first [close] the Site.js source code repository:"
I guess that should be 'clone'.

@FiXato Thank you :) About to hit the sack but will look into fixing both of those tomorrow.

@aral no problem, sleep well!
I'd fix it myself via a pull request, but I'm using my phone atm and don't have the spoons to deal with GitHub's cumbersome mobile web editor. ;)

@aral trying to come up with a good micro topic to use for a site.js based spot. Just for the heck of it even if I have written out .html files before :D

@aral wow! That's looking great. I notice the Github links, why not link to your own Gitlab?

@Jelv Thanks.

I’m linking to Github so that people can open issues and pull requests. You can’t do that on our own canonical repository as we don’t have registrations open on our GitLab instance. (And we don’t have registrations open because I don’t want our GitLab to become yet another centralised hub. In time, my goal is to build a decentralised means of opening issues and issuing pull requests into personal sites built with Site.js.)

@aral cool I understand. The site is a great improvement, hope this will launch the interest in Site.js.

@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 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.


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:

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

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).

@aral Now create a business that ships pre-configured Raspberry Pis with site.js you just plug into your Router and boom! you have a website. If things keep small almost any decent Internet-connection will handle the traffic.

@aral I actually might just try this as I have a spare Raspi around.

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!