21 ms·

Web Origami, for making websites where you can understand how they’re made

222 points by ayoreis 2y ago

ayoreis 2y ago
Also: https://jan.miksovsky.com/posts/2024/11-20-programming-language-playtest https://jan.miksovsky.com/posts/2024/11-20-programming-langu...
deanebarker 2y ago
So... it's a static site generator? I've looked through the site, but I'm having trouble putting it in context. Sounds like it takes data and turns it into a static website. Is that right?
- JeremyBarbosa 2y ago
  That's how I read it too? And while the documentation has lots of examples, I get a bit lost in that you start with some form of JSON file, which consumes either YAML or HTML files, who in turn can consume Markdown files. It doesn't seem (from my reading!) to have the level of abstraction I would expect from a SSG.
- bryanrasmussen 2y ago
  so, you're saying the claim of making websites where you can understand how they're made doesn't seem to hold up?
  - deleted 2y ago
    [deleted]
echoangle 2y ago
[flagged]
- deleted 2y ago
  [deleted]
- inanutshellus 2y ago
  From your description I expected a pile of legalese, but in reading it... I don't see "passive-aggressive" I see simple etiquette guidelines that shouldn't have to be said, but... clearly do. Often users screaming "I won't use [your project] if you don't fix [my whim]!"** actually does get some traction. So saying explicitly in the readme that that is rude and won't be allowed seems ... healthy. Notably, because it's just one dude's passion project, not a corporate-backed such-n-such, we don't want him resenting ever creating it, right? ** (or, to wit, "if you don't change your README I wouldn't want to use this." lol)
  - echoangle 2y ago
    The best analogy for the feeling I got when reading this is visiting someone at his house and the first thing he says is „BTW, don’t take any of my stuff, that’s stealing!“. Sure, but can I take of my shoes first? If it’s in a CodeOfConduct.md I get it but having it be more than half of the readme feels a bit weird.
    - hatsix 2y ago
      Which is it? So problematic that you wouldn't use it even if it were exactly the tool you needed, or "a bit weird". I agree, it's a bit weird. So is putting a lot of effort into a project that nobody is asking for and you'll give it away for free. There are many people in my life that are neurodivergent and some situations cost more than they are worth. I have had several projects I thought were good candidates for open source, but the idea of dealing with the "anonymous a-hole" has been a show-stopper for me. I appreciate that the authors of this project seem to have similar concerns, but have overcome them by creating a social contract. I believe that it's entire goal is to turn people away whose interactions may be too much for the maintainers. Good. If reading those rules and abiding by them is too much for you, then just turn around and walk away. That's the intention and goal. They're doing you a favor, letting you know that your brand of weird is not compatible with their brand of weird. They don't have to make space for everyone in their little project, and there might not be space for you there, and that's OK.
      - 2y ago
- mplewis 2y ago
  Great – that is exactly how the author wants to be treated. They have set some clear boundaries about working with random internet people like us, and it’s our responsibility to respect those boundaries.
magnio 2y ago
I'm not sure if we need another bundler, but this one surely has the best name.
weego 2y ago
The metaphor is strained at best, and confusing at worst. It's a very high-concept pitch and so is the technical documentation, but the use case is aimed at people doing something, ultimately, very simple. I'm not sure that friction works at all.
- deleted 2y ago
  [deleted]
chefandy 2y ago
My interest in this is piqued. I’m really happy to see people doing things to simplify personal standalone website authorship making it expressive and flexible without a bulky content management system or jumping through hoops for some front-end toolchain. I know when I’m developing things I’m often as or more concerned with satisfying multiple use cases or functionality extensibility, but having a nice focused tool polished for one use case is nice. When I was deep in web dev and had my machine set up with a selection of go-to docker setups for different dev needs and the knowledge of how that all needed to be orchestrated was fresh in my mind, deploying most of the SSGs or whatever seemed trivial. Now in the odd event that I have a personal project or whatever that indicates more than just a few static handmade pages, the first thing I do after looking up what todays web world consider to be the “obvious” best tools and practices is see how many people are asking about counterintuitive config issues or other getting-started type problems. As cool as whatever application might look, I know I’ve got about two good hours in me of recall, research and troubleshooting before I just say “fuck it. Guess I didn’t want to do that project anyway.” The point of those tools is to save time and energy — you don’t have to get very far outside “the loop” for it to take more effort than it’s worth to get back in for a lot of them. Simple tools for simple tasks are great when you know you’ll never ever need built-in hooks to wrangle graphql queries and automatically invalidate CDN caches and generate 10 sizes of images optimized for every conceivable device or whatever.
- zwnow 2y ago
  Whats wrong with just using HTML, Js and CSS for personal projects?
  - sabellito 2y ago
    I do that. Duplicating the header, menu, and footer manually on every page is a pain in the ass. Not to mention the lack of minification.
    - plonq 2y ago
      Why do you care if your personal site is minified?
