​​Manage #react state server-side with #elixir GenServer's. Hooks are generated for you: https://github.com/joshnuss/phx_hooks

Vue recently presented the Composition API RFC, a new API for writing #vue components inspired by #react hooks but with some interesting differences that I will discuss in this post. This RFC started with a previous version called Function-based Component API that received lots of criticism from certain part of the community, based on the fear of Vue starting to be more complicated and less like the simple library that people liked in the first place.

So, let's get started studying the different aspects of React Hooks and Vue Composition API and remark certain differences that we might find along the way.

​​A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance.

With built-in integrations for #vue, #react, #angular, and #svelte

https://github.com/naver/egjs-infinitegrid

​​React Nice Dates, a responsive, touch-friendly, and modular date picker library for #react

React Nice Dates is composed of a set of components and utilities with different levels of abstraction that you can use to build your own date pickers.

https://reactnicedates.hernansartorio.com/

#js

​​D-Tale is the combination of a Flask back-end and a React front-end to bring you an easy way to view & analyze Pandas data structures. It integrates seamlessly with ipython notebooks & python/ipython terminals and PyCharm. Currently this tool supports such Pandas objects as DataFrame, Series, MultiIndex, DatetimeIndex & RangeIndex.

#python #react

​​Type Router: a flexible, type safe routing library.

First and foremost Type Route strives for excellent TypeScript support. An API designed for static analysis not only means the compiler has your back but also enables your editor to provide intelligent hints and warnings as you code.

https://www.type-route.org/

I had a blog post last year about problems in typing Vue and it includes router as one of the weakest points: https://sobolevn.me/2019/06/really-typing-vue

I am glad that people are working on it!

#vue #react #ts

​​Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on #react, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

https://redwoodjs.com/

It also includes React Single File components: https://www.swyx.io/writing/react-sfcs-here/

#ts #js

​​Simple and complete #js testing utilities that encourage good testing practices.

Suitable for #vue, #react, and almost any other library.

https://testing-library.com/

​​Introducing: storybook-addon-performance

An experimental storybookjs addon to help better understand and debug performance for #react components.

Features:
- Zero config (except for interactions): Generate performance information relating to server-side rendering and client-side mounting without any configuration
- Pin results: You can run some tasks, pin the result, make some changes, rerun the tasks and see what changed
- Interactions: Add your own custom user interactions to run as a parameter to your story. This lets you time how long interactions take. The API for this is super flexible and powerful!
- Control: Run all tasks for an overview, or run individual tasks to drill down on specific problems
- Marked: All tasks are marked with the User Timing API to allow for easy debugging of individual tasks in your browser's performance profiler

https://github.com/atlassian-labs/storybook-addon-performance

#ts #js

​​A headless, GraphQL-first e-commerce platform delivering ultra-fast, dynamic, personalized shopping experiences. Beautiful online stores, anywhere, on any device.

Features:
- PWA: End users can shop offline for better sales and shopping experiences
- GraphQL API: Access all data from any web or mobile client using the latest technology
- Headless commerce: Build mobile apps, customize storefronts and externalize processes
- UX and UI: Designed for a user experience that rivals even the top commercial platforms
- Dashboard: Administrators have total control of users, processes, and products
- Orders: A comprehensive system for orders, dispatch, and refunds
- Cart: Advanced payment and tax options, with full control over discounts and promotions
- Payments: Flexible API architecture allows integration of any payment method. It comes with Braintree support out of the box.
- Geo-adaptive: Automatic localized pricing. Over 20 local languages. Localized checkout experience by country.
- SEO: Packed with features that get stores to a wider audience
- Cloud: Optimized for deployments using Docker
- Analytics: Server-side Google Analytics to report e-commerce metrics without affecting privacy

Built with #python and #react

https://github.com/mirumee/saleor

A Gatsby theme for creating Primer documentation sites.

Doctocat makes it easy to set up a documentation site so you can focus on what's important: writing docs. You can start with just several clicks.

Made by GitHub.

https://primer.style/doctocat/getting-started

#js #react #docops

​​Recoil is an experimental state management library for #react apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

https://github.com/facebookexperimental/Recoil

#js

P.S. One more?!

​​Futuristic Sci-Fi and Cyberpunk graphical user interface framework for web apps

Arwes is a web framework to build user interfaces for web applications based on futuristic science fiction and cyberpunk styles, animations, and sound effects. The concepts behind are opinionated and try to inspire advanced space technology and alien influence. It is built on top of #react, JSS, Anime, and Howler.

https://github.com/arwes/arwes

#js #css #html

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

​​Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Supports both #vue and #react. Svelte support will be added soon.
It will be a really interesting project!

https://headlessui.dev/

​​visx | visualization components for #react

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

https://github.com/airbnb/visx

#ts

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

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

​​kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

Command+k interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.

With macOS's Spotlight and Linear's command+k experience in mind, kbar aims to be a simple abstraction to add a fast and extensible command+k menu to your site.

Features:
- Built in animations and fully customizable components
- Keyboard navigation support; e.g. ctrl n / ctrl p for the navigation wizards
- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t for Twitter
- Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to the previous action
- A simple data structure which enables anyone to easily build their own custom components

https://github.com/timc1/kbar

#react #js #ts