Sci Cloj Clojure visual-tools group, 2 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Visual-tools meeting 9: clj-tiles, Obsidian Wielder, Cardigan Bay, Platypub

Description

In this monthly meeting of the Clojure visual-tools group (July 2nd, 2022), we had a few updates about ongoing projects.

Summary: https://clojureverse.org/t/visual-tools-meeting-9-summary-video-clj-times-obsidian-wielder-cardigan-bay-platypub/

Zulip topic thread: https://clojurians.zulipchat.com/#narrow/stream/313390-visual-tools/topic/meeting.209

A

Okay, hello, um viewers, I'm kira- this is the I guess. The ninth uh meeting of the visual tools group for closure from the closure sort of data science world and we're gonna go ahead with a few presentations of projects that are going on in the community things that people are working on that they want to share. So we've got a little more than an hour, so maybe we'll aim for like 10 to 15 minutes.

A

If, if uh you could sort of roughly aim for that, that'd be great, I think we've got four people hoping to go so um yeah. I guess unless there's someone who's like dying to go first, maybe we could start with marcus if that makes sense and yeah so yeah.

A

Keep that in mind, maybe like 10-15 minutes or maybe 10, and then five minutes to discuss or whatever um and usually we you know, people are free to stick around as long as you want after to continue talking stuff, but we try to aim to wrap up around um 90 minute mark so um yeah feel free to share your screen or not or do.

B

Well, yeah, I need to share my screen to show you clj tiles.

B

Cool so um yeah clj tiles. I gave a talk at the reclosure in december and uh I'll I'll start the same way as I did there to give you kind of an introduction what it is.

B

So um I start with some of the lyrics you see come get around people which is a string and therefore a valid closure program. So you can run it and you see the result come get around people the next. Of course you can print more than one line wherever you roam and admit that the waters and now comes the the feature, the main feature of clj tires.

B

You have to complete the poem the lyrics.

B

So if you, if you now run this program, you don't get this nice scrolling in of the text, you get the result of a program, but if you complete it in the right way, um you have grown and accepted that soon you'll be drenched to the bone, and then you run it you. The lyrics are coming in quite nicely so notice. Here. uh What we are doing here is completing all lines of the lyrics, um but if we go on like here, we have.

B

We have also words, come writers and critics who prophesize with your pen and keep your eyes wide. The chance won't come again and don't speak too soon.

B

So if it's not finished, you run the program. You get kind of the output, which is here spin, which is the last expression, and you also see the code here, but if you complete it, it will still in spin you get a nice result.

B

So that's basically the the gist of clj ties. You have some some blocks floating around some puzzles and you complete it and.

B

The the whole thing is about completing closure code, which which we come here, which is proper closure code. You can complete it here, run it complete it in any way you want, and, as you can see here, the the result can be anything and there will be no feedback, whether what you did is correct or not, because you you just have a puzzle and play around with it, and most of the puzzles which you encounter in clj.

B

Tiles are just puzzles without any feedback, but there is, there are some which have a description like this one.

B

This this here is already a example using the sigmutils package, which is which is a algebraic mathematical package for closure, and so you can do symbolic computation with it, and here it says. Okay, you have to sum up two vectors, one three five and then it should be zero, which is sine of pi. If you know some math is always zero and then you see square root of four is two and then you see here the result should be one: five, nine, okay!

B

Well, you see, the result is one five, nine, but you can do it in a more sophisticated manner and have a nice tech equation. So basically you saw there are puzzles which have no requirement for how to solve them. Then sometimes you get the reward for solving them correctly. Sometimes you have a description.

B

And I thought well um having a description is: is a very nice way of uh going on with the puzzles, and then there came out um the book by sam ricci, which is the book of sussman, but he translated it to into org mode. So there is a book from from gerald sussman and czech wisdom, which is called functional, differential geometry, and this book is open access and you can access it as a pdf.

B

Maybe I open it so you can see you can see how it looks like.

B

Okay, so it's open access and you you can download it and what uh sam richie did he translated it into an org file which is here okay, so he took. He took this book and.

B

Translated, if you, if you look at the raw code, it looks like this okay, so we have chapter one with all things and the code, so I thought well um here I get the description for free and and since there is the code well, I can make puzzles out of it. So um I wrote some code to import the org file.

B

You see here, you get, you get the your in principle. This could be any url, so you can load any or file. Question is if it's, if it properly loads, um because I tailor made the code to load this one, but in principle you can try and or write your own. If you want um yeah- and this is it- you see here, it's the same- you see the introduction and if when, whenever a code appears in the org file, it is displayed as a workspace as graphical blocks.

B

And you can click through, say: okay and the next feature is um you in in the first workspace. You see the solution, you see, the code is blocks, but if you go on, you only see puzzles the idea here is that if you, if you don't solve the code, you don't get the description.

B

So if you solve it, you get a puzzle and then resolve it. Okay, 0.5 mass this here is not so easy to understand. You need to know a little bit of physics or quite quite some kind of physics to solve it, but.

B

It's doable like this okay mass and the the new feature I implemented. Is this wordle like coloring? So if you, if you do a block correctly and you press color here, you see it's, it's becoming green. So, for example, here, okay, the above block here is correct, but this one isn't this function here isn't quite finished.

B

But if you complete it correctly, it's colored green info, and if you solve the puzzle completely correct and color it, then the whole thing is green, which tells you okay, you did it right and then you can go on and say.

B

Show me the next one, and now you see not the puzzle like you would see in all the others, but the full solution with the description, so you can read it, try to understand it and again get the puzzle and so forth.

B

um Of course, the the idea for all this is coming from wordle right. So in wordle you do some, ah that's not that's not good. What would be a good word here.

C

What do we start with?

C

I usually start with story story.

B

Story: okay, yeah, so you see it's it's uh the black thing we don't have. We don't have a green one, but I think you, uh you know what uh how our world works. It has this black and golden, and also green colors for being right or not in the correct place, and that that was the idea for for clj types to help you kind of get in feedback for the code. You you compile.

B

There is one trick, because if you, if you solve one puzzle, all the other puzzles coming before get unlocked. So if you, if you don't want to solve all the puzzles in the in the order and want the whole solution, I was graceful and at the end of the chapter I added a very, very simple puzzle. You just have to color it and solve it and all of a sudden everything is unlocked. So that's a little trick and then you get the whole the whole book, basically as blocks, and then you can solve it.

C

A

This is really cool just in the interest of time, if we can maybe wrap up in like four or five minutes we can uh move on. But if anyone like, if you have anything, you want to wrap up or if you want to leave it open for questions up to you.

C

B

Well, um there is, there is one thing I'd like to add, which is here: you see you see it is. It is puzzled by puzzle um and I figured well. It would be an an advancement of all. This would be if you, if we had whole workspaces, so I created another example.

B

Which shows whole workspaces.

B

Like like this, okay, go to the end back same trick and unlock everything, and here I think one improvement is having having a whole workspace. You'll, see part of the free particle and it doesn't go away. So the whole workspace is developed and you can, I think it's it's.

B

It has a better, a better storytelling than having having the book, which only shows one example after the other, and one thing let me at one thing is um here: you can as well have a black element, because if you don't create the puzzles out of the original code but curate the puzzle, you can add elements which are not there in the original, which is here, for example, the path of the free particle.

B

So we also have black elements, green, yellow and black elements here, um yeah to to wrap it up. Basically, um I think it's it's a new way of of telling the story about how to evolve some code and a new way to to present books and make them interactive.

B

A

Yeah yeah, this is cool. I do have one question, um I'm curious, who the sort of like main target audience that you had in mind was making this.

A

It reminds me of um what's I called like scratch, or something that mit put out a long time ago for like teaching kids, how to program with drag and drop. It kind of feels like that, but it also feels like it's a little more advanced.

B

Well, um scratch is more an environment where you create programs right. I had a version. The first version of all this was like this and I figured it it doesn't, it doesn't fit for blocks and what I'm doing here is called parsons puzzle in the computer science community.

B

I didn't know that until I was giving the talk for rick closure- and I I asked katie fiesla she's a professor and she as well had a talk there and she was kind enough to hint me that what I'm doing is parsons puzzles so and she's and that's it. You you give and the most important thing about about parsons puzzles is, for example, in in python.

B

You have this, there are persons puzzles for python and you only have lines right and what we, so this, what you see here is kind of what python already does, but what we have here in enclosure is. We also have expressions like really sub expressions, and this is, I think, what what adds to the whole to the whole subject, that using closure and parsons puzzles is, is a real great fit and the target audience um is really.

A

Fine, if it's like just me,.

B

No, the the thing is really: it works best for this for these books by sussman, because the closure code in there is so fits so nicely. It is a small succinct way of programming um and and when, when the programs grow and grow- and I tried different examples- it's the workspace starts to get crowded. So the target audience is really to understand this.

B

This uh ftg book, which actually I wrote it- I wrote it for myself starting it because I read the book and I had to install closure, and I didn't have any idea how to how to program enclosure- and I was on a windows machine and it was 2015 and it was really cumbersome to get all the things running, and so I thought well. Maybe it would be better to to have a kind of a ui because, as a so the main target audience is armchair, physicists.

B

Mostly, they don't know github, they don't know how they use, notepads, plus plus, or something and don't have an idea about rebel or something neither did I at that time and that's why that's why I wrote it it's always so so things like this, I think always come a bit out of a pain situation.

A

Yeah yeah, it's always the best way is fixing your alcohol. That's really cool! Well, thanks! So much for sharing. um We could take a couple minutes if anyone else wants to like comment. Ask questions. There will be time at the end as well.

A

If there's anything.

A

Pressing, if not uh maybe we could go on to victor.

A

That's all right. Take a similar amount of time like 10-15 minutes or thereabouts.

D

We will see if it will be too fast or too too strong. You get to tell me yeah.

A

D

If I should slow down alrighty.

A

I'll keep it.

D

A

Of time for you.

D

Yeah, so I'm going to share my screen here we go um so all of you already know what social is. So I'm not going to explain what that is, but in case you're not familiar with obsidian it's uh what some people would call like knowledge base, uh editor or research. It's basically just a text editor that allows you to to do links between your documents so canonic and wiki, but with some more facilitation to either run it locally or they specialize in other things in terms of obsidian.

D