schindlabua 2y ago
Don't hate it but it feels like the Origami language should just be a typescript library. I'm not a fan of DSLs in general though.
- deleted 2y ago
  [deleted]
- hombre_fatal 2y ago
  Yeah, I don't see how using a DSL helps get any closer to "understanding how the website is made" especially once you look at its templating system. I think a better description of the project is that it's built around its async-tree abstraction: https://weborigami.org/pattern/ https://weborigami.org/pattern/
ramon156 2y ago
Cool idea! Don't think I'm the target audience though. Maybe this is something for people who are starting out with web dev?
turnsout 2y ago
Interesting, and I love Static Site Generators (SSGs), but as soon as you introduce branching and logic to the page creation, you've effectively ruled out non-programmers. So I don't know how it will achieve the stated goal of "a language for making websites where you can understand how they're made." The audience you're left with (programmers) will bristle at the DSL and wonder why they don't just use "___" <-- fill in their favorite SSG.
soco 2y ago
And still supporting HTTP. I don't know about this, anyone can suggest a reason to use HTTP nowadays?
- optymizer 2y ago
  * To serve content that can be accessed on networks using captive portals * To serve content on localhost while developing * To serve content on devices where setting up letsencrypt or other SSL is either too much of a hassle or not important * To stand up a quick HTTP server on hacked servers Maybe others can come up with more examples
  - tarxvf 2y ago
    To allow access by devices (embedded, vintage) where SSL cannot run.
  - quectophoton 2y ago
    > * To serve content on devices where setting up letsencrypt or other SSL is either too much of a hassle or not important This is my use case, serving homeserver stuff from a ".internal" domain, only accessible through WireGuard. I ain't gonna mess with a custom CA just for this. If one of my devices gets compromised enough to be able to sniff network packets that pass through the WireGuard interface, I have bigger problems to worry about.
  - dogboat 2y ago
    Serve content that is reversed proxied by something that terminates SSL - cloudflare, cloud gateways, Nginx etc, ingress controllers ...
- deleted 2y ago
  [deleted]
- hn_throwaway_99 2y ago
  Why do you say "still supporting HTTP"? AFAICT this is just a site builder, but doesn't enforce how the site is deployed. It includes "builtins" for accessing other resources (i.e., as a client) using HTTP, but I hope it should be obvious why that is a necessity.
