The JavaScript blog.


node editors Microsoft

Visual Studio Code

Posted on .

Visual Studio Code

Yesterday Microsoft released Visual Studio Code, or VSCode for short. It's an editor for Windows, Linux, and Mac OS, and is aimed at web developers. That doesn't just mean ASP.NET, but also Node.js.

The Node features include IntelliSense, debugging, linting, and outlining. Some of these features extend to other web technologies, like HTML, CSS, LESS and SASS. And, it even understands tasks with bundled support for autodetecting Gulp files. On a Mac you can press Shift-CMD-P then search for "Run Tasks" to get a parsed list of Gulp tasks.

Visual Studio Code also has Git integration, which I found to be perfectly manageable although I still quickly reached for my terminal when doing anything beyond basic commits.

If you're not familiar with Microsoft's JavaScript-related technologies, then you'll need to familiarise yourself with some of the basic TypeScript concepts. For example, VSCode is capable of providing IntelliSense suggestions thanks to TypeScript definition files. These files contain metadata for JavaScript objects and function signatures. This makes sense when you consider Microsoft's languages, like C#, have details about types for method signatures. IntelliSense is able to provide a match for a method, but also make it more meaningful with details on the parameters based on the type.

To really make the most of VSCode, you'll need to find the right TypeScript definition files. Microsoft's Node tutorial explains how to quickly set this up for Node itself, but you can also help the editor provide IntelliSense for projects like Express and AngularJS. The way you do that is to install definition files, and the best source I know of is DefinitelyTyped. There's a package manager for definition files called TSD.

The editing features are comparable to Atom and Sublime Text -- VSCode supports bracket matching, multi-cursor editing, snippets, go to definition, go to symbol, gutter indicators, peek (a Visual Studio feature that shows you another file in a panel), split windows, find in project, and symbol renaming. It's very powerful and will strongly appeal to those of you with previous experience working in Windows-based editors.

I say Windows-based editors because the keyboard shortcuts, even on a Mac, are very reminiscent of Visual Studio. Some of the text selection and deletion shortcuts that I instinctively use in Mac-based editors do things that I didn't expect, so it'll take me a while to get used to VSCode.

Another issue I have is I don't like the typings folder that VSCode adds to the current directory for the TypeScript definition files. I'd rather that was system-wide, because I don't want to accidentally commit it to my project. I could add a global ignore for it, but the folder name seems too generic for that. Also, I really don't like the idea of adding code comments for the definition files, I'd much prefer the editor to remember which definition files I use for a given project.

VSCode is definitely an impressive editor. As a Vim user for over 15 I'm unlikely to switch, but I enjoyed trying it out, and the JavaScript support is compelling. It's worth trying if you're a JavaScript programmer.


audio editors encoding mp3 ogg atom

Browser Audio Encoding, Atom Open Source

Posted on .


Joe Sullivan sent in vorbis.js (GitHub: itsjoesullivan/libvorbis.js, License: MIT), a project based on several others that produces Ogg Vorbis from PCM data. It uses Emscripten, and has an event-based API. There's a full example in the readme, which demonstrates how to configure the necessary memory buffers and encoding options.

Joe has also made a project called iago that can stream Ogg using web workers.

If licensing issues don't put you off, take a look at libmp3lame.js by Andreas Krennmair. Again, this project makes use of Emscripten to port parts of lame to JavaScript.

Atom is Open Source

Atom is now free and open source. The announcement includes the minor revelation that there are now over 800 Atom packages.

I've seen people on Twitter running the Linux version, but people are still dubious about Atom's performance and the 2 MB file limit. Making it open source seems like a solid first step to creating sustained interest, but it has a Google Wave feel about it.


tools node editors

Some Atom-related Node Packages

Posted on .


Hugh Kennedy sent in npm-install, an Atom package for automatically installing and saving the npm modules in the current file.

To use it, you just need to open the Command Palette and type npm install. The Command Palette can be opened with cmd-shift-p.

There's another npm-related Atom package as well: npm-docs by Jonathan Clem. This allows you to use the Command Palette to easily look up a module's readme or homepage. This is the kind of thing I do all the time when I write about Node on DailyJS.

Tyler Benziger kindly sent me the Atom invitation, but I've only used it for a few small things so far. I've been trying to figure out how it fits in with the Node community, and whether or not it'll be popular with DailyJS readers.

If you look at the screenshot in this post you might notice that I've got a folder open with lots of items. That's DailyJS's 1127 posts, which Atom handles without any trouble.


tools node editors

The Atom Editor

Posted on .


"Alex, you love talking about text editors, why don't you write about that GitHub Atom project?"

Ah, text editors. Arguably our most important tools, yet we're more fickle about them than our choice of programming language, web framework, and preferred caffeinated beverage. Atom is made by GitHub. It's built using dozens of related open source projects, and some of these include "packages" that extend the editor.

All of the packages seem to be written with CoffeeScript, but before you get your pitchforks out, take a look at this thread:

You can use plain JS to develop packages.

Phew. The reason I wanted to write about Atom on DailyJS was it's built using Node and a web view. The fact it embraces Node means it should be easier for us to extend it. It also claims to have TextMate support, and can use native extensions through Node C and C++ modules.

Parts of Atom are native as well, so it should feel desktop-like rather than web-based:

Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.

I've seen a few generations of desktop text editors come and go: BBEdit, TextMate, and Sublime Text. I expect the excitement around Atom to follow a similar pattern. I'm going to write about interesting Atom packages if I think they're of interest to DailyJS readers (please send them in), but you'll still find me happily plodding on with Vim. And vin (rouge), but that's another story.


editors vim emscripten


Posted on .

Surely the very reason Emscripten was created?

Finally, my worlds have collided! In case you didn't know, I regularly write a Vim blog. It's surprisingly easy to find things to say about this 22 year old text editor, and it's been my main tool for writing code and articles for a long time. Vim.js (GitHub: coolwanglu / vim.js) by Lu Wang is an Emscripten port of Vim, allowing you to use Vim in a browser.

It runs pretty well on my computer -- it seems fast, and the commands I typically use work. It's not like these Vim layers for IDEs and other editors that miss certain motions, registers, and so on: it's basically Vim. Split windows and tabs work, but the help files aren't available (or I can't find them). The way it works in the browser is to use a <span> for each terminal character, which means for the 43x115 example window there are 4945 spans!

From a JavaScript point of view, I found the Sync to Async Transformation document interesting. The author is trying to figure out how to deal with JavaScript's asynchronous nature, given that Vim expects to have a non-busy synchronous sleep() function:

Most works are automatically done by web/transform.js, read the comments inside for more detail. But there are a few left, mainly function pointers, which cannot be automatically identified. Whenever vim.js crashes and you see callback function is not specified! in the browser console, congratulations, you have found one more async function at large.

I wonder if there are any Node developers or ES6 experts that can help with this? If you're interested in the project, there's a TODO which has some Emscripten issues and client-side work that needs doing.