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
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.
Futuristic Sci-Fi UI Web Framework
ARWES is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. The concepts behind are opinionated with influences from Cyberprep and productions like Star Citizen, Halo, NIKKE, and Mecha Break. It tries to inspire advanced science and technology.
The project is under development and not ready for production yet. It is still in alpha release, so the components are being tested and their API may change as it gets completed.
Branch
mainis for1.0.0-alphareleases and public content deployed at arwes.dev.
Branch
nextis for1.0.0-nextreleases and active development deployed at next.arwes.dev.
The previous version
@arwes/[package]@1.0.0-alpha.19was moved to version1-breakpoint2.arwes.dev and playground.version1-breakpoint2.arwes.dev with the branchversion1-breakpoint2where you can find the components, the playground, and the website source code. This version was released in April, 2021, and itโฆ
3. JavaScript Testing Best Practices
Comprehensive and exhaustive JavaScript & Node.js testing best practices
goldbergyoni
/
javascript-testing-best-practices
๐๐ ๐ข Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
๐ Why this guide can take your testing skills to the next level
๐ 50+ 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 &
โฆ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
OpenLayers
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://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
elsewhencode
/
project-guidelines
A set of best practices for JavaScript projects
ไธญๆ็ | ๆฅๆฌ่ช็ | ํ๊ตญ์ด | ะ ัััะบะธะน | Portuguรชs | Italiana
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 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.
- Git
- Documentation
- Environments
- Dependencies
- Testing
- Structure and Naming
- Code style
- Logging
- API
- Accessibility
- Licensing
1. Git
1.1 Some Git rules
There are a set of rules to keep in mind:
-
Perform work in aโฆ
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.
A fast, local-first, reactive Database for JavaScript Applications
ย ย What is RxDB?
RxDB (short for Reactive Database) is a local-first, NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps, Deno and Node.js
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 a way that makes it easy to develop and also has great performance benefits but can also be used to create fast backends in Node.js.
RxDB provides an easy to implement protocol for realtime replication with your existing infrastructure or one of the plugins for HTTP, GraphQL, CouchDB, Websocket, WebRTC, Supabase, Firestore, NATS.
RxDB is based on a storage interface that enables youโฆ
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.
G6๏ผๅพๅฏ่งๅๆๅผๆ
ไป็ป โข ๆกไพ โข ๆ็จ โข API
G6 ๆฏไธไธชๅพๅฏ่งๅๅผๆใๅฎๆไพไบๅพ็็ปๅถใๅธๅฑใๅๆใไบคไบใๅจ็ปใไธป้ขใๆไปถ็ญๅพๅฏ่งๅๅๅๆ็ๅบ็ก่ฝๅใๅบไบ G6๏ผ็จๆทๅฏไปฅๅฟซ้ๆญๅปบ่ชๅทฑ็ๅพๅฏ่งๅๅๆๅบ็จ๏ผ่ฎฉๅ ณ็ณปๆฐๆฎๅๅพ็ฎๅ๏ผ้ๆ๏ผๆๆไนใ
โจ ็นๆง
G6 ไฝไธบไธๆฌพไธไธ็ๅพๅฏ่งๅๅผๆ๏ผๅ ทๆไปฅไธ็นๆง๏ผ
- ไธฐๅฏ็ๅ ็ด ๏ผๅ ็ฝฎไธฐๅฏ็่็นใ่พนใCombo UI ๅ ็ด ๏ผๆ ทๅผ้ ็ฝฎไธฐๅฏ๏ผๆฏๆๆฐๆฎๅ่ฐ๏ผไธๅ ทๅคๆ็ตๆดปๆฉๅฑ่ชๅฎไนๅ ็ด ็ๆบๅถใ
- ๅฏๆง็ไบคไบ๏ผๅ ็ฝฎ 10+ ไบคไบ่กไธบ๏ผไธๆไพไธฐๅฏ็ๅ็ฑปไบไปถ๏ผไพฟไบๆฉๅฑ่ชๅฎไน็ไบคไบ่กไธบใ
- ้ซๆง่ฝๅธๅฑ๏ผๅ ็ฝฎ 10+ ๅธธ็จ็ๅพๅธๅฑ๏ผ้จๅๅบไบ GPUใRust ๅนถ่ก่ฎก็ฎๆๅๆง่ฝ๏ผๆฏๆ่ชๅฎไนๅธๅฑใ
- ไพฟๆท็็ปไปถ๏ผไผๅๅ ็ฝฎ็ปไปถๅ่ฝๅๆง่ฝ๏ผไธๆ็ตๆดป็ๆฉๅฑๆง๏ผไพฟไบไธๅกๅฎ็ฐๅฎๅถ่ฝๅใ
- ๅคไธป้ข่ฒๆฟ๏ผๆไพไบไบฎ่ฒใๆ่ฒไธคๅฅๅ ็ฝฎไธป้ข๏ผๅจ AntV ๆฐ่ฒๆฟๅๆไธ๏ผ่ๅ ฅ 20+ ๅธธ็จ็คพๅบ่ฒๆฟใ
- ๅค็ฏๅขๆธฒๆ๏ผๅๆฅ G ่ฝๅ๏ผ ๆฏๆ CanvasใSVG ไปฅๅ WebGL๏ผๅ Node.js ๆๅก็ซฏๆธฒๆ๏ผๅบไบ WebGL ๆไพๅผบๅคง 3D ๆธฒๆๅ็ฉบ้ดไบคไบ็ๆไปถๅ ใ
- React ไฝ็ณป๏ผๅฉ็จ React ๅ็ซฏ็ๆ๏ผๆฏๆ React ่็น๏ผๅคงๅคงไธฐๅฏ G6 ็่็นๅ็ฐๆ ทๅผใ
๐จ ๅผๅงไฝฟ็จ
ๅฏไปฅ้่ฟ NPM ๆ Yarn ็ญๅ ็ฎก็ๅจๆฅๅฎ่ฃ ใ
$ npm install @antv/g6
ๆๅๅฎ่ฃ
ไนๅ๏ผๅฏไปฅ้่ฟ import ๅฏผๅ
ฅ Graph ๅฏน่ฑกใ
<div id="container"></div>
import { Graph } from '@antv/g6';
// ๅๅคๆฐๆฎ
const data = {
nodes: [
/* your nodes data */
],
edges: [
/* your edges data */
],
};
// ๅๅงๅๅพ่กจๅฎไพ
const graph = new Graph({
container: 'container',
data,
node: {
palette: {
type: 'group',
fieldโฆ8. Stitches
Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.
stitchesjs
/
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Update June 19, 2023: Stitches is no longer actively maintained due to changes in the React ecosystem and maintainer availability. You can read more here.
Stitches
Style your components with confidence
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Stitches Core
Framework-agnostic implementation.
npm install @stitches/core
Stitches React
React wrapper including the styled API.
npm install @stitches/react
Documentation
For full documentation, visit stitches.dev.
Contributing
Please follow our contributing guidelines.
Community
You can join the Stitches Discord to chat with other members of the community.
Here's a list of community-built projects:
- babel-plugin-transform-stitches-display-name
- stitches-normalize-css
- stitches-crochet
- stitches-native
Authors
License
Licensed under the MIT License, Copyright ยฉ 2022-present WorkOS.
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.
abhivaikar
/
howtheytest
A collection of public resources about how software companies test their software
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.
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.
Portainer Community Edition is a lightweight service delivery platform for containerized applications that can be used to manage Docker, Swarm, Kubernetes and ACI environments. It is designed to be as simple to deploy as it is to use. The application allows you to manage all your orchestrator resources (containers, images, volumes, networks and more) through a โsmartโ GUI and/or an extensive API.
Portainer consists of a single container that can run on any cluster. It can be deployed as a Linux container or a Windows native container.
Portainer Business Edition builds on the open-source base and includes a range of advanced features and functions (like RBAC and Support) that are specific to the needs of business users.
- Compare Portainer CE and Compare Portainer BE
- Take3 โ get 3 free nodes of Portainer Business for as long as you want them
- Portainer BE install guide
Latest Version
Portainer CE is updatedโฆ
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 (1)
as always so interesting, I can safely say I hadnt ever heard of these repos but certainly am going to check out stitches and rxdb for react :)