6 ms·

How do you line up your equal signs? e.g. def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y)

by amanzi 5y ago

How do you line up your equal signs? e.g. def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) self.set(text)

mseepgood 5y ago
You don't have to.
- lelanthran 5y ago
  > You don't have to. I do. I like being able to visually spot oddness in statements, and having a sequence of assignments, comparisons, etc lined up makes it easy to spot the lines that do something different.
nielsbot 5y ago
I find you don’t need to. maybe tabs would work w the right editor.
zeven7 5y ago
Is this the best case that can be made for using a monospace font for coding? I can do without lining up the equal signs. I may look into switching to a proportional font.
Stratoscope 5y ago
Sibling comments have pointed out that you just don't need to line things up that way. Here is how your code looks without the alignment: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) self.set(text) Is that any less readable? Urgent request! We need two new variables for some debugging: distance and relative_velocity. Going back to the vertically aligned format, we will add them like this: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) self.set(text) We had to add whitespace to the previous assignments to match the new ones. Now, with all that horizontal whitespace, my eyes have trouble tracking what is assigned to what. And the version control history will have unnecessary formatting diffs. If you forgo the column alignment, those problems go away: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) self.set(text)
- alpaca128 5y ago
  > Now, with all that horizontal whitespace, my eyes have trouble tracking what is assigned to what If it's not aligned I have trouble identifying exactly what I need because it's so chaotic. When everything's aligned it's a bit like a table and my brain immediately knows where the right-hand side is no matter which line I want to read. Now I don't do that everywhere, often it just doesn't bring any benefit. But generally I often find it helpful and it's one of the quickest ways I can make some code blocks more readable, as it takes just a few keypresses.
  - josephg 5y ago
    It looks chaotic because everything is packed together. If you let that code breathe a bit it looks like this: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) # Update overlay label self.set(text) I find that a much more readable style. Instead of stuff on the left - assigned to stuff on the right, its now a story made up of steps: First we're figuring getting some variables for text labels, and distances. Then logging that out. Then after that we're updating the label on the overlay. Each step in the story has a little breath (the newline). And if needed, a comment. Here's a random work-in-progress example from some real code I'm working on this week. Its not beautiful or overly fancy. Just steady, confident and readable (assuming you know the context): https://github.com/josephg/diamond-types/blob/2e807298a70382eb0c7d1216343577a595954f97/src/list/doc.rs#L411-L437 https://github.com/josephg/diamond-types/blob/2e807298a70382...
    - alpaca128 5y ago
      When the equal signs aren't aligned I first have to search where the symbol is on a given line to identify the left and right side. When the assignments are aligned it's obvious at a glance. I guess it's different between people, I personally find it noticeably slower and more difficult to read like that. Blank lines inbetween don't help because it's about horizontal alignment.
warpech 5y ago
That would be possible using a proportional font like Input Sans with elastic tabstops[0] [0] https://nickgravgaard.com/elastic-tabstops/ https://nickgravgaard.com/elastic-tabstops/
quickthrower2 5y ago
Hmmm. What if the editor was clever enough to do that, with any font, automatically.
agys 5y ago
I always line up columns like the example above. I think it is a distortion from my background in typesetting and graphic design, but the readability improves greatly… for me at least! const style = { x : 3, y : 2, width : 0, height : 0, backgroundColor : 'white', color : 'black', fontWeight : 'normal', shadowStyle : 'none', borderStyle : 'round' paddingX : 2, paddingY : 1, }
- Stratoscope 5y ago
  Thanks for posting that example. It helped clarify why I dislike that style so much. Please don't take offense! What works for me doesn't have to be what works for you, OK? :-) But the insight - if I dare call it that - is that one style leads me to read across each line, where the other style leads me to read down the columns. In your example, my eyes see an x, a y, a width, a height, a backgroundColor, a color, and so on. And then I see a 3, a 2, a 0, another 0, a 'white', a 'black', etc. As you can tell, I am reading down the first column, and then reading down the second column. And by then I'm losing track of which thing goes with which. It's not that I mean to do that, it's just how my eyes are drawn when I see something arranged in columns. If we reformat this without the column alignment, it looks like this: const style = { x: 3, y: 2, width: 0, height: 0, backgroundColor: 'white', color: 'black', fontWeight: 'normal', shadowStyle: 'none', borderStyle: 'round' paddingX: 2, paddingY: 1, } It's definitely not as nice looking this way! But now I read it completely differently: We have an x of 3, a y of 2, a width of 0, a height of 0, a backgroundColor of 'white', a color of 'black', etc. This style leads me to read across each line instead of down each column. I think that may be why it is easier for me to understand. And to repeat myself, I am truly grateful to you for posting this example. It helped me get some understanding of what goes on in my eyes and brain.
  - agys 5y ago
    You are very cautious with me in not taking any offense; thank you (I won’t)! For me the aligning and the subsequent empty space which is created between the two columns allows very fast skimming in the values of -both- columns. I don’t have any isse in tracking horizontally. Any spreadsheet uses the same technique (aided by the cell lines). I use this style also in expressions: often when coding graphics you have similar operations or variables and ordering it in “column fashion” allows quick skimming and error spotting. Another (real) example: const neighbors = get(x - 1, y - 1, w, h, prev) + get(x, y - 1, w, h, prev) + get(x + 1, y - 1, w, h, prev) + get(x - 1, y, w, h, prev) + get(x + 1, y, w, h, prev) + get(x - 1, y + 1, w, h, prev) + get(x, y + 1, w, h, prev) + get(x + 1, y + 1, w, h, prev)
dragonwriter 5y ago
> How do you line up your equal signs? I don't, and if I tried to, the code formatter would get rid of it anyway.

by amanzi 5y ago

How do you line up your equal signs? e.g. def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) self.set(text)