j45 2y ago
Unnecessary complexity can decrease the shelf life and lifetime of a piece of software. Best to keep it simple to let any complex needs arrive on their own, instead of prematurely complicating things.
msdundarss 2y ago
Thanks for making it open-source!
nullbyte 2y ago
This looks great! I love the simplicity of the syntax. I feel like other static site generators can get too crazy with syntax and features, making it hard to learn. I think Origami is really nice in comparison. Also great looking docs.
jcalabro 2y ago
The logo is quite similar to Roc? [0] https://www.roc-lang.org/ https://www.roc-lang.org/
klntsky 2y ago
What's the motivation for making it another language as opposed to a framework / library?
taco_emoji 2y ago
YAML? C'mon, guys
bqmjjx0kac 2y ago
This site would benefit from a comparison with other static site generators. I dare say it's not that difficult for a programmer to roll their own SSG with whatever is at hand. Does it have any clever properties that naive solution wouldn't? * Like reproducible builds or incremental/cacheable builds? * Does it require the entire site fits in memory at build time, or can it generate terabyte-sized sites without breaking a sweat?
xrd 2y ago
I love this. And, I have my own take on it. My static site generator Svekyll (https://extrastatic.dev/svekyll/svekyll-cli https://extrastatic.dev/svekyll/svekyll-cli) has an option you can add to the _config.yml: "view_source" If you do that, it provides a link at the bottom of each post which says "view source to this post" If you click on that, you can see all the files used to generate that post, and then download a zip which is a fully packaged tiny svelte app that builds into that blog page. For example, this blog post on embeddings has a bunch of svelte components, embeds an embedding model right inside the page and runs it via JavaScript. If you scroll all the way down, you can download the zip file, unzip it and run "npm i && npm run build && cd build && npx http-server -o" and you can see the fully built blog. https://webiphany.com/2024-04-29-distance-sean-shawn https://webiphany.com/2024-04-29-distance-sean-shawn PRs describing this feature: https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/40 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests... https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/46 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests... https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/47 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests...
wackget 2y ago
> The Origami language syntax is relatively simple and intended for people who have some experience working with HTML and CSS. Knowledge of JavaScript isn’t required, although if you do know JavaScript you can do a lot with Origami. So you need to learn HTML and CSS so you can use Origami to... avoid building a site with HTML and CSS?
- OuterVale 2y ago
  It isn't at all about not building with HTML/CSS. It's a language that makes building with HTML/CSS and other web standards easier.
OuterVale 2y ago
I'm using Origami on my website over at https://vale.rocks https://vale.rocks. I recently did a brief writeup about the implementation of my site, including touchings on Origami. I'm really loving it! https://vale.rocks/posts/the-implementation-of-this-site https://vale.rocks/posts/the-implementation-of-this-site
- johnisgood 2y ago
  When I scroll down, the "VALE" stuff goes above the menu, making both unreadable. Might want to fix that.
  - OuterVale 2y ago
    Could you please elaborate on exactly what you're experiencing? Include your browser/OS if possible. Thanks for letting me know!
    - johnisgood 2y ago
      https://i.imgur.com/tfB0qsa.png https://i.imgur.com/tfB0qsa.png Does this help? This happens as I scroll down till it is over the menu. I am using Vivaldi 5.7.2921.65 (Stable channel) stable (64-bit).
      - OuterVale 2y ago
        I very much treat this site as a testing ground for my learning and therefore generally start using new features as soon as they are newly available in Baseline. Hence, your browser, which hasn't been updated in over a year, is having issues rendering all the modern features. You might want to consider updating your browser, as it has some known security vulnerabilities. Appreciate the photo and report though.
        johnisgood 2y ago
        You are right, it is a bit dated. The website works with Firefox. I will update Vivaldi later and see if it works. I will get back to you if it does not work with the latest version of Vivaldi, which is Chromium-based.
hiked 2y ago
This doesn't look too bad, I'm very interested in it, it's helped me a lot

222 points by ayoreis 2y ago

Also: https://jan.miksovsky.com/posts/2024/11-20-programming-language-playtest https://jan.miksovsky.com/posts/2024/11-20-programming-langu...

deanebarker 2y ago

So... it's a static site generator? I've looked through the site, but I'm having trouble putting it in context. Sounds like it takes data and turns it into a static website. Is that right?

JeremyBarbosa 2y ago
That's how I read it too? And while the documentation has lots of examples, I get a bit lost in that you start with some form of JSON file, which consumes either YAML or HTML files, who in turn can consume Markdown files. It doesn't seem (from my reading!) to have the level of abstraction I would expect from a SSG.
bryanrasmussen 2y ago
so, you're saying the claim of making websites where you can understand how they're made doesn't seem to hold up?
- deleted 2y ago
  [deleted]

echoangle 2y ago

[flagged]

deleted 2y ago
[deleted]
inanutshellus 2y ago
From your description I expected a pile of legalese, but in reading it... I don't see "passive-aggressive" I see simple etiquette guidelines that shouldn't have to be said, but... clearly do. Often users screaming "I won't use [your project] if you don't fix [my whim]!"** actually does get some traction. So saying explicitly in the readme that that is rude and won't be allowed seems ... healthy. Notably, because it's just one dude's passion project, not a corporate-backed such-n-such, we don't want him resenting ever creating it, right? ** (or, to wit, "if you don't change your README I wouldn't want to use this." lol)
- echoangle 2y ago
  The best analogy for the feeling I got when reading this is visiting someone at his house and the first thing he says is „BTW, don’t take any of my stuff, that’s stealing!“. Sure, but can I take of my shoes first? If it’s in a CodeOfConduct.md I get it but having it be more than half of the readme feels a bit weird.
  - hatsix 2y ago
    Which is it? So problematic that you wouldn't use it even if it were exactly the tool you needed, or "a bit weird". I agree, it's a bit weird. So is putting a lot of effort into a project that nobody is asking for and you'll give it away for free. There are many people in my life that are neurodivergent and some situations cost more than they are worth. I have had several projects I thought were good candidates for open source, but the idea of dealing with the "anonymous a-hole" has been a show-stopper for me. I appreciate that the authors of this project seem to have similar concerns, but have overcome them by creating a social contract. I believe that it's entire goal is to turn people away whose interactions may be too much for the maintainers. Good. If reading those rules and abiding by them is too much for you, then just turn around and walk away. That's the intention and goal. They're doing you a favor, letting you know that your brand of weird is not compatible with their brand of weird. They don't have to make space for everyone in their little project, and there might not be space for you there, and that's OK.
    - 2y ago
mplewis 2y ago
Great – that is exactly how the author wants to be treated. They have set some clear boundaries about working with random internet people like us, and it’s our responsibility to respect those boundaries.

magnio 2y ago

I'm not sure if we need another bundler, but this one surely has the best name.

weego 2y ago

The metaphor is strained at best, and confusing at worst. It's a very high-concept pitch and so is the technical documentation, but the use case is aimed at people doing something, ultimately, very simple. I'm not sure that friction works at all.

deleted 2y ago
[deleted]

chefandy 2y ago

My interest in this is piqued. I’m really happy to see people doing things to simplify personal standalone website authorship making it expressive and flexible without a bulky content management system or jumping through hoops for some front-end toolchain. I know when I’m developing things I’m often as or more concerned with satisfying multiple use cases or functionality extensibility, but having a nice focused tool polished for one use case is nice. When I was deep in web dev and had my machine set up with a selection of go-to docker setups for different dev needs and the knowledge of how that all needed to be orchestrated was fresh in my mind, deploying most of the SSGs or whatever seemed trivial. Now in the odd event that I have a personal project or whatever that indicates more than just a few static handmade pages, the first thing I do after looking up what todays web world consider to be the “obvious” best tools and practices is see how many people are asking about counterintuitive config issues or other getting-started type problems. As cool as whatever application might look, I know I’ve got about two good hours in me of recall, research and troubleshooting before I just say “fuck it. Guess I didn’t want to do that project anyway.” The point of those tools is to save time and energy — you don’t have to get very far outside “the loop” for it to take more effort than it’s worth to get back in for a lot of them. Simple tools for simple tasks are great when you know you’ll never ever need built-in hooks to wrangle graphql queries and automatically invalidate CDN caches and generate 10 sizes of images optimized for every conceivable device or whatever.

zwnow 2y ago
Whats wrong with just using HTML, Js and CSS for personal projects?
- sabellito 2y ago
  I do that. Duplicating the header, menu, and footer manually on every page is a pain in the ass. Not to mention the lack of minification.
  - plonq 2y ago
    Why do you care if your personal site is minified?

schindlabua 2y ago

Don't hate it but it feels like the Origami language should just be a typescript library. I'm not a fan of DSLs in general though.

deleted 2y ago
[deleted]
hombre_fatal 2y ago
Yeah, I don't see how using a DSL helps get any closer to "understanding how the website is made" especially once you look at its templating system. I think a better description of the project is that it's built around its async-tree abstraction: https://weborigami.org/pattern/ https://weborigami.org/pattern/

ramon156 2y ago

Cool idea! Don't think I'm the target audience though. Maybe this is something for people who are starting out with web dev?

turnsout 2y ago

Interesting, and I love Static Site Generators (SSGs), but as soon as you introduce branching and logic to the page creation, you've effectively ruled out non-programmers. So I don't know how it will achieve the stated goal of "a language for making websites where you can understand how they're made." The audience you're left with (programmers) will bristle at the DSL and wonder why they don't just use "___" <-- fill in their favorite SSG.

soco 2y ago

And still supporting HTTP. I don't know about this, anyone can suggest a reason to use HTTP nowadays?

optymizer 2y ago
* To serve content that can be accessed on networks using captive portals * To serve content on localhost while developing * To serve content on devices where setting up letsencrypt or other SSL is either too much of a hassle or not important * To stand up a quick HTTP server on hacked servers Maybe others can come up with more examples
- tarxvf 2y ago
  To allow access by devices (embedded, vintage) where SSL cannot run.
- quectophoton 2y ago
  > * To serve content on devices where setting up letsencrypt or other SSL is either too much of a hassle or not important This is my use case, serving homeserver stuff from a ".internal" domain, only accessible through WireGuard. I ain't gonna mess with a custom CA just for this. If one of my devices gets compromised enough to be able to sniff network packets that pass through the WireGuard interface, I have bigger problems to worry about.
- dogboat 2y ago
  Serve content that is reversed proxied by something that terminates SSL - cloudflare, cloud gateways, Nginx etc, ingress controllers ...
deleted 2y ago
[deleted]
hn_throwaway_99 2y ago
Why do you say "still supporting HTTP"? AFAICT this is just a site builder, but doesn't enforce how the site is deployed. It includes "builtins" for accessing other resources (i.e., as a client) using HTTP, but I hope it should be obvious why that is a necessity.

j45 2y ago

Unnecessary complexity can decrease the shelf life and lifetime of a piece of software. Best to keep it simple to let any complex needs arrive on their own, instead of prematurely complicating things.

msdundarss 2y ago

Thanks for making it open-source!

nullbyte 2y ago

This looks great! I love the simplicity of the syntax. I feel like other static site generators can get too crazy with syntax and features, making it hard to learn. I think Origami is really nice in comparison. Also great looking docs.

jcalabro 2y ago

The logo is quite similar to Roc? [0] https://www.roc-lang.org/ https://www.roc-lang.org/

klntsky 2y ago

What's the motivation for making it another language as opposed to a framework / library?

taco_emoji 2y ago

YAML? C'mon, guys

bqmjjx0kac 2y ago

This site would benefit from a comparison with other static site generators. I dare say it's not that difficult for a programmer to roll their own SSG with whatever is at hand. Does it have any clever properties that naive solution wouldn't? * Like reproducible builds or incremental/cacheable builds? * Does it require the entire site fits in memory at build time, or can it generate terabyte-sized sites without breaking a sweat?

xrd 2y ago

I love this. And, I have my own take on it. My static site generator Svekyll (https://extrastatic.dev/svekyll/svekyll-cli https://extrastatic.dev/svekyll/svekyll-cli) has an option you can add to the _config.yml: "view_source" If you do that, it provides a link at the bottom of each post which says "view source to this post" If you click on that, you can see all the files used to generate that post, and then download a zip which is a fully packaged tiny svelte app that builds into that blog page. For example, this blog post on embeddings has a bunch of svelte components, embeds an embedding model right inside the page and runs it via JavaScript. If you scroll all the way down, you can download the zip file, unzip it and run "npm i && npm run build && cd build && npx http-server -o" and you can see the fully built blog. https://webiphany.com/2024-04-29-distance-sean-shawn https://webiphany.com/2024-04-29-distance-sean-shawn PRs describing this feature: https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/40 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests... https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/46 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests... https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests/47 https://extrastatic.dev/svekyll/svekyll-cli/-/merge_requests...

wackget 2y ago

> The Origami language syntax is relatively simple and intended for people who have some experience working with HTML and CSS. Knowledge of JavaScript isn’t required, although if you do know JavaScript you can do a lot with Origami. So you need to learn HTML and CSS so you can use Origami to... avoid building a site with HTML and CSS?

OuterVale 2y ago
It isn't at all about not building with HTML/CSS. It's a language that makes building with HTML/CSS and other web standards easier.

OuterVale 2y ago

I'm using Origami on my website over at https://vale.rocks https://vale.rocks. I recently did a brief writeup about the implementation of my site, including touchings on Origami. I'm really loving it! https://vale.rocks/posts/the-implementation-of-this-site https://vale.rocks/posts/the-implementation-of-this-site

johnisgood 2y ago
When I scroll down, the "VALE" stuff goes above the menu, making both unreadable. Might want to fix that.
- OuterVale 2y ago
  Could you please elaborate on exactly what you're experiencing? Include your browser/OS if possible. Thanks for letting me know!
  - johnisgood 2y ago
    https://i.imgur.com/tfB0qsa.png https://i.imgur.com/tfB0qsa.png Does this help? This happens as I scroll down till it is over the menu. I am using Vivaldi 5.7.2921.65 (Stable channel) stable (64-bit).
    - OuterVale 2y ago
      I very much treat this site as a testing ground for my learning and therefore generally start using new features as soon as they are newly available in Baseline. Hence, your browser, which hasn't been updated in over a year, is having issues rendering all the modern features. You might want to consider updating your browser, as it has some known security vulnerabilities. Appreciate the photo and report though.
      - johnisgood 2y ago
        You are right, it is a bit dated. The website works with Firefox. I will update Vivaldi later and see if it works. I will get back to you if it does not work with the latest version of Vivaldi, which is Chromium-based.

hiked 2y ago

This doesn't look too bad, I'm very interested in it, it's helped me a lot