Catégories
Astuces et Design

Nova | Astuces CSS

Nova est un nouvel éditeur de code (avec véhémence uniquement pour macOS) de Panic, les gens derrière Coda. C’est comme "Coda 3", sauf que c’était une réécriture si importante qu’ils lui ont donné un tout nouveau nom.

J'ai joué avec certaines bêtas pendant qu'ils les construisaient. J'ai eu un petit rabais lors de sa mise en ligne, alors je l'ai acheté et je l'utilise ici et là. Voici ma décharge de pensées!

Comme beaucoup d'autres personnes, je suis dans le train VS Code. VS Code est très bon et gratuit. Je travaille dans une équipe où tout le monde utilise également VS Code. Il va être difficile de déloger ma mémoire musculaire VS Code. J'ai déjà écrit sur le changement d'éditeur de code. La petite histoire:

  1. Rien ne peut être désagréable à l'avant. Comme dans, je peux réapprendre des choses après la transition.
  2. Il doit y avoir une fonctionnalité tueur qui le rend attrayant.

J'aime vraiment, vraiment Prettier et Emmet. Si je ne pouvais pas les avoir, j'en serais sûr. Heureusement, ce sont quelques-unes des meilleures extensions.

J'en ai choisi quelques-uns dont je sais que je veux.

L'extension par défaut pour Emmet est Ctrl-E cependant, et cela ne fonctionne pas avec Tab l'expansion (pour autant que je sache), ce qui n'est pas mon préféré. Il a cependant toutes les choses extra-fantaisistes qu'Emmet peut faire, que vous pouvez mapper sur les touches de votre choix.


La configuration de la liaison de clé est excellente. J'ai pu mapper toutes les choses auxquelles je suis habitué, comme le réglage Command-T à «Ouvrir rapidement» qui est comme la configuration «Aller au fichier…» dans VS Code.


J'ai près de 30 extensions VS Code activées. Ils ajoutent tous un peu de finesse au VS Code pour moi en particulier. Je n’ai encore manqué aucun d’entre eux. Ce serait un bonus pour moi si le comportement par défaut de Nova était si bon dans le commerce qu'il n'avait pas besoin d'autant d'ajustements tiers (à part les deux grands que j'ai déjà mentionnés). Par exemple, je n'ai pas besoin d'un plugin pour rendre mes indendations toutes arc-en-ciel parce qu'elles le sont déjà!

Mais notez que le JSX n’est pas particulièrement bien mis en valeur, même s’il utilise la bonne syntaxe.

«Find-in-project» est quelque chose que je fais au moins une douzaine de fois par jour, c'est donc quelque chose qui doit fonctionner extrêmement bien pour moi. Mon seul problème jusqu'à présent est qu'il semble rester bloqué sur "Indexing Files …" pour moi un peu (ou se sent coincé parce que cela fait tourner le vieux fan). Cela dit, il semble renvoyer de bons résultats de recherche.

Le Mac-ness de Nova est très fort. Étude de la portée des résultats de recherche "Find-in-project" (par exemple, retourner uniquement *.js files) nécessite la création d'une nouvelle étendue de recherche. Je peux enregistrer cette portée avec un nom personnalisé, ce qui est une bonne idée, mais il a la portée de recherche très détaillée du Finder MacOS plutôt qu'un champ de saisie rapide où je peux taper rapidement *.js pour définir les résultats. En d'autres termes, cela ressemble juste à un exemple de mise en valeur de Mac-y-ness sur l'utilité.


Un autre méga Mac-y-ness est de cliquer avec le bouton droit sur un dossier pour ouvrir le navigateur de fichiers: c'est exactement comme un clic droit sur un dossier dans le Finder. C'est réconfortant en quelque sorte, car ce menu contient beaucoup de choses puissantes.

Mais il manque également des éléments qui pourraient être utiles sur le plan contextuel. Par exemple, je manque une option pour "Ouvrir ce dossier dans une fenêtre de terminal".


Les détails de l'interface utilisateur sont très gentils. La sélection des préférences de police de codage est merveilleuse. La minicarte a fière allure avec de petits rectangles colorés représentant votre code. Les thèmes de la fenêtre et de l'éditeur sont très bien réalisés. Tout dans l'interface utilisateur est tout simplement super chic.


Il s'agit toujours d'un successeur de Coda, donc si vous avez besoin de SFTP dans des serveurs distants et de faire un montage direct, c'est là. Je devais juste le faire l'autre jour pour éditer un fichier que je garde intentionnellement hors de git, donc cette fonctionnalité est toujours pratique à certains moments.

C’est un système de fichiers distant.

Sinon, j'aurais utilisé Coda pour cela, et je n'ai même pas eu à le configurer pour Nova parce que Panic Sync a apporté toutes ces informations d'authentification.


Je creuse un peu qu'il existe un navigateur intégré (Safari, bien sûr). Je me demande si je peux obtenir la mémoire musculaire pour pouvoir travailler dans une seule application seulement sans avoir à jongler avec les fenêtres. Cela signifie navigateur de fichiers, éditeur de code, terminal, navigateur et DevTools.

C’est beaucoup à voir à la fois, mais… plutôt cool? J'aurais aimé qu'il ait la possibilité d'utiliser Chromium intégré car je suis plus familier avec ces DevTools. Il y a aussi quelques aspérités, comme ma petite session tmux dans le terminal ne répond pas aux événements de clic.


Il est intéressant de noter que Swift n’est pas un langage intégré. J'aurais deviné que Panic a même écrit au moins des parties de Nova dans Swift étant donné son Mac-y-ness.


Si rien d'autre, vous devriez consulter la page de destination Nova pour toute la supercherie CSS! L'animation clip-path sur l'image illustrant les thèmes de Nova est super cool. Ce ne sont que quelques images empilées les unes sur les autres partageant la même animation, échelonnées:

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

le


cependant… c'est tout simplement magnifique:

Oh, et vérifiez l'utilisation du display-p3 format de couleur!

Fenêtre DevTools affichant les propriétés personnalisées CSS sur la page de destination Nova qui font référence aux valeurs de couleur display-p3.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *