5
\$\begingroup\$

Recently I created a small app using JavaScript, and I would love for some JavaScript developers if they have the time of day, to tell me their opinions so I can grow and improve.

I'm mostly working on back-end tasks with PHP and Go, but I thought making something small in JS would be fun attempt.

Basically it's an app that sorts an image based on users choice of sorting algorithm. You first say how many rows and columns want, and past an image URL. The app then shuffles it and asks you what sort do you want.

It is then visual when sorting it back to original.

I know this is not a typical question, but I would love to get some opinions on code, and look of app. So, what do you think? Any recommendation ?

GitHub of project:

https://github.com/fvukojevic/Image-Sorting-Visualizer (if someone wants to star 😁 😁) Application: https://image-sorting-visualizer.herokuapp.com/

Example of one sorting algorithm where I'm saving every swap into an array of "animations":

function bubbleSort(arrayCopy, animations) {
    let sorted = false;
    let counter = 0;
    while(!sorted){
        sorted = true;
        for(let i=0;i<arrayCopy.length -1 - counter; i++) {
            if(arrayCopy[i].val > arrayCopy[i+1].val){
                swap(i, i+1, arrayCopy);
                sorted = false;
                animations.push([i, i+1]);
            }
        }
        counter++
    }
}
\$\endgroup\$
3
  • 1
    \$\begingroup\$ It would be helpful if you directly included all the code you want reviewed in the question. If you modify the code on github, it can invalidate answers to this question. \$\endgroup\$ – spyr03 Jan 11 '20 at 18:23
  • \$\begingroup\$ We can review the code you posted. We can not review the rest if you don't include it into the question itself. Since Code Review is a community where programmers improve their skills through peer review, we require that the code be posted by an author or maintainer of the code, that the code be embedded directly, and that the poster know why the code is written the way it is. Please take a look at the help center. \$\endgroup\$ – Mast Jan 14 '20 at 8:05
  • \$\begingroup\$ So, while your question is fine as-is, you probably won't get the full value out of it unless you modify it. Please keep in mind any such modifications to the code will have to be done before answers arrive. Otherwise you'll have to open a new question. Good thing they're free today. \$\endgroup\$ – Mast Jan 14 '20 at 8:06
1
\$\begingroup\$

A short review

  • This code passes jshint perfectly, well done. Besides the obvious warning that you did not provide swap of course
  • The name arrayCopy is perhaps unfortunate, since this works on any array whether it is a copy or not
  • The name bubbleSort also does not perfectly describe what is going on, it not only bubble sorts the array, but it also tracks the swaps in an animations array
  • I keep thinking that providing the animations array in the function call is weird, I would return the animations instead, the caller can concat if needed
  • I see little point in providing an array with i and i+1 unless you animate with different kind of sorting algorithms, so you could just animations.push(i)
  • Still, very maintainable, correct code.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.