Small is Beautiful livestream #2

Our recent work at Small Technology Foundation

This video was live-streamed on the 7th of January 2021 at 5pm Irish time.

We talked about Laura’s work on Better Blocker and Site.js Hugo templates, Margo de Weerdt’s lovely illustrations for the photo blog template, and Aral’s preliminary work on Place – the fork of Site.js that he’s working on specifically for the Small Web.

Transcript

Aral: Saying ‘go live’.

Laura: I see a ‘live now, click to watch’. It might might crap out a little bit trying to load it whilst playing it, but I will just double check. I think it should be live.

Aral: Can you see it on yours? It’s still loading. Oh, yeah. Yeah, I can see it. Okay, great.

That means that we are live. Hi everyone. I’m Aral Balkan

Laura: and I am Laura Kalbag, and together. We are Small Technology Foundation, a teeny tiny not-for-profit organisation based here in Ireland. He’s upstairs yet again, I am downstairs.

Aral: And this is a weekly live stream that we started right before the end of the last year that we are calling Small is Beautiful, and it’s meant to be a very relaxed, very casual live stream. We are not preparing hugely for the episodes on purpose and the goal is really to give you kind of an update on what we’ve been working on, what we’re doing, and kind of share with you our processes, you know, even how we’re doing this stream, maybe and everything that we’re working on, really. Laura, So do you want to do you want to kick things off with what you’ve been working on in the last year?

Laura: Yeah.

Aral: and currently? Yeah, cool.

Laura: Yeah. So I’ve been quite quiet I guess about what I’ve been working on for the last year because you know that feeling when things just don’t feel like they’re ready yet. And that is not at all how things should be. They’re public repositories, I’m ready to share things. So what I’ve been working on is for Site.js. I’ve been working on a starter theme.

So with Site.js, which is now considered a mature project, we decided to bundle in Hugo, which is a static site generator– might be familiar to some of you–it’s written in Go. And the reason we decided to do that was actually just because our sites were using Hugo as a static site generator, and we were trying to think of ways that people could use Site.js to get up and running really quickly, and having their own website, their own blog or something like that. And so my aim was to make a theme that would make that very easy for people, because right now if you’ve used Hugo, you might be familiar that it is not the ideal setup experience, especially if you’re quite unfamiliar with code, unfamiliar with Terminal, a bit nervous about the idea of using like Go and stuff like that. Even though you really don’t have to touch anything like that.

And so we thought we’d do that. So how about I just show you briefly one of the things that I have done. In fact, I’m going to share my screen and I’m going to show you how I would maybe even got started with Site.js and just going to roll with this, just going completely improvised. So if this is terrible, I do apologise. Helps if there’s nothing on the screen to begin with. Right. So I hope the text is big enough here.

But what I’m doing is I’m just starting in a repository that I’ve already got here running locally. So if I go to Safari, my browser of choice, you see here sitejs.org is where we have the Site.js website, so I’m just going to scroll down. Lovely website that Aral made here, and I’m going to install Site.js.

Now as this says, you shouldn’t just be pasting things into your terminal willy-nilly, but I know that this is okay, and then I’ve got the macOS version up. So I’m just going to go back to my terminal and I’m gonna install Site.js. Now bearing in mind that both of us are currently on our Wi-Fi, two separate streams. So this might take a minute. Ooh, need to put the password in.

Oh, no. [laughs]. Shoulg be able to type it. There we go. So Site.js is now installed. So if I can now run ‘site’, so I just need to run the site command. And what I’ve got is a site running with my theme. I’m just going to scroll that back up so you can see it  if you missed it, because it started running nicely and quickly. So you can see here Site.js: pretty recent version, and what it’s done is it has, using locally-trusted certificates, that Site.js has created, so you’ve got HTTPS running locally right away. It’s created an HTTPS server, so we can run everything locally. Then it started building the site… there’s a little warning there because it’s found no custom CSS. That’s fine. That’s just part of the theme. It’s created 67 Pages. This is all Hugo stuff going on. It’s generated the static files. And it’s watching for changes, and so I can open that now in Safari, and you can see my basic little starter site. Now, this is just an example-like demo that I built using the theme for documentation so that mostly I could actually go and see how to add content to a home page or something like that. And the whole idea of this theme is it’s simple, it’s accessible by default. So I’ve tried to include as many things as possible to make it very easy to author accessible content, make it easy to include alt text for your images, the colour schemes that are included and there’s a dark mode optional as well. And those will have good colour contrast, the typography aims to be nice and readable. Actually, this is looking a bit small, this text right now and partly that’s because the font size that I use in my CSS, I like to base it off the browser’s root size. And a recent update to Safari knocked the basic text size down and so actually the text size is a bit smaller than I would usually prefer for a default site. Here we go. This is just the theme going on here. And then if I go back into my terminal and I’m just going to close this and I’m just going to jump out that folder, and you can’t see what I’m doing because of that StreamYard thingy, just hide that for a second. Oh, no, that’s not what I meant to do.

And then I will go into the photo blog demo and it starts with starter-photoblog-demo, of course. And then I run ‘site.’ Now I could actually, because Site.js is that good, run both of these sites simultaneously locally, which is really useful. I find for me developing particular if I’m trying to test a theme across multiple different types of sites in one go, which I’ve been doing a lot… You can see here actually at the bottom, in the terminal, it’s actually showing some extra Site.js goodies. Like it’s showing that Live Reload is working, the Live Reload is included in Site.js, and it’s also showing that it’s getting a 404 for add-content-to-homepage because it’s not finding the page that was in the documentation demo. It’s showing how quickly it’s loading in everything, and the sizes of the resources, which is really good if you’ve got loads of massive images, and you’re going to get flagged if those images are really big, or if you’ve got things missing and the site is trying to request, and it’s missing that, so that’s another really useful thing that Site.js does.

And so then I can go back into localhost. And this is a photo blog demo, and this is using the beautiful illustrations of Margo De Weerdt, who does these incredible illustrations and very kindly let us use them for this demo. And so the idea is this is pretty similar Hugo structure to a standard Hugo site, but it’s got photos and things like that. And of course all of this is responsive. It’s using CSS Grid so it should be fairly easy for people to just get going and it should work very nicely across lots of different devices.

Aral: And you worked really you worked really hard on this Laura, I know firsthand. And so what are we going to do with it?

Laura: Hang on one sec, I’m just going to stop sharing my screen for a second. So one of the difficult things is we kind of got to the end of last year, and as you discussed in the last stream that we did, you forked Site.js and the idea of Site.js…

Aral: And I’ll talk about that in a second, yeah.

Laura: …and ready to use for these kinds of projects right now and, at that point I was like, well, what am I doing with this theme? So people can use it with Site.js but it’s actually starting to feel, with a photo blog, with all these different types of sites, all these different things. All I really wanted to do was use it on my own site. And one of the… and on the sites that we build… and one of the things that we try to do with Small Tech is ensure that everything we build is something we actually use ourselves and that’s incredibly important to us because we don’t want to be making assumptions for how other people might use our things. We want to make sure it works really well for us and if we’re using it, we’re testing it. And so one of the things that decide to do was you know what, the theme had got too complicated, and part of that is the habit of working on it for such a long time, but it’s also that it’s just got so much configuration in there that I’ve just been trying to make everything work in a multiple different ways. It doesn’t need to be like that, really. It’s not actually useful. It’s much harder to get into… if the whole idea is that we’re trying to build a theme that people can just get in and use right away… If there’s a million different configuration options that you have to work out, that’s not going to make it easier. And so I’ve started now the practice of stripping all the stuff out of the theme and to make it more useful, to make it something I can actually use on my own site as well. And I’m going to use all of my existing kind of fancy colours and typography, and all the stuff, the layouts and stuff  I’ve got but with this theme, which should be very easy to do, to very easy to layer in, but I get all of the goodies that I’ve added into the theme, and that way…

Aral: Um, I guess, Laura. Sorry. What I was hinting to was that originally our plan was to include these themes with a generator inside of Site.js, and part of the reason why you put in all of those weeks of work on this, was that we were going to include it in Site.js, but of course now that we’re taking a slightly different route in that we’re saying, okay, Site.js is actually, it’s doing what it’s supposed to do, right? It was meant to run our sites, and it was meant to be a way for us to make sure that we could build a server that can update itself, so that you can set it up in 30 seconds, kind of as the infrastructure for everything we want to build in the Small Web. But unfortunately of course, that meant that you know, with that decision, we’ve kind of abandoned the whole idea of including these templates that you’ve worked so hard on in Site.js in the future, and supporting it because we really want to also support the things that we put out there. Right? And we’re only two people so, you know, we only have so much time, and so much energy, and so many hours in the day. But I believe you put them live now, is that correct?

Laura: The site themselves aren’t live, but the source code is all accessible in our source.small-tech.org repository. All of my stuff is there, I don’t… do we have a banner for that, Aral?

Aral: Um? A banner for? No, I meant would you mind just showing it in your browser

Laura: Yeah, I will jump to my browser… So if you go to…

Aral: And I we might have a banner for it as well. Let’s see. If not, I’ll make one…

Laura: If you go to source.small-tech.org, you will generally not get the Activity screen. But if you go to source.small-tech.org/site.js/starters okay, you will find all of the projects that we have inside there. We have the starters default, the starter blog demo, the starter theme, some assets for it, and in the archive projects, we’ve got various demos that, most of them should still work pretty well with the existing thing and…

Aral: Is that the correct URL? I just typed in?

Laura: source.small-tech.org/site.js/starters. I can’t see what you’ve done.

Aral: Okay.

Laura: Site dot  JS, yeah.

Aral: Site-dot-JS?

Laura: Yep.

Aral: Okay, I’ll fix that. There we go. I should know this…

Laura: And yeah, and of course we’ve got readmes in there that tell you how to get started with it. I’m pretty pleased with the fact that, in like including installing Site.js, it’s essentially a six-step process to get a basic site up and running, and that’s despite Hugo, because if you’ve used Hugo before, you know, it’s not easy to do that.

Aral: Oh cool. Well… And of course, a huge thank you again to Margo de Weerdt’s, her illustrations for that photo blog are amazing, and check out her site as well… which I’m going to try and find now by probably misspelling her name, but let me just share my screen there, and let’s put that full screen, if I can, there we go. This is her site. This is Margo’s site. Let me just make that a little smaller for you and she’s an amazing amazing illustrator, and she sent us a wonderful calendar as well, an end-of-year calendar. Yeah, that she’s got in her shop over here. So, you know if you want to support an independent illustrator, who you know was very kind and worked with us as well, on our work, and is very supportive of our work, please do. The calendar’s amazing and there’s other stuff there as well. I just love her work. It’s just really gorgeous stuff. So yeah, so a little plug for Margo there because she is awesome.

Laura: I think given that I was talking about Site.js being a mature project, and how we were going move in a slightly different direction, I think that’s probably a good time for you to start talking about what you’ve been working on.