uh What makes it different than the other kind of knowledge based things is that you run it locally. So it's a it's a local application on my on my computer and it's all marked down files, all the files that you're creating or just normal markdown files, and it has a plug-in ecosystem as well. um So what I use obsidio for is that I'm doing my daily journaling, I'm creating the initial sketches of the ideas I have or I keep track of my to-do's or stuff. I want to learn or stuff that I have learned.

D

Basically, just all the information that I I sit with goes down into obsidian at one point or another, so what I quickly found out was that I want I want obsidian to kind of like do more, so it's cool he has plug-ins, but then I have to write one plugin each time I want to like add custom behavior.

D

So what I figured I actually want is a custom like a runtime inside of obsidian, where I can just put ideally closure code and make obsidian do stuff for me. So what I wrote is this thing I called obsidian wielder because it wields the power of closure inside of obsidian.

D

uh So now, if you, if you put the code block uh inside of obsidian documents uh when you're viewing it, it would evaluate that code and that's like the main idea right. So you can write any any social code that you would normally be able to do. You can define new bars and call functions and stuff like that.

D

You can also render text if you don't like this ugly, different styling. So now it just looks like normal text here, but it's not actually part of the of the document.

D

You can also render html so obsidian is based on electrons. Everything is javascript and hdmi and css, so you can also render buttons, and then I started thinking well. If we can render html, we should be able to render like v8 and radio stuff as well. So I'm just gonna. Let's wait.

D

um So we can do reggae stuff as well, so you can see that there is. There is hiccup pickup data and finally, there is a component that is being rendered here see since I broke something with my with my final changes, but the idea here is that you have uh interactive interactive components.

D

So, let's see, if we can figure out why this is not working targets, that should be fine.

D

I am not sure why that is not working. I can use uh websites, maybe because it's a bit more stable.

D

See go down to the bottom, so the website is published from obsidian, it's exactly the same, but it's running directly in the browser, so I'm rendering the application. Here and now I have a functioning app directly in my in my obsidian vault as they call it. uh So in general, like everything that works in culture works is run via c or psi, I'm not sure how to pronunciate it, but this uh work dude library for running closure code in a bunch of different environments.

D

So most things works. It also prints out errors, but I haven't gotten to work with some extra functionality like the doc function, for example, will be nice to have as well.

D

There is see change back to the desktop application, um so obsidian has a plugin api as well and you can access whatever you have in obsidian. You could access with wielder as well. So we can see here, for example, that I'm calculating the amount of files I have in my current vault and then I'm doing this little pipe character here and it would uh render the text. So this text here is dynamic.

D

Depending on how many pages I actually have in my in my vault, um so a bit more of the obsidian integration like you, can you can run the commands as well that you have in in obsidian.

D

I am I'm not sure what I'm changing the code base like just before this call that that broke these things, uh but, for example, you will be able to open, like this switcher or the file switcher and stuff, like that, there is some drawbacks to the to the approach that I have done here.

D

uh For example, I haven't quite solved how to to deal with infinite sequences that would have obsidian, for example, or some of the documents are very low, and then it doesn't evaluate the full thing as they are below what what obsidian actually renders. I have some ideas on how to solve these things, but I, since this is not like a full-time project, I haven't quite worked it out. Yet another thing that works if you're familiar with obsidian you're, probably familiar with data view as well so cdn aw is another plugin where you can have.

D

You can have these documents with some data, so I have four documents here of four games that I sometimes play, so I have them tagged. I gave them a rating and how much time I've spent on these games and now by that time there are just documents, but then you can query that data via data view. So here I have this table that will automatically change depending on the data in the actual document.

D

So with wielder. You also can use the data view api, just as you will be able to to otherwise, then, in terms of other examples uh you could you can use the the usual social stuff that I use sometimes for designing like documents and architecture like multi methods or protocols and stuff like that, and then reagent here is one of the interactive applications it's just counter. For example, you could also use like intervals, so you can see that this this here updates automatically so every time, the every time the atom updates the app re-renders.

D

So it's just printing the current the current time I mean the progress of like adding a to-do app directly in obsidian. So now it's just a list of to-do's that I have, but you can also add new documents and stuff like that. uh You could embed documents within each other. So this is a document that is included into the current document and then I can also use uh I can use them in my in the parent document and then in terms of like some other stuff I want to do.

D

I want to add some more flexibility to to do like reusable functions across documents. I also would like personally at least to be able to have third-party dependencies, so someone can say hey I want. I want these libraries to be available in my in my vaults, so maybe you can have like a desktop either file where you specify dependencies and stuff like that.

D

So then yeah, I think that's pretty much it. You can like publish this as websites, it's a it's a part of uh obsidian which is called obsidian published. It basically just takes your wallet, you select which files you want to publish and then it goes far and yeah. I would love to to have people's feedback on on things. They would like to see in it if they find it useful and other great ideas of what he what it could be if we spend some some time on it.

D

So it's on it's on github I will. I will throw a link in the in the meeting notes or wherever we put those links otherwise. Otherwise, I'm open for questions.

A

Yeah, that's really cool thanks for sharing.

E

I have a couple of questions about that yeah. So what's the relation between your uh closure thing and obsidian? Do you kind of have a separate closure process running which is calling into the obsidian api or something like that.

D

No, it's it's actually much uh simpler than this, uh so portly micro.

E

D

A c library or.

E

D

Compiling that to javascript and I'm.

