Hi, I’m your front Octopus, a super cat who doesn’t like front ends and doesn’t like fish

Introduction to the

It’s been nearly five years since the frontend Octopus joined GitHub in 2016.

Many people are not in the habit of browsing GitHub, so there will always be asymmetric information about open source, and I don’t know what good front-end open source projects are worth learning.

Since 2018, I’ve been in the habit of checking GitHub every day, usually in the morning before work or during my lunch break.

It’s worth learning what good front-end projects are open sourced every day and what the mainstream front-end stacks are using.

Therefore, I have collected many good open source projects, which I recommend to you here. There will be one to three articles pushed every week.

I hope you can learn more programming knowledge, improve programming skills and find the fun of programming in the process of browsing and learning these open source projects recommended by the front Octopus.

【 Front-end GitHub】 focuses on mining the outstanding front-end open source projects on GitHub to smooth out your front-end information asymmetry, including JavaScript, Vue, React, Node, applets, Flutter, Deno, HTML, CSS, data structures and algorithms, etc.

The following is the second installment of GitHub.

preface

The algorithm is king.

Want to learn the front end, first practice good internal power, internal power is not good, even if the moves to practice again fancy, eventually can not become a master; Only those with deep internal strength can go further on the road ahead.

This article recommends several GitHub data structure and algorithm projects worth front-end learning, including GIF demonstration process and video explanation.

Data structures and algorithms

GitHub project on data structure and algorithm, star number in order from highest to lowest.

javascript-algorithms

Github.com/trekhleb/ja…

The repository contains a variety of javascript-based algorithms and data structures.

Each algorithm and data structure has its own README with instructions and links for further reading (as well as YouTube videos).

Data structures include linked lists, bidirectional linked lists, queues, stacks, hash tables (hashed), heaps, priority queues, dictionary trees, trees, priority queues, binary lookup trees, AVL trees, red-black trees, line trees, tree arrays, graphs, and lookup sets, Bloem filters

Algorithms include algorithm themes and algorithm paradigms.

Algorithm topics include: mathematics, sets, strings, search, sorting, linked lists, trees, graphs, encryption, machine learning.

Algorithm paradigm: Algorithm paradigm is a general approach based on the design of a class of algorithms. This is a higher abstraction than an algorithm, just as an algorithm is a higher abstraction than a computer program.

Algorithm paradigms include: BF, greedy, divide and conquer, dynamic programming, backtracking, Branch & Bound, etc.

This project also has corresponding teaching videos, a total of 81 videos, each video about 5-10 minutes, can also learn English oh πŸ˜‰

Educational videos on YouTube: www.youtube.com/playlist?li…

The front Octopus also benefited a lot from this project when it was learning algorithms.

And the project is always maintained and updated. Really a very good project!


algorithm-visualizer

Github.com/algorithm-v…

The Algorithm Visualization Tool is an interactive online platform for visualizing algorithms from code.

Learning algorithms through visualization becomes much easier.

Algorithm Visualizer is a fun online open source tool that includes a variety of algorithms and intuitive visualization to make learning algorithms and data structures more intuitive.

Currently supported algorithms include backtracking, encryption, dynamic programming, graph search, greedy algorithm, search algorithm, sorting algorithm and so on.

Algorithm Visualizer directory area, choose any Algorithm, the middle will be dynamic demonstration, log output area records each search process.

The algorithm visualization tool is a Web application written in React. It contains UI components and interprets commands as visualizations.

If you are an Algorithm beginner, we strongly recommend the “Algorithm Visualizer” tool, which clearly draws the principle and operation process of each basic Algorithm.


algo

algo: https://github.com/wangzheng0822/algo

Data structures and algorithms will be known will be 50 code implementation.

Contains arrays, linked lists, stacks, queues, recursion, sorting, binary lookup, hash table, string, binary tree, heap, graph, backtracking, divide and conquer, dynamic programming, etc.

Each code implementation has an explanation, test case.

Const selectionSort = (arr) => {if (arr.length <= 1) return For (let I = 0; i < arr.length - 1; i++) { let minIndex = i for (let j = i + 1; j < arr.length; J ++) {if (arr[j] < arr[minIndex]) {minIndex = j}} const temp = arr[I] arr[I] = arr[minIndex] arr[minIndex] = temp } console.log(arr) } const test = [4, 5, 6, 3, 2, 1] bubbleSort(test) const testSort = [4, 1, 6, 3, 2, 1] insertionSort(testSort) const testSelect = [4, 8, 6, 3, 2, 1, 0, 12] selectionSort(testSelect)Copy the code

The warehouse was created by the author of “Beauty of Data Structures and Algorithms” and “Beauty of Design Patterns”. The Front Octopus also studied his “Beauty of Data Structures and Algorithms”, which is a very good tutorial.


awesome-algorithms

Github.com/mgechev/jav…

This repository contains javascript implementations of different well-known computer science algorithms.

The repository is nice, but the hard part is that you need to install the dependencies and run them to see the effects and documentation.

Call:

npm install

To setup repository with documentation

npm run doc

This will build the documentation and open it in your browser.
Copy the code

JS-Sorting-Algorithm

Github.com/hustcc/JS-S…

A GitBook about sorting algorithms online book “Top 10 Classic sorting algorithms”, using JavaScript & Python & Go & Java implementation.

Contains bubble sort, select sort, insert sort, hill sort, merge sort, quick sort, heap sort, count sort, bucket sort, radix sort.

The article of this warehouse has definition have explanation, have code implementation, still have dynamic diagram, introduction ten classic sort algorithm is a good tutorial.


The beauty of JavaScript data structures and algorithms

Github.com/biaochenxuy…

Contains ten classic sorting algorithm ideas, code implementation, some examples, complexity analysis, animation, and algorithm visualization tools.

This is a concise explanation of JavaScript data structures and algorithms.

The repository has written a total of 10 introductory articles on algorithms

  1. Time and space complexity
  2. Linear tables (array, queue, stack, linked list)
  3. Implementing a front-end route, how to implement browser forward and backward?
  4. Stack and heap memory, shallow copy and deep copy
  5. recursive
  6. Nonlinear tables (tree, heap)
  7. Bubble sort, select sort, insert sort
  8. Merge sort, quicksort, Hill sort, heap sort
  9. Count sort, bucket sort, radix sort
  10. Summary of ten classic sorting algorithms
  11. GitHub 170K+ Star front-end Learning data Structures and Algorithms project

Is also a very good data structure and algorithm of the beginning of learning materials.


daily-algorithms

Github.com/barretlee/d…

Algorithms, one of the daily exercises.

  • β˜…β˜… means easy, β˜…β˜… means medium, β˜…β˜…β˜… means hard.
  • The topics are mainly from Leetcode, which may be appropriately changed to change the difficulty;
  • For β˜… and β˜… difficulty questions, the daily amount will randomly appear 1 to 5, especially β˜… questions, relatively easy.

Set questions during the day and try to give reference answers at night.

The project is also good, in the form of discussion with everyone to learn about data structures and algorithms.

Content accumulation is not enough, not enough fire.


JavaScript more…

Github.com/search?l=Ja…

For more good data structure and algorithm projects, click on the link above to search.


The last

The highest number of stars, however, does not mean that the project is the best and right one for you, because some projects are no longer updated and maintained years ago.

This article recommends some really useful open source repositories that are still being updated and are probably suitable for front-end learning.

For tips on how to spot good open source projects, check out GitHub’s Tips on How to Find good Open Source projects.

GitHub address: github.com/biaochenxuy…

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement!

Welcome to comment and recommend good open source projects!