Aral: Yep. I’m going to do that. But before I do, I’m just going to give out the URL where people can join us in the studio. If you have questions, if you’re watching right now, if you have questions on anything, if you want to join the conversation, if you just want to say hi, if you want to share with us what you’re working on in the Small Tech kind of area… you know free and open-source, independent, privacy-respecting. You can go to small-tech.org and find out the principles that we have. You can join us in the studio. So the URL is just coming on screen right now. If you go [laughs] if you go to that URL, you can actually join us in the studio. We can have up to I think eight people apart from the two of us, and we may not be able to take everyone on or put you online. But all you need is a webcam and headphones so we don’t get any feedback, and we can add you to the stream as we’re going. But so note down that URL. I’ll show it again in a little bit…

Laura: And if you want to urgently ask a question, but you are a bit camera-shy, you can just put the text in, we will pick it up.

Aral: There is a private chat if you join the studio, there’s a private chat. And yeah, if you don’t want to come online, but also remember there’s only eight people maximum. So if you aren’t going to ask a question, if you could log off again, that will allow somebody else to come on. Although I don’t think we’re going to fill it up really. So okay, but what you were saying, Laura, about where we’re going next with Site.js… So Site.js is basically mature in the sense that it allows us to run our own websites. So I’m just going to go to myself not zoom on Laura

Laura: I  was going to say… [laughs]

Aral: I’m trying to do three things at one time!

Laura: I can still do Voice of God over the top though if I want to…

Aral: [Laughs] So Site.js basically runs my blog right now. So if you go, if you’ve ever gone, to ar.al, it runs that, it runs small-tech.org. So all of these sites are running on Site.js, and pretty much all of them are using Hugo as well apart from SiteJS.org itself, which is… which actually is a very specific single-page static site that it’s very tiny. It’s under 500 kilobytes or something in total, that doesn’t use Hugo. But everything that we have pretty much is running on Site.js right now. And it works. And the things that we wanted to be able to prove to ourselves as well is you know, you can have a server that you can up get up and running in 30 seconds. If you’ve looked at Site.js in the past, I’ve talked about it, I’m not going to go into detail here, but it’s got PHP-style routing for JavaScript. It’s very very easy to get up and running with, Laura showed you you know, you can just install it with a single command and then you know, you’re up and running very quickly. It has websockets, etc, etc, etc. But… and it’s taken us like about I guess a year, more than a year, to get it to the point where you know, we’re happy with it now. And we have this concept of the Small web. So if you go to small-tech.org, And go to Research and Development, R&D, that’s what we’re working on. So we are working on the Small Web. And the Small Web is basically the exact opposite of the Big Web. Where on the Big Web, we have servers, and we trust servers, and these servers host lots and lots of people, and they scale and they grow and they become the Googles and the Facebooks that we know from surveillance capitalism. The Small Web is the exact opposite of that. What if each one of us owned our own always on node, a server. But we owned and control that, that it was just us, it wasn’t Facebook. What if those could connect to one another? And what if in this system we could be public if we wanted to and share things just like we do on the web, but we could actually be private as well. And when I say private, I mean only we have the keys to you know, whatever locked boxes we’re sending around to each other with messages in them. Only we hold the key and, not even the servers, so it is the exact opposite of the Big Web in that we actually don’t trust our servers, even the ones that we own and control, because they might be hosted, you know, by some web host somewhere and we don’t know, you know, if they have access to it.

So Site.js gives us the foundation for really quickly setting up these servers. It’s very important that we can do it quickly because what we’re really eventually going to be competing with, with the apps that we build on here, is the 30 second sign up to Facebook. If the experience isn’t that good, everything we’re doing, all the work we’ve been doing in the past however-many years, you know, all the effort we put in, it’s worthless if we can’t compete on experience. That’s that’s really the only criteria that matters. Everything else we’re doing is hugely important. But moot if we can’t, you know meet that criteria.

So that’s what we’re working on right now, which is basically, well we’ve got Site.js, and Site.js does what it does, but there’s a lot of you know stuff that we don’t need for the Small Web specifically. And there’s a lot of stuff we need for the Small Web that’s not in there. So we don’t need Hugo, for example. So basically what I did was decided, look Site.js is great as it is, we’re going to keep using it for ourselves, other people are going to keep using it. We’re going to keep supporting it, but we’re going to fork it, ourselves, and create something that I call Place. Not a site, on the Small Web we don’t have sites, just to differentiate ourselves from the Big Web. We have Places.

So I just put the code up on our GitHub mirror actually, so if you go to github.com/small-tech, and you go to Place, you’ll see the source code repository for it. And you’ll see that there is a nice warning over here saying that it is pre-release, and rapidly evolving, things might be unimplemented etc etc etc. It’s not even complete. Don’t use it. If you want to check it out, and start playing with it, and see where it’s going, even for that it’s kind of early. But basically I just forked Site.js, and I took Hugo out, and I took out the proxy server feature, and I took out this feature and that feature, that isn’t necessary… kept the bits that are necessary. Which are, for example, the self-updating server, the 30 second installation process, etc etc etc. But on top of this, we are now going to finally be able to, we’re at a point where we can build the protocols for the Small Web. So how do these nodes talk to each other? So I’ve been doing a lot of experiments with websockets for example, so that these servers can talk to each other with websockets, etc etc etc.

But let me just show you a quick demonstration of kind of where we are with it. And again, this is so so so early, so early, but let me show it to you anyway. So I’m just going to share my screen here. I’m in Terminal and I want to create a new Place. So I want it to be called aral.small-web.org, and this is just my local copy of it. I could be doing this on a server. So let’s see what it says here, home aral sandbox does not exist. What did I do? What did I do? Da-da-de-da… Let me just see if I had already created this… quite possibly… all right. Give me a second. This is what happens when you test these things out previously and then boom. Let’s see if that works. What was I saying? So like I said this thing can just explode. Hmm… Home aral, sandbox aral.small-web.org does not exist. Okay, you know what? I am just going to switch over here so you can see Laura as well. [laughs] Let me just try and figure this out. Laura, you can fill some time if you want to… what’s going on here?

