10kbclub
lowtechguys
10kbclub | lowtechguys | |
---|---|---|
11 | 2 | |
90 | 5 | |
- | - | |
0.0 | 6.9 | |
4 months ago | about 2 months ago | |
JavaScript | 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.
10kbclub
- How to build a website without frameworks and tons of libraries
- Gallery of Minimal Design Websites
- 10 KB Club: Curated list of websites whose home pages do not exceed 10 KB size
-
Hacker News top posts: Nov 20, 2022
10 KB Club: Curated list of websites whose home pages do not exceed 10 KB size\ (0 comments)
- KB Club
-
What's the smallest Wordpress site you've seen?
I was reading WHY YOUR WEBSITE SHOULD BE UNDER 14KB IN SIZE and also found this neat site https://10kbclub.com/
- Caffè Italia * 21/04/21
-
Show HN: A Directory of Personal Blogs
Other collections:
The big list of personal websites: http://biglist.terraaeon.com/
The directory for Search My Site: https://searchmysite.net/search/browse/
10kb Club: https://10kbclub.com
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?
zola_jamiedumont.com - Zola codebase behind jamiedumont.com
org-mode-site-template - A workflow for a complete site using the HTML publish option of Emacs Org-Mode
Slim - Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.
surreal - 🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
eureka - Lucene-based search engine for your source code
fat - Web's fastest and most lightweight animation tool.
editable-website - A SvelteKit template for building CMS-free editable websites
eleventy 🕚⚡️ - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
shifty - The fastest TypeScript animation engine on the web