How to read other's code

Question

To all those who are saying "keep track of each variable and function of what they are doing"
I think this approach helps only when the code is written in c++ or python or some other non web languages and that too when it is short.
But what can one do if he is reading a code that is written in web languages (here on sololearn)? It's equivalent to reading three codes in 3 different languages at the same time and all of them interwoven in a beautiful and ugly way at the same time.
When each of the section (html, css, js) contains more than 300 lines and I can't even count how many local or global variables and functions are used there, it becomes a terrible mess (specially when it doesn't have comments).
Is there any suggestions on this? How do you guys read and understand such huge codes?
I know you don't read the whole code (obviously), but some of you just look at some parts of the code and get the idea of what and how it is doing something. How you guys do it?

Answer 1

When I look at code like that, I usually skim first to see if I can get the gist. If there are comments that makes it even easier. For example, I could tell from skimming that this was going to be a list of links in categories.

Then if I have a specific question or item I want to learn more about I find where the code intersects. For example, if there is a style ID or class in HTML you can find that same ID or class in CSS to compare it more thoroughly.

Lastly, if you really want to get into the code, copy and paste it into a code editor so you can view it easily. I use Atom (https://atom.io) and you can easily split the screen to show code (e.g. HTML and CSS) side by side when you need to see everything at once. Just make sure you are only learning from, not plagiarizing, others' code.

You can also use the Inspector tool built into some browsers to view the code directly on a web page and see how each element is affected by it.

Answer 2

Saurabh Tiwari
You are a soldier on a mission
Nothing comes in your way
Best of luck buddy 👍👍👍

Answer 3

I don't know if this helps nor relevant, but maybe viewing a lengthy code using a wide screen might.

I think reading lengthy code on a tab or phone sucks literally because, the lines wrap down and gets me distracted, lose track, or interest altogether. Unless I find the code topic to be something important, for which I have to torture myself through it.

And considering this is a community, I think it's also fine to ask a code author about something, in case we don't understand parts of their code. Maybe they can even give us hints on how to read codes better, apart from answering the initial question about the code.

Answer 4

Reading others codes requires you to understand the language first so you can find it easy to read and understand people's coding

Answer 5

That's a great skill to have in my opinion.
But even if the code is well indented I face problems in web languages.
Like this one:
https://code.sololearn.com/WaVusr8J1KvK/?ref=app

Answer 6

Jamie💐 I am doing programming for the past 3 yrs (not hardcore programming but more like problem solving) and mostly in backend languages (c++ or python) and I think it's quite a long a time for someone to be able to atleast read codes in almost any language. Although I can read more or less python or c++ codes posted here but web development is just above my head. If it is a short code then I can understand just by editing some of the part but mostly I understand just by looking at it.
But when a code like that (programming resources) appears to be in my list to be read, I am overwhelmed by the no. of lines it has and sometimes I leave it and start doing something else.
I don't know how to even get started (classic beginner question 😂😅😭).

Answer 7

Ipang I am reading this code in my laptop
No problem with the screen width.
And I have already asked him to comment his code so that I could understand
Let's hope 🙏😅

Answer 8

Saurabh Tiwari
Hehehe I didn't know you used a laptop 😁

I think KrOw knows his stuffs well, and he's alright with answering queries about codes. So hopefully you get to crack this 👍

Answer 9

Ipang It's like the top most thing in my to do list (to understand his code and make my own code from it)
Now it has become more like a mission😂😂

Answer 10

Saurabh Tiwari With time you will come to understand how to read other peoples code, but the thing you have to do now is to track built in methods and functions in any code you come across after that search for the function/method on google, take your time and go through how, where and when to use it, then create your own code with it and play around with it.

You can create your own code that does exactly what you want without copping anyone's code.

Answer 11

That's what I am asking for.
How do you do it? Is there an approach that you use? Or do you just look at some specific sections and get the idea what is happening?

Answer 12

S J thanks a lot

Answer 13

Hi

Answer 14

https://code.sololearn.com/WQ9f5uY6V2PT/?ref=app