Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Svelte
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
What is Svelte?
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Learn more at the Svelte website, or stop by the Discord chatroom.
Supporting Svelte
Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to support their efforts, please consider:
Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
Roadmap
You may view our roadmap if you'd like to see what we're currently working on.
Contributing
Please see the Contributing Guide and the svelte package for information on contributing to Svelte.
svelte.dev
The sourceβ¦
2. Headless Recorder
Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.
checkly
/
headless-recorder
Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
π¨ Deprecated!
As of Dec 16th 2022, Headless Recorder is fully deprecated. No new changes, support, maintenance or new features are expected to land.
For more information and possible alternatives refer to this issue.
Headless Recorder
π₯ Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright/Puppeteer script.
Overview
Headless recorder is a Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script. Install it from the Chrome Webstore to get started!
This project builds on existing open source projects (see Credits) but adds extensibility, configurability and a smoother UI. For more information, please check our documentation.
π€ Do you want to learn more about Puppeteer and Playwright? Check our open Headless Guides
What you can do?
- Records clicks and type events.
- Add waitForNavigation, setViewPort and other useful clauses.
- Generates a Playwright & Puppeteer script.
- Preview CSS selectorsβ¦
3. dragmove.js
A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped.
knadh
/
dragmove.js
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes (minified+gzipped) and no dependencies.
dragmove.js
A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped. Demo here.
Usage
Node
npm install @knadh/dragmove
import { dragmove } from @knadh/dragmove;
// (target, handler, onStart(target, x, y), onEnd(target, x, y)).
// onStart and onEnd are optional callbacks that receive target element, and x, y coordinates.
dragmove(document.querySelector("#box"), document.querySelector("#box .drag-handle"));
ES6 module
Check this example to include dragmove.js as a <script> directly on an HTML page.
Licensed under the MIT License.
4. Webiny
Webiny is a platform for building serverless applications and APIs. Out of the box, we provide a complete plugin based admin interface and a set of ready-made apps. It is built for self-hosting on AWS, but we do consider multi-cloud deployment in the future.
webiny
/
webiny-js
Open-source serverless enterprise CMS. Includes a headless CMS, page builder, form builder, and file manager. Easy to customize and expand. Deploys to AWS.
Open-Source Serverless Enterprise CMS
Website | Documentation | Community Slack | Forum | Twitter
product-video-2022.mp4
Webiny Serverless CMS includes:
1οΈβ£ Page Builder - Drag&drop page editor. Pages are prerendered automatically and cached on CloudFront for lightning-fast delivery.
2οΈβ£ Headless CMS - Headless CMS with a GraphQL API. Build APIs and content models through a UI. It includes content revisions, localization, and fine-grain permission control.
3οΈβ£ File Manager - Upload files images. Search and organize your assets. It includes a built-in image editor for basic image manipulations.
4οΈβ£ Form Builder - Build forms with a drag&drop editor. Insert forms through Page Builder into your pages. It has webhook support and ReCaptcha integration.
All Webiny apps can be customized easily to fully fit an enterprise publishing workflow and integrate with leading identity providers like OKTA and Cognito.
π Quick installation guide
- Create a Webiny project:
npx create-webiny-project my-new-project
- Deploy to your AWSβ¦
5. Appsmith
Build apps by connecting UI widgets to database queries or APIs. Write any logic in JS.
appsmithorg
/
appsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support dashboards, and more to help their teams perform day-to-day operations. Appsmith is an open-source tool that enables the rapid development of these internal apps. Read more on our website.
Installation
There are two ways to start using Appsmith:
- Signup on Appsmith Cloud.
- Install Appsmith on your machine. See the installation guides below.
Installation Methods
Documentation
Docker (Recommended)
Kubernetes
AWS AMI
For other deployment options, see the Installation Guides documentation.
Development
To build and run Appsmith in your local dev environment, see Setup for local development.
Learning Resources
Need Help?
Contributing
We β€οΈ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.
π We expect everyone participating in the community to abide by our Code of Conductβ¦
6. Admin Bro
AdminBro is An automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.
SoftwareBrothers
/
adminjs
AdminJS is an admin panel for apps written in node.js
AdminJS
AdminJS is an automatic admin interface that can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminJS generates UI which allows you (or other trusted users) to manage content.
Inspired by: django admin, rails admin and active admin.
Example application
Check out our demo application:
- Login:
admin@example.com - Password:
password
You can also have a look at our customized AdminJS dashboard which shows various library statistics:
Getting started
- Check out the documentation
- Try the live demo as mentioned above
Our open source community on Discord
- Join the community to get help and be inspired.
What kind of problems it solves
So you have a working service built in Node.js. It uses (for example) Hapi.js for rendering a couple of REST routes and mongoose as the connector to the database.
Everythingβ¦
7. Awesome-Cheatsheets
Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
LeCoupa
/
awesome-cheatsheets
π©βπ»π¨βπ» Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
WEBSITE DIRECTORY: Available here.
π Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
π€ Why Awesome-Cheatsheets?
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. I started doing these kinds of things a long time ago on Gist. To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
π Table of Contents
π Languages
8. All Contributors
This is a specification for recognizing contributors to an open source project in a way that rewards each and every contribution, not just code.
all-contributors
/
all-contributors
β¨ Recognize all contributors, not just the ones who push code β¨
Call for translators! We're looking for translators to help translate this spec for everyone!
This is a specification for recognizing contributors to an open-source project in a way that rewards every contribution, not just code.
The basic idea is this:
Use the project README (or another prominent public documentation page in the project) to recognize the contributions of members of the project community.
People are giving themselves and their free time to contribute to open source projects in so many ways, so we believe everyone should be praised for their contributions (code or not).
The All Contributors Table
Below is an example of how using the all-contributors spec table can recognize all contributors
You can use the @all-contributors bot π€ to automate acknowledging contributors to your open source projects
9. PixiJS
PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
pixijs
/
pixijs
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
PixiJS β The HTML5 Creation Engine
This project aims to provide a fast, lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.
If you want to keep up to date with the latest PixiJS news then feel free to follow us on Twitter @PixiJS and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!
We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!
What to Use PixiJS for and When to Use It
PixiJS is a rendering library that will allow you to create rich, interactive graphics and cross-platform applicationsβ¦
10. Froala
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
froala
/
wysiwyg-editor
The next generation Javascript WYSIWYG HTML Editor.
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
- Slim - only add the plugins that you need (30+ official plugins)
- Client frameworks integrations
- Server side SDKs for PHP, Node.JS, .NET, Java, and Python
- Code is well commented
- Online documentation up to date
- Simple to extend - the plugins are all well commented and simple to use as a basis for your own plugins
- Well maintained - frequent releases
- Great support - Help Center
- Awesome new features β
Demos
- Basic demo: https://www.froala.com/wysiwyg-editor
- Inline demo: https://www.froala.com/wysiwyg-editor/inline
- Full list: https://www.froala.com/wysiwyg-editor/examples
Download and Install Froala Editor
Install from npm
npm install froala-editor
Install from bower
bower install froala-wysiwyg-editor
Load from CDN
Using Froala Editor from CDN is the easiest way to install it and we recommend using the jsDeliver CDN as it mirrors the NPMβ¦
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)
Interesting trends:
I think that code generation is somewhat under the radar but of high value. Creating apps via drag and drop is too cool.
Moving to serverless and cloud, removes server and network admin.
Have the big 3 reached their peak? (Vue, React, Angular)
I have spent the last couple of days building a graphQL API with Strapi and I totally agree with "code generation is somewhat under the radar but of high value" . I was able to build out 90% of what i needed using drag and drop and then could build upon the generated code. I was super impressed plus I am free to host where I like and have full control of my data. win win.