Nova - My favorite editor for web development

· 6 min ·

Today, I’d like to introduce you to a web development tool I’ve been using—Nova[1]. It’s developed by Panic[2], known for their software products, and serves as the successor to the popular but sadly discontinued Coda editor.

Having been a user of Coda, it was only natural for me to give Nova a try when it was released. Nova’s capabilities quickly won me over. Admittedly, I continued to use Coda for a while because I found the idea of working on live files appealing. However, in reality, it had its drawbacks that I won’t delve into further.

Let’s leave the past behind and have a look on Nova. Firstly, it’s worth noting that Nova is not open-source and comes with an initial price of $99. However, you can opt for automatic updates at $49 per year by subscribing.

Settings

Nova has a familiar look and feel, somewhat akin to Atom, which is certainly a positive aspect. Like Atom, Nova can also be expanded with additional extensions, and I’ll introduce some of the plugins I use later on. But first, let’s take a look at how I set up a project, after we’ve settled on the desired color for the project folder. I chose pink because, to be honest, I don’t really care about the folder’s color.

One really useful feature is the automatic indexing of files, which greatly aids in auto-completion. However, if you happen to be working with node.js and have a sizable node modules folder, you can add it to the list of ignored files. This prevents Nova from indexing 10,000 or more files, which can have a detrimental impact on performance.

Nova.app – project setting

After initializing a new project, my first step is to establish a connection with the project’s remote server. The websites I maintain don’t require the use of trendy technologies like node.js, Vue, React, etc. Instead, they consist of HTML5, CSS, and plain JavaScript.

The server list in the dropdown menu above is imported from Transmit[3], which is Panic’s FTP software. By enabling the Use Publishing option, modified files are conveniently listed in the publishing sidebar and can be transferred to the web server with a single click. You also have the flexibility to specify individual files or entire folders to the Ignored Files list, ensuring they won’t be uploaded to the web server. In the context of a flat file CMS like the one I use[4], this could be a ‘drafts’ folder, for example.

Nova.app – remote server setting

In the following image, you can see the settings for the SASS[5] extension. To use it, SASS must be installed on your system, and this can be easily accomplished through Homebrew[6]. Most of the settings here are self-explanatory. Occasionally, I need to reference the update path and output path settings, but it’s a relatively straightforward process. Essentially, the Update Path designates where your SCSS files are located, and the Output Path specifies where your CSS files will be written to. In my case, I don’t need to adjust the Executable Path because the extension automatically uses the path /usr/local/bin/sass, which is correct for my setup. If you’ve installed SASS in a different location, you will need to manually set the correct path here.

Nova.app – SASS setting

You want to write comfortably about the settings and - poof! - you end up with the extensions. Well, if that's where we've arrived, we might as well get on with it.

Extensions

I would like to introduce four extensions that I frequently use as examples. These are:

I use a few more extensions, but I don’t want to spoil the fun of exploring and discovering the extensions that can simplify your developer life. And now, let’s get started with…

SASS

As I mentioned earlier, I utilize the SASS extension, and to be honest, you don’t need to know more than what was explained in the preceding paragraph. When you save an SCSS file, it compiles a combination of all SCSS files and generates a CSS file. The compression of the output CSS file depends on your chosen setting.

Nova.app extension – SASS

Emmet

Another widely used extension is the renowned Emmet[7]. If you’re not already familiar with it, Emmet allows you to swiftly generate HTML code. For instance:

main>section*3>article>header+main+footer

becomes

<main>
    <section>
        <article>
            <header></header>
            <main></main>
            <footer></footer>
        </article>
    </section>
    <section>
        <article>
            <header></header>
            <main></main>
            <footer></footer>
        </article>
    </section>
    <section>
        <article>
            <header></header>
            <main></main>
            <footer></footer>
        </article>
    </section>
</main>
Nova.app extension – Emmet

Advanced New File

With Advanced New File, you can effortlessly create new folders and files in no time. Just press Option (⌥), Command (⌘) + N, type in the desired folder or file name, press Enter, and it’s done. Folders that don’t yet exist will be created automatically.

Nova.app extension – Advanced New File

Beautify

Beautify ensures that your code is legible and well-structured. It integrates JS-Beautify[8], which you might be familiar with from beautifier.io[9], into Nova. This allows you to format JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML, and XML with ease. With a simple click of a button, it transforms your code into a clean, organized format like this:

nav.tags_nav {
justify-content: stretch;
ul {
flex-wrap: wrap;
}
li {
padding: calc(var(--nav-element-spacing-vertical) * 0.825) calc(var(--nav-element-spacing-horizontal) * 0.825);
}
}

into this

nav.tags_nav {
    justify-content: stretch;

    ul {
        flex-wrap: wrap;
    }

    li {
        padding: calc(var(--nav-element-spacing-vertical) * 0.825) calc(var(--nav-element-spacing-horizontal) * 0.825);
    }
}
Nova.app extension – Beautify

I primarily utilize two of the many available sidebars: „Files“, which displays the files and folders within the project I’m currently working on, and „Publish“, which highlights the modified files and can be uploaded to the web server with a simple click.

There’s also a sidebar that illustrates the hierarchical structure of the currently open file, a Git sidebar that facilitates actions like commits, pushing, and pull requests, among many others, which I have yet to explore.

Nova.app extension – sidebars Files, Symbols, Publish (from left to right)

Conclusion

I made an attempt to work with VSCode, but the overwhelming number of seemingly identical extensions from various developers raised doubts about the overall quality. For instance, try searching for an Emmet extension; you’ll find it surprisingly challenging to locate one. I also explored Neovim, but I found myself needing to memorize an excessive number of keyboard commands, which hindered smooth workflow. Nevertheless, it remains an excellent solution for making quick adjustments via SSH while on the go.

What truly captivates me about Nova is its overall package. I appreciate its seamless integration with macOS, including the utilization of native keyboard shortcuts. The process of customizing Nova was incredibly swift, and I adore the flexibility it offers through extensions, which genuinely fulfill your specific needs, as opposed to being just another generic syntax highlighter. In my experience, this editor simply excels in delivering what it’s designed for: intuitive usability.


Reply via e-mail

Back to top