Laura: Yeah, I can… so one of the things that I can briefly talk about is, with the themes,  and the kind of things that we’re trying to aim for is we want everything to be so easy for people to use. So this is why Aral is working so hard on making this set up,  having these things going on. This is why I’m trying to make Hugo usable for normal people who, don’t, who normally would look at Hugo and freak out. And so this is what we’re trying to do…  

Aral: Perfect, by the way, Laura. Alright. I know what I did wrong. Alright, I’m taking it back. Here we go. Oh we have we also have someone joining us, Kieran.

Laura: Oh, we have Kieran! Hello Kieran.

Aral: Oh cool. Well, we’ll let Kieran in in a second… Let me just do this demonstration and, right. Okay. So let’s see if that’s going to be Laura again. Yep. That is Laura…

Laura: That’s me again.

Aral: Hi Laura, that is you. Alright. I will figure out that interface. Okay, so sharing my screen again.

The problem was, I was saying bin.place, so running Place, but I wasn’t saying create it. Okay. This is what happens when you’ve actually, you know practiced this earlier and then it’s in your history and you confuse yourself. So the create command creates a new Small Web Place. So I’m saying ‘create’ and it says ok, so here’s a randomly generated strong passphrase, a diceware passphrase, with… the process itself has about a hundred bits of entropy, and saying do you like this passphrase? Now you can write this down, I’m not going to use it anywhere else. Don’t worry. And again, this is something you’d be running on your dev machine if you’re setting it up… I like the passphrase. Yes.

It asks me for a template. Don’t worry about that right now. I don’t even know if we’re going to have templates, but I’ll just say ‘default’. This is okay. I’m going to create this site, ‘Continue?’ ‘Yes.’ So it’s creating the site. It’s created my public keys, whatever those are, and it’s also initialised the source code repository for me. Okay, that’s interesting. So let’s just take a quick look at what it’s done so far. So this is kind of the next step from Site.js. We’ve taken things away, but I’m also adding some stuff, like source code. So today, what happens is you have a project and you have to put it on GitHub. You’re using Git, which is decentralised, then you put on GitHub, which is centralised. That doesn’t really work for me.

What about a web where the source code for every site, lived on the site itself. That makes perfect sense, right? And then if I wanted to, I could say hey, I love what you’re running on your site, I want to run it too. Why don’t I just clone that from your site, and I know where it is, I know what you know what you’re running. Not your data, but the app that you’re running, I could just clone it from there. If we have plugins and apps, we could just clone them from your own server. So every Small Web Place is going to have its own little Git repository as well. For people who don’t care about that, that’s fine. For developers, because that’s who it’s aimed at right now… as we’re working with this, that’s going to be really cool. Because we’re going to be able to do things like well, why don’t I send you a pull request? Not to GitHub, to your website. Oh, that’s cool. Yeah, and then maybe you know, I’ll clone this from some other person’s website. So anyway, to get back to this… Now it’s created a couple of things. So the first thing it’s created is in the sandbox. It’s created the site itself. And if you look at it, there’s your Git folder there, and there’s nothing else because at this point there isn’t a template, there’s nothing that’s generated. You can create anything you want to there. It’s also created, in the settings, small-tech.org, it’s also created a public-keys.json. So if I look at that, and if I just print that out, it’s got my signing key and it’s got my encryption key. Okay, so just remember that those things exist… so just like Laura showed you with ‘site’, let’s start ‘place’ and let’s start place on that sample place that we just created. Okay. And now it’s running there, a couple of things: It’s serving the public keys at /keys, and it’s serving the source code repositories at /source. Okay, cool. So let’s take a look. If I go to localhost itself, I get a 404 because we haven’t actually even made an index page, right? But if I go to localhost/keys… ah! Interesting, I get my Ed25519 signing key, and my X25519, the curve 25519 encryption key.

What are these good for? Well, if every site has this, this is kind of your identity for that site, and it’s actually your identity, not the site’s identity. The site’s identity is determined by HTTPS. So as these sites are talking to each other, the HTTPS connection is what verifies their identity there is actually that domain that you’re connecting to. But your identity, is, and you can have multiple of these it’s not like your one and only identity, is linked to these keys. So what does this mean? If I’m a aral.small-web.org? And you’re laura.small-web.org, what I can do is I can say “Hey Laura, here’s a public message, let’s say, from me” and you can say “oh, is it really from you?” And you can check with my signing key. Or I can say “Hey Laura, I want to send you a private message, and it’s end-to-end encrypted”. And I can do that using your public key, your encryption key, and I can use that to create a shared key with you, and send that over to you.

