lowtechguys
theatre
lowtechguys | theatre | |
---|---|---|
2 | 27 | |
5 | 10,814 | |
- | 1.6% | |
6.9 | 8.4 | |
2 months ago | about 1 month ago | |
JavaScript | TypeScript | |
- | Apache License 2.0 |
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.
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.
theatre
-
Time-Based CSS Animations
For anything more advanced than a simple easing function or some basic keyframes on one or two channels you'll quickly run into the limitations of this approach.
I've been using Theatre.js the last few years and really loving it. It's a library divided into two parts; one is a studio UI with a timeline for editing keyframes and bezier curves, and the other is a runtime for taking those keyframes and interpolating values in relation to a timeline. Try it for anything that requires coordinated animations.
https://www.theatrejs.com/
-
Can we talk about the absolute chokehold GSAP has on the industry?
https://www.theatrejs.com/ (saw this just yesterday ..looks interesting)
- Anime.js – A lightweight JavaScript animation library
-
10 repositories to star if you are a Javascript developer
9. TheatreJs - 8.8k stars
- Is there any guide for Threejs (and R3F) aniamtion?
- Theatre.js – Animation Toolbox for the Web
- [AskJS] Library that gives you a UI like the editor of premier pro/final cut
-
8 Helpful Tools For Frontend Developers 🦄
5. Theatre JS
-
3 Frontend Developers' Must-Have Tools
Theatre.Js. For the web, I created a motion design. Theatre.js is a GUI-based JavaScript animation library. The DOM, WebGL, and any other JavaScript variable are animated. It's essentially a visual editor for animating DOM objects. www.theatrejs.com
- Ask HN: How to quickly animate sketches and 2D diagrams?
What are some alternatives?
org-mode-site-template - A workflow for a complete site using the HTML publish option of Emacs Org-Mode
web-animations-js - JavaScript implementation of the Web Animations API
10kbclub - A curated collection of websites whose home pages do not exceed 10 KB compressed size
Mattermost - Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
surreal - 🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
openmoji - Open source emojis for designers, developers and everyone else!
fat - Web's fastest and most lightweight animation tool.
python-goto - A function decorator, that rewrites the bytecode, to enable goto in Python
editable-website - A SvelteKit template for building CMS-free editable websites
three.js - JavaScript 3D Library.
Slim - Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.
manim - A community-maintained Python framework for creating mathematical animations.