DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

๐Ÿš€10 Trending projects on GitHub for web developers - 27th August 2021

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

1. D3: Data-Driven Documents

Bring data to life with SVG, Canvas and HTML.

GitHub logo d3 / d3

Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

D3: Data-Driven Documents

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

Resources

Installing

If you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from Skypack:

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

const div = d3.selectAll("div");

</script>
Enter fullscreen mode Exit fullscreen mode

For legacy environments, you can load D3โ€™s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

2. Papers We Love

Papers from the computer science community to read and discuss.

GitHub logo papers-we-love / papers-we-love

Papers from the computer science community to read and discuss.

Papers We Love

Gitter

Papers We Love (PWL) is a community built around reading, discussing and learning more about academic computer science papers. This repository serves as a directory of some of the best papers the community can find, bringing together documents scattered across the web. You can also visit the Papers We Love site for more info.

Due to licenses we cannot always host the papers themselves (when we do, you will see a ๐Ÿ“œ emoji next to its title in the directory README) but we can provide links to their locations.

If you enjoy the papers, perhaps stop by a local chapter meetup and join in on the vibrant discussions around them. You can also discuss PWL events, the content in this repository, and/or anything related to PWL on our Slack, after signing-up to join it, or on our #paperswelove IRC channel on freenode.

Chapters

Here are our officialโ€ฆ


3. Probot

A framework for building GitHub Apps to automate and improve your workflow

GitHub logo probot / probot

๐Ÿค– A framework for building GitHub Apps to automate and improve your workflow

Probot's logo, a cartoon robot

Probot

A framework for building GitHub Apps to automate and improve your workflow

npm Build Status Codecov @ProbotTheRobot on Twitter


If you've ever thought, "wouldn't it be cool if GitHub couldโ€ฆ"; I'm going to stop you right there. Most features can actually be added via GitHub Apps, which extend GitHub and can be installed directly on organizations and user accounts and granted access to specific repositories. They come with granular permissions and built-in webhooks. Apps are first class actors within GitHub.

How it works

Probot is a framework for building GitHub Apps in Node.js, written in TypeScript. GitHub Apps can listen to webhook events sent by a repository or organization. Probot uses its internal event emitter to perform actions based on those events. A simple Probot App might look like this:

module.exports = (app) => {
  app.on("issues.opened", async (context) => {
    const issueComment
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

4. VS code Jest

The optimal flow for Jest based testing in VS Code

GitHub logo jest-community / vscode-jest

The optimal flow for Jest based testing in VS Code

vscode-jest

Build Status Coverage Status Visual Studio Marketplace


v4.1 with Test Explorer

Test explorer is one of the highly requested feature for this extension. Last year vscode announced the plan for the official test explorer and we have been trying out the new proposed API since. Now the vscode test explore is live (2021 July release - v1.59), we are excited to release v4.1 and our users can finally tap into this great new UI experience ๐ŸŽ‰

test-explore.png

Please note, the test explorer is new and some of the features might be missing or imperfect (see How to use test explore for more details), nevertheless, we will continue to improve it. Please do not hesitate to ask questions or file issues, thanks and have fun!

v4 Release

After longer than expected development, v4 is finally released! ๐Ÿ˜„

This is a big release packed with changes to address many nagging issues you have been asking for, such as inconsistentโ€ฆ


5. UNPKG

UNPKG is a fast, global content delivery network for everything on npm.

GitHub logo mjackson / unpkg

The CDN for everything on npm





6. Ocean

Web component server-side rendering.

GitHub logo matthewp / ocean

Web component server-side rendering

๐ŸŒŠ Ocean

Web component HTML rendering that includes:

  • Rendering to Declarative Shadow DOM, requiring no JavaScript in the client.
  • Automatic inclusion of the Declarative Shadow DOM polyfill for browsers without support.
  • Streaming HTML responses.
  • Compatibility with the most popular web component libraries (see a compatibility list below).
  • Lazy partial hydration via special attributes: hydrate on page load, CPU idle, element visibility, or media queries. Or create your own hydrator.

Table of Contents

Overview

An ocean is an environment for rendering web component code. It provides an html function that looks like the ones you're used to from libraries like uhtml and Lit. Instead of creating reactive DOM in the client like those libraries, Ocean's html returns an async iterator that will stream out HTML strings.

Ocean is somewhat low-level and is meant to be usedโ€ฆ


7. Ackee

Self-hosted, Node.js based analytics tool for those who care about privacy

GitHub logo electerious / Ackee

Self-hosted, Node.js based analytics tool for those who care about privacy.

Ackee logo

Ackee

Build Coverage Status Mentioned in Awesome Selfhosted Donate via PayPal

Self-hosted, Node.js based analytics tool for those who care about privacy. Ackee runs on your own server, analyzes the traffic of your websites and provides useful statistics in a minimal interface.

๐ŸŒ Website | ๐Ÿ”ฎ Live Demo | ๐Ÿงธ GraphQL Playground


Ackee in a browser

๐Ÿ‘‹ Introduction

Ackee is a self-hosted analytics tool that cares about privacy. We believe that you don't need to track every aspect of your visitors. Ackee keeps tracked data anonymized to avoid that users are identifiable, while still providing helpful insights. It's the right tool for everyone who doesn't need a full-featured marketing analytics platform like Google Analytics or Matomo.

  • Self-hosted: Ackee runs on your own server and is 100% open-source
  • Modern technologies: Lightweight Node.js and MongoDB architecture
  • Beautiful: Minimal and focused interface
  • No cookies: No unique user tracking and therefore no required cookie message
  • Events: Track button clicks, newsletter subscriptions and more
  • โ€ฆ

8. Material Icon Theme

Get the Material Design icons into your VS Code.

GitHub logo PKief / vscode-material-icon-theme

Available on the VSCode Marketplace


logo

Material Icon Theme

Get the Material Design icons into your VS Code.

Versionย  Ratingย  Installsย  Downloads


Sponsored by





File icons

file icons

Folder icons

folder icons

Customize folder color

You can change the color of the default folder icon using the command palette:

custom folder colors

or via user settings:

"material-icon-theme.folders.color": "#ef5350",
Enter fullscreen mode Exit fullscreen mode

Folder themes

You can change the design of the folder icons using the command palette:

folder themes

or via user settings:

"material-icon-theme.folders.theme": "specific"
Enter fullscreen mode Exit fullscreen mode

Custom icon opacity

You can set a custom opacity for the icons:

"material-icon-theme.opacity": 0.5
Enter fullscreen mode Exit fullscreen mode

Custom icon saturation

If colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0:

"material-icon-theme.saturation": 0.5
Enter fullscreen mode Exit fullscreen mode

Custom icon associations

You can customize the icon associations directly in the user settings.

File associations

With the *.[extension] pattern you can define customโ€ฆ


9. Toast UI Editor

Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

GitHub logo nhn / tui.editor

๐Ÿž๐Ÿ“ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TOAST UI Editor

GFM Markdown and WYSIWYG Editor - Productive and Extensible

github release version npm version license PRs welcome code with hearth by NHN

๐Ÿšฉ Table of Contents

๐Ÿ“ฆ Packages

TOAST UI Editor

Name Description
@toast-ui/editor Plain JavaScript component

TOAST UI Editor's Wrappers

Name Description
@toast-ui/react-editor React wrapper component
@toast-ui/vue-editor Vue wrapper component

TOAST UI Editor's Plugins

Name Description
@toast-ui/editor-plugin-chart Plugin to render chart
@toast-ui/editor-plugin-code-syntax-highlight Plugin to highlight code syntax
@toast-ui/editor-plugin-color-syntax Plugin to color editing text
@toast-ui/editor-plugin-table-merged-cell Plugin to merge table columns
@toast-ui/editor-plugin-uml Plugin to render UML

๐Ÿค– Why TOAST UI Editor?

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched anyโ€ฆ


10. International Telephone Input

A JavaScript plugin for entering and validating international telephone numbers

GitHub logo jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers

IMPORTANT: since v14 we have removed the jQuery dependency. See below for how to initialise and use the plugin with pure JavaScript. If you want to stick with the jQuery version, there is now a separate jQuery wrapped version.


International Telephone Input Build Status

A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

If you like it, please consider making a donation, which you can do from the demo page.

Sponsored by

Use Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more. We can't wait to see what you build

Table of Contents

Demo and Examples

You can view a liveโ€ฆ


Stargazing ๐Ÿ“ˆ

Top risers over last 7 days๐Ÿ”—

  1. Public APIs +2,182 stars
  2. Web dev for beginners +1,157 stars
  3. File Browser +909 stars
  4. TypeScript Book +615 stars
  5. Tech Interview Handbook +496 stars

Top growth(%) over last 7 days๐Ÿ”—

  1. Peeky +31%
  2. release-changelog-builder-action +26%
  3. HyperFormula +19%
  4. LemonadeJS +12%
  5. absurd-sql +12%

Top risers over last 30 days๐Ÿ”—

  1. Public APIs +8,317 stars
  2. Machine Learning for Beginners +3,558 stars
  3. Web dev for beginners +3,427 stars
  4. Tauri +2,982 stars
  5. Developer Roadmap +2,725 stars

Top growth(%) over last 30 days๐Ÿ”—

  1. html-to-image +95%
  2. DaisyUI +91%
  3. Bulletproof React +86%
  4. Mitosis +69%
  5. Vechai UI +56%

For all for the latest rankings please checkout Stargazing.dev


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

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

Discussion (2)

Collapse
jwp profile image
John Peters

ToastUi editor looks topnotch.