But imagine that every website on the Small Web has this functionality. So we also solve, with this, the whole issue with key discovery etc. So and if I actually was to go in there, and let me do that… If I was to go into small- into that folder, that I created, and I said echo ‘hello everyone’ to index.html, and I went into just localhost now, it would say “hello everyone”. So I’ve actually created something there. So that’s where that is. Now. I’ve created something there. I’ve created something there. So now I want to ‘git add’ it to my repository, and I’ll commit it, and I’ll say this is my “initial add”… The little thing that popped up is just an app that I wrote called Gnomit, for Git messages… and I’ll say ‘commit.’ Now, where can I push this? Well, let’s let’s look at our remotes. We’ve got a whole bunch of remotes. There’s the origin, which could be on a virtual private server somewhere, but I’ve also got like, localhost. Okay. This is kind of interesting here. Let me try and pull this out, here, and make it a bit smaller, and you can see the server in the background here. So I’m going to say ‘git push -u’ for create that, it’s the first push, ‘localhost master’. Look what happens here. Now, I’m just going to put in a sample username and password. The user name and password will actually be derived from the diceware password that you saw earlier. It isn’t right now, I haven’t implemented it. But it received that push, so your site that’s running on my dev server right now, received that push. Okay! So does that mean that I can actually clone it from there? Yeah! So if I go into a different folder, into my sandbox, I can actually say ‘git clone https://local-‘hor… local horse?! [Laughs] Localhost becomes local horse… local home. [Laughs] Local horse should be a thing. I want that on a t-shirt, “localhorse.” “https://localhorse”. So ‘https://localhost source self’ is the actual site itself, and I’ll say ‘test-clone-2’ just to make sure. And again, you won’t have to enter the username and password, that will be automatic in the future, because you won’t be doing ‘git clone’, you’ll be doing ‘place clone’. And if I go to ‘test-clone-2’ now, I can see there’s my index.html. So I just cloned that from my own website, right? Because the source is there. It’s not View Source anymore, right? View Source was cool. I learned how to code with View Source, but we can do so much better than View Source. You know, we can do “View Git Source” on our websites, and when we do that, we each have our own little GitHub, right? And then we can send pull requests etc. So that’s just part of the Small Web, that’s part of it. Everything about it is decentralised, everything about it is under your control. You own and control it, and this is just one bit of it. And again, like I said, it’s very very early for Place, and it’s going to be constant breaking changes, and it’s and you know, we’re going to be, I’m going to be iterating on it constantly. It’s not even feature complete in any way, it’s so so so early… 0.0001, you know, version. But just wanted to give you kind of a feel for where we’re going with it. So yeah, that’s it, really. And I feel terrible for keeping Kieran waiting. So it should we add Kieran to this?

Laura: Yeah!

Aral: And now let’s bring him in… wait a minute.

Laura: I can give a little intro to Kieran whilst you’re doing that because…

Aral: Okay, that’s a great idea.

Laura: So Kieran, I met through the Vanilla JavaScript Academy, which was a JavaScript course run by Chris Ferdinandi, and Kieran helps out with that course. I mean, I think Chris describes him as a teaching assistant, but honestly, he is way more than that and really it was so much fun…

Aral: Hey, I was a teaching assistant once, what’s wrong with teaching assistants? Teaching assistants rock. They do all the work.

Laura: Well, yeah, but Kieran is also just a really great cheerleader, and a supportive person in the community, who makes a lot of the frustration you have when you’re learning, and starting out, and sort of banging your head against the wall with particular problems, and was just such a great supporter. And just, we had some really cool discussions about accessibility as well. So Hi Kieran!

Kieran: Hi.

Aral: Hi Kieran, I have heard a lot about you so it’s lovely to meet you.

Kieran: Likewise. Yeah, it’s good to say hello, finally…

Aral: So I’m Kieran, go ahead.

Kieran: Yeah. No, I was mainly just saying hello really, but I have had a question. Actually. I just thought of… which is, Place completely replacing Site.js? Or they going to exist side-by-side?

Aral: They going to exist side-by-side. So think of it as Site.js is basically a generic web server, kind of a web development environment for the web as it currently is, but one that you can run personally, very easily, kind of lowering the barrier of entry for that, but… And you can do everything you can do on the current web on there… Place is going to be much more focused, so you know, if you want to create just create an HTML page and you want to put it up on the web, use ‘site’ for that. You’ll be up and running really quickly with that. You want to create, you want to enhance that with a little bit of JavaScript, use ‘site.’ The kind of things that are going to come into Place is, we’re going to narrow it down, and do some of the hard things with no effort. So if you’re… what are those? So like I said, you have your keys are available, so that anyone can verify the messages you’re sending are coming from your site, from you, actually. And that any encrypted messages, you know are encrypted with your keys. That’s just by default. So we’re adding public key cryptography and signing to every website on the Small Web.

My thought right now is that we’re just going to use web sockets for nearly everything. I mean, of course, it will support HTTP get for certain things like getting your keys, whatever. But the core of it will be entirely built around websockets, and that’s servers talking to each other with websockets as well. I did this experiment last week, just to see how many websocket connections I could open, you know from a VPS server, and I was easily able to get to about 10,000 on a very low VPS… something like that cost 3 euros a month or something. I could get 10,000 connections. I don’t have 10,000 followers on the Fediverse on my Mastodon. I’ve been there for 3 years right now. So to start off, that’s really great.

We can scale websocket connections to like, on a single device, to millions. Or a million, people have actually done a million connections. I don’t care about that right now, it’s just like can it get us started? Can we do it? What does that introduce? If every server on, let’s say on the Small Web… if every server can talk to every other server, has a consistent connection… If I’m following you, our servers have a consistent connection. Every time I post something publicly, you get it, right? If you’re following me, we can use the same connection to also talk privately end-to-end encrypted. What kind of things can we build on top of that? And really what I’m thinking is that, this is something that I’ve been thinking about, and wanting to see happen for many many years… ever since Twitter introduced annotations, or was going to introduce annotations, maybe a decade ago. I don’t know if you’re familiar with this… it kind of was an idea that they had, which was that you could add metadata to tweets. And this was amazing to me because, if this had happened, what it would have meant is we could have actually expanded the semantics of what a tweet is, using metadata.

