Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Crank.js
Write JSX-driven components with functions, promises and generators.
bikeshaving
/
crank
Write JSX-driven components with functions, promises and generators.
Crank.js
Write JSX-driven components with functions, promises and generators.
Documentation is available at crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.
Features
Declarative
Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in JavaScript.
Just Functions
All components in Crank are just functions or generator functions. No classes, hooks, proxies or template languages are needed.
Promise-friendly
Crank provides first-class support for promises. You can define components as async functions and race renderings to display fallback UIs.
Lightweight
Crank has no dependencies, and its core is a single file. It currently measures at 4.5KB minified and gzipped.
Performant
According to benchmarks, Crank beats React in terms of speed and memory usage, and is currently comparable to Preact…
2. Appwrite
Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment
appwrite
/
appwrite
Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment 🚀
A complete backend solution for your [Flutter / Vue / Angular / React / iOS / Android / *ANY OTHER*] app
Appwrite 0.9 has been released! Learn what's new!
Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.
Using Appwrite, you can easily integrate your app with user authentication & multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.
Find out more at: https://appwrite.io
Table of Contents:
Installation
Appwrite backend server is designed to run in a container environment…
3. Deno Standard Modules
Deno standard library
Deno Standard Modules
These modules do not have external dependencies and they are reviewed by the Deno core team. The intention is to have a standard set of high quality code that all Deno projects can use fearlessly.
Contributions are welcome!
Releases
Standard library is currently tagged independently of Deno version. This will change once the library is stabilized.
To check compatibility of different version of standard library with Deno CLI see this list.
How to use
These modules will eventually be tagged in accordance with Deno releases but as of today we do not yet consider them stable and so we version the standard modules differently from the Deno runtime to reflect this.
It is strongly recommended that you link to tagged releases to avoid unintended updates and breaking changes.
Don't link to / import any module whose path:
- Has a name or parent with an underscore prefix…
4. ractive-player
Library for interactive videos in React
liqvid
This is a library for making interactive videos in React.
For example, here's an interactive coding demo inside a video:
Here's an interactive graph:
To get started, clone https://github.com/ysulyma/rp-tutorial
For documentation, visit https://liqvidjs.org/
For inspiration, see https://epiplexis.xyz/
5. Altair
A beautiful feature-rich GraphQL Client for all platforms.
altair-graphql
/
altair
✨⚡️ A beautiful feature-rich GraphQL Client for all platforms.
Altair is a beautiful feature-rich GraphQL Client IDE for all platforms. Available for MacOS, Windows, Linux, Chrome, Firefox It enables you interact with any GraphQL server you are authorized to access from any platform you are on.
Features
Altair provides several features that make developing with GraphQL very efficient and friendly. These features include:
- setting headers
- setting variables
- creating environments
- viewing response stats
- viewing schema docs
- advanced schema docs search
- dynamically adding/generating queries and/or fragments from schema docs
- file upload via GraphQL
- autocompletion of queries
- autofill all query fields at cursor
- automatic schema refreshing using GraphQL Event Stream protocol
- automatic refactoring of query
- prerequest scripts
- multiple windows, multiple languages
- importing and exporting collections of queries
- multiple themes
- plugin system for extensibility
- and many more features (really there's a lot more!).
See more here: https://altair.sirmuel.design/docs/features
Missing feature?
Is there a feature that…
6. Spearmint
Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of (or keystrokes) of a button.
open-source-labs
/
spearmint
Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of (or keystrokes) of a button.
Spearmint helps developers easily create functional React/Redux/Endpoint/Paint Timing tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
Installation
Please download spearmint from our website. Available for Mac OS, Windows and Linux.
How to use in development mode
For Mac developers
Prerequisite: Install Xcode
First install
- Fork and clone this repository.
npm run install-oncenpm run start
For Windows developers
Prerequisite: Install Python and Microsoft C++ Build Tools.
In an Administrator PowerShell run the following commands:
choco install python visualcpp-build-tools -y
npm config set msvs_version 2017
- Fork and clone this repository.
npm run install-oncenpm run start-windows
How it works
- On the initial screen, a user is prompt to login or sign up (via OAuth or standard sign-up/login). Once logged in choose your file and load your application to start creating tests.
- Utilize our…
7. Prism
Turn any OpenAPI2/3 and Postman Collection file into an API server with mocking, transformations and validations.
stoplightio
/
prism
Turn any OpenAPI2/3 and Postman Collection file into an API server with mocking, transformations and validations.
Prism is a set of packages for API mocking and contract testing with OpenAPI v2 (formerly known as Swagger) and OpenAPI v3.x.
- Mock Servers: Life-like mock servers from any API Specification Document.
- Validation Proxy: Contract Testing for API Consumers and Developers.
- Comprehensive API Specification Support: OpenAPI 3.0, OpenAPI 2.0 (FKA Swagger) and Postman Collections support.
Note: This branch refers to Prism 3.x, which is the current version most likely you will use. If you're looking for the 2.x version, look at the
2.xbranch
Overview
🧰 Installation and Usage
Installation
Prism requires NodeJS >= 12 to properly work.
npm install -g @stoplight/prism-cli
# OR
yarn global add @stoplight/prism-cli
For more installation options, see our installation documentation.
Mocking
prism mock https://raw.githack.com/OAI/OpenAPI-Specification/master/examples/v3.0/petstore-expanded.yaml
Validation Proxy
prism proxy examples/petstore.oas2.yaml https://petstore.swagger.io/v2
📖 Documentation and Community
🚧
…8. git-notify
Communicate important updates to your team via git commit messages
jevakallio
/
git-notify
🙉 📣 Communicate important updates to your team via git commit messages
git-notify
Communicate important updates to your team via git commit messages.
What is git-notify?
Sometimes you need to communicate changes to other developers on your project. In a small team, a Slack message works okay, but in larger teams and distributed organizations (such as open source projects), reaching everyone can be a pain.
git-notify allows you to embed announcements into your git commit messages:
git commit -m 'git-notify: NEW DEVELOPMENT ENVIRONMENT ...'
And display them to another developer on a machine, far far away:
Simple as that.
How to use git-notify?
Just add "git-notify:" to your git commit message, and anything that follows will be displayed when another developer pulls that commit, or switches from a branch that does not contain that commit to one that does.
If you're using a merge or squash commit strategy on GitHub, you can also add them to the extended commit…
9. degit
Straightforward project scaffolding.
Rich-Harris
/
degit
Straightforward project scaffolding
degit — straightforward project scaffolding
degit makes copies of git repositories. When you run degit some-user/some-repo, it will find the latest commit on https://github.com/some-user/some-repo and download the associated tar file to ~/.degit/some-user/some-repo/commithash.tar.gz if it doesn't already exist locally. (This is much quicker than using git clone, because you're not downloading the entire git history.)
Requires Node 8 or above, because async and await are the cat's pyjamas
Installation
npm install -g degit
Usage
Basics
The simplest use of degit is to download the master branch of a repo from GitHub to the current working directory:
degit user/repo
# these commands are equivalent
degit github:user/repo
degit git@github.com:user/repo
degit https://github.com/user/repo
Or you can download from GitLab and BitBucket:
# download from GitLab
degit gitlab:user/repo
degit git@gitlab.com:user/repo
degit https://gitlab.com/user/repo
# download from BitBucket
degit bitbucket:user/repo
degit git@bitbucket.org:user/repo
degit https://bitbucket.org/user/repo
# download from Sourcehut
degit git.sr.ht/user/repo
degit git@git.sr.ht:user/repo
degit https://git.sr.ht/user/repo
Specify a
…10. Memoizee
Complete memoize/cache solution for JavaScript
Memoizee
Complete memoize/cache solution for JavaScript
Originally derived from es5-ext package.
Memoization is best technique to save on memory or CPU cycles when we deal with repeated operations. For detailed insight see: http://en.wikipedia.org/wiki/Memoization
Features
- Works with any type of function arguments – no serialization is needed
- Works with any length of function arguments. Length can be set as fixed or dynamic.
- One of the fastest available solutions.
- Support for promises and asynchronous functions
- Primitive mode which assures fast performance when arguments are convertible to strings.
- WeakMap based mode for garbage collection friendly configuration
- Can be configured for methods (when
thiscounts in) - Cache can be cleared manually or after specified timeout
- Cache size can be limited on LRU basis
- Optionally accepts resolvers that normalize function arguments before passing them to underlying function.
- Optional reference counter mode, that allows more sophisticated cache management
- Profile tool that provides valuable usage…
Stargazing 📈
Top risers over last 7 days
- JavaScript Algorithms +2,332 stars
- Public APIs +1,797 stars
- Front-End Checklist +1,351 stars
- Material UI +810 stars
- JavaScript Questions +805 stars
Top risers over last 30 days
- Web Development for Beginners +5,751 stars
- JavaScript Algorithms +4,263 stars
- Public APIs +4,058 stars
- Free Programming Books +3,381 stars
- Developer Roadmap +2,801 stars
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (2)
Great list.
Good one!