The modern #css in #js styling library: near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.
Features:
- Performant: Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.
- Lightweight: Both
- Server-Side Rendering: Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
- Variants: Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.
- Theming: Define multiple themes with CSS variables, then expose them to any part of your app.
- Developer experience: With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.
- Critical Path CSS: Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
- Specificity. No more specificity issues due to the atomic output. Even extended components (via the
- Polymorphic
- Easy overrides: Stitches provides a
https://stitches.dev/
Features:
- Performant: Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.
- Lightweight: Both
@stitches/core and @stitches/react libraries combined weigh in at around 6.5kb gzipped.- Server-Side Rendering: Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
- Variants: Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.
- Theming: Define multiple themes with CSS variables, then expose them to any part of your app.
- Developer experience: With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.
- Critical Path CSS: Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
- Specificity. No more specificity issues due to the atomic output. Even extended components (via the
as prop) won't contain duplicate CSS properties.- Polymorphic
as prop: Included in Components returned from the styled function.- Easy overrides: Stitches provides a
css prop, which allows style overrides to be applied in the consumption layer.https://stitches.dev/
Effector: The state manager.
Effector is an effective multi-store state manager for #js apps (#react/React Native/#vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both #ts and Flow type annotations out of the box.
Effector follows five basic principles:
- Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
- Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
- Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and plain js objects
- Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
- The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.
https://github.com/zerobias/effector
Effector is an effective multi-store state manager for #js apps (#react/React Native/#vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both #ts and Flow type annotations out of the box.
Effector follows five basic principles:
- Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
- Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
- Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and plain js objects
- Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
- The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.
https://github.com/zerobias/effector
Inertia.js: the modern monolith. Build single-page apps, without building an API.
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.
Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done!
Inertia isn't a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it's designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. We currently have three official client-side adapters (#react, #vue, and #svelte) and two server-side adapters (Laravel and Rails).
https://inertiajs.com/
#js
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.
Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done!
Inertia isn't a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it's designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. We currently have three official client-side adapters (#react, #vue, and #svelte) and two server-side adapters (Laravel and Rails).
https://inertiajs.com/
#js
Gravity is not a force.
Under general relativity, gravity is not a force. Instead it is a distortion of spacetime. Objects in free-fall move along geodesics (straight lines) in spacetime, as seen in the inertial frame of reference on the right. When standing on Earth we experience a frame of reference that is accelerating upwards, causing objects in free-fall to move along parabolas, as seen on the left.
In this system there is only one space dimension, shown on the vertical axis and labeled in meters. The time dimension is the horizontal axis and labeled in seconds. The gravitational field is constant within the area of interest.
Use this demo to see and feel this!
https://timhutton.github.io/GravityIsNotAForce/
#js
Under general relativity, gravity is not a force. Instead it is a distortion of spacetime. Objects in free-fall move along geodesics (straight lines) in spacetime, as seen in the inertial frame of reference on the right. When standing on Earth we experience a frame of reference that is accelerating upwards, causing objects in free-fall to move along parabolas, as seen on the left.
In this system there is only one space dimension, shown on the vertical axis and labeled in meters. The time dimension is the horizontal axis and labeled in seconds. The gravitational field is constant within the area of interest.
Use this demo to see and feel this!
https://timhutton.github.io/GravityIsNotAForce/
#js
A case study on viable techniques for vanilla web development.
A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).
More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).
There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).
To produce valid vanilla solutions, and because constraints spark creativity, I came up with a set of rules to follow throughout the process:
- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).
If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior (especially in browser testing).
https://github.com/morris/vanilla-todo
TLDR: this is totally possible: the result app is very small, fast, and portable.
#js #css
A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).
More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).
There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).
To produce valid vanilla solutions, and because constraints spark creativity, I came up with a set of rules to follow throughout the process:
- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).
If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior (especially in browser testing).
https://github.com/morris/vanilla-todo
TLDR: this is totally possible: the result app is very small, fast, and portable.
#js #css
GitHub
GitHub - morris/vanilla-todo: A case study on viable techniques for vanilla web development.
A case study on viable techniques for vanilla web development. - morris/vanilla-todo
Fast and simple Node #js version manager, built in #rust
Features:
- Cross-platform support (Mac, Windows, Linux)
- Single file, easy installation, instant startup
- Built with speed in mind
- Works with
https://github.com/Schniz/fnm
Features:
- Cross-platform support (Mac, Windows, Linux)
- Single file, easy installation, instant startup
- Built with speed in mind
- Works with
.node-version and .nvmrc fileshttps://github.com/Schniz/fnm
The tiny all-in-one development tool for modern web apps.
All the features you'd expect and more, from development to production:
- No "entry points" or "pages" to configure - just
-
- Smart bundling and caching for npm dependencies
- Hot reloading for modules, Preact components and CSS
- Lightning-fast JSX support that you can debug in the browser
- Import CSS files and CSS Modules (
- Static file serving with hot reloading of CSS and images
- Highly optimized Rollup-based production output (wmr build)
- Crawls and pre-renders your app's pages to static HTML at build time
- Built-in HTTP2 support in both development and production (wmr serve --http2)
- Supports Rollup plugins, even in development where Rollup isn't used
https://github.com/preactjs/wmr
#js
All the features you'd expect and more, from development to production:
- No "entry points" or "pages" to configure - just
<script type=module src=anything.js>-
import "packages" from npm without installation- Smart bundling and caching for npm dependencies
- Hot reloading for modules, Preact components and CSS
- Lightning-fast JSX support that you can debug in the browser
- Import CSS files and CSS Modules (
*.module.css)- Static file serving with hot reloading of CSS and images
- Highly optimized Rollup-based production output (wmr build)
- Crawls and pre-renders your app's pages to static HTML at build time
- Built-in HTTP2 support in both development and production (wmr serve --http2)
- Supports Rollup plugins, even in development where Rollup isn't used
https://github.com/preactjs/wmr
#js
I've spent lots of hours fixing
I've even disabled it in our projects. It was not adding any value, just wasting our time.
But, we still need to check some dependencies to be secure!
Dan Abramov shares his vision about
npm audit to make our #js CI happy. Most of the times - it was garbage.I've even disabled it in our projects. It was not adding any value, just wasting our time.
But, we still need to check some dependencies to be secure!
Dan Abramov shares his vision about
npm audit problems and potential solutions.The Open Source Airtable alternative.
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
Features:
- Search, sort, filter, hide columns with uber ease
- Create Views: Grid, Gallery, Kanban, Gantt, Form
- Share Views: public & password protected
- Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
- Roles: Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles
- Access Control: Fine-grained access control even at database, table & column level
- Programmatic APIs via REST and GraphQL
Personal opinion: I love #nocode instruments like this. I had very pleasant experience with Airtable for several quite different tasks. This is something you really need to consider before writing your own automatizations.
https://github.com/nocodb/nocodb
#js #vue
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
Features:
- Search, sort, filter, hide columns with uber ease
- Create Views: Grid, Gallery, Kanban, Gantt, Form
- Share Views: public & password protected
- Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
- Roles: Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles
- Access Control: Fine-grained access control even at database, table & column level
- Programmatic APIs via REST and GraphQL
Personal opinion: I love #nocode instruments like this. I had very pleasant experience with Airtable for several quite different tasks. This is something you really need to consider before writing your own automatizations.
https://github.com/nocodb/nocodb
#js #vue
Kind: A modern proof language.
A minimal, efficient and practical proof and programming language. Under the hoods, it is basically Haskell, except purer and with dependent types. That means it can handle mathematical theorems just like Coq, Idris, Lean and Agda. On the surface, it aims to be more practical and looks more like TypeScript.
Compared to other proof assistants, Kind has:
- The smallest core. Check FormCore.js or Core.kind. Both are < 1000-LOC complete implementations!
- Novel type-level features. Check out article on super-inductive datatypes.
- An accessible syntax that makes it less scary
- A complete bootstrap: the language is implemented in itself. Check it here.
- Efficient real-world compilers. Check http://uwu.tech/ for a list of apps. (WIP)
Things you can do with it:
- Compile programs and modules to several targets, right now
- Create live applications. Kind has an interconnected back-end that allows you to create rich, interactive applications without ever touching databases, TCP packets or messing with apis
- Prove theorems: for programmers, they're more like unit tests, except they can involve symbols, allowing you to cover infinitely many test cases. If you like unit tests, you'll love theorems.
Personal opinion: I am a big fan of ML-family languages, but not a big fan of their syntaxes. I love that new products solve their biggest issue for me. I really hope that some of these new functional languages will get eventually popular.
https://github.com/uwu-tech/kind
#js #haskell
A minimal, efficient and practical proof and programming language. Under the hoods, it is basically Haskell, except purer and with dependent types. That means it can handle mathematical theorems just like Coq, Idris, Lean and Agda. On the surface, it aims to be more practical and looks more like TypeScript.
Compared to other proof assistants, Kind has:
- The smallest core. Check FormCore.js or Core.kind. Both are < 1000-LOC complete implementations!
- Novel type-level features. Check out article on super-inductive datatypes.
- An accessible syntax that makes it less scary
- A complete bootstrap: the language is implemented in itself. Check it here.
- Efficient real-world compilers. Check http://uwu.tech/ for a list of apps. (WIP)
Things you can do with it:
- Compile programs and modules to several targets, right now
js and scm are supported- Create live applications. Kind has an interconnected back-end that allows you to create rich, interactive applications without ever touching databases, TCP packets or messing with apis
- Prove theorems: for programmers, they're more like unit tests, except they can involve symbols, allowing you to cover infinitely many test cases. If you like unit tests, you'll love theorems.
Personal opinion: I am a big fan of ML-family languages, but not a big fan of their syntaxes. I love that new products solve their biggest issue for me. I really hope that some of these new functional languages will get eventually popular.
https://github.com/uwu-tech/kind
#js #haskell