E

D

Eval on that, while keeping track of the context directly in obsidian, so.

E

Obsidian has its own way of calling javascript and you've compiled the or you're using a the sci interpreter within the thing, so that yeah.

D

E

It's it's kind of driven by obsidian's thing. That's calling into the closure that you write.

D

Inside the basically like um obsidian has some events that it sends out when you're changing the current view or when you're editing the the file. uh So what I am doing when my plugin is receiving those is that I'm reading all the code blocks that I can find on the page and then I just.

E

D

By one on evaluating them, there is probably a more clever way of like implementing it, but I initially just did it for myself to to like get a better interactive experience in obsidian, but then, if more people come up with a better way of doing it, I'm completely open to that for sure.

E

Okay and just one other question about the publishing, when you publish what what do you get out of the publish process.

D

uh So I think obsidian.

F

D

Is like a closed source products from the obsidian team? It's not an open.

E

D

Service that you run yourself, but I think it's a way for them to get funding for sure.

E

So you publish to their cloud basically.

D

E

D

Mean I can show you actually if I can share my screen again.

D

So if I go to obsidian there is a command that is called publish and you go there. You select which files you want to you want to publish. So we take this one, for example, and then I publish it and then that's it right. They give you.

E

A url, but you can.

D

Also add, like a custom domain like what I have is my domain.

E

All right, fantastic, okay,.

D

A

Other questions.

F

um As far as um caching and not having to re-reevaluate all the code blocks, um I know clark has some built-in um mechanism to do that. And um I know, although I think it looks like wielder's pure closure script, but.

D

Yeah, so it's it's side, I guess you would say it's like a different dialect. I guess in the end right because it's like evaluating in its own way, so it's not really closure script. It's not really really closer, although I'm using it via social script. It's a bit.

E

D

A hair ball, you know, but I in the end to answer like concrete your question: I'm just going and clearing the states every time it changes and I go from the top to the bottom evaluating everything uh every time. So I.

F

Was just saying that um clerk has a built-in mechanism to cache different code blocks and to kind of keep an id and keep the values. So when you change one, it only evaluates that block and all of its dependencies. So you still get kind of a consistent view, so you may be able to take some inspiration from that. Although the clerk is in closure, so you may not be able to reuse the code, but we actually had a a meeting previously where we went through the caching code. So that may be.

D

Interesting to look at for sure, um I think the reason I just went with what I went was because I wanted something quick right and the initial idea was not even to publish anything. It wasn't until maybe a month.

E

Yeah, it looks great.

D

Like maybe some other people would like this too, but it will be, it will be nice to have like a proper implementation where we don't constantly run like all the corners. So it's a good idea. Thank you for for putting it there.

A

Yeah, that's cool, that's the it's interesting I used to use obsidian, but then I I gave up because I found the plugins too confusing, but uh this maybe this would help.

A

um I guess, if that's all, for now, we could move on to phil. If you'd like to go ahead and present, this looks kind of cool. I'm excited.

E

Right so well, basically, I think there's going to be a lot of overlap in a sense with the last one and in fact, looking at all the presenters today, I kind of thought. Maybe this is just going to be a book dude.

E

You know, fan club really because pretty much everyone is is now using psy or sci. Small closure interpreter stroke skittle. I think this is clearly something. That's that's revolutionizing, the the community, isn't it um so yeah. So I'm going to talk about uh cardigan bay and I'm going to show my screen. Let me just uh get this up.

E

I need to go to the tabs come on.

E

To go away here so um yeah there's a lot of overlap as as there's a lot going on at the moment in terms of these tools for thought, uh digital gardening kind of tools and um in a sense this is my take on it and but you know, obviously the wielder know with obsidian is another one and of course, there's a number of others. So I guess most of you are sort of familiar with.

E

What's going on with these things like rome like obsidian, like um all that uh and in a sense what is cardigan bait cardigan bay uh is a wiki type engine, but it's sort of evolving in the same direction. It's something that you can use as a personal note management tool. um It's got closure embedded in it. You can embed little closure scripts and you can publish a thing. So what I'd like to focus on, maybe is what I've once caught. I want to wrote a kind of uh tweet storm on on twitter kind of saying.

E

Why is cardigan bay like that? So what are the kind of things that are slightly different from everything I mean? Firstly, just out just to check everyone knows. I guess what a wiki is right. Anybody doesn't know what a wiki is.

E

Maybe just shout- and I can I can tell you, I'm assuming I'm assuming you all do do know that so.

E

Why what is cardigan so so cardigan-based starter? Let me just do a little bit of personal history um that let me just pull that I know.

E

Are you seeing a window here or are you seeing my whole screen, because I may need to change my screen sharing.

E

Sorry does anybody know if I can share my whole screen, not just one oh yeah, this is the screen. Isn't it.

A

I think it should be possible yeah.

E

You're, seeing.

A

E

Something that's slightly smaller than the whole.

A

Yeah, I think we're seeing.

E

A

E

A

Okay, so I need to I need to.

E

Go backwards and forwards between these um tabs.

A

At the top here.

E

E

So I started off using 20 years ago now, pretty much 2002 uh using a copy of use, use mod wiki. This is like a classic pearl based online wiki. I kind of had a commute to create a wiki called thought. Storms thought storms is something that started 20 years ago. It started with a number of people contributing to it over the years.