mseepgood 5y ago

You don't have to.

lelanthran 5y ago
> You don't have to. I do. I like being able to visually spot oddness in statements, and having a sequence of assignments, comparisons, etc lined up makes it easy to spot the lines that do something different.

nielsbot 5y ago

I find you don’t need to. maybe tabs would work w the right editor.

zeven7 5y ago

Is this the best case that can be made for using a monospace font for coding? I can do without lining up the equal signs. I may look into switching to a proportional font.

Stratoscope 5y ago

Sibling comments have pointed out that you just don't need to line things up that way. Here is how your code looks without the alignment: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) self.set(text) Is that any less readable? Urgent request! We need two new variables for some debugging: distance and relative_velocity. Going back to the vertically aligned format, we will add them like this: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) self.set(text) We had to add whitespace to the previous assignments to match the new ones. Now, with all that horizontal whitespace, my eyes have trouble tracking what is assigned to what. And the version control history will have unnecessary formatting diffs. If you forgo the column alignment, those problems go away: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) self.set(text)

alpaca128 5y ago
> Now, with all that horizontal whitespace, my eyes have trouble tracking what is assigned to what If it's not aligned I have trouble identifying exactly what I need because it's so chaotic. When everything's aligned it's a bit like a table and my brain immediately knows where the right-hand side is no matter which line I want to read. Now I don't do that everywhere, often it just doesn't bring any benefit. But generally I often find it helpful and it's one of the quickest ways I can make some code blocks more readable, as it takes just a few keypresses.
- josephg 5y ago
  It looks chaotic because everything is packed together. If you let that code breathe a bit it looks like this: def mouseMoved(self, info): point = info["point"] text = u"%.0f %.0f" % (point.x, point.y) distance = self.calculate_distance(info) relative_velocity = self.calculate_velocity(distance, info) log_move(point, text, distance, relative_velocity) # Update overlay label self.set(text) I find that a much more readable style. Instead of stuff on the left - assigned to stuff on the right, its now a story made up of steps: First we're figuring getting some variables for text labels, and distances. Then logging that out. Then after that we're updating the label on the overlay. Each step in the story has a little breath (the newline). And if needed, a comment. Here's a random work-in-progress example from some real code I'm working on this week. Its not beautiful or overly fancy. Just steady, confident and readable (assuming you know the context): https://github.com/josephg/diamond-types/blob/2e807298a70382eb0c7d1216343577a595954f97/src/list/doc.rs#L411-L437 https://github.com/josephg/diamond-types/blob/2e807298a70382...
  - alpaca128 5y ago
    When the equal signs aren't aligned I first have to search where the symbol is on a given line to identify the left and right side. When the assignments are aligned it's obvious at a glance. I guess it's different between people, I personally find it noticeably slower and more difficult to read like that. Blank lines inbetween don't help because it's about horizontal alignment.

warpech 5y ago

That would be possible using a proportional font like Input Sans with elastic tabstops[0] [0] https://nickgravgaard.com/elastic-tabstops/ https://nickgravgaard.com/elastic-tabstops/

quickthrower2 5y ago

Hmmm. What if the editor was clever enough to do that, with any font, automatically.

agys 5y ago

I always line up columns like the example above. I think it is a distortion from my background in typesetting and graphic design, but the readability improves greatly… for me at least! const style = { x : 3, y : 2, width : 0, height : 0, backgroundColor : 'white', color : 'black', fontWeight : 'normal', shadowStyle : 'none', borderStyle : 'round' paddingX : 2, paddingY : 1, }

Stratoscope 5y ago
Thanks for posting that example. It helped clarify why I dislike that style so much. Please don't take offense! What works for me doesn't have to be what works for you, OK? :-) But the insight - if I dare call it that - is that one style leads me to read across each line, where the other style leads me to read down the columns. In your example, my eyes see an x, a y, a width, a height, a backgroundColor, a color, and so on. And then I see a 3, a 2, a 0, another 0, a 'white', a 'black', etc. As you can tell, I am reading down the first column, and then reading down the second column. And by then I'm losing track of which thing goes with which. It's not that I mean to do that, it's just how my eyes are drawn when I see something arranged in columns. If we reformat this without the column alignment, it looks like this: const style = { x: 3, y: 2, width: 0, height: 0, backgroundColor: 'white', color: 'black', fontWeight: 'normal', shadowStyle: 'none', borderStyle: 'round' paddingX: 2, paddingY: 1, } It's definitely not as nice looking this way! But now I read it completely differently: We have an x of 3, a y of 2, a width of 0, a height of 0, a backgroundColor of 'white', a color of 'black', etc. This style leads me to read across each line instead of down each column. I think that may be why it is easier for me to understand. And to repeat myself, I am truly grateful to you for posting this example. It helped me get some understanding of what goes on in my eyes and brain.
- agys 5y ago
  You are very cautious with me in not taking any offense; thank you (I won’t)! For me the aligning and the subsequent empty space which is created between the two columns allows very fast skimming in the values of -both- columns. I don’t have any isse in tracking horizontally. Any spreadsheet uses the same technique (aided by the cell lines). I use this style also in expressions: often when coding graphics you have similar operations or variables and ordering it in “column fashion” allows quick skimming and error spotting. Another (real) example: const neighbors = get(x - 1, y - 1, w, h, prev) + get(x, y - 1, w, h, prev) + get(x + 1, y - 1, w, h, prev) + get(x - 1, y, w, h, prev) + get(x + 1, y, w, h, prev) + get(x - 1, y + 1, w, h, prev) + get(x, y + 1, w, h, prev) + get(x + 1, y + 1, w, h, prev)

dragonwriter 5y ago

> How do you line up your equal signs? I don't, and if I tried to, the code formatter would get rid of it anyway.