trekhleb / trekhleb/javascript-algorithms

Future Browser-Based Web Demo for Algorithms?

Open
#657 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
197k
Forks
31k
PR merge metrics
No merged PRs in 30d

Description

Hi,

I was wondering if any of the maintainers have considered creating a webpage for all of the demos? I searched through the issues but didn't find anything related.

Personally I think if you have a web version of all demos it would be of great benefit for developers so they could test the algorithms directly in a browser and step through the code if desired. I'm aware that a developer can step through the code using a debugger with Node, however if there was a website it would lower the barrier since there is nothing to install. Additionally you could run Carbon ads or something which can help with sponsorship of this project.

Since modern browsers support import and other needed JS I would expect all or most algorithms to work out of the box for most browsers. I pulled a fork and create a small proof of concept to test.

Three files added for Demo

  • index.html
  • favicon.ico
  • server.js

Additional Changes

  • The demo shows QuickSort and BubbleSort; in order to work with GitHub Pages I modified 3 files to use full file name import Sort from '../Sort.js'; instead of import Sort from '../Sort';

Notes

  • This runs from GitHub pages simply by adding the index.html file (and optional favicon.ico file) and modifying needed JS files for full file name on import.
  • The file server.js is a simple Node Web Server for sending static files using using only Node.js built-in features without any outside dependencies. If you have node you run the site locally using node server.js. I created the server.js for another project I maintain and made slight changes so it could handle import '.../File' for this project.

Fork
https://github.com/ConradSollitt/javascript-algorithms

Demo
https://conradsollitt.github.io/javascript-algorithms/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the proposed index.html, favicon.ico, and server.js in the linked fork, along with the three JavaScript files changed for full import filenames. Compare the QuickSort and BubbleSort proof of concept with the repository's existing demos; done would require an agreed scope and an accepted browser-based demo approach for the algorithms.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.