PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Nova | CSS-Tricks

September 21, 2020
in Web Dev
286 6
Nova | CSS-Tricks


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!

DevTools window showing CSS custom properties on the Nova landing page that reference display-p3 color values.



Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
Thinking About Power Usage and Websites

Thinking About Power Usage and Websites

Bringing the power of embedded analytics to your apps and services with Amazon QuickSight : idk.dev

Bringing the power of embedded analytics to your apps and services with Amazon QuickSight : idk.dev

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Integrating the MongoDB Cloud with Amazon Kinesis Data Firehose : idk.dev

Integrating the MongoDB Cloud with Amazon Kinesis Data Firehose : idk.dev

August 15, 2020
An Introduction To Running Lighthouse Programmatically — Smashing Magazine

An Introduction To Running Lighthouse Programmatically — Smashing Magazine

September 11, 2020
Creating WebGL Effects with CurtainsJS

Creating WebGL Effects with CurtainsJS

November 18, 2020
Leveraging AWS Global Backbone for Data Center Migration and Global Expansion : idk.dev

Leveraging AWS Global Backbone for Data Center Migration and Global Expansion : idk.dev

July 1, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In