Categories: Portfolio, Software Development

Emacs Mode for Flow Type Annotations and React JSX syntax

Emacs Flow JSX: While I have been focusing on writing more about existing tools and how to use them, like Elm for frontend web development and Perl 6 just for fun, I still find a need to create new tools and update my own toolkit.

I was working on a React project and it uses ES6 syntax in JavaScript. It also uses the Flow type checker.

The first thing I noticed in Emacs, my text editor, was that the syntax highlighting was broken in strange ways for JavaScript files that had type annotations or that contained JSX in it. I asked on reddit for a solution to this problem and was directed to existing modes that partially did what I want.

So I decided to create a new syntax highlighting mode from scratch. This allowed me to use the Emacs mode as a base for more interesting functionality. Especially when I needed to customize things for the React project I’m working on.

You can check it out the JSX and Flow emacs syntax highlighting mode by clicking here:

The #1 Reason to Use Emacs

This is the main reason I use Emacs. It lets me create new tools and update my tools to match the projects that I’m working on. I’ve done this over the years and it’s always been the one thing that keeps me coming back to Emacs. I have tried other IDEs and text editors and they do have their own conveniences but they just don’t have the power that Emacs has. Being able to define your own functions to automate repetitive tasks is great. Being able to define your own functions that turn a complex task into a simple task is even better.

Here are some examples over the years of tools I’ve built with Emacs Lisp to help me in my daily work:

Some other examples of functions I’ve written in Emacs Lisp to make it easier to work on a project:

  • Functions for jumping to the definition of a function or class
  • A function for opening the test/spec file of a class
  • Some functions to run a whole test suite on a virtual machine through SSH, and to run particular tests from the point I’m at in a file

All of these were customized for each project because each project has its own standards. Jumping to the definition of a class that’s written by your co-workers is different from jumping to the definition of a class that you’ve downloaded as part of another package (for example, searching through “lib/” rather than “node_modules/”).

If you decide to pick up Emacs and learn to use it, you’re going to be extra productive over the years. Any initial hurdles you encounter will be worthwhile. Your peak productivity will be higher than others in the long-term and that’s the #1 reason I keep using Emacs.

Categories: Software Development

Emacs angularjs-mode v1.0 release!

I’ve finally had some time to upgrade Emacs angularjs-mode with some expandable code snippets (thanks to YA Snippets) and added auto-complete mode dictionaries.

What I’ve found a pain when coding AngularJS is that you really need your environment setup well for it before you can get a lot done with it. Having angularjs’s javascript files installed, a basic index.html, a Gruntfile, a Karma and Protractor configuration saves a lot of time. But even with a basic project structure, you still need to be faster when writing new controllers, directives and services. Auto-complete-mode and snippets can help with that.

All of the top-level definitions in the AngularJS API are included in the auto-complete dictionaries. The dictionary for angular-html-mode contains all the common directives.

Use Emacs angularjs-mode for faster angularjs coding! Now with 100% more auto-complete and snippets!



Inspired by the doing command line app for logging progress on to-do items and tasks, I decided this would be a neat feature to add to Emacs. The org-doing add-on lets you track what you are doing now, what you want to do later, and anything you have made progress on or completed.

It is an add-on for Emacs that hooks into org-mode. This means that, with timestamps, you can create an org-mode agenda-view that displays the tasks you have done in the last day and the tasks you have remaining to do. From there, you can add more notes or clock in the time or do whatever else you can do with org-mode.

The idea is to keep a worklog and notes for each task as you are completing them or making progress on them with just a few keyboard shortcuts.

Feel free to check out the code or the site.

Categories: Software Development

Dimming JavaScript curly braces and brackets in Emacs

When coding in Lisp or Scheme, some Emacs users prefer to have the parenthesis/brackets dimmed. The reason for this is that it makes it easier to see the things that matter like variable names.

If you are looking for a JavaScript mode for Emacs, please check out the following projects:

I’ve been coding more JavaScript lately and wondered if this would work for JS and indeed it does. While it doesn’t turn JS into CoffeeScript and you still have to type in in the brackets and curly braces and semi-colons, it does let you adjust the colour of them and let’s you dim them so that you can see the important parts.

Download parenface.el and then paste in the following snippet and you’re good to go. Don’t forget to customize the paren-face colour by doing this: M-x customize-group faces

Here’s a before and after shot (I’m using snow3 as the paren-face colour, the default provided by parenface.el is DimGray):

before and after enabling parenface for js-mode
before and after enabling parenface for js-mode

I’m not sure how useful it is to hide the ‘var’ and ‘function’ keywords. The cool thing is that all you have to do is alter the regex to suit your preferences.

If you like these kinds of snippets, check out Emacs-SOS, a StackOverflow search for emacs.

StackOverflow Search (SOS) mode for Emacs

Emacs Stack overflow: StackOverflow Search (SOS) mode for Emacs

I was reading about a PhD student who created a plugin for an IDE that integrates searching for questions & answers on a knowledge base that included an easy way to insert code snippets from the answers in their own source code.

I use stackoverflow as often as I can and try to contribute answers but sometimes I have questions of my own so it would be nice if there were a quick, integrated way of using StackOverflow from within Emacs.

Type in M-x sos and then type in your search and the results are listed using org-mode. Eventually I want to be able to ask questions from within emacs and allow question buffers to be opened that are refreshed once in a while to see if there’s an answer yet.

Emacs Stack overflow SOS mode
Emacs StackOverflow SOS Mode

Update July 2017: Extending Emacs and creating plugins for it to increase productivity is something I enjoy doing because the pay-off can be immense over time. I’ve done this for running PHPUnit unit tests from within Emacs, highlighting AngularJS JavaScript code with Emacs, and highlighting Flow type annotations with React.js’s JSX syntax.

