editable-website
lowtechguys
editable-website | lowtechguys | |
---|---|---|
5 | 2 | |
1,297 | 5 | |
- | - | |
6.1 | 6.9 | |
about 2 months ago | about 2 months ago | |
Svelte | JavaScript | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
editable-website
- Show HN: Primo – a visual CMS with Svelte blocks, a code editor, and SSG
-
How to build a website without frameworks and tons of libraries
Been dedicating a ton of time to this goal lately.
I released a "SvelteKit template for building CMS-free editable websites" earlier this year and the idea has evolved since. I started out with using Postgres + MinIO for storage, but have switched entirely to SQLite. I also added an in-place image cropper, to resize and optimize images on the client side (WebP output) before uploading and storing them in SQLite. I chose Svelte because it's easy to build classic Web pages (with minimal JS overhead), and at same time implement the reactive layer (e.g. editing) on top of it (will be loaded async). However we are also evaluating the possibility to port this to a LAMP stack at some point. Oh and everything is dynamic here, no build steps involved, edits are live immediately.
Just launched my first client project using this approach:
https://trails-shop.at?editable=true (hit the red button in the bottom-right corner)
Project website: https://editable.website
-
A SvelteKit template for building CMS-free editable websites
The editor payload now is loaded on demand (after you click edit), so it's truly progressively enhanced now. :)
Thank you Nils Kjellman for the patch. https://github.com/michael/editable-website/pull/8
lowtechguys
-
How to build a website without frameworks and tons of libraries
I use something very similar on https://lunar.fyi and https://lowtechguys.com but I wouldn’t call this “simple” anymore.
They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that)
I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes)
For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim.
I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server.
I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6]
———
You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters.
Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc.
I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution.
[0] https://plim.readthedocs.io/en/latest/
[1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
[2] https://caddyserver.com/docs/command-line#caddy-file-server
[3] https://syncthing.net
[4] https://github.com/eradman/entr
[5] https://nitoyon.github.io/livereloadx/
[6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile
-
Anime.js – A lightweight JavaScript animation library
One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software.
I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd
This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/
But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.
What are some alternatives?
org-mode-site-template - A workflow for a complete site using the HTML publish option of Emacs Org-Mode
eureka - Lucene-based search engine for your source code
10kbclub - A curated collection of websites whose home pages do not exceed 10 KB compressed size
kahi-ui - Straight-forward Svelte UI for the Web
surreal - 🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
entr - Run arbitrary commands when files change
fat - Web's fastest and most lightweight animation tool.
Slim - Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.
svelte-carousel - A super lightweight, super simple Carousel for Svelte 3
shifty - The fastest TypeScript animation engine on the web