Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 23, 2020 02:26 pm GMT

10 Trending projects on GitHub for web developers - 23rd October 2020

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.

GitHub logo sveltejs / svelte

Cybernetically enhanced web apps

Cybernetically enhanced web apps: Svelte npm version license Chat

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 the support of awesome 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.

Development

Pull requests are encouraged and always welcome. Pick an issue and help us out!

To install and work on Svelte locally:

git clone https://github.com/sveltejs/svelte.gitcd sveltenpm install
Enter fullscreen mode Exit fullscreen mode

Do not use

2. Headless Recorder

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.

GitHub logo checkly / headless-recorder

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.

Headless Recorder (previously Puppeteer Recorder)

Build Status

Gold sponsor

Checkly

Puppeteer Recorder is now Headless Recorder and supports Playwright!

Headless recorder is a Chrome extension that records your browser interactions and generates aPuppeteer or Playwright script. Install it from the Chrome WebstoreDon't forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

This project does the following already:

  • Records clicks and type events.
  • Add waitForNavigation, setViewPort and other useful clauses.
  • Generates a Puppeteer script.
  • Shows which events are being recorded.
  • Copy to clipboard.
  • Offers configuration options.
  • Allows data-id configuration for element selection.

Note: we only record certain events. See dom-events-to-record.js in the code-generator folder for which events. This collection will be expanded in future releases.

Usage

  • Click the icon and hit Record.
  • Hit tab after you finish typing in an input element.
  • Click links, inputs and other elements.
  • Wait for

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.

GitHub logo knadh / dragmove.js

A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes 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
Enter fullscreen mode Exit fullscreen mode
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"));
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo webiny / webiny-js

Platform for building serverless applications and APIs (Node.js, React, GraphQL)



The Easiest Way to Adopt Serverless

Official Website | Docs

PrettierlicenseSemVerPRs WelcomeContributor CovenantFOSSA StatusJoin our Slack community https://www.webiny.com/slack

Getting started

To get started with Webiny, simply follow this link

Webiny is the easiest way to adopt serverless!

Want to build an API? A React app? A full administration app for your product, website or mobile app? With Webiny you can do all that and then some! Your project will be bootstrapped and prepared for development of your next project in just a few moments. With the tools that come out of the box you'll be able to immediately deploy your project to the cloud (for now only AWS).

Our plugin-based approach to the whole system will make it easy for you to override, upgrade and tweak the system to fit your needs.

GraphQL API

Our API layer works as a collection of Lambda functions with Apollo Federation handling all the GraphQL-related stuff. But it is not limited

5. Appsmith

Build apps by connecting UI widgets to database queries or APIs. Write any logic in JS.

GitHub logo appsmithorg / appsmith

Web framework to build dashboards, workflows, forms, and any internal tool. Connect UI to DB queries or APIs to build admin panels.

Appsmith.com logo

Appsmith

A plug and play web framework to build internal tools.

GitHub releaseWebsiteChat on DiscordDocs

All Contributors

Built with empathy, not just

Build apps by connecting UI widgets to database queries or APIs. Write any logic in JS.

UI Builder Demo

Here's how you build something:

  1. Compose a page using pre-built UI components like table, charts, map viewers and forms.
  2. Connect the UI components to any REST API or databases like MySQL, Postgres, and MongoDB. Write any logic in JS.
  3. Deploy the internal tool to a custom URL and invite users to sign in with their Google accounts.

Demo Video

Example Applications

Getting Started

You can try our online sandbox or deploy a Docker image on a server.

Why Appsmith?

When we build internal tools today, we turn to admin panels, UI frameworks or use a bootstrap

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.

GitHub logo SoftwareBrothers / admin-bro

AdminBro is an admin panel for apps written in node.js

Admin Bro

codecovBuild Status

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.

Inspired by: django admin, rails admin and active admin.

How it looks

Example application

Check out the example application with mongodb and postgres models here:

https://admin-bro-example-app-staging.herokuapp.com/admin

Getting Started

OpenSource SoftwareBrothers community

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 works fine, but now you would

7. Awesome-Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

GitHub logo LeCoupa / awesome-cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

AWESOME CHEATSHEETS LOGO

Awesome GitHub license

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

View cheatsheets

Command line interface

Imperative

Functional

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.

GitHub logo 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!

Read this documentation in the following languages
Bahasa Indonesia Deutsch Polski
English Portugus do Brasil Espaol Franais

Build StatusCrowdinAll ContributorsNetlify StatusStar on GitHubPull Reminders

This is a specification for recognizing contributors to an open source project in a way that rewards each and 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

All Contributors Table Screenshot

You can use the @all-contributors bot to automate acknowledging contributors to your

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.

GitHub logo pixijs / pixi.js

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

PixiJS The HTML5 Creation Engine

pixi.js logoInline docsNode.js CI

The aim of this project is to provide a fast lightweight 2D library that worksacross all devices. The PixiJS renderer allows everyone to enjoy the power ofhardware 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(@doormat23, @rolnaaba, @bigtimebuddy, @ivanpopelyshev)and we will keep you posted! You can also check back on our siteas 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

10. Froala

Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.

GitHub logo froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3

Build Statusnpmnpm

Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.

WYSIWYG HTML Editor

Demos

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.


Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-23rd-october-2020-1dnk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To