So a tweet wouldn’t just have to be a tweet. It could be a chess move in a chess game right? And at the time I’d suggested oh Twitter formats, we can have different formats etc. Of course, Twitter then became, you know kind-of, proceeded on its trajectory to become like a huge surveillance capitalist, and they abandoned all of those things. They were like, no no, we need ads in there and we need to attract people. Mastodon, when Mastodon came out, I was like we have the ability to do this, but Mastodon, and the Fediverse, uses a protocol called ActivityPub, which, you know, you have to actually extend at the protocol level. So what’s really interesting for me, with the Small Web, is what if we make messages the key thing, and what if messages are extensible? So we have an extensible message format where, maybe initially, it’s just a yaml header and some markdown. You know, that’s maybe the base, but in that yaml header, you could add any sort of data. So a message could be just a regular post, a micro blog post, a web page. Or a message could be, again, it could be a chess move, or it could be a weather update, or it could be this or that. And what if our apps became views on these messages? So if you got a weather update it showed in a little weather view. If you want to post some sort of an update for the weather, or something else, or a chess move, you had a little chess board to do it, and we could expand these, each one of us could actually build this functionality into it.

We wouldn’t need to expand the protocols because the messages themselves would be extensible. And on your site, you’re following me for example, and you get a message that your site doesn’t understand, yet, because you don’t have the app or the plug-in for it, whatever we’re going to call it, and you can say… but you can see where it’s from, and it’s from you know, somebody’s written it on there, has posted it on their own small website, with their own Git repository that they have there, and you just say okay, I want to install that: goes to that Git repository, and installs it.

So this is the stuff that you know, we’re going to be building into Place. It’s very exciting, because for the last year or so, I’ve just been building stuff to support what already is, and that’s been necessary, but it’s also kind of been like I’m itching to work on this. I’m itching to work on these features. But unless we can deliver these, unless the whole experience is so seamless and beautiful, it’s not going to matter. So that’s why I was like, okay, no. Got to work on this first and it’s battle-tested now because you know, it runs our sites. We know the updates work. We know what messes up. We’re kind of eating our own dog food. But what I’m really excited about is what we can do with Place, and with the Small Web going forward. So, you know, because I… I’ve just rambled, but…

Laura: No no, it wasn’t rambling…

Aral: What we have with the Big Web, what we have with all of these millions and billions spent on just trying to track people, just trying to make more billions. We’ve just thrown away the promise of the Web. We’ve thrown away the promise of the Internet just for quarter-on-quarter growth and to you know, create a handful of billionaires. It’s shocking, you know, it just disgusts me. I’m not like the smartest person in the room. I’m not, you know, I’ve been making things with computers since I was seven. That’s my only kind of reason why I can do this stuff. There are far smarter people than me working on bullshit, absolute bullshit, you know, toxic bullshit. And that just destroys me. Knowing the potential of the stuff we can build so I’m really looking forward to it.

Laura: So talking about bullshit might be a good point there which for me to give a little bit of update on Better Blocker, because we mentioned that we were gonna, and so…

Aral: Yeah, blocking bullshit! That’s what Better Blocker does. 

Laura: Better Blocker, the blocker of bullshit. And really so I didn’t manage to do a huge number of updates to the blocking rules last year. Honestly, wasn’t entirely necessary. A lot of the nature of Better Blocker is to focus on the centralised aspect of tracking, how often these trackers are used from centralised domains. And so we block ‘em once, we block ’em everywhere, and that works, and it works really well. And so actually what I spend most of my time in the blocking updates, I find a few new prolific trackers and I block them, but a lot of the time I’m fighting against bad development. And so sometimes I’m sort of blocking blocker blockers, as we call them. So these annoying dialogs that recognise that you’re using a tracker blocker, and pop up and say “Hey, don’t block our trackers. We want to track you! We want to surveil you! Please let us do this.” And so I spent a lot of time just trying to do a little bit of reverse engineering on their dialog, try and get rid of it so that people can continue to browse without being tracked and without being blocked out.

But nowadays one of the biggest problems I’m trying to solve is broken websites. The number of sites… I swear development practices are getting more fragile. Like people are loading in… even CSS being dependent on JavaScript being present. Not just any old JavaScript, but JavaScript from say a Google service. So imagine you go to somebody’s website, you’ve got no styles, you’ve got no nice fonts. It’s just black text, full width, blue links, and that’s because the CSS hasn’t loaded, and the reason it’s like that is because the developers have made the CSS loading dependent on a particular tracker being loaded. So I spend a lot of time, bear in mind unpaid, because these organisations aren’t essentially paying for me to fix their website with Better Blocker trying to get around…

Aral: They’re breaking them on purpose. You know…

Laura: To some degree, I wish it were true. But I actually, I think a lot of the time it is…

Aral: It can’t be incompetence.

Laura: I think it’s a lot of it is malice and incompetence. I think that people don’t understand the concept of progressive enhancement to the degree that they will have core site functionality relying, using a third party platform. So having your login provided by a third party platform, we saw this at the end of last year when Google went down and the number of sites that fell over. They’re not hosted on Google, but they were just completely reliant on it. It is, yeah, absolute nonsense. Oh, I have a visitor. [Laughs]

Aral: It’s Osky! Wait, let me zoom in on you, can you? Is he there?

Laura: Okay, I had to put his chin up. He’s not going to like that. [Laughs]

Aral: He looks very happy about that.

Laura: Yeah, I think he’s, I think he thought I was arguing with someone. So he’s coming to tell me to calm down.

Aral: He does that… whenever we have a an impassioned conversation, Oskar gets in the middle of us and he’s like “stop fighting.” We’re like, we’re not fighting, it’s fine.

Laura: [Laughs] You can just see a tail in the background…

Aral: So Kieran, I have a question for you. So you were on the you were the teaching assistant, [dog grumbling in background] or working with the [laughs] [more dog grumbling] vanilla JavaScript course, right?

