Sunday, October 4, 2009
A Local + Server Text Editor Using Chrome
Two goals inspired a little weekend project that turned out to be a lot of fun. 1) I wanted to create a local text based editor in HTML/ JavaScript to update my age old Netpadd as it suffers framework rot, making it hard to maintain and update. 2) I wanted to edit script files on my server from the internet cafe, without FTP (not necessarily edit live scripts, but e.g. develop on a sandbox copy).
At first I wasn’t too sure how I can have a JavaScript-based editor work with loading and saving from my local computer, but here’s an approach that works – and it also solves the goal of editing files on a server:
- There is an HTML + CSS + JavaScript application that basically displays a big textarea and some menu icons (I went for a FamFam icons wrench in the top right which expands some functionality). You can put this on your localhost which runs Apache (I’m using Wamp on Windows), or you can upload the same files to a password-protected directory on your server.
- This client app, via Ajax-posting, communicates with a PHP API in the background. This API handles things like loading and saving files, or showing the directory contents to pick a file. The JavaScript thus doesn’t need special file handling permissions, as it only talks in JSON data packs.
- The whole app is then converted to a pseudo-desktop app using either Mozilla/ Firefox Prism (which is available via e.g. a plug-in) or Chrome’s Gears-based native “Application Shortcut"; I currently ended up using Chrome for reasons detailed below. What this now does is remove the navigation bar and so on and make the app look like a desktop program, not a web page in the browser.
- On my computer, I connect files I want to open with Netpadd B (short for “Netpadd Browser” to differentiate between the old and new version) to a batch file which launches Chrome, passing the source file path as a URL anchor tag which is then dynamically loaded into the JavaScript app.
So now, I can double-click a local text file and launch it in a text editor that is actually at its core non-compiled JS/CSS, which is loads of fun to maintain. Below is the app as it shows in Chrome, and then in Prism with expanded toolbox:
Toolbox entries are also available via shortcuts, like Ctrl + S for saving (or Alt + X to open the toolbox, with plans to let you arrow-key through it).
Is it completely like a desktop app? Not fully – here are some problems I ran into which aren’t solved so far. First, let’s list some of the Firefox/ Prism issues:
- Crucial: In Firefox, once the textarea is loaded with say over 100K, having the script automatically insert stuff into it turns out to be slow, like a second or so. Manual typing speed continues as normal, but automated string handling are needed though for all kinds of functionality for Netpadd (like auto-completion, or turning tabs into spaces and so on), and that seems to require reading then writing the full textarea string. Chrome doesn’t have these issues, and is very fast during textarea string handling. Perhaps there is a way to do this faster in Firefox without completely giving up on the simple textarea (as I don’t need syntax highlighting).
- Crucial: I don’t know yet how I can automatically open certain file types in Prism (and have their path parameter be passed to the app). Firefox’s/ Prism’s launch string is much longer than Chrome’s, and Prism also generates some local init files which Chrome doesn’t, yet Chrome’s launching string was more flexible for my needs.
- Crucial: A Prism app’s startup time feels a bit slow. Perhaps two seconds or so, whereas Chrome opens seemingly instantly. A couple of seconds may sound little, yet it can feel too much if you want to quickly open and edit files all day for programming.
It still works OK enough in Firefox so that I could use it as fallback in net cafes where Chrome isn’t installed (IExplorer might work too).
And here are some of the remaining Chrome app issues:
- Chrome generates an application context menu that’s way too crowded. For instance, I like to right-click on a program in my task bar to then choose to close it, but Chrome apps put a dozen or so entries (like “Find in page”) into this menu by default, pushing down the one I need.
- With larger textarea content, Chrome’s up and downwards scrolling can show minimal lags. Firefox handles this smoothly.
- Sort of crucial: Chrome won’t accept my system font definition, Fixedsys, while Firefox has no problems with it and loads it fine. Apparently Chrome doesn’t like system fonts, but the TrueType replacements I found for Fixedsys don’t look like the real thing. Anyone knows a solution?
- Chrome doesn’t inherit my system colors for its top bar, displaying it in its brighter blue (skinning Chrome mothership won’t work either).
- Not so nice: The batch file to launch Chrome, itself a workaround because I didn’t know how to connect files directly with a Chrome app (and have their source path parameter be passed), briefly shows when you open it. I’m already using things like echo off, the Start command, CLS and EXIT, and a “cmd” instead of a “bat” extension to get it to close quietly (half of these superstition and the other half works?), but the window will still be briefly visible when you double click a file to edit in Netpadd B. Does anyone know how to prevent the batch window from showing, or how to launch a Chrome app directly (and pass the path)?
- I probably won’t be able to use the find (Ctrl + F) functionality of Chrome and will have to override it, as the text editing cursor position doesn’t jump to the found text in textareas. Firefox handles this well.
- Normally I can double-click the top left corner of a Windows app to close it, this works in Firefox-Prism apps too, but Chrome apps ignore that for some reason.
Opening a file (the JSON API sends back some minor binary data too in the form of base64-encoded favicons, so that site project folders ... here shown at the top of the dialog... are more easily spotted).
If you’re interested to mess with the source, which right now is in... what comes before Alpha?... then you can drop me a mail or something. Saving and loading works but most menu entries won’t work yet as I just got the framework up. One menu entry that does work is Syntax Lookup. For instance PHP has inconsistent parameter order for its functions. In Netpadd B you can type the function name, say strpos, and then press F1, and it will trigger a web search using Google’s Ajax API, restricting it to the site php.net and some more things as it knows the file has a php extension. A blink later the result will be displayed at the bottom of the editor, and the idea is that you can expand this to many other languages (like Python and JavaScript) with a single Google base-query each:
>> More posts
Advertisement
This site unofficially covers Google™ and more with some rights reserved. Join our forum!