​​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 @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

​​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

​​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

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

​​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 .node-version and .nvmrc files

https://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 <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

​​Watch coding videos while you code!

Get a YouTube popout with npx pipcorn [youtube-link]

#js

I've spent lots of hours fixing 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

​​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 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

The open-source #js Calendly alternative.

Let's face it: Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customisations. That's where Calendso comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data. Calendso is to Calendly what GitLab is to GitHub.

Personal opinion: why paying for Calendly, when you can deploy everything to K8S pay for your own infrastructure and manage it yourself?!

https://github.com/calendso/calendso

​​Vieb is the Vim Inspired Electron Browser

Features:
- Free, open source, fast and secure
- Local first adblocking, auto-complete, AMP protection, custom redirects and more, all without web requests
- Privacy with strict permission system, navigator overrides, firefox mode, custom WebRTC policy and more
- Accessible with custom themes, full interface & fontsize scaling, page zooming, spellcheck and mouse support
- Security settings with permissions, cache usage, cookie management, (auto-)download settings and more
- Window splitting with buffer, split, Vexplore and Ctrl-w bindings, for multi-window browsing
- Map commands for completely custom keyboard sequences, keystrokes, commands and actions
- Viebrc config file for all custom/Vim/Vieb commands to configure settings permanently
- Set command for runtime setting configuration exactly like Vim
- Vim-compatible options: showcmd, timeout, colorscheme, maxmapdepth, spelllang, splitright, smartcase etc.
- Container tabs with colored grouping, auto-clearing, individual cookies and tab restore from containers
- Ad-blocker with cosmetic filtering, optional updater, custom lists and uses easylist/easyprivacy by default
- Tabs including audio indicator, a toggle for multi-line tabs, pinned tabs, muted tabs and suspended tabs

https://vieb.dev/

#js

​​Bubbleprof is a new, completely unique, approach to profiling your Node.js code

Bubbleprof is a completely new way to visualize the operation of your Node.js processes. It observes the async operations of your application, groups them, measures their delays, and draws a map of the delays in your application's async flow.

The size of each bubble represents time within a group of operations. These are grouped where the flow stayed within either your own code, a module, or node core. Tiny adjacent groups are also grouped to reduce clutter. The length of arrows connecting bubbles shows the delays while the flow moves from one group to another. Inner coloured lines indicate the mix of types of async operation responsible for this delay. Click to explore. Line lengths between and around the bubbles and numeric labels reflect the aggregated delay in miliseconds (ms).

https://clinicjs.org/bubbleprof/

#js

​​Deno + React: No build, no bundle, all streaming

Ultra is a web framework that leans hard into your browser's native features. Embrace the future of ES Modules, Import Maps, and Web Streams. All while supporting some of the non-standards that many normal people love for some reason (JSX and TypeScript).

It's driven by the following hot-takes:
- ESM is non-negotiable in {currentYear}
- SSR is non-negotiable in {currentYear}
- Bundling is an anti-pattern in {currentYear}
- Data can be requested anywhere, and is accessible on the server, always
- Lazy routing with dynamic imports trumps FS routing
- Less magic in tooling and frameworks is a good thing
- Simplify your workflow and tech stack at all costs - life is too short
- Streams are neat

https://github.com/exhibitionist-digital/ultra

Personal opinion: this looks exciting! I am in deno's hypetrain for almost a year now and I love to see new cool use-cases.

#deno #react #js #ts

​​Automatically replaces jQuery for you in legacy codebases.

This CLI automatically finds jQuery methods from existing projects and generate vanilla #js alternatives.

> I've been working on removing jQuery dependency from multiple projects including lightGallery lately. Most of the projects use only 15% to 20% or less than 30% of the jquery methods And in most of the cases, I didn't want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.

https://github.com/sachinchoolur/replace-jquery

​​Pyret is a programming language designed to serve as an outstanding choice for programming education while exploring the confluence of scripting and functional programming. It's under active design and development, and free to use or modify.

Features:
- Pyret has Python-inspired syntax for functions, lists, and operators
- Pyret makes testing a natural part of the programming process. Functions can end in a where: clause that holds unit tests for the function
- Pyret allows for concise, expressive, recursive data declarations. Type annotations are optional and can be added incrementally, to serve a variety of pedagogic styles and curricular needs
- In addition to where: blocks, which are attached to individual definitions (and hence usually contain unit tests), you can also write check: blocks at the top level, for general program testing

https://www.pyret.org/index.html

#js