DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 30th May 2020

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

1. Responsively App

A modified browser built using Electron that helps in responsive web development.

GitHub logo responsively-org / responsively-app

A modified web browser that helps in responsive web development. A web developer's must have dev-tool.

Responsively Logo

Responsively App GitHub release

A must-have devtool for web developers for quicker responsive web development. 🚀
Save time by becoming 5x faster!

Twitter contributors Slack XS:Code PRs Welcome Open Collective backers and sponsors

ProductHunt

Download Now (free!): responsively.app

Responsively App

A modified browser built using Electron that helps in responsive web development.

Quick Demo

Features

  1. Mirrored User-interactions across all devices.
  2. Customizable preview layout to suit all your needs.
  3. One handy elements inspector for all devices in preview.
  4. 30+ built-in device profiles with option to add custom devices.
  5. One-click screenshot all your devices.
  6. Hot reloading supported for developers.

Please visit the website to know more about the application - https://responsively.app

Download

The application is available for Mac, Windows and Linux platforms. Please download it from here - https://github.com/responsively-org/responsively-app/releases

Alternatively, MacOS users can use brew Homebrew installs

brew install --cask responsively
Enter fullscreen mode Exit fullscreen mode

Also, Windows users can use chocolatey Chocolatey installs

choco install responsively
Enter fullscreen mode Exit fullscreen mode

or winget:

winget install ResponsivelyApp
Enter fullscreen mode Exit fullscreen mode

Linux users can use rpm

sudo rpm -i https://github.com/responsively-org/responsively-app/releases/download/v[VERSION]/Responsively-App-[VERSION].x86_64.rpm
Enter fullscreen mode Exit fullscreen mode

Follow on Twitter for future…


2. Algorithm Visualizer

Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:

GitHub logo algorithm-visualizer / algorithm-visualizer

🎆Interactive Online Platform that Visualizes Algorithms from Code

Algorithm Visualizer

Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.

GitHub contributors GitHub license

Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:

algorithm-visualizer.orgScreenshot

Contributing

We have multiple repositories under the hood that comprise the website. Take a look at the contributing guidelines in the repository you want to contribute to.

  • algorithm-visualizer is a web app written in React. It contains UI components and interprets commands into visualizations. Check out the contributing guidelines.

  • server serves the web app and provides APIs that it needs on the fly. (e.g., GitHub sign in, compiling/running code, etc.)

  • algorithms contains visualizations of algorithms shown on the side menu of the website.

  • tracers.* are visualization libraries written in each supported language. They extract visualizing commands from code.





3. Oak

A middleware framework for Deno's net server

GitHub logo oakserver / oak

A middleware framework for handling HTTP with Deno 🐿️ 🦕

oak

oak ci codecov deno doc

Custom badge Custom badge Custom badge

A middleware framework for Deno's std http server, native HTTP server and Deno Deploy. It also includes a middleware router.

This middleware framework is inspired by Koa and middleware router inspired by @koa/router.

This README focuses on the mechanics of the oak APIs and is intended for those who are familiar with JavaScript middleware frameworks like Express and Koa as well as a decent understanding of Deno. If you aren't familiar with these please check out documentation on oakserver.github.io/oak.

Also, check out our FAQs and the awesome-oak site of community resources.

⚠️ Warning The examples in this README pull from main, which may not make sense to do when you are looking to actually deploy a workload. You would want to "pin" to a particular version which is compatible with the version of Deno you are using and has a fixed set of APIs you…


4. You Don't Know JS Yet

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

GitHub logo getify / You-Dont-Know-JS

A book series on JavaScript. @YDKJS on twitter.

You Don't Know JS Yet (book series) - 2nd Edition

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

     ...

To read more about the motivations and perspective behind this book series, check out the Preface.

If you're looking for the previous first edition books, they can be found here.

Premier Sponsor

This edition of the YDKJS book series is exclusively sponsored by Frontend Masters.

Frontend Masters is the gold standard for top-of-the-line expert training material in frontend-oriented software development. With over 150 courses on all things frontend, this should be your first and only stop for quality video training on HTML, CSS, JS, and related technologies.


I teach all my workshops exclusively through Frontend Masters. If you like this book content, please check out my video training courses.

I want…


5. JavaScript Algorithms and Data Structures

This repository contains JavaScript based examples of many popular algorithms and data structures

GitHub logo trekhleb / javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures

CI codecov

This repository contains JavaScript based examples of many popular algorithms and data structures.

Each algorithm and data structure has its own separate README with related explanations and links for further reading (including ones to YouTube videos).

Read this in other languages: 简体中文 繁體中文 한국어 日本語, Polski, Français, Español, Português, Русский, Türk, Italiana, Bahasa Indonesia, Українська, Arabic, Deutsch

Note that this project is meant to be used for learning and researching purposes only, and it is not meant to be used for production.

Data Structures

A data structure is a particular way of organizing and storing data in a computer so that it can be accessed and modified efficiently. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can…


6. build-your-own-x

Build your own (insert technology here)


7. esbuild

An extremely fast JavaScript bundler and minifier

GitHub logo evanw / esbuild

An extremely fast JavaScript bundler and minifier

esbuild: An extremely fast JavaScript bundler
Website | Getting started | Documentation | Plugins | FAQ

Why?

Our current build tools for the web are 10-100x slower than they could be:

Bar chart with benchmark results

The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.

Major features:

Check out the getting started instructions if you want to give esbuild a try.







8. RealWorld example apps

See how the exact same Medium.com clone is built using any of our supported frontends and backends.

GitHub logo gothinkster / realworld

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

RealWorld Example Applications

Stay on the bleeding edge — join our GitHub Discussions! 🎉

See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec 😮😎

While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.

RealWorld solves this by allowing you to choose any frontend (React, Angular 2, & more) and any backend (Node, Django, & more) and see how they power a real world, beautifully designed fullstack app called "Conduit".

Read the full blog post announcing RealWorld on Medium.

Implementations

Over 100 implementations have been created using various languages, libraries, and frameworks.

See the list of implementations on the CodebaseShow website >>>

Create a new implementation


9. Node Best Practices

The Node.js best practices list (May 2020)

GitHub logo goldbergyoni / nodebestpractices

✅ The Node.js best practices list (August 2021)

Node.js Best Practices

Node.js Best Practices

102 items Last update: August 15, 2021 Updated for Node 14.0.0

nodepractices Follow us on Twitter! @nodepractices

Read in a different language: CNCN, FRFR, BRBR, RURU, PLPL, JAJA, EUEU (ESES, HEHE, KRKR and TRTR in progress! )

Built and maintained by our Steering Committee and Collaborators

Latest Best Practices and News

  • 👨‍👩‍👧‍👦 New family member!: A new repository joins our family - Node.js Integration Tests Best Practices . It includes 40+ best practices for writing awesome and performant Node.js component tests

  • FR French translation!1! : The latest translation that joins our international guide is French. Bienvenue

  • 🇯🇵 Japanese translation: Our guide is now also translated to Japanese! Courtesy of the amazing YukiOta and Yuta Azumi

Welcome! 3 Things You Ought To Know First

1. You are reading dozens of the best Node.js articles - this repository is a summary and curation of the top-ranked content on Node.js best practices…





10. Public APIs

A collective list of free APIs for use in software and web development.


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 bite size tips relating to HTML, CSS and JavaScript.

Top comments (1)

Collapse
 
terkwood profile image
Felix Terkhorn

esbuild looks promising! Thanks for the post 📯