Categories: Software Development

some code for running PHPunit in Emacs

I’m working on a legacy PHP app for a client and up until today I was running unit tests in a terminal window. But my natural working enviornment is Emacs so why not write something that will execute the unit tests and display the results in an Emacs buffer?

The following is the result; it’s fairly short but oh so useful.

[gist 8981483]

The client’s PHP app has been around for 2 years and I was the first one to write any sort of unit tests and to get the unit test infrastructure working. The difference in code quality is huge. There’s nothing like a legacy app with lots of bugs to show you just how important unit testing and regression testing are to maintaining a sane code base!

Click here to read my book review of PHPUnit Essentials.

For all projects where I use Emacs (I do use other IDEs like Intellij and Eclipse), I always try to write functionality in Emacs that improves my productivity. This is just one example. Another example is running the linting tools and deploying code to a remote server.

Categories: Software Development

Trying out PyCharm python IDE

I got a 30-day free trial copy of pycharm, and it’s pretty amazing so far. I’m usually an emacs user but I’ve struggled with making things easier in terms of testing and deployment.

PyCharm IDE for Python

At work I’m running emacs and a console with multiple tabs just to be able to develop django apps. When i was coding common lisp, scheme and even C/C++ i could stick to a single emacs session.

I’m also getting tired of having to write custom functions to do what I want. To be honest, I won’t ever get tired of customizing Emacs.

One neat feature is PyCharm markdown mode which displays a preview of Markdown. Another feature which I love is the refactoring.

How much does it cost?

I’m not sure if pycharm is free/open source (update 2017, Intellij IDEA has a community edition and the pricing model has changed) but the cost isn’t too bad: $100 for a personal license, free for free/open source software developers, $200 per developer at a company. If it’s good enough I’ll ask for a company license. Other developers at work are using Vim, Sublime 2 and some other text editors.

Deploying to Local & Remote Virtual Machines

The problematic part for me is that I had a remote virtual machine that ran Ubuntu Server to replicate the environments we deploy to. This requires mapping a local folder to the remote folder in PyCharm. Running commands remotely is also a pain with that setup (or maybe the commands I was running were broken?)

So I’m resigning myself to developing locally on my Ubuntu machine. I do not need a virtual machine because my machine is as close to the deployment environment as possible already. All other developers are using mac os x and there are just too many differences between gnu/Linux and os x; it makes sense for them to run things in a virtual machine.

Even if I don’t switch to pycharm, my time with emacs will be more fun. Constantly transferring files back and forth over ssh/sftp is slow and tedious.

Categories: Software Development

Relative Timing With Org-Mode

I have been re-arranging my TODO lists using Emacs’s Org-Mode and when I realized that it could calculate the exact hours taken for a bunch of tasks, I felt I should explore the rest of the Org-Mode manual and see what else I had been missing out on.

Org-Mode allows you to use relative timers which, it says, are useful for recording notes during a meeting or video viewing. I did not understand exactly how to use the relative timers, but it looks like they are like timestamps. Here’s a brief run-down and example on how to use them.

Org-Mode: What is a Relative Timer?

A relative timer is one that starts at 0 hours, 0 minutes, 0 seconds. The second time you log the time, it is relative to the first time, so it will be 0 hours, 1 minute, 30 seconds if it has been 1 minute and 30 seconds since you started the timer.

When Are Relative Timers Useful?

Here’s an example. Say you are watching a conference presentation on your favourite programming language, and you want to take notes. First, you would open up a buffer that is using org-mode and find the place where you want to put the notes. Then, you must start a relative timer by pressing C-c C-x . which starts the timer and inserts the current time (which is of course 00:00:00). This timer will continue to run even while you are in other buffers.

Record the time with C-c C-x .

When an interesting point is made, or whenever you feel the need to record the time, you press C-c C-x . again. Then you just make your notes as quickly as you can!

Pause the time with C-c C-x ,

Org-Mode also lets you pause the relative timer with C-c C-x , though I am not sure when you would want to use this. Maybe if the presenter is taking a break or if you were taking a break when watching a video?

Stop the Timer With C-u C-c C-x ,

Finally, to stop the timer, you press C-u C-c C-x , (which is basically just adding a prefix argument).

Here is a sample Org-Mode relative timer file:

* My Awesome Language (presentation)
0:00:00 Start of presentation
0:05:33 5 minutes in and we hit some interesting points
I don't know, Ruby as your Awesome Language? Ugh.
0:06:04 Oh good, he mentioned Python! But where's Lisp?!
0:06:26 jerk skipped over the Lisp slide...
I don't get why people *always* skip over Lisp :-(
0:07:35 Well that was a short presentation (thankfully)

That is the trouble with Emacs and its modes. There are so many useful functions contained that it is hard to use them all or to even know about them unless you read through the manual.

Interested in other Emacs modes? Check out some of the ones I’ve written:


Categories: Utilities

Emacs Tip: Word counting with a regular expression

Here’s a word counting function for Emacs that counts the number of words in a buffer by using a regular expression:

The regular expression matches against one or more word characters. It doesn’t move the current point of the buffer so you don’t have to keep re-positioning the cursor every time you run this function.

The reason I’m posting this is because I was searching for “emacs word counting” and the forums and StackOverflow suggested using the “wc” shell command while in Linux, but at the moment was developing in Windows! How can I use it? (Update in 2018: Windows now has an Ubuntu Linux subsystem that allows the use of the wc word counting command). Another thing I found is that people write up functions that loop through words and count them. I’m guilty of doing that, but using the above function is much much easier.

Emacs has most everything that you can think of. The problem is that it’s all hidden away somewhere and you have to take the time to dig around.

Update: The how-many function is defined in replace.el. To find out more about it, press C-h f how-many RET.