Nova

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Nova ist ein neuer (strikt nur für macOS verfügbarer) Code-Editor von Panic, den Machern von Coda. Es ist wie "Coda 3", nur dass es sich um eine so große Überarbeitung handelte, dass sie ihm einen komplett neuen Namen gaben.

Ich habe mit einigen Betas herumgespielt, als sie entwickelt wurden. Ich bekam einen kleinen Rabatt, als es live ging, also kaufte ich es und benutze es hier und da. Hier ist mein Gedankenschwall!

Wie sehr viele andere Leute bin ich auf dem VS Code-Zug aufgesprungen. VS Code ist sehr gut und kostenlos. Ich arbeite in einem Team, in dem alle anderen ebenfalls VS Code benutzen. Es wird schwer sein, mein VS Code-Muskelgedächtnis zu verdrängen. Ich habe schon einmal über den Wechsel von Code-Editoren geschrieben. Kurz gesagt:

  1. Nichts kann anfangs abstoßend sein. Das heißt, ich kann Dinge neu lernen, *nachdem* der Übergang stattgefunden hat.
  2. Es muss ein Killer-Feature geben, das es ansprechend macht.

Ich mag wirklich, wirklich Prettier und Emmet. Wenn ich die nicht hätte, wäre ich raus. Glücklicherweise sind sie einige der Top-Erweiterungen.

Ich habe ein paar ausgewählt, von denen ich weiß, dass ich sie haben möchte.

Die Standarderweiterung für Emmet ist Ctrl-E, und sie funktioniert (soweit ich das beurteilen kann) nicht mit Tab-Erweiterung, was nicht mein Favorit ist. Sie hat jedoch alle zusätzlichen schicken Dinge, die Emmet kann, und die du auf beliebige Tasten legen kannst.


Die Tastenkombinationskonfiguration ist großartig. Ich konnte alle Dinge, an die ich gewöhnt bin, so einrichten, dass Command-T "Schnell öffnen" aufruft, was dem "Go to file..."-Setup in VS Code ähnelt.


Ich habe fast 30 aktivierte VS Code-Erweiterungen. Sie alle fügen VS Code spezifisch kleine Annehmlichkeiten hinzu. Ich habe noch keine davon vermisst. Es wäre ein Bonus für mich, wenn das Standardverhalten von Nova "out of the box" so gut wäre, dass es nicht so viele Drittanbieter-Tweaks bräuchte (abgesehen von den beiden großen, die ich bereits erwähnt habe). Zum Beispiel brauche ich kein Plugin, um meine Einrückungen regenbogenfarben zu machen, weil sie das schon sind!

Aber beachte, dass JSX nicht besonders gut hervorgehoben wird, obwohl es die richtige Syntax ist.

"In-Projekt suchen" ist etwas, das ich mindestens ein Dutzend Mal am Tag mache, also muss das für mich tremendously gut funktionieren. Mein einziges bisheriges Problem ist, dass es bei mir ziemlich oft auf "Dateien indizieren..." hängen bleibt (oder sich so anfühlt, weil es den alten Lüfter hochdrehen lässt). Dennoch scheint es gute Suchergebnisse zu liefern.

Die Mac-typische Natur von Nova ist sehr, sehr stark ausgeprägt. Das Einschränken der "In-Projekt suchen"-Ergebnisse (z. B. nur *.js-Dateien zurückzugeben) erfordert die Erstellung eines neuen Suchbereichs. Ich kann diesen Bereich mit einem benutzerdefinierten Namen speichern, was eine nette Idee ist, aber es hat die sehr wortreiche, UI-lastige Suchbereichseinstellung des MacOS Finders anstelle eines schnellen Eingabefeldes, in das ich schnell *.js tippen kann, um die Ergebnisse einzugrenzen. Mit anderen Worten, es fühlt sich einfach wie ein Beispiel dafür an, Mac-typische-keit über Nützlichkeit zu stellen.


Ein weiteres Mega-Mac-Ding ist das Rechtsklicken auf einen Ordner, um den Datei-Explorer zu öffnen: Es ist genau wie das Rechtsklicken auf einen Ordner im Finder. Es ist auf eine Weise beruhigend, weil dieses Menü viele mächtige Dinge enthält.

Aber es fehlen auch Dinge, die kontextbezogen nützlich sein könnten. Zum Beispiel vermisse ich eine Option, um "Diesen Ordner in einem Terminalfenster zu öffnen."


Die UI-Details sind sehr schön. Die Auswahl der Einstellungen für Programmiersprachen-Schriftarten ist wunderbar. Die Minimap sieht großartig aus mit kleinen farbigen Rechtecken, die deinen Code darstellen. Die Fenster- und Editor-Themen sind sehr gut umgesetzt. Alles an der UI ist einfach super klassisch.


Es ist immer noch ein Nachfolger von Coda, also wenn du dich per SFTP mit entfernten Servern verbinden und direkt bearbeiten musst, ist das vorhanden. Ich musste es neulich tun, um eine Datei zu bearbeiten, die ich absichtlich nicht in Git halte, also ist diese Funktion manchmal immer noch nützlich.

Das ist ein entferntes Dateisystem.

Andernfalls hätte ich Coda dafür benutzt und musste es für Nova nicht einmal einrichten, da Panic Sync alle diese Authentifizierungsinformationen übernommen hat.


Ich mag die Tatsache, dass es einen eingebauten Browser (Safari, natürlich) gibt. Ich frage mich, ob ich das Muskelgedächtnis entwickeln kann, um nur in dieser einen Anwendung zu arbeiten, ohne viel Fenster-Gefuchtel. Das bedeutet Datei-Explorer, Code-Editor, Terminal, Browser und DevTools.

Es ist viel auf einmal zu sehen, aber... irgendwie cool? Ich wünschte, es gäbe die Option, Chromium integriert zu nutzen, da ich mit den DevTools von Chromium vertrauter bin. Es gibt auch einige raue Kanten, wie z. B. dass meine kleine tmux-Sitzung im Terminal nicht auf Klickereignisse reagiert.


Es ist interessant, dass Swift keine eingebaute Sprache ist. Ich hätte vermutet, dass Panic sogar zumindest Teile von Nova in Swift geschrieben hat, angesichts seiner Mac-typischen Art.


Wenn nichts anderes, solltest du dir die Nova-Landingpage für all die CSS-Tricks ansehen! Die animierte clip-path auf dem Bild, das die Nova-Themes illustriert, ist super cool (ich habe gehört, clip-path-Animationen sind in Safari hardwarebeschleunigt, was großartig ist!). Es sind nur ein paar übereinander gestapelte Bilder, die alle dieselbe Animation teilen, zeitversetzt.

@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; }

Die <hr> aber... die ist einfach nur atemberaubend.

Oh, und schau dir die Verwendung des display-p3-Farbbereichs an!

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