Kieran: Yeah.

Aral: So what do you feel? I mean if… I don’t know if you had a chance to look at Site.js for example, but what do you feel like kind of, are there any parallels there? Do you see kind-of, because one of the things I really wanted was, you know, a very easy way for people to be able to build things, especially with DotJS. I don’t know if you’ve had a chance to look at it… So that you wouldn’t need just you know, huge frameworks just to do some basic stuff.

Kieran: Yeah, I mean, just speaking for me personally but like it really appeals to me. Ever since Laura first mentioned it, I’ve actually wanted to move my like my own little mini blog thing over to it, because currently it’s on, it’s hosted on GitHub and then it builds to Netlify, but I would rather have that in a decentralised place.  So it’s probably the perfect thing for it.

Aral: I mean, I guess if you want to think about what Site.js is, Site.js is your own Netlify in a way. Like it’s a Netlify that you own and control. I don’t think the Netlify folks are going to sponsor us, they sponsor everyone, but after that… [laughs] not that we want them, to it’s fine. They’re actually not the worst of the worst, at all. They you know, they at least provide a legitimate service. It’s centralised but, you know, it’s not based on necessarily tracking you, and all the surveillance capitalism stuff… just plain old capitalism.

But yeah, that’s that’s basically kind of what Site.js is in a way. Maybe the DotJS is even a bit misleading. Yes, you can, it has Node.js, it’s built on Node.js, and you can build all of that stuff. But with Place, one of the things that I’m looking into is, you know, like I said, you’ll have these messages that come in and then you can build these renderers for them, and interfaces for them. So one of the things that I think is very cool, very exciting is Svelte, so I don’t know if you’ve heard of? Yeah…

Kieran: Yeah.

Aral: So that’s Rich Harris, I believe. So Svelte.dev. Let me just show you… so Svelte is really cool. It’s basically, it’s not a framework in a traditional sense, because it’s a compiler and what it has, let me just show you here is you can… let’s  go a little further here… You can include, they’re basically components. And you can have a paragraph like your styles go here for example, and if I said ‘p { color: red; }’, then it’s red. And if you actually looked at the style, over there, you can see, for example, that the style is scoped. So it’s got scoped styles. It’s got data bindings. It’s got some really, it’s got a really cool syntax and what it does is it compiles all of this. So instead of loading in a framework at run time, it actually compiles it so it’s really pretty cool.

Let me just switch back. Hi. So one of the things that I’m looking into is using Svelte for these components cuz it works really well. So imagine that you just write a Svelte component to render a message, to render the interface for it. So that’s also some of the things that I’m going to be looking at. And if you think about it, in Site, really Hugo was taking that sort of responsibility as well, because Hugo is a static site generator. But with this, it’ll be you know far lighter, of course, but also far more integrated into the workflow at its core. And especially I’m looking into ES,  ECMAScript modules-based workflows, as well. Like the kind that Snowpack, for example, does because you get some really cool things like ECMAScript hot module replacement etc. And actually, if you go to my blog, let me just… I wrote a very short post about how to do hot module replacements with vanilla JavaScript. So this might be interesting for the vanilla JavaScript folks as well.

Kieran: Yeah, I think I’ll read that.

Aral: Yeah. Yeah, so it’s just doing hot module replacement, but with vanilla JavaScript instead of Svelte or anything else. So you really get to understand how that hot module replacement works. So, yeah. But that’s just on my blog, ar.al, but it’s very it’s very exciting. I mean, I’m kind of, I feel finally after about a year or two of just building something very infrastructural, that I’m getting to play with the exciting parts of it now, which is kind of cool. But the goal, of course is that you know, you go to small-web.org, you choose a subdomain, for example, 30 seconds your up and running with your own small website, where people can follow you, people can send you messages you, you know, so it’s going to be very interesting once we have this. Once it starts to shape up, and you know, part of what we want to do with these weekly streams, and I actually might even start like a daily one just for development stuff, for what I’m working on is I really want to share that process. You know, what we’re doing isn’t like a big venture capital reveal, it’s not, it hasn’t been. You know, we’ve been working on this stuff for how many years now Laura?

Laura: Probably about six, or seven even.

Aral: Yeah, you know, we’ve kind of sold three houses, that we had. Now we’re renting. We’re working on this because we really believe in it, and you know, it’s very incremental but I think, slow but sure has something, you know, about it, which is once you get to a certain point, you have quite a strong foundation. So it’s going to be interesting to see where it goes this year, I’m very excited about it though. I’m very excited about Place, and finally getting to the point where we can do it, you know. We needed to have the ability to deploy it, we needed to have that infrastructural stuff, and it’s there. There’s much more to build but it I’m feeling happy about this. We’re going to be able to start playing with this stuff and hopefully inviting people, developers, to play along with us, as we’re going. You know, it’s not ready right now for anyone to really do anything with, because it’s not complete. I mean feature-complete in the basics, but the moment we have like the basics up, as in you can go to small-web.org and you know, get your own, and start playing… if you’re a developer, you’ll be able to do that. And I hope you know, I really look forward to that. And then maybe we can start doing some tutorials, we can you know, it’s just it’s going to be really great. It’s the Web that I want. You know, I just wish we didn’t have to do all this stuff, and the Web was ethical, the Web, the Big Web, you know was, had systems built in where people could just build tools that didn’t exploit people. But it’s not, so yeah here we are.

Laura: So we’re trying.

Kieran: My favourite part of this stream has just been that I can just tell how excited you both are about it. Like it’s refreshing to see because like a lot of the times, as a web developer, it just feels like I’m still working on the same crap over again, like, you know, usual stuff, big app, people using these huge frameworks, but it’s cool. It’s cool to see. So when?

