How do I avoid giving my mobile code readers eye cancer!!!

Question

Hello all you lovely people,
So I was going to make changes to my HTML cheat sheet
code: https://code.sololearn.com/W1UH4qQ6OMTT
And I was shocked and appalled by how it looked on my mobile.
I cleaned it up a bit and I would now give it ~7/10 on readability

I read somewhere that the hardest thing about programming, is reading other people's code.

So here is what I'am asking:
1) Is code readability something you should be worried about
2) Should you view and code on mobile since its probably more easier on desktop
3) What are general tips and pointers you can give for improving code readability especially for mobile. Do you have tips for a specific language.
4) Can you give examples of well written code and badly written code.

If I get lots of answers and consensus I might write a code style guide based on this discussion.

P.S: This is my first question
Happy Coding! (and/or reading)

Answer 1

Good question! It doesn't really have the right answer, because it's impossible to make everybody happy ☺. Tons of people simply love to complain and patronize 🛂. It's called arrogance. Ignore them. Coding is an exercise in precision not showing off. Write your codes the way that is good for YOU to read and understand in a month or later. If you fail you can always change your style later. Experiment, see what is good and what isn't.

You can always learn by reading codes of more experienced users. Play around, compare, see what's good and what annoys you. Eventually, you will develop your nerdy vision. Learn the natural way just like babies do. When working in a team use their conventions, if they have their "version of ZEN".

I noticed some of your misconceptions:
📌 Reading on a mobile device is NOT easier. Editing is even more difficult.
📌 Everyone has a different device hence their viewports are different.
📌 Spacing matters the most in Python. Web developers usually get rid of unnecessary spaces.

Answer 2

Part 2.

Tips for Web.
📌 Use separate tabs for mark up, style and script.
📌 DO NOT style with mark up.
📌 Avoid redundant attributes.
📌 Avoid inline styling and scripting.
📌 Use comments for designing and complementing your code not for remarks that obscure the view.

Thank you for your likes 😄😄😄!
Good luck and happy coding!

Answer 3

Cbr✔[ Most active ]
I appreciate your answer

I feel that its a python specific viewpoint since thier syntax was designed to be readable and writable. For other languages it might be different maybe.

Answer 4

I think I will put my tips for HTML based on experience.

But first in general
-watch out white space and tabs when code is rendered could cause wierd effect
-since line length is limited on mobile use space indentation rather than tab indentation
-use blank lines around nested code blanks rather than indentation eg 3 blank lines before and after function block
-plan the design before hand
-break up long lines as much as possible
-make a line of ---- that takes full viewport width and use it measure lines

For html:
-If you have a tag with lots of attributes ussually <img> then break each attribute on seperate lines
-if you have tag with extensive inner html than put beggining and ending tag and contents on seperate lines
-make sure lists are probably indented

Wow I'am realizing planning and designing readability is like a whole other dimension of coding

Answer 5

Coders are unfortunately not the best ergonomics experts. I would only bother to read the simplest code on a mobile display less than 10" in size, diagonally.