Sublime Text plugin shows TODO comments, and more

TodoReview in Sublime Text 3
TodoReview in Sublime Text 3

I do like a good Sublime Text 3 plugin, and this is one that offers functionality that I was missing since upgrading from ST2 a while back.

TodoReview scans the comments within your code (either open files, project files, or both) and builds a results page that allows you to easily open and jump to the appropriate lines in these files. It’s as simple as navigating to the appropriate line and pressing Enter.

The plugin has four common comment keywords built in, but using regular expressions these can be extended beyond:

  • TODO:
  • NOTE:
  • FIXME:
  • CHANGED:

Not only is this plugin useful for your own code projects, you can also use it to scan through third party open source projects to get an insight into their code. For example, WordPress 4.1.1 has 196 TODO: comments. My favourite is this:

Man o man is this ugly. WebKit is the new IE! Remove this if they ever fix it!

TodoReview can be installed easily using Package Control by Will Bond.

Isaac and duck

Isaac waves to his new friends.
Isaac waves to his new friends.

At lunchtime today Jane had a lunch appointment with a friend, so Isaac and I first went to Greggs to get him a sausage roll and a bottle of summer fruits juice.

“I’ll get points for that,” he said, gesturing towards the bottle.

And he was right: the boys get bonus points if they try something new.

We had a lovely time, sitting beside the Kinnessburn watching the ducks, some of whom came up to say hello. Then we took a walk along the stream to find more ducks, before heading up the hill towards my office.

We took a shortcut through the grounds of Dyer’s Brae, one of the School of Biology buildings,and popped up on Queen’s Terrace, opposite the Bute building where I work.

“Wow!” said Isaac, recognising where we were. “It’s like we teleported here!”

Well, we didn’t teleport again up to the office—instead, we took the lift.

Isaac, at my desk wearing headphones, watching YouTube.
Isaac, at my desk wearing headphones, watching YouTube.

And there he sat at my desk and we did some pair programming.

Well, I say ‘pair programming’. Isaac watched a Batman video on YouTube while I analysed our projects boards to determine where our business-as-usual, portfolio, project and consultancy tasks are all tracked.

Until mummy arrived.

What fun! I love that boy.

Review of CodeLobster PHP Edition 5.5 (Professional version)

About CodeLobster

In April of last year (2014) I received an email from someone from CodeLobster asking if I would be interested in reviewing their code editor.

They kindly, and promptly, sent me a registration code to unlock the full version, but I then went off sick, and then ran into relationship problems, and then I got even sicker, and finally a year later here’s my review.

Disclaimer: I don’t work for or with CodeLobster, I’m not being paid for this review (other than having been kindly gifted a full registration) and views expressed here are my own.

I did, however, used to use CodeLobster (the free version) as my back-up code editor when my primary editor was WeBuilder. I liked how fast it was, but I never really explored its capabilities.

These days I use Sublime Text 3, so it will be interesting to see how this editor compares: could I conceivably use CodeLobster as a replacement?

As I’m currently working mostly with WordPress, that’s what I’ll focus on in this review.

Three versions, multiple features

CodeLobster PHP Edition (which, incidentally, appears to be their only edition) comes in three versions: free, lite and professional.

The free version contains all the basic features that you might expect from a modern IDE: syntax highlighting for HTML, CSS, JavaScript and PHP, code autocomplete, code folding, pair highlighting and selection, project manager, etc.

The lite version adds to this code validation for HTML, CSS, Sass, Less and PHP; a SQL manager; and support for version control systems such as SVN, Git, etc.

Finally, the professional version (which I have installed here) builds on this by adding support for a variety of popular content management systems (Drupal, Joomla! and WordPress) and both JavaScript and PHP code frameworks (CakePHP, CodeIgniter, Facebook, jQuery, Laravel, Symfony, etc.)

View a comparison of the three versions.

Cost

What I like about the professional version is how modular it is, as it is simply the lite version (US $39.95, approx. GBP £26.80) with additional plugins (US $24.95–$49.95 each).

For example, if you only ever develop for WordPress then you can simply add the WordPress plugin (US $39.95): total price US $79.90 (approx. GBP £53.60).

If you plan to use more than one plugin then it seems to be generally more cost-effective to buy the complete bundle for a total of US $119.95 (approx. GBP £80.48), which is a saving of 70% compared with buying each plugin individually, which would come to US $379.45 (approx. GBP £254.60).

Installation

Installation was pretty simple. All three versions are bundled with the same installer; the various features are unlocked with an appropriate serial number.

I do like that the Help > Registration… dialog shows you exactly which plugins you have enabled, and in the case of trial versions how many days you have left.

