loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 4th September 2020

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ใƒป2 min read

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. VS Code Debug Visualizer

A VS Code extension for visualizing data structures while debugging. Like the VS Code's watch view, but with rich visualizations of the watched value

GitHub logo hediet / vscode-debug-visualizer

An extension for VS Code that visualizes data during debugging.

VS Code Debug Visualizer

See README.md for the readme of the extension.

You can get the extension in the marketplace.

See CONTRIBUTING.md for build instructions and implementation details.





2. Arwes

Arwes is a web framework to build user interfaces for web applications based on futuristic science fiction and cyberpunk styles, animations, and sound effects.

GitHub logo arwes / arwes

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

Arwes

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.

The project has a working version with the package arwes and the documentation with the website arwes.dev This is an alpha release. Modules and components are being tested and their API may change. Check out the source code at version1-breakpoint1 branch where you can find the components and the website.

Currently, the development is at master branch with the packages @arwes/[package]. They are not a working version yet and they have major breaking changes with the arwes package. The website will be workedโ€ฆ


3. JavaScript Testing Best Practices

Comprehensive and exhaustive JavaScript & Node.js testing best practices

GitHub logo goldbergyoni / javascript-testing-best-practices

๐Ÿ“—๐ŸŒ ๐Ÿšข Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2020)


๐Ÿ‘‡ Why this guide can take your testing skills to the next level


๐Ÿ“— 45+ best practices: Super-comprehensive and exhaustive

This is a guide for JavaScript & Node.js reliability from A-Z. It summarizes and curates for you dozens of the best blog posts, books and tools the market has to offer

๐Ÿšข Advanced: Goes 10,000 miles beyond the basics

Hop into a journey that travels way beyond the basics into advanced topics like testing in production, mutation testing, property-based testing and many other strategic & professional tools. Should you read every word in this guide your testing skills are likely to go way above the average

๐ŸŒ Full-stack: front, backend, CI, anything

Start by understanding the ubiquitous testing practices that are the foundation for any application tier. Then, delve into your area of choice: frontend/UI, backend, CI or maybe all of them?


Written By Yoni Goldberg

  • A JavaScript & Node.jsโ€ฆ

4. OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds.

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.

Getting Started

Install the ol package:

npm install ol

Import just what you need for your application:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

Seeโ€ฆ


5. Project Guidelines

While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects

GitHub logo elsewhencode / project-guidelines

A set of best practices for JavaScript projects

ไธญๆ–‡็‰ˆ | ๆ—ฅๆœฌ่ชž็‰ˆ | ํ•œ๊ตญ์–ด | ะ ัƒััะบะธะน | Portuguรชs

Project Guidelines ยท PRs Welcome

While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects here at elsewhen If you want to share a best practice, or think one of these guidelines should be removed, feel free to share it with us.


1. Git

Git

1.1 Some Git rules

There are a set of rules to keep in mind:

  • Perform work in a feature branch.

    Why:

    โ€ฆ

6. RxDB

RxDB (short for Reactive Database) is a NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and NodeJs. Reactive means that you can not only query the current state, but subscribe to all state changes like the result of a query or even a single field of a document.

GitHub logo pubkey / rxdb

๐Ÿ’ป ๐Ÿ”„ ๐Ÿ“ฑ A realtime Database for JavaScript Applications

Announcement
โ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒ Version 9.0.0 is now released, read the ANNOUNCEMENT โ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒโ€ƒ

RxDB

A realtime Database for JavaScript Applications

RxDB (short for Reactive Database) is a NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and NodeJs Reactive means that you can not only query the current state, but subscribe to all state changes like the result of a query or even a single field of a document This is great for UI-based realtime applications in way that makes it easy to develop and also has great performance benefits. To replicate data between your clients and server, RxDB provides modules for realtime replication with any CouchDB compliant endpoint and also with custom GraphQL endpoints

follow on Twitter

reactive.gif






















Features

๐Ÿ’ป๐Ÿ“ฑ

Multiplatform support for browsers, nodejs, electron, cordova, react-native and every other javascript-runtime
๐Ÿ“จ
Reactive data-handling based on RxJS
๐Ÿšฃ
Offline first let your app still work
โ€ฆ





7. G6: A Graph Visualization Framework in TypeScript.

G6 is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data.

GitHub logo antvis / G6

โ™พ A Graph Visualization Framework in JavaScript

G6: A Graph Visualization Framework in TypeScript.

travis-ci codecov typescript MIT npm package NPM downloads Percentage of issues still open

ไธญๆ–‡ README

What is G6

G6 is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data.

Developers are able to build graph visualization analysis applications or graph visualization modeling applications easily.

Powerful Animation and Interactions

Powerful Layouts

Features

  • Abundant Built-in Items: Nodes and edges with free configurations;
  • Steerable Interactions: More than 10 basic interaction behaviors ;
  • Powerful Layout: More than 10 layout algorithms;
  • Convenient Components: Outstanding ability and performance;
  • Friendly User Experience: Complete documents for different levels of user requirements. TypeScript supported.

G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interation behavior, and layout satisfies the customazation requirements.

Abundant Built-in Items

Installation

$ npm install @antv/g6
โ€ฆ

8. Stitches

Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.

GitHub logo modulz / stitches

The styling library for the modern age.

stitches

The modern styling library.

Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.


Documentation

For full documentation, visit stitches.dev.

Contributing

Please follow our contributing guidelines.

Authors

License

Licensed under the MIT License, Copyright ยฉ 2020-present Modulz.

See LICENSE for more information.





9. How They Test

A curated collection of publicly available resources on how software companies around the world test their software systems and build their quality culture.

GitHub logo abhivaikar / howtheytest

A collection of public resources about how software companies test their software

How They Test

Contributions Welcome!

A curated collection of publicly available resources on how software companies around the world test their software systems and build their quality culture.

Foreword

One of the outcomes of the various Taqelah meetups was that many software companies got to share their testing and quality culture with the community. It was absolutely fantastic to see the amazing stuff companies are doing to test their software, and ensure quality of their products and platforms.

Apart from this, many companies regularly come forward and share their best practices, tools, techniques and culture of software testing on various public platforms like conferences, blogs & meetups. The resources are there but dispersed, lost into the internet.

There is no single knowledge repository that gives a direct look at these best practices, tools, techniques and culture of software testing these companies adopt. This repository intends to do that.

Happy Learning!

Please note,โ€ฆ


10. Portainer

Portainer is a lightweight management UI which allows you to easily manage your different Docker environments (Docker hosts or Swarm clusters). Portainer is meant to be as simple to deploy as it is to use.

GitHub logo portainer / portainer

Making Docker management easy.

Docker Pulls Microbadger Build Status Code Climate Donate

Portainer is a lightweight management UI which allows you to easily manage your different Docker environments (Docker hosts or Swarm clusters) Portainer is meant to be as simple to deploy as it is to use. It consists of a single container that can run on any Docker engine (can be deployed as Linux container or a Windows native container, supports other platforms too) Portainer allows you to manage all your Docker resources (containers, images, volumes, networks and more) ! It is compatible with the standalone Docker engine and with Docker Swarm mode.

Demo

You can try out the public demo instance: http://demo.portainer.io/ (login with the username admin and the password tryportainer).

Please note that the public demo cluster is reset every 15min.

Alternatively, you can deploy a copy of the demo stack inside a play-with-docker (PWD) playground:


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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

pic
Editor guide
 

lokijs and hypercores check those out. Nice list btw. thank you for sharing. you saved me some time.