I created an application that makes studying 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 impostor syndrome . It is not uncommon for me to feel that I am inferior, and I am at a disadvantage for understanding the complex concepts of computer science.

I never knew math. And I have always tied strong mathematical skills to my natural ability to excel in programming. I feel like I have to work harder than others (who have innate math skills) to learn the same concepts. With this idea deeply rooted in my brain, I was sure that I could never learn anything, such as traversing binary search trees, and how to mentally analyze recursive nightmares such as merge sort.

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 training not very painful, as I had.

---

The translation was supported by EDISON Software , which professionally develops video surveillance services , applications for a virtual mobile operator and develops C and C ++ programs (IPTV player) .

---

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

CS Playground React is a minimalistic tool for learning a specific set of themes. Creating this application is just my way of learning 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 opportunities. Therefore, if you know a cool problem or data structure that I did not consider, or noticed something that you can improve, do not hesitate to open the problem or send a pull request.

If you just want to see the application, do not read further - it lives here (also available through 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 up are boring things about why and how.

Why i created this

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

Over the past 18 months or so, I can safely say that I learned how to write code. Although I still hesitate to call myself a programmer. And this is not because I am not writing code for life (and I am not writing), but because of the phenomenon of the impostor syndrome , which I mentioned earlier. Of course I 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 to help others see me in the same way.

Self-taught programmers are a pill that the technology industry has become easier to swallow in recent years. Especially in places like Silicon Valley, where bootcamp coding has sprung up on every street corner.

Nevertheless, there remains a serious obstacle for most programmers hoping to enter the industry without a formal education in computer science.

Therefore, in order 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 of computer science can study. I thought this would complement some of my practical development skills and help others take me more seriously as a programmer.

Я использовал набор тем, которые, как известно, являются общими для программирования в качестве базы, которую я хотел бы охватить.

Сортировка пузырьком, сортировка выбором, сортировка вставками, сортировка слиянием, быстрая сортировка, сортировка кучей, стеки, очереди, связные списки, хэш таблицы и деревья двоичного поиска…

Я был очень напуган этим набором задач и довольно долго откладывал их.

Не желая принять поражение, я, наконец, начал копаться. Поиск учебников, чтение каждой статьи, которую я мог найти, изо дня в день.

Со временем некоторые из концепций начали проясняться. Но было несколько проблем:

1. I got bored . I like problem solving, but let's face it, solving a reverseLevelOrdertraversal of 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 (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 became worried that I would lose touch with my more existing skills.

All this material on computer science is good to be armed with, but let's face it, more often than not, we web developers are hired to create. And there are not too many practical uses for most of these concepts in everyday web development.

For me, studying 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.

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

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

Learning algorithms and data structures was now a necessary part of my last project. Because what's the point of creating an application to prepare 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 nearly gave up, I collected training resources and added them to the application. Now I could practice them again and again in the super simple workspace that I created. How cool is that !?



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

Most importantly, I took on what I 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 another person finds benefit in CS-Playground-React, I feel like I did 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.

This made the journey possible for me, and I hope someone else there stumbles on 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 very well with newer versions of React).

Dummy console

A small feature allows me to run the redux action every time the user invokes 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

Persistent code

I wanted to make this application super easy to use. Therefore, instead of introducing a database and asking 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 it localStorageto save the 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 it resetState()at any time in the editor. If you do not want to save your code, leave a comment // DO NOT SAVEbefore going through. This will prevent the storage 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 found out after the fact). But for simple use, if you can do something with a few lines of code, or install the 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 set of new dependencies. This is an eternal compromise, and you must decide when a well-optimized solution is better than your simplified way.

Panel Resizing

The last trick that I had in my sleeve was to make the workspace flexible and easy to use. I wanted to give users the ability to change the size of both the editor and the console, so I used a little script that I found - simpleDrag.js, React refsand magic flexbox, to make this possible.

Read more

Learn CSS Grid in 5 Minutes