surreal
lowtechguys
surreal | lowtechguys | |
---|---|---|
4 | 2 | |
668 | 5 | |
- | - | |
8.9 | 6.9 | |
2 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.
surreal
-
jQuery v4.0.0 Beta
Love that this happened, but I've been waiting for 4.0 soooo long that I ended up making my own modern jQuery: https://github.com/gnat/surreal
key differences:
* Vanilla first. 1 file. Under 340 lines.
- Show HN: Tiny jQuery alternative with inline Locality of Behavior
- Surreal – A small jQuery-like utility that pairs with Htmx
-
Anime.js – A lightweight JavaScript animation library
If you like this, you may also want to check out: https://github.com/gnat/surreal
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?
hyperaxe - 🪓 An enchanted hyperscript weapon.
org-mode-site-template - A workflow for a complete site using the HTML publish option of Emacs Org-Mode
fat - Web's fastest and most lightweight animation tool.
10kbclub - A curated collection of websites whose home pages do not exceed 10 KB compressed size
shifty - The fastest TypeScript animation engine on the web
Lunar - Intelligent adaptive brightness for your external monitors
editable-website - A SvelteKit template for building CMS-free editable websites
htmx-serverless - HTMX Serverless XHR requests. A frontend tool to define custom responses to XHR requests based on the request Path.
Slim - Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.
anime.js - JavaScript animation engine