CodeLobster registration window showing the status of each plugin.
CodeLobster registration window showing the status of each plugin.

User interface

In contrast to the minimalist interfaces of Sublime Text, Atom and Brackets, CodeLobster employs a more traditional multi-panel layout.

CodeLobster interfacing, using the Sublime Text Monokai theme
CodeLobster interfacing, using the Sublime Text Monokai theme

Each of the panels is tabbed, supporting multiple functions: file, class view, project, SQL, TODO, search results, bookmarks, errors, help, properties, map, etc. They are also collapsible, creating more space for the code editor.

Along the top of the application are optional toolbars, where you can also switch on or off the panel tabs. Unfortunately, the toolbars don’t appear to be customizable.

Having been using Sublime Text for the last few years the interface feels very busy, and really quite dated.

Text editor

Unlike some code editors that I’ve used, CodeLobster’s autocomplete and code hinting capabilities are very quick, and rather quite helpful.

Code hints
Code hints for the get_template_part WordPress function.

Hovering over a WordPress function, a speech bubble appears showing brief, but useful, documentation about it. It’s fast and it’s unobtrusive.

Code autocomplete
Code autocomplete

Having selected View > Autocomplete for… WordPress, autocomplete options pop-up very quickly whenever you start typing something that looks like a WordPress function or keyword.

The autocomplete helper is context-sensitive, though. So if you are working in a JavaScript file, or create a <script> tag in your document, then the autocomplete will switch to JavaScript and jQuery (assuming you have that module enabled, of course).

On the right, double-clicking a function in the help panel opens the corresponding documentation in the WordPress Codex.

Documentation finder

Creating local WordPress projects

Create a new WordPress project
Create a new WordPress project

One of the really nice features I like about CodeLobster is its ability to quickly set up a new WordPress project on your local server. This assumes you’re running a local dev environment such as XAMPP.

After filling in a few details (including database connection details) CodeLobster goes off to the local environment and sets everything up for you:

  • Download and unpack the latest version of WordPress to your local dev environment.
  • Create a new MySQL database.
  • Install WordPress.
  • Populate the basic settings (site title, admin)

I’ve tried this in previous versions of CodeLobster and each time I simply couldn’t get it to work properly. I’m not sure what I was doing wrong, but this time, in this version: it worked!

I tried it both with a database that I’d already created in phpMyAdmin, and without. It worked successfully each time. This is a really useful feature for quickly starting WordPress projects: it gets you up and running in no time.

Niggles

So far, so good. But I have a few little niggles.

The interface does look quite outdated: the newest visual style it offers is based on VisualStudio 2005. It’s not a deal-breaker, but something a little more modern would be very welcome.

You cannot drag and drop files into the editor, you have to go through the File > Open dialog. I have two monitors. I often drag and drop files into Sublime Text. It’s a much quicker method than going through a dialog box.

To create new files, you cannot simply double-click the document bar, like you can with some editors. You have to go through the File > New dialog. It does mean that quickly creating temporary throw-away documents isn’t a particularly fast task.

Something that I do find frustrating is that I can’t quickly move the CodeLobster window from monitor to monitor. I use a utility called WinSplit Revolution that allows me to assign shortcut keys to move applications from one monitor to another, or even to reposition it on the screen. But it doesn’t work with CodeLobster. It’s the only application that I have installed that it doesn’t work with.

Conclusion

I have only just scratched the surface here, but it’s clear to me that CodeLobster is a powerful and capable IDE. It has a lot of built-in tools for generating, testing and debugging code, that certainly appear fast.

My biggest issue, though, as I’ve indicated is the user-interface. It now feels very outdated, which may put some developers off. But if you can work beyond that, there are some really powerful features inside.

That you can quickly create a development installation of WordPress on your localhost server is brilliant. And I’m so glad whatever issues there were previously have now been fixed.

To be honest, CodeLobster doesn’t currently offer enough to draw me away from Sublime Text 3; I love the speed and flexibility of ST3. But I have to say that if I was working on a PHP-heavy site, or a major new WordPress site then I seriously might consider using CodeLobster, for its code intelligence capabilities.

I have a project like that coming up soon. I’ll be sure to report back…

Download CodeLobster for free.

Google Chrome’s awful new bookmark manager (and how to switch it off)

Yesterday my copy of Google Chrome updated at work. It rolled over from version 41 to version 42. No big deal, I thought. Until I went to reorganise my bookmarks…

Google Chrome's new bookmarks manager
Google Chrome’s new bookmarks manager

What the…?!

To my surprise, Google Bookmarks had gone all Material.

