I created an application that makes learning algorithms and data structures much more interesting.

CS-Playground-React Interface

I am a self-taught programmer . This means that I am constantly dealing with an impostor syndrome . It is not uncommon for me to feel that I am inferior, and I am at a disadvantage for understanding complex computer science concepts.
')
I never understood math. And I always tied strong math skills to my natural ability to excel in programming. I feel that I have to work more than others (who have innate skills in mathematics) to learn the same concepts. With this idea, deeply rooted in my brain, I was sure that I could never learn anything, such as bypassing binary search trees, and how to mentally analyze recursive nightmares, such as merge sorting.

Check out CS-Playground-React , a simple browser-based JavaScript sandbox for learning and practicing algorithms and data structures.

This application does not require registration and automatically saves your achievements, offers solutions when you are stuck, and has a bunch of links to useful articles, tutorials, and other resources to help make your learning not very painful, as I had.

---

The translation was made with the support of the company EDISON Software , which is professionally engaged in the development of video surveillance services , applications for the virtual cellular operator and the development of programs in C and C ++ (IPTV player) .

---

Let me immediately recognize that this application is not innovative. (I know you thought so!) There are many applications that teach these skills and give you the ability to write and run code directly in your browser.

CS Playground React is a minimalistic tool for exploring a specific set of topics. Creating this application is just my way to learn what I want with interest. If it turns out to be a valuable resource for another person along the way, so much the better.

The app is still evolving, and there is plenty of room for thought when it comes to the subject and potential. Therefore, if you know a cool task or data structure that I didn’t consider, or noticed something that you can improve, feel free to open a problem or send a pull request.

If you just want to see the application, do not read further - it lives here (also available via https, it will register a service worker for offline caching).

If you are interested in the code, do not scroll further - it is here .

Next will be - boring things about why and how.

Why i created it

My motives for creating this app were simple: I wanted to learn, and I wanted to make learning easier and more interesting. More importantly, why I wanted to get these specific skills.

Over the past 18 months or so, I can say with confidence that I have learned how to write code. Although I still do not dare to call myself a programmer. And this is not because I do not write code for life (and I do not write), but because of the phenomenon of the impostor syndrome , which I mentioned earlier. I certainly know how to do things. But until recently, I knew very little about real computer science.

Having studied the basics of computer science, I hoped not only to feel more confident in thinking of myself as a programmer, but also in helping others see me in the same way.

Self-taught programmers are a pill that in recent years the technology industry has become easier to swallow. Especially in places like Silicon Valley, where coding bootcamps arose at every corner of the street.

Nevertheless, there is still a serious obstacle for most programmers who are hoping to enter the industry without a formal computer science education.

Therefore, to help reduce the difference between the bachelor of humanities and the bachelor of technical sciences, I decided to teach myself some of the concepts that students of the first or second year can study in computer science. I thought it would complement some of my practical development skills and help others take me more seriously as a programmer.

I used a set of topics that are known to be common for programming as a base that I would like to cover.

Bubble sorting, selection sorting, sorting by inserts, merge sorting, quick sorting, heap sorting, stacks, queues, linked lists, hash tables and binary search trees ...

I was very scared by this set of tasks and put them off for quite a while.

Not wanting to accept defeat, I finally began to dig. Search for textbooks, reading every article I could find, day after day.

Over time, some of the concepts began to clear up. But there were a few problems:

1. I got bored . I like problem solving, but let's face it, the reverseLevelOrder solution to traversing a binary search tree is much less interesting than solving a real problem for your last application.
2. It took a long time . I work full time (I do NOT write code all day), and my free time for coding is extremely valuable. I knew that I would spend months on it, and I began to worry about losing touch with my more existing skills.

All this information on computer science is good to have it in service, but let's face it, most often we, the web developers, are hired to create. And there are not too many practical applications for most of these concepts in everyday web development.

For me, the study of these concepts was a matter of pride, and I was not going to give up. But, it was still a priority for me to have experience in web development.

Therefore, I decided to combine two ideas. The idea was to create a simple application that would help me achieve my goals and preserve my basic skills.

For me, the best way to learn something (especially something difficult) is to associate it with something that you love. As I created this application, and when I completed the tasks, I also developed content for it.

