Nova

Nova is a new (vehemently macOS-only) code editor from Panic, the folks behind Coda. It’s like “Coda 3” except this was such a major re-write that they gave it a whole new name.

I played with some of the betas as they were building it. I got a little discount as it went live, so I bought it and am using it here and there. Here’s my thought dump!

Like a lot of other people, I’m on the VS Code train. VS Code is very good and free. I work on a team where everyone else also uses VS Code. It’s going to be hard to dislodge my VS Code muscle memory. I’ve written about switching code editors before. The short story:

1. Nothing can be obnoxious up front. As in, I can re-learn things after the transition.
2. There has to be some killer feature that makes it appealing.

---

I really, really like Prettier and Emmet. If I couldn’t have those, I’d be out for sure. Fortunately, they are some of the top extensions.

I picked out a few I know I’ll want.

The default expansion for Emmet is Ctrl-E though, and it doesn’t work with Tab expansion (as far as I can tell), which isn’t my favorite. It does have all the extra fancy things Emmet can do though, which you can map to whatever keys you want.

---

The key binding setup is great. I was able to map all the things I’m used to, like setting Command-T to “Open Quickly” which is like the “Go to file…” setup in VS Code.

---

I have nearly 30 VS Code extensions activated. They all add some little nicety to VS Code for me specifically. I haven’t missed any of them yet. It would be a bonus to me if the default behavior of Nova was so good off the shelf that it didn’t need as many third-party tweaks (aside from the two biggies I already mentioned). For example, I don’t need a plugin to make my indendations all rainbow-ified because they already are!

But notice the JSX isn’t particularly well highlighted even though it’s on the right syntax.

---

“Find-in-project” is something I do at least a dozen times a day, so that’s something that needs to work tremendously well for me. My only issue so far is that it seems get stuck on “Indexing Files…” for me quite a bit (or feels stuck because it gets the ol’ fan spinning). That said, it seems to return good search results.

The Mac-ness of Nova is ver, very strong. Scoping the “find-in-project” search results (say to only return *.js files) requires creating a new search scope. I can save that scope with a custom name which is a neat idea, but it has the very verbose UI-heavy search scoping from the MacOS Finder rather than a quick input field where I can quickly type *.js to scope results. In other words, it just feels like an example of emphasizing Mac-y-ness over usefulness.

---

Another mega Mac-y-ness thing is right-clicking a folder to open the file browser: it’s exactly like right-clicking a folder in the Finder. It’s comforting in a way, because that menu has a lot of powerful things in it.

But it also lacks things that might be contextually useful. For example, I miss an option to “Open this folder in a terminal window.”

---

The UI details are very nice. Selecting of coding font preferences is wonderful. The minimap looks great with little colored rectangles representing your code. The window and editor themes are very well done. Everything about the UI is just super classy.

---

It’s still a successor to Coda, so if you need to SFTP into remote servers and do direct editing, that’s there. I just had to do it the other day to edit a file I intentionally keep out of git, so that feature is still handy at times.

That’s a remote file system.

I otherwise would have used Coda for that, and didn’t even have to set it up for Nova because Panic Sync brought over all that auth info.

---

I do kind of dig that there is a built-in browser (Safari, of course). I’m wondering if I can get the muscle memory to be able to work within just this one application only without having to do much window-juggling. That means file browser, code editor, terminal, browser, and DevTools.

It’s a lot to see at once, but… kinda cool? I wish it had the option to use Chromium built-in as I happen to be more familiar with those DevTools There are some rough edges too, like my little tmux session in the terminal doesn’t respond to click events.

---

It’s interesting that Swift isn’t a built-in language. I would have guessed Panic even wrote at least parts of Nova in Swift given its Mac-y-ness.

---

If nothing else, you should check out the Nova landing page for all the CSS trickery! The animated clip-path on the image illustrating Nova’s themes is super cool. It’s just some images stacked on top of each other all sharing the same animation, staggered out:

@keyframes wipe
{
    0% { clip-path: polygon(-50% 0%, 0% 0%, -50% 101%, -100% 101%) }
    100% { clip-path: polygon(150% 0%, 200% 0%, 150% 101%, 100% 101%) }
}

/* ... */

img#interface1 { animation-delay: -17000ms; }
img#interface2 { animation-delay: -15000ms; }
img#interface3 { animation-delay: -13000ms; }
img#interface4 { animation-delay: -11000ms; }

The <hr> though… that’s just gorgeous:

Oh, and check out the use of the display-p3 color format!

---

The post Nova appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/nova/