E

Well, the first thing that happened was it kind of started getting attacked by spam bots. Then somebody wrote a bot to kind of unroll the spam.

E

Then you know everyone sort of migrated to other sorts of social media and it kind of went into a bit of decline uh about 2012, ward, cunningham who's, the guy that wrote the original, wiki and sort of spawned that scene of people running wikis came up with this thing called the smallest federated wiki, which was an attempt to rethink wikis, instead of them being shared spaces, which everybody edited the same pages to being something where everyone had their own copy of the wiki a number of pages, and then you federated or sort of synchronized between them.

E

In a process it was rather like git and having multiple people working on multiple repositories and for a few years, thoughtstorms kind of my working moved to that engine and then, for various reasons. I decided against it, and I wrote my own engine in python. I thought python would be very simple and then that was okay for a bit, but I really wanted to work with closure.

E

So two years ago I decided I was actually going to write my own wiki engine to run thoughtstorms in closure, and so that's what I did I just picked up, and so it's a mixture of closure as a the server or um the enclosure script for the client in the browser.

E

So that's what we we have today and the first thing to understand about it is because it comes from this wiki tradition. It's quite kind of old-school in in many ways, but it has this purpose of managing a wiki. That's currently got about 6 000 pages in it and they are kind of quite traditional pages. Let's say there were large blocks of text that originally had a lot of people contributing to them and.

E

Well, you can see a sort of standard example here. So this is the front page. The hello world page is the the front page of a week, and you can see some discussion about it, and the first thing I decided to do was to break those large pages up into small pages. So here you can see standard. Looking thing you hit the edit. What you've got is a big text is a standard text box, but the first idea I wanted to do was to move to having multiple cards. Let's say so.

E

I just repurposed this sort of standard line separator. This is all marked down as a card separator, so you can see that you get two cards within the um the page and if we were to go to uh well, because if you look at something like obsidian, you sort of start saying well, you know why. Why do we have this rather old-fashioned? Looking switch between uh a text edit box and the the published version you can see here I hit the button to edit it. I save it. It goes back now.

E

This is a thing I decided. I really wanted to keep. I didn't want to try to have a a wysiwyg type thing and and you'll see that that lets us, in my opinion, be more expressive because we can start putting the closure in it.

E

Having a very explicit distinction between the edit mode and the publish mode, let's say, or the visible mode is something which lets us, uh which I the way I describe it is that you can put something into that gap between the two, which is more sort of complicated. If you try and do it on a piecemeals, that's good, because, for example, in here we can just put in say a piece of closure code that runs on the server.

E

Let's say: um let's do something like this apply, plus to range 10. We sort of think.

E

We need to convert this to a string, but.

E

And then, when you save it, it just gets evaluated on the server.

E

And so just let me.

E

We've also got the ability to put in our closure up here. It's using the the small closure interpreter apply the plus here.

E

Hit the execute there, we get it into a transcript type thing.

E

So the first, the first kind of basic idea of here is, is that we have got a an old style wiki, but we are going to start bringing in the ability to embed code and the inspiration for this is things like um jupiter notebook to an extent small talk, I mean if you notice. I call this the transcript, because small talk has got this kind of interactive environment where so we can start to think of this as a place to experiment with trying out code.

E

So one of the things that is important about this is this is for working locally, but you want to publish your code on a a live site like let's say the thoughtstorms site here, and so the question I've had is: how do you publish code which is being executed in the browser?

E

So here is an example of um a page which publishes some code. So if you were here, let me let me give you example: I've got a I've got a page here. If you look inside it, it's just standard text, but we've got an example of something called a workspace and the workspace here.

E

You can actually see some code running and the idea of this code is: it knows how to draw a graph, and then we define a function. We apply it to the points and then we graph it. So if you run it here, it will just graph that example of a function f squared we could try putting in say a function like this over some other points.

E

Run that you'll get a different graph appearing here and the this has been. This has been working for a while, but the main thing that I've done now is that when we export it, uh you get this static page coming out and you've got the same functionality using skittle, which is book, dudes, javascript version of the small closure interpreter. So you can run the same code here. You can also run say.

E

Something like this, where you're making a call to the javascript, maths, library and you'll get signed fashion. This is one thing: if anyone knows how to this is this is a question I've currently got.

E

I can't run this js math sine function from inside this, because in this version I'm just using the small closure interpreter directly from the closure script, which is in the uh which is in the the that's running this whole user interface, and it just refuses to do anything. It doesn't see the the math dot sign the js name space for some reason.

E

When I export it and I'm using um skittle, then it seems to see it fine, because the thing to understand about this is this published page is a simply a flat html page with one dependency on skittle everything else here.

E

The code is all just um embedded within that single page. So.

E

uh Just the other feature just to notice here sorry.

E

If we look here, you can see all the code that that knows how to actually draw the graph right, there's no knowledge of the graph itself built into built into this, or rather that it's simply there in this example code in the workspace.

E

But there is this comment here where you just say: public that divides: what's going to be kept private and what's going to be kept public. So when you look at the published version of that, you only see the public bit. So the idea here is that, within the context of a wiki, you've got a whole collection of pages and you might want to embed a little simulation or a little mathematical model.

E

