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.

Compiling Twitter Bootstrap 2.0 with SimpLESS on Windows 7

Using LESS with Bootstrap

This afternoon, after a couple of hours of poking and prodding various pieces of software, I worked out how to compile Twitter Bootstrap 2.0 using SimpLESS. This is what I’ve discovered so far…

CSS frameworks

Having been an avid user of the Blueprint CSS framework for a number of years now (I created what has become quite a popular cheatsheet for the framework, which even got released with the Joomla! CMS a few versions back) I am aware of its limitations, particularly in the area of responsive web design.

So I’ve been keeping an eye on how various CSS frameworks have been developing, such as 320 and up, Less Framework 4 and Twitter Bootstrap.

Twitter Bootstrap reached version 2.0.0 in late January of this year; the current version is 2.0.3 (released 24 April 2012). I downloaded it last week and have spent a couple of days idly playing around with it. with a view to using it on a future web project.

One thing that I was uncertain about, however, was how to use the LESS files.

LESS

When it comes to CSS pre-processors, such as LESS and Sass, I’m a bit late to the party. What can I say, I’ve got twins and a 16 month old and I still don’t get enough sleep.

Sass claims that it “makes CSS fun again”; LESS that it “extends CSS with dynamic behavior such as variables, mixins, operations and functions.” Chris Coyier prefers SASS. Bootstrap from Twitter uses LESS so I guess, for now, I’m going with LESS.

I’ve dabbled with both LESS and Sass over the last year but not enough to get proficient in either, and certainly not enough to use either in a production environment. One put-off for me, certainly in the early days, was the lack of GUI to compile the files. Sass uses Ruby; LESS uses JavaScript (either client- or server-side).

These days, however, there are a number of standalone desktop applications that allow you to compile LESS code without needing to poke around with command-line commands. One of my favourites is SimpLESS from We Are Kiss.

SimpLESS

SimpLESS is available for Windows, Linux and Mac. It installs as a very simple application onto which you drag-and-drop your directory/folder containing the .less files, click a button and it convert your LESS files to CSS. It’s just a shame that you can’t batch process all the files, a feature that WinLess offers.

By default, if your directory structure includes a \less directory and a \css directory then SimpLESS will compile all your .less files into .css files within the \css directory. Sounds simple enough. No faffing, and you get a very usable CSS file at the end of it all.

Also by default SimpLESS will compress/minify your CSS files unless you include //simpless:!minify in the .less file. I include it at the top of the file.

Bootstrap from Twitter

Twitter Bootstrap 2.0 uses LESS. It has a directory full of LESS files that control every aspect of the framework: accordion, alerts, breadcrumbs, button-groups, buttons, carousel, forms, layouts, etc.

So, if you want 16 columns instead of 12 edit the @gridColumns, @gridColumnWidth and @gridGutterWidth variables within variables.less and recompile. That’s how customisable the framework is.

Except… when I did that I and I used SimpLESS to compile the LESS file I got an error:

Syntax error in progress-bars.less on line 33
Syntax error in progress-bars.less on line 33

Syntax error in progress-bars.less on line 33.

After a little digging around on the internet and I discovered a very helpful post on GitHub. This is what I did…

How to fix SimpLESS to compile Twitter BOOTSTRAP 2.0 on Windows 7

  1. Download and unzip Twitter Bootstrap v.2.0;
  2. Copy the \less directory to a new test directory and create a new \css directory as its sibling, so you will have:
    \test
    \test\less
    \test\css
  3. Download and install SimpLESS;
  4. Download the fixed version of less.js from We Are Kiss;
  5. Replace the existing less.js located at
    C:\Program Files\SimpLESS\Resources\js (32-bit Windows)
    C:\Program Files (x86)\SimpLESS\Resources\js. (64-bit Windows);
  6. Run SimpLESS;
  7. Drag your \test directory onto SimpLESS;
  8. Click the ‘reload’ icon against bootstrap.less to compile it;
  9. Success! You will now have compiled .css files in \test\css
Successfully compiled LESS file
Successfully compiled LESS file

A few things I noted:

  • If you run SimpLESS without the fixed less.js file then you will need to restart the application after you copy over the fixed less.js file in order for it to start using the new version.
  • less.js v.1.3.0 from the official LESS website does not work; only this fixed version from We Are Kiss works as expected.
  • The two main files to compile are bootstrap.less and responsive.less.

Time to get creating…