Can't find in Hype's Help info about the UI Preferences

There are new features in there that I would like to explore. In English it's OK.
Thank 2021-01-15 à 23.26.54

There's really not too much to those settings...

  • Line spacing — This is just the spacing between lines when you're writing code (HTML / JavaScript). The range is single (1) to double (2).
  • Tab width — If you hit the tab key while writing JavaScript code, how many spaces should be added? This is a way to make the code more readable. As an example, if you have a conditional statement... if (x == 3) { ...the lines inside the brackets are typically indented. (This should make more sense when looking at the next screenshot.) This is to show a code section. It's a manual thing in Hype. You have to press tab to add spaces. With Visual Studio Code it can clean entire sections of code automatically with the "Format Document" or "Format Selection" options.
  • Highlight current line — This makes it easier to see the current line that you're working with, as that line of code will be shown with a different background color.
  • Show line numbers in gutter — This makes it easier to track which line of code you're working on. It's the numbers on the left side of the code. (This doesn't appear when editing "Inner HTML".)
  • Preserve indentation — While writing code, if you hit enter, this will automatically add the spaces to the new line of code. This is to match the previous line of code. It's a way to make your code more readable, by maintaining the spacing for blocks of code.
  • Wrap lines — If you have a line of code that is too long, longer than the width of the code editing window, it will "wrap" the text. (The extra text that sticks out will go to the next line.) Developers often toggle between the two modes, depending upon the type of project you're working on. If you're more interested in the line numbers, and don't want to scroll around as much, you might turn this off. If you don't want to scroll horizontally, you might want to leave this on.
  • Show invisible characters — This shows things like line breaks and spaces.

Most of the settings can be explained with this screenshot...

This is while editing JavaScript code. (Many of these preferences do not affect the editing of "Inner HTML".) The screenshot shows code from the "Jump" template...

The line space is set to "1" because I don't feel like scrolling a lot. But if you want to make reading code easier on your eyes, you could set it to higher than 1, but up to the number 2.

The tab width is set to 5. There are two indents in this block of code, 10 spaces. Inside the conditional there are three indents, 15 spaces. It's just to make it easier to read.

See the blue background across the line with... "ppbSetPosition("ball", 25, 100); ...that's the currently highlighted line.

Do you see the numbers on the left side? 340... 341... 342... 343... those are line numbers. I'm not sure I'd use the word "gutter" though. I think "Left Margin" would be a better description. Not only does "gutter" have a negative connotation, it's kinda confusing. In print terminology, a gutter is the space between pages... it can also be known as the space between columns... I don't think the word applies here... ...I think I'd sooner use the words "left side" or maybe nothing at all. "Show line numbers" should be self-explanatory. At least, it would be if this section had a header. Perhaps it should be its own tab for JavaScript code editing.

The screenshot doesn't show "Wrap Lines", but if you use use this feature you'll probably want to use it with "Show Line Numbers" option. When a line of code is wrapped, that wrapped line won't show a line number. That's because it's still the same line of code. When you see a space between line numbers, it means that text was wrapped.

The screenshot does show invisible characters. The spaces and line breaks have symbols representing characters that you can't see. I usually leave this option turned off because it makes the code harder to read.


Thanks so much for chiming in with your explanations @Photics! I realize that we forgot to add specific v4.1 documentation about the new options. Do you mind if I steal bits from your descriptions?

That's so negative sounding. You asked nicely, enjoy the documentation.
It's not illegal if I give it to you. :innocent:

This is new? I was wondering if I forgot to mention it in A Book About Hype.

Not at all, in fact I'd call it arrogant since I'm referring to myself as a "great artist" :slight_smile: Thank you.

Yes, it is new to v4.1 -- taking options from Whisk and bringing them to Hype. These were all generally requested at one point or another.

... in fact, I realize now it is already documented, just in Whisk's docs :crazy_face::

1 Like