Now the study of algorithms and data structures was a necessary part of my last project. Because what is the point of creating an application for preparing for an interview if you are not going to fill it with tasks!

Every few days I studied a new algorithm or data structure. As soon as I almost gave up, I gathered training resources and added them to the app. Now I could practice them again and again in the super simple workspace I created. How cool is that !?



A really cool site that I found that visualizes how sorting algorithms and data structures work. This quick sort performs its work in an array of 100 elements. Here you can find a complete list of visualizations . Thanks USF, this is awesome!

Most importantly, I took what I had put off for a long time, and found a way to make it interesting. And, of course, I had a big breakthrough in achieving my goals because of this.
I created this application for myself, but I wanted to share it with all of you for some reason. If even one more person finds favor in CS-Playground-React, I will feel that I have done my job (or at least part of it) to give it to the community.

There are so many programmers who freely share their knowledge and experience and ask for either little or nothing in return. Without such an open community, one could hardly learn to program independently.

Ten years ago there were far fewer options when it came to self-study. Therefore, I am grateful every day for living in an era of information, where there is so much knowledge that is so easily accessible.

It made the journey possible for me, and I hope that someone else there stumbles upon this article and finds that their own journey has become a little easier.

Technology stack and chips

In case you are interested, I created this application using React & React-Redux (although the first version was vanilla JS, CSS and HTML). It also uses CodeMirror and React-Codemirror2 to embed the editor in the browser (NOTE: the original React-CodeMirror is no longer supported and does not work well with newer versions of React).

Dummy console

A small chip allows me to run the redux action every time a user calls console.log in his code. Thus, I can catch the message log and, in turn, display the console in the browser to show the result of the code execution - I think it's cool! You can use clearConsole () anytime you want to clear dummy console messages.

 import { store } from './index'; export const hijackConsole = () => { const OG_LOG = console.log; console.log = function(...args) { // map over arguments and convert // objects in to readable strings const messages = [...args].map(msg => { return typeof msg !== 'string' ? JSON.stringify(msg) : msg; }).join(' '); store.dispatch({ type: CONSOLE_LOG, messages }); // retain original functionality OG_LOG.apply(console, [...args]); }; }; 

Override console.log to capture and save recorded code

Stored code

I wanted to make this application super easy to use. Therefore, instead of deploying a database and requesting users to log in, I chose a simpler approach to save progress. Redux controls the state of the application during each session, and I use localStorage to store code in the sessions. The application retrieves this saved state on the next visit and rehydrates the Redux repository with it. This way you can return to the place where you left off.

If for some reason you want to delete all your achievements, you can use resetState() at any time in the editor. If you do not want to save your code, leave a comment // DO NOT SAVE before passing. This will prevent the preservation of any code not only for this file.

 import { store } from './fileWhereStoreLives'; // add this code in your app's entry point file to // set localStorage when navigating away from app window.onbeforeunload = function(e) { const state = store.getState(); localStorage.setItem( 'local-storage-key', JSON.stringify(state.stateYouWantToPersist) ); }; 

 import { importedState } from './fileWhereStateLives'; // define your reducer's initial state: const initialState = { ...importedState; }; // define default state for each subsequent visit. // if localStorage with this key exists, assign it // to this variable, otherwise, use initialState. const defaultState = JSON.parse( localStorage.getItem('local-storage-key') ) || initialState; // set defaultState of reducer to result of above operation const reducer = (state = defaultState, action) => { switch (action.type) { case 'DO_SOMETHING_COOL': return { ...state, ...action.newState }; default: return state; } } export default reducer; 

On the other hand, there is a package that does this for you, called Redux-Persist (which I learned after the fact). But for simple use, if you can do something with a few lines of code, or install an NPM package to do the same? I will choose the first one anyway. Most likely, you save hundreds of lines of code and a whole new set of dependencies. This is an everlasting compromise, and you must decide when a well-optimized solution is better than your simplified method.

Resizing Panel

The last trick I had on my sleeve was to make the workspace flexible and easy to use. I wanted to give users the ability to resize both the editor and the console, so I used a small script that I found — simpleDrag.js , React refs and the magic of flexbox to make this possible.

Read more

Learn CSS Grid in 5 minutes