My initial response was positive. It looks pretty. The thumbnails look like they could be useful. And I’m generally in favour of Google’s aim to standardise the look and feel of their web applications (whether Chrome OS, web-based, or Android).

But then I tried to reorganise my bookmarks.

It was a nightmare.

As silly as it sounds, I genuinely began to panic. And then started my out-loud commentary to the rest of the office about just how awful an experience it was.

My workflow

Whenever I spot something useful I quickly bookmark it to a folder called “Check out”.

Then every day or two I sort the bookmarks (A–Z) so that the sub-folders move to the top, and I can find the bookmarked page titles more easily.

Then I organise these bookmarks into 3 sub-folders:

  1. Action
  2. Keep track on…
  3. Watch or listen

I often bulk-select items with shift + click.

Truly awful user experience

But with the new, redesigned bookmarks manager this was virtually impossible to do:

  • The sort alphabetically option was missing.
  • I couldn’t bulk select a group of bookmarks: I would have to click each bookmark separately.
  • I couldn’t drag and drop bookmarks. I had to use some awful and clunky, dynamic drop-down-style interface to select which folder to move them to.

This was without a doubt the worst user experience I have encountered in a long time. It was awful. Utterly, utterly awful.

After about five minutes I gave up. Of the 40 or so bookmarks in “Check out” I had moved maybe six or seven. I didn’t have forty minutes to spare just to move bookmarks. Life is too short.

“This redesign has killed my productivity,” I complained to no-one in particular.

After seriously considering moving to another browser, I went looking for a fix… but not before writing some strongly worded feedback to Google.

This isn’t a new complaint

Negative feedback about this new, card-style design isn’t new. It goes as far back as December.

Computer World reported it on 1 December 2014 in an article entitled, Card-style display displeases users who see it pop up in their beta builds. The article notes that

when Google asked for feedback, it got a thumbs down from most users.

How to fix it

My first port of call was the Google Chrome flags page (chrome://flags). This hidden section contains settings that control experimental features of Chrome.

Sure enough, it was there, so I disabled it. Restarted Chrome and sanity was restored.

Enable Enhanced Bookmarks now set to Disabled.
Enable Enhanced Bookmarks now set to Disabled.
  1. In your address bar type: chrome://flags and hit Enter.
  2. Search for ‘Enable Enhanced Bookmarks’.
  3. Change the drop down to Disabled.
  4. Restart Google Chrome.
  5. Your bookmarks manager should now be the familiar, sortable, draggable version.

Why Google? Why?!

What I can’t understand though is why—even after all that negative feedback in December during the beta phase—Google still pushed out this car crash of a design to the stable channel.

In the Google Material guidelines it says,

At Google we say, “Focus on the user and all else will follow.” We embrace that principle in our design by seeking to build experiences that surprise and enlighten our users in equal measure.

Well, that certainly surprised me. But it certainly didn’t address any of my user stories—it didn’t allow me to work productively. In fact, it did the opposite: it slowed me down, the interface got in the way of what I wanted to do.

I’m not unilaterally against a Material-style design of the bookmarks manager. But it needs to work more efficiently. Something along the lines of how files may be ordered in Google Drive would be a step in the right direction.

In the meantime, I’m sorry Google—I don’t often complain about your stuff—but in this case, after only five minutes I stopped your experiment and returned to sanity.

Valiant Hearts—The Great War: game review

Valiant Hearts—The Great War. A soldier stands wearing a backpack, beside a medical dog wearing a red cross.
Valiant Hearts—The Great War

I’m not a particularly keen, or good, gamer. My PC games are mostly limited to a few Call of Duty titles (for the interactive, cinematic experience), a few variations of the Chinese game mahjong, chess, the magnificent Dear Esther (which has unfairly been described as ‘a walking simulator’), and quite a few LEGO games.

A couple of weeks ago I downloaded Valiant Hearts via Steam; it was on special offer. I finished it last week—it was brilliant!

Valiant Hearts is set during world war one, which ties it in nicely with the centenary of its outbreak.

It follows the journeys of four ordinary people’s experiences of war.

  • Emile is a French farmer who becomes a prisoner of war, and later escapes.
  • Karl is Emile’s (I guess) son-in-law. He’s a German, living in France, who gets recalled back to fight for Germany.
  • Freddie is an American soldier who is fighting to avenge the death of his wife in a German bombing attack.
  • Anna is a Belgian nurse who attends to wounded soldiers (both German and allied forces) on the battlefield.

Besides the playable characters there is also a dog, Walt, who can be used to solve puzzles. You can also stroke him, and tickle his tummy, which is a really sweet addition.

I found the game entirely gripping. From the artwork, to the music and sound effects, to the puzzles, to the characters,  to the historical detail. While the characters and story line is fictional, it is based on historical fact which makes it all the more moving.

I love that one of the main characters (Anna) is a woman, and a strong woman at that. She is brave and compassionate.

I had read quite a few reviews before I played the game where people confessed that they cried at the end of the game. As the final level was loading I considered this. I had been moved by the stories, I had identified with the characters, but I didn’t feel this was enough to make me cry.

I was wrong. As the final level progressed, I cried.

If you’re looking for a great adventure-style, puzzle game, then I can thoroughly recommend Valiant Hearts. It gets a 10/10 from me.

Managing overlay icons for Dropbox and TortoiseSVN and TortoiseGit

I imagine like many involved in web development, I rely heavily on a number of version control applications: I use Dropbox, Subversion (SVN) and Git.

For years I’ve used the TortoiseSVN client for Windows. It integrates with the Windows Explorer shell making it quick and easy to manage your version controlled code within Explorer.

I like that I don’t need a separate full-blown application that acts as an interface between the code on my PC and the SVN repository; I like that I don’t need to use a command prompt; but I love that TortoiseSVN adds overlay icons to tell me the state of each file (is it up to date, changed, added, etc.?).

These folders are all up to date, and in sync with the SVN repository.
These folders are all up to date, and in sync with the SVN repository.

Recently I’ve started using Git at work and so I’ve also installed TortoiseGit which does something similar.

This is the Bootstrap repo cloned to my PC.
This is the Bootstrap repo cloned to my PC.

And of course Dropbox does the same: it shows you which files have been synchronised with the cloud, and which are in the process of uploading.

My Dropbox folders are up-to-date, synchronized successfully with the Cloud
My Dropbox folders are up-to-date, synchronized successfully with the Cloud

The problem

The problem, though, is that each of these applications uses multiple overlay icons but Windows only uses the first 15.

TortoiseSVN and TortoiseGit both use the same nine icons:

Nine folder, each has an icon on top of it such as ticks, crosses or pluses.
TortoiseSVN and TortoiseGit both use nine icons.

Dropbox uses eight icon overlays. If you have OneDrive installed (which you will if you use Windows 8 or above) then it uses three. And Windows itself uses a few to indicate offline files or enhanced storage.

That’s 22 icon overlays, and like I said: Windows only uses the first 15.

So, inevitably you end up with some icons missing, and depending on which these are it can make life just that little bit harder when trying to figure out quickly whether a file is in sync or not, or whether it’s not even been added.

That means you need to make a choice about which icons you want to use and which you don’t.

How to fix it

The most straight-forward way to do this is by editing the Windows Registry.

The icon overlays can be found in the following key:

Computer \ HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Windows \ CurrentVersion \ Explorer \ ShellIconOverlayIdentifiers

It turns out you can safely rename the folders which will reorder the icons. The folders are just containers for the real information contained within them.

1. Backup

Export (backup) the ShellIconOverlayIdentifiers folder in its entirety, in case you need to restore it later.

2. Prioritise which icons you need

My current preference is for the following:

  1. 1TortoiseNormal
  2. 2TortoiseModified
  3. 3TortoiseConflict
  4. 6TortoiseDeleted
  5. 7TortoiseAdded
  6. 8TortoiseIgnored
  7. 9TortoiseUnversioned
  8. DropboxExt1 (green Synced)
  9. DropboxExt2 (blue In progress)
  10. DropboxExt5 (red Sync problem)
  11. DropboxExt7 (grey Folder not synchronizing)
  12. EnhancedStorageShell
  13. SkyDrivePro1 (ErrorConflict)
  14. SkyDrivePro2 (SyncInProgress)
  15. SkyDrivePro3 (InSync)

You can use whatever naming convention you prefer. I rename the original folder names with a number prefix and an underscore, e.g. 01_1TortoiseNormal. Folders that I want to drop to the bottom I prefix with a simple x, e.g. x5TortoiseReadOnly.

In regedit it looks like this, with the unprioritized icons dropping to the bottom of the list.

List of registry keys
List of registry keys

3. Restart Explorer

  1. Close any Windows Explorer windows.
  2. Press Ctrl+Shift+Esc to open Task Manager.
  3. Look for Windows Explorer listed under “Background processes”.
  4. Right-click it and select “Restart”.

Your taskbar will disappear a couple of times as the Explorer process is restarted, but you should now see all the overlay icons you want within your folders.

(Currently I’m having issues with OneDrive — formerly SkyDrive — but as I don’t rely on it for too much I’m not that bothered, to be honest.)