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’m working on a React project and it uses fancy new ES6 syntax in JavaScript and 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 whenever I opened up a JavaScript file that had type annotations or JSX in it. I asked on reddit for a solution to this problem and people pointed me to existing modes that kinda sorta did what I want.

So I decided to try and create a new syntax highlighting mode from scratch. This allows me to use the mode as a base for more interesting functionality; especially when I need to customize things for the React project I’m working on.

You can check it out 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 because 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!

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

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: