Week 1
I’ve just finished my first week at CDOT and so far it’s been great. My two colleges and I were given our first task for the term: make a Brackets extension that will check the syntax of HTML entered in the editor and display any errors, if any. This is similar to what Thimble already does.
Thimble
Thimble is text editor, created by Mozilla, where you can write, edit, and preview HTML code all within a browser. It also has the capability to publish and share webpages you’ve created in it. Thimble automatically highlights any HTML that is written wrong or is incomplete. It does this using an HTML parser called slowparse. Our project involves trying to bring over that functionality to brackets.
Brackets
Brackets is an open source text editor built by Adobe. It’s essentially a web application as it’s written in HTML, CSS, and JavaScript. Brackets has a neat feature that allows you to Live Preview your code on your browser as you write it. There’s no need to refresh the browser every time you make a change to your code.
Hacking Brackets and Extensions
Since Brackets is open source, we have many advantages. For instance, we not only have access to Brackets’ source code but we can also make changes to it. Brackets also supports extensions. There are many extensions that are already made. If there isn’t an extension that suits your needs, you can just create one yourself. Brackets makes it really easy to make your own extension. There are many other guides out there that help with making your own extensions. However, one guide that has been very useful to me has been Writing Brackets extension – Part 1 and Part 2. Part 2 was particularly helpful as it deals with tracking events in Brackets; something that I need for the project I’m working on.
The Project
My part of the project deals with getting errors underlined and tracking changes made to the document via keyboard events. So far, I’ve found a way to both underline incorrect text in red and remove it. I also have the keyboard event working. That is, the extension checks, using slowparse, the document syntax every time a key is pressed. Since Brackets can edit different file types, I’ve added code to check syntax only on documents that have the .html extension. So, if a JavaScript file is loaded on Brackets it won’t try and check the syntax for that file.
Problems
Early on I found myself stuck trying to understand how the Brackets API and CodeMirror work – CodeMirror is the text editor that Brackets uses. There was a lot of documentation to read and it was difficult to figure out what actually applied to my problem and what didn’t. I was having problems getting the text to underline. There was a lot of trial and error with different functions and configurations until finally, largely thanks to a longer-serving colleague, it worked!
Here’s the code that underlines text that worked for me:
/*jslint vars: true, plusplus: true, devel: true, nomen: true,
regexp: true, indent: 4, maxerr: 50 */
/*global define, CodeMirror, brackets, less, $, document */
define(function (require, exports, module) {
"use strict";
var EditorManager = brackets.getModule("editor/EditorManager"),
ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
ExtensionUtils.loadStyleSheet(module, "main.less");
//Function that underlines the given lines
function markErrors(lineStart, lineEnd, charStart, charEnd) {
var editor = EditorManager.getFocusedEditor();
var marked = editor._codeMirror.markText({line: lineStart, ch: charStart},
{line: lineEnd, ch: charEnd}, {className: "error-highlight"});
}
});
What I Learned
Ask for help! I was so caught up trying to solve my problem that I didn’t realize all the time that had passed. Time that could have been put towards other things had I asked for help earlier on.
The way we solved my text underlining problem was by using the Chrome Developer Tools integrated in Brackets – you can get there by clicking on the Debug tab and clicking on Show Developer Tools. I learned a couple of things using the developer tools:
- First you can use it to debug your code by putting the console.log() function in your code and seeing the result on the console. This can be useful to track the order that your code is executed and if it goes into a certain function or not.
- Secondly, if you console.log an object you can actually see, by clicking on a small tab in the console, all the attributes and functions associated with that object.
- Lastly, just because the console shows an error doesn’t, necessarily, mean that your code won’t continue to run! The error could be occurring at and earlier point than, say, the function you’re working on. There were often times when I saw the error and spent some time trying to fix it, only to find out it had nothing to do with the function I was working on! The error was completely unrelated to what I was working on.
Apart from this, I’ve also become more familiar with Git and GitHub. More importantly, I’ve learned the importance of proper planning and having a good work flow – more on this next week.
Next Week
My colleagues and I hope to finish the extension by the end of week 2. We’re also hoping to have a GUI that displays the type of error found in the code, similar to Thimble.
kleverlogs 