Aral: Well I think… sorry, Kieran, go…

Kieran: I was just going to say when it does get to more of a stable build, and people can like help test and work on it, like what how can people expect to find out about that when you guys are ready with it? Will you just like post somewhere or like?

Aral: Well I mean, like I said, I’m actually thinking of you know, if I can, kind of to push myself as well, maybe do like a daily livestream update. And maybe people will organically start filtering in when they feel like they can. That’s what I’d really like, you know, and again, you know the moment you can create your own, that means that you’ll be able to have your own little Git host on your server as well. You’ll have a copy of the source, you’ll be able to start building apps or plugins for it, sharing them. So hopefully it will grow organically. That’s my goal for it. You know, and we’ll see how it goes, but we’ll definitely be you know posting…

Laura: We’ll be sharing things on, yeah, all of the different places, and that’s part of it. That actually helps us… the more we share, the easier it is for us to share stuff as well. And when people ask us questions, then we actually know what to share as well. And that’s what makes it nice that we’re actually starting to do the streaming, and things like, that because it kind of makes it more of a conversation rather than that kind of kind of dev evangelist-y way of like “here now, we have an announcement of… these are the things that we are now allowing you to do” and we don’t want it to be like that. We want it to be more of a community thing, we want to be able to learn from what other people want to do with it as well.

Aral: But I think I’m most importantly for us at this stage. We’re not ready for any of that, we’re not ready for contributions, we’re not ready for issues. But most importantly, I think for us is you know, how it is, if you have a continuous release, for example, for what you’re building, you keep making incremental changes and releasing them. If you have this waterfall process, where you release things every 6 months, then it becomes this huge dreaded thing and you know, you have these deadlines and you’re not sharing stuff, and it’s like a big reveal and is it going to…? No, that’s not how I want to live. That’s not how I want to work. So I’m trying very hard to get out of my own way with that as well. Because, of course, there’s always the the sort of fear of oh well, you know, what if somebody says something mean about this? And, I mean, given what we do, people have been…

Laura: [Laughing] that’s the very least of our worries…

Aral: So, but part of this process has been to kind of say, you know, what fuck that. I really don’t give a shit what you think. You know to the haters, and to say look, we’re just working on this, here are reasons for working on it. And we’re doing the best we can and we’re learning, and we’re iterating, and we want to share that with you. And if you want to be part of that process, definitely, that’d be awesome. But really what I want to do is get to a point where, you know, we can just share everything we’re working on, on a regular basis, get input and see what we can build, you know together. Something that you feel good contributing to, that you want to be a part of, that that isn’t just about making money. That isn’t just about exploiting people because why do that? I don’t know…

Kieran: Money! That’s… [laughing]

Aral: What are you gonna do with it? What are you gonna do with it after a certain point? What are you going to… eat it? I don’t know. But anyway, Kieran, lovely to have you on, thanks for joining us. Maybe we can talk about, you know, having you on in a greater capacity at some point, maybe to show us some of what you’re working on with the vanilla JavaScript stuff. If you have any ideas, let us know, we’re very open. We want to feature people who are you know… care about this stuff, and who are… they don’t have to be working on what we’re working on, necessarily. Anything you want to add, Laura?

Laura: No, just a reminder to everyone that we’re going to keep doing these streams, hold us to account on that. We will do it!

Aral: Ooh, and which brings me to next week on the 14th. We’re going to have three guests. So we’ll make an official announcement about it later, but it’s very exciting because our guests involve someone who was involved in the rollout of free and open source laptops, not surveillance laptops, like Chromebooks, but ethical laptops running Elementary OS, in France to hundreds of school kids. We are also going to have someone from Pine 64, which make the PineBooks and PinePhones, which are very affordable, free and open source laptops and phones. And maybe even someone from Elementary OS, so if they confirm… they haven’t confirmed yet. But if so… because I want to get people talking about this stuff as well. You know, we’re just like, we’re in the middle of this covid crisis, schools are shut, and people are saying on Twitter, I see on Twitter people going “Well, let’s get all the kids £400 Chromebooks. No! Get them £150, this was in the UK, get them £150 Pinebook Pros, running Elementary OS, get them ethical computers. So I wanna get people talking, you know, like educators, hardware makers, operating system makers, app developers. Maybe this stream can also help that. Because we have people who are focused on their area, of course, understandably, like us, with not a lot of resources, but part of, I think, what we need to be doing is bringing these people together, the non-bullshit people, the people who are not in there just to make a billion dollars, who actually care about this stuff, and get them talking and seeing what we can create, together, going forward. So hopefully, maybe this stream will help with that as well. But that’s next week. We’ll have a proper announcement about it in the next few days. Are we good? [Laughs]

Laura: We’re good. And I think… Yeah, and if anyone wants to know any more information, you know, you can, we try to update it as best we can on small-tech.org, or Aral, do the banner.

Aral: Boom! 

Laura: I don’t know what way it’s coming up for you…. [laughs]

Aral: It is down there. You can’t see the banners? Okay, maybe only I can see it.

Laura: No, I could. I just yeah, I was getting my directions confused.

Aral: Okay. Well and and thanks again Kieran for joining us. I’m going to try and do this outro without messing it up. Let’s see. So thanks Kieran for joining us, and we will oop no, that goes to Laura. Why does it do that?! And there I am… Thanks for joining us. So just going to be every week, at the same time. So we’ll have more information about next week’s show as well, but this has been Small is Beautiful. Take care.

Kieran: Thanks.

Aral: And we’re out.

Laura: Thanks, Kieran.