Monday, October 19, 2009

Re: A Local + Server Text Editor Using Chrome

If you’re interested I’m now releasing Netpadd B as early alpha (if you like to give it a try please use at your own risk). To recap from the previous post, it’s a (free) JavaScript-based text & development editor running as a Google Chrome Application, communicating with the local or server hard disk via a JSON API. The general help is contained at Netpadd.com but I wanted to list some points of interest here.

Finding a font

Looking for the perfect programming font to replace Fixedsys, which doesn’t load in Chrome, I often found that a particular font was nice but had problems with certain special characters – it’s important, for instance, to easily tell semi colon and colon apart, but several otherwise nice monospace fonts were ruined by deficiencies there. So I took Google Android’s Droid font as basis, and adjusted some characters in it using FontCreator (it’s a paid desktop app which comes with a trial version).

Editing a font in FontCreator is fun and self-explanatory: You just load a TTF extension font into it, and then tweak the vectors of a particular character. I’ve called the result Doid, and it does the job well on my system (I’m not using ClearType but normal anti-alias), but might be font heresy in other contexts. Below is a comparison from old Droid to new Doid (I’m showing a function from Netpadd B’s JavaScript itself, which opens a combo box dialog and then transforms the marked text using the chosen option). For instance, the semi colon and colon are now very easy to tell apart, the dot got more weight as it’s so important to note in many programming languages, the comma is more distinct from the dot, and so on:

Hover over image to show new font

I’m loading the font via the following CSS bit, which only works when starting Chrome with the -enable-remote-fonts switch (due to intentionally unspecified security concerns by Google engineers):

Text transformations

In Netpadd B you can transform a piece of selected text with the following dialog:

For example, “this is just a test” turns into “This Is Just a Test” when choosing the Mixed Case for Titles option. The Flipped option was just included for fun as it fit into that menu, and it results in ʇsǝʇ ɐ ʇsnظ sı sıɥʇ.

Translating text

Netpadd B hooks up to the Google translation API to translate bits of text. Selecting any text and hitting Ctrl + K will first ask the Google language detection API what language the string is likely in, and then attempt to translate to English (or if the source is already English, then Chinese... with Ctrl + Shift + K doing translation to German).

(As previously mentioned, I’m also using a Google API for the programming syntax lookup feature.)

As with many other features of this app, the selection of features and what they do is often going by personal taste and as I need the feature to be, but you can easily tweak the program simply by opening its default.js file (among some other files). So to change the default translation for English to something other than Chinese, you’d just need to look for “zh” in the code and replace it. Changing the program’s layout on the other hand mostly just requires you to edit the default.css file.

Exploring and uploading files

When Netpadd runs on your server behind a password protected https, you can use it to edit your server files, and also to upload files without FTP. To explain above dialog, the green dot next to a file shows the most recently edited file for faster finding. Some files are shown in gray which means you can’t edit that extension (by your own choice, you can add extensions to allow in the file API settings). The folder icon in the top right lets you create a folder, and the arrow-page icon next to it lets you upload multiple files.

Unicode character table

When you pick the Insert Character command, a Unicode table will pop up, showing a selection of (searchable) characters ready for pasting:

Remaining issues

Here are some of the remaining issues due to the nature of the Chrome Application Shortcut framework. Most importantly:

• Local files automatically open in Netpadd B when double-clicked, with thanks to the Chromium developer who provided the regedit file for this. However, the opened file will then not always receive focus, so that you may need to click on the app again in the task bar.
• The startup time is much faster than when using Firefox/ Prism, but the start lag is still sometimes noticeable. (In comparison opening a file with the old Netpadd.exe felt instant.)
• While the Doid font does its job for the moment, it’s still unfortunate that Chrome doesn’t find the Fixedsys system font like Firefox does.

Of less importance are the following issues:

• I’d like to access the clipboard for certain functionality.
• There were problems disabling event bubbling when Ctrl + W is pressed, which closes the app.
• When line wrapping is enabled (by switching <textarea>’s wrap attribute from “off” to “soft” ), I don’t know how to find the marked row to correctly set the focus for things like jump-to-row or text finding functionality.

Any feedback welcome!

Re: A Local + Server Text ... by Philipp Lenssen | Comments (11)

>> More posts

Advertisement