loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 30th May 2020

iainfreestone profile image Iain Freestone Updated on ใƒป1 min read

Trending projects on GitHub for web developers (7 Part Series)

1) ๐Ÿš€10 Trending projects on GitHub for web developers - 30th May 2020 2) ๐Ÿš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 5 3) ๐Ÿš€10 Trending projects on GitHub for web developers - 12th June 2020 4) ๐Ÿš€10 Trending projects on GitHub for web developers - 19th June 2020 5) ๐Ÿš€10 Trending projects on GitHub for web developers - 26th June 2020 6) ๐Ÿš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) ๐Ÿš€10 Trending projects on GitHub for web developers - 10th July 2020

1. Responsively App

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

GitHub logo manojVivek / responsively-app

A modified browser that helps in responsive web development.

Responsively App Twitter Follow xscode

All Contributors

PH

Website: https://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/manojVivek/responsively-app/releases

Alternatively, MacOS users can use brew to install it:

brew cask install responsively

Follow on Twitter for future updates - Twitter Follow

Issues

If you face any problems while using the application, please open an issue here - https://github.com/manojVivek/responsively-app/issues

Contribute

  1. Goto desktop-app folder
  2. Run yarn dev. This will start the app for local development with live reloading.

Distribution

You can build theโ€ฆ


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 Deno's net server ๐Ÿฆ•

oak

oak ci deno doc

A middleware framework for Deno's http server including a router middleware.

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 master, 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 would expect. https://deno.land/x/ supports using git tags in the URL toโ€ฆ


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

Build Status 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

โ˜ 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 be applied to the data.

B - Beginner, A - Advanced


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

This is a JavaScript bundler and minifier. It packages up JavaScript and TypeScript code for distribution on the web.

Why?

Why build another JavaScript build tool? The current build tools for the web are at least an order of magnitude slower than they should be. I'm hoping that this project serves as an "existence proof" that our JavaScript tooling can be much, much faster.

Benchmarks

The use case I have in mind is packaging a large codebase for production. This includes minifying the code, which reduces network transfer time, and producing source maps, which are important for debugging errors in production. Ideally the build tool should also build quickly without having to warm up a cache first.

I currently have two benchmarks that I'm using to measure esbuild performance. For these benchmarks, esbuild is at least 100x faster than the other JavaScript bundlers I tested:

Here are the detailsโ€ฆ


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 Gitter room! ๐ŸŽ‰

Travis Gitter Twitter

See how the exact same Medium.com clone (called Conduit) is built using any of our supported 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.

Frontends

Sorted by popularity on Sat May 02 2020

โ€ฆ

9. Node Best Practices

The Node.js best practices list (May 2020)

GitHub logo goldbergyoni / nodebestpractices

โœ… The Node.js best practices list (June 2020)

Node.js Best Practices

Node.js Best Practices

86 items Last update: March, 2020 Updated for Node 13.1.0

nodepractices Follow us on Twitter! @nodepractices

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

Built and maintained by our Steering Committee and Collaborators

Latest Best Practices and News

  • ๐ŸŽ‰ Node.js best practices reached 40k stars: Thank you to each and every contributor who helped turning this project into what it is today! We've got lots of plans for the time ahead, as we expand our ever-growing list of Node.js best practices even further.

  • ๐Ÿš€ Two New Best Practices: We've been working hard on two new best practices, a section about using npm ci to preview the dependency state in production environments and another on testing your middlewares in isolation

  • ๐Ÿณ Node.js + Docker best practices: We've opened a call for ideas to collect best practices related to running dockerizedโ€ฆ


10. Public APIs

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

GitHub logo public-apis / public-apis

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

Public APIs Build Status

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

A public API for this project can be found here!

For information on contributing to this project, please see the contributing guide.

Please note a passing build status indicates all listed APIs are available since the last update. A failing build status indicates that 1 or more services may be unavailable at the moment.

Index

Animals
















API Description Auth HTTPS CORS
Cat
โ€ฆ





If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Trending projects on GitHub for web developers (7 Part Series)

1) ๐Ÿš€10 Trending projects on GitHub for web developers - 30th May 2020 2) ๐Ÿš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 5 3) ๐Ÿš€10 Trending projects on GitHub for web developers - 12th June 2020 4) ๐Ÿš€10 Trending projects on GitHub for web developers - 19th June 2020 5) ๐Ÿš€10 Trending projects on GitHub for web developers - 26th June 2020 6) ๐Ÿš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) ๐Ÿš€10 Trending projects on GitHub for web developers - 10th July 2020

Posted on May 30 by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

esbuild looks promising! Thanks for the post ๐Ÿ“ฏ