You don't want to give all the code of the model, because that will just confuse the people reading the page you just want to give them a simple api to it like in this case of the graphing calculator, uh define a function applied. Some points called the graphing function itself.

E

Everything else is just sort of hidden behind the scenes. If someone wants to see it, they can see it, but we just keep it in a hidden input there, um so yeah. So there's a lot in cargobow. I wasn't going to show the whole thing today, just to show you kind of the status of um where we are. I mean if you've got other questions about it. Maybe I'm not explaining the motivation. Well, I think the motivation is fairly clear but yeah, so that's it.

E

So if, if you, if you're starting off with a wiki, that already has thousands of pages- and you wanted to kind of bring it into this- slightly update it and start allowing people to embed some some mathematical models or some simulations inside it.

E

That's where that's what this is evolving towards and it's giving you the ability to to embed closure within it and it's all open source. It's all the other. The other important features of this. Of course you keep all your files just as markdown files on your local machine. I keep them all in git, so it can be synchronized between different machines um and you can embed things like videos. So here was my launch thing.

E

um Yeah any questions, I think that's pretty much what I what I need to show today.

D

I do have a question um you. Might you mentioned that in some cases the code goes to our backend and gets evaluated and and sometimes used inside when.

E

You're using it in this, so there's the way, I think of it. There's two modes right: there's there's this version, that's running locally on my machine and this is the live version. Where I'm editing it then there's also what happens when you publish it and you just get flat html files and you put that on the server somewhere anyway.

E

So in this case there are two ways you can embed.

E

uh Let me just create a new sandbox page here. There are two places you can: you can run code, you can run it on the back end server just by putting in um code on server here and you can run it in a code workspace.

E

So in this case the code is run on the back end and in this case the code is run in the client, so they're both using the small closure interpreter, but there it's been called from the closure back end. Here it's been called from inside the closure script, which is running the the front end.

D

Answer is my question.

E

D

No that that answers my question.

E

On cio's, so there's actually three places like it runs on the back end on this. It runs in the workspace on the server and then when it's published, when it's exported as flat files. It then it it's. It uses a slightly different mechanism each time you know here here, it's closure, it's the small closure interpreter enclosure.

E

Here it's the small closure interpreter enclosure script, and here it's the skittle, javascript verse. You know javascript library, version of the small closure interpreter I mean it must be more or less the same, although, interestingly, this seems to give me access to the the js mather name space and for some reason I don't seem to have it here and I'm still trying to figure out why that is, if anyone's got any ideas.

E

Anything else, any other questions.

A

That was cool thanks for sharing.

E

Right, like there's, still very much work in progress, but it's it's all on github. If anyone wants to to have a go with it and you can just download the sort of executable java, you know it's all just in a jar file, so it will run locally on pretty much anything just just one of the other things that was really important for me. Creating this is that it runs on my tablet and my um phone.

E

So what I do is I run the um userland small linux machine app on my phone and tablet, and you run it in this, and sometimes I describe myself as militantly one-dimensional all right. I don't everything here is just one single diameter. You know sequences, there's nothing kind of laid out side by side, and one of the reasons for that is that this runs fine on a phone or anything else as long as you're running the actual server in um in the virtual linux machine.

E

The actual interface is not very sophisticated, but it, but it works equally well or equally badly. However, you think about it on pretty much anything which was a kind of important thing. For me, right thanks.

D

Nice, just a quick note: if you look at the link I sent to you on the in the zoom shots, okay, I think you you might be able to resolve uh the issue with the js global, not being there. Oh.

E

Fantastic. Thank you. Thank you.

A

Okay, cool thanks so much. I think we have one more then uh jacob. If you want to go ahead.

C

Sure all right, yeah.

G

Okay, let me just share my screen.

G

All right so um so platapub is what I'll be presenting um I'll just show the github page for that real, quick, actually.

G

It's like platypus, but pub for like publish um plotapub is a it's a tool for making blogs and newsletters. So I mean it's a little bit in the same spaces like wordpress, you know um and and the the shortest way I usually describe it is it's. It's meant to have kind of the same experience as you would have if you were um like like doing a static website and rendering it with closure. But, like I love having the flexibility of you know, using hiccup and and all those things and just writing out static files.

G

It's a nice workflow, um and so I wanted like to be able to continue doing that. To render my websites but platapub is an attempt to like create more of a web service and take some of the more more of the boring bits and factor them out. So you still have this theme system that uses closure babashka actually for rendering your websites, but then it's also more of like just a web app you can use and and and things so anyway, I'll just show you what it looks like.

G

I have it running locally already and actually normally, if you weren't, already signed in you go to this kind of this is a default sort of sign-in page, which I haven't done anything with yet, but I'm already logged in actually so I'll, just go directly here um and and yeah I'll just go through the app a little bit and then I'll talk a tiny bit about the background afterward.

G

So this is um so yeah. So this is platypus. There are basically three sections: there's a cms, so posts where you can get like a wysiwyg editor so like here is. This is a email I sent out to one of my lists announcing this meeting actually um and then also another little meetup we're doing next week, um and so you know you can write your post in here and then have metadata and things and save the post.

G

You know fairly standard and you can have some tags which are I'll, explain how those are used in a second, um so yeah, nothing too earth shattering um once you've written some posts. You can go over here and do sites. So so one of the things about platypud is that, as as opposed to say, word wordpress, for example, you know you have one instance of wordpress which correlates to like one website with platapud.

G

It's meant to be able to handle like all of your posts, all of your websites in one place. If you happen to have multiple, I I have a few. I still have more. I need to migrate over here and subplot a pub, but anyway so with posts.

G

You have just all the posts for all your websites and you use tags to say like what website each post is for so like biff. um This is a website for a web framework. I've made um and platypob also was built with biff platapub. Actually, half of it is because I wanted platypus for my own use and the other half is because I wanted more of a in-depth example project built with biff, so that if people are interested in learning biff, I can say like well here: here's like a a real working project.

G

You can take a look at if you like, um so when you make a site here. I'll just show you like creating a new one.

G

um It'll start out with some some default fields here, and you can, you know, put in the configuration values and things and the way this works for publishing is so here's another difference from like wordpress or something um it platypob itself will not host the website. Platypus just kind of like a headless cms. Is the term reduce, um so you edit your posts and platapub, but then you deploy them to netlify um so again, kind of actually the same a similar workflow to if you're, using a static site generator.

G

Where you, you know, maybe editing it in markdown on your your local machine and then you push it to like github pages or something that's. Basically, what platform does um and let's see so so yeah?

G

So I've got a cut, oh yeah and here's this website I just made like we don't have anything in it, so I'll just delete that, um but so, like I mentioned, I have two websites built with powderpuff already um and, and so this first one the sample the sample is my my little startup that I've been working on for a while, and so this is I'm using this for a blog website for the sample and so to show you what that looks like.

G

Comes with a default theme.

E

G

A theme is basically just a script um when you preview or publish a site, platypod will take all of your blog posts and then write them all to an edn file, and then the theme is a babashka script.

G

In fact, let me just show you that real quick, um you know I'll zoom in a tiny bit.

G

Comes with this default theme and the main file here is render site, and so this is just a babashka file and we use hookup for rendering things and and have a handful of functions here to write various parts of the website and so it'll read in all your posts from this input.edn file and and then spit them out to the local directory and then and then you can view them in your browser and publish them to nullify uh so so anyways, okay, so yeah so going back to this site.

G

This is using the default theme and there are some configuration values, so I can put in like like here. Let me show you if so a theme by the way here is where you specify those default um and we could change to say change the accent color to red and then maybe I'll save the site, configuration and then hit this preview button, and this will take a couple seconds shouldn't be super long, and so this is rendering the site with babashka and also running tailbone css, and so now the accent color.

G

That's what that originally was. This green color now spreads over here. There you go, um and so, let's see so so yeah, so that's basically sites and then the last bit of it is that you can also do newsletters, which I think is very important, because um you know it's fairly standard to have like an rss feed on your blog right um but they're, especially if you're trying to reach a non-programmer audience a lot of people, just don't use rss, but pretty much everyone uses email.

G

So I think it's in my opinion, it's very nice to be able to provide both of those. So you know, however, people would like to subscribe. They can do it um so here, like so, let's see so yeah. So this is the newsletter that I've that goes along with this, the sample blog here and similarly to how like platapub itself, doesn't host the site. Reading that will fire. We do the same for newsletters, so we're using mail gun here.

G

um So you can. You can create a newsletter here and just couple you know configuration fields. We do the same kind of thing for the theme. So so I mentioned there's a babashka script which will write out all these html files and things for your website.

G

You have another babasco script which will take individual post and then it will write it to an html file which you can send as an email and the way you do that is so like so, for example, this announcement post there's this little send button right here and if you go here, then we've got the post, we've selected, you can choose what newsletter you want to send it to um and and here I'll I won't send it because I already sent it to the list and then but I'll hit this preview button here, and so this is what the output of that the basket script would look like, um and so, if you want you, can you know if you wanted to tweak?

G

How something looks you could you know this is the script that basically scripted, so you can edit things and then just like refresh this page or hit preview again and then see if it looks how you like, then we have kind of the standard things you can. You know put in your email address and send yourself a test version before you send it out to the full list, um and that is pretty much it.

G

There is one little page here that jeff actually added the other day that to show your subscriber list, um which is all your subscribers, is stored in mail gun. I would show it to you, except that would be exposing the email addresses of all my subscribers, so I'll refrain from doing that, um but so yeah that is plot a pub there.

G

I have a couple more minutes to talk uh I'll cover some a tiny bit more about the background and some open issues and things, but before we go on to that, anyone have any questions. Anything I want to discuss about this.

E

Just one question: how uh presumably this just talks to a standard email server than to send the email out is that right.

G

uh Not no not a like it's not using the smt protocol. um It's using so mail gun specifically and the mail has their own api. Okay, so.

E

It's using the mail gun apk.

G

Yeah thanks yeah.

E

A

G

A

Oh sorry, I was just curious. Is this? um Oh, would this be all self-hosted at the moment or is this something you're offering as like a like? You know subscription thing that you host or whatever and sign up for yeah.

G

At the moment it is self-hosted. I am planning to do it as a managed service. There are some complications.

A

That's cool though so it's so it's all open source so like if someone wanted to you could deploy this on your own like little droplet, somewhere or whatever, and and just have it up and running.

G

Yeah and and actually oh yeah- that's a good point. I should mention so platypurp is built, so you don't need to have it running even on a drop, but you can just run it on your local machine. Oh.

E

That's kind of good.

G

Yeah, because all the parts of it that are public facing are handled by external services, um including, for example like like this, this female sign-up form is so I mentioned the sites hosted on netlify.

G

So one of the things that the basket script does is, is it will write out some some serverless functions, because now, if I can do like simple back-end javascript things, so this is.

A

So how does so it's all local and then it generates like the static website that you would deploy, then, and then I guess it's also. If you want to, if you're going to send an email, you have the app running locally and then you press send and like just from your local machine. It calls mail gun and and sends it off. Okay,.

C

A

Really cool yeah exactly.

G

That's cool yeah, so yeah. So this is an example of like this is a little so subscribe.

E

G

File- and so this is like what the bash code publishes to it, and this will handle by taking the form input and then hanging it off to mail again,.

A

And like yeah and now, if I can handle those like sort of simple form, submissions or whatever.

G

A

G

A

G

Can you can do more complex websites than nullified too? I I personally just like normal closure back-end, so I I tend to just use this kind of thing for some stuff, but yeah yeah.

A

I know for sure I'm all about the static static websites totally make sense for, like just information websites, it's a bummer to have a something running: 24 7.

G

It's also also another nice thing about that is that um theoretically like if, if once I do, get this to the point where I'm providing it as a managed service, I don't have to. It- should be much easier to handle multiple users, because then powderpuff doesn't actually have to handle any of the traffic like. If anyone happens to have like a high traffic website right right.

E

It's just kind of.

G

You know give it off to notify and should be easy.

A

Yeah cool, how, I guess sorry one other question it says so like you're signed in what is it is it? Is that, like a some custom, auth thing, are you using like a 0 or something like that.

G

Yeah, so it's custom, it's fairly simple. um It is it's the standard authentication that biff provides actually in the framework, um and so it's done via email link.

G

So if, if you've like so normally for any of this project, if you set up like a an account like mail gun for sending emails, you can put that in and then you know you sign in sends an email click on the link and by default. If you don't have that set up, it will just print out to your console so like if you were to go and clone platopub and run on your local machine.

G

You could just you know, sign in and then go switch to your terminal and click the link there and sign in for them cool cool.

A

Yeah well thanks.

G

Yeah, so um yeah I'll just go just super briefly over. Let's go back to the github profile here or the github page, um so yeah so like so. Like I mentioned, this is half of the reason I built this is kind of an example project for biff and and so what I'm I'm trying to provide an open source project, that's written in biff. So if anyone wants to, um you know, get their food wet with biff there's a project here they can start working on.

G

So we have I've purposefully for that reason tried to refrain from um polishing it too much. So you might have noticed like a lot of it is, is sort of janky like like we like in the side configuration for example.

G

It actually limits the other one, it'd be nice if we had better components like instead of just putting in hex values like um you know, nice to have like a color picker component and things like that and there's so there's a lot of low hanging fruit here for um updating things, and so we have a list of issues here so like like better. You know, tags and daytime booker image component. Those things or another issue here is: this is a fairly simple one for just um inferring.

G

Some data on the back end should be like a couple lane changes, so so I'm trying to have a nice list of like fairly easy to get into issues that so, if you are wanting to get into an open source project or write some code for something that's kind of an easy on-ramp um oops, the other.

E

G

So, like I mentioned you know, part of the long-term plan is to have this posted as managed service. I have this roadmap and this is going forward. This is what I'm planning to focus my own efforts on, and some of these are a little bit more complicated. So right now we're at like stage one which is you know, you just run it on your local machine. You know, use it as a single.

E

G

The next couple stages you yeah actually actually two three and four are all for like changing it, so you know you have a managed service. You can just start using it. You don't have to add your own api keys. um The main complications there is is one one, especially for sending emails, it's kind of a hit, because then you have to worry about potential spammers, and so you have to have someone who wants to. You know monitor that which is not something I particularly want to do at the moment.

G

The biggest complication is with custom themes, because the a big part of this theme system be extremely flexible and where you know you're, just writing you know just about bash was good right. However, if you have a managed service running on something with multiple users, that would be just a terrible security flaw right.

G

um So so the way that works is or it will need to work is we need to sandbox it somehow. So at the moment it's not sandbox, so we can't really have a managed service with multiple people. Until we figure out a way to you know, run your theme code and some kind of something um but anyway. So that is the plan. That's part of um any other questions or things.

G

All right, great yeah! Well, thanks for having me.

A

Yeah thanks for sharing oh yeah, I guess that kind of wraps up our like scheduled uh presentations or whatever, but um yeah anyone. If anyone wants to stick around and ask questions or um just chat or talk about anything else uh feel free, but I guess we could probably um kind of close down the recording pretty soon. I don't know what do you think daniel anything else worth mentioning?

A

I guess like maybe worth mentioning. We do this like every what every couple weeks or once a month ish.

A

So if you ever have anything like this that you want to share with the community, um it's it's wide open and you can find all these people on various places on the internet, github close, reverse or maybe the closure slack whatever. So we'll post like a an update in a few days about all the stuff we talked about here and where to find all the projects and all the people and everything like that.

A

um So I think that's all.