Trello coloured lists for Tampermonkey updated to v4.x

Coloured lists make identifying their purpose quicker at a glance
Coloured lists makes identifying their purpose quicker at a glance

This evening I updated a script I first wrote back in March 2014. I wrote about it on the old University of St Andrews web team blog.

The script, which runs in the browser using an add-on such as Tampermonkey, lets you define Trello list titles to search for, and then apply a background colour to it.

Continue reading Trello coloured lists for Tampermonkey updated to v4.x

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.

Installing Node.js on Windows 8

Command line showing node installation
Command line showing node installation

Over the last month I’ve slowly begun exploring Node.js and so far I’m really liking what I’m seeing.

In a nutshell, Node.js (or simply Node) allows you to write server-side JavaScript. In other words, until now JavaScript is normally written to be run within a web browser, on a web page. Node instead allows you to write JavaScript applications that run outside the browser or via the command line.

Node uses Google Chrome’s JavaScript engine, called V8. Perfect if you are used to writing JavaScript for your browser.

This means that you can now write applications, or ‘modules’ that can do stuff outside the scope of a web browser. For example, you could write a simple web server in Node or — and this is what I want to use it for — you could write modules to manipulate web code and automate certain processes related to web development.

Installing Node.js

Installation on Windows 8 could not have been any more straight forward:

  1. Visit nodejs.org
  2. Click the “install” button to download the installer.
  3. Run the installer (make sure you tell the installer to add references to your PATH system variables).
  4. Reboot your PC.
  5. Er…
  6. That’s it!

Command line

Almost everything you do with Node is via a command line. You can use either the standard Windows cmd.exe or Windows PowerShell (or, indeed, any other command line interpreter (CLI) you may have installed).

To use the standard Windows command line:

  1. Press Win + R (for Run)
  2. Type: CMD
  3. Click OK

Checking that Node is installed is as simple as opening a command line and typing:

node --version

Hit enter and you’ll get a result, something like:

v0.10.5

Node Package Manager

One of the great things about the Node installer is that it automatically installs the Node Package Manager. This makes it much easier to install additional applications to extend Node’s capabilities.

Again, you can check the version of NPM by typing the following into your CLI:

npm version

You’ll get an answer, returned as a JSON object:

To find out what packages are installed enter the following into your CLI:

npm ls

The result will be formatted as a directory structure, like this:

Obviously, to find out which globally-installed packages are available use the global flag:

npm ls -g

The first application/module that I want to investigate in depth is the CSS pre-processor Less which is used by the Bootstrap project. I will no doubt report back.

Learn JavaScript this year with Codecademy

Screenshot of Codecademy website

When I was young my Mum and Dad bought my brother, sister and me a computer, a Commodore 64. I remember that I had to write a short essay about why I wanted a computer before Mum and Dad would consider buying one. I really wish I still had that essay, I’d love to read now what I wrote back in 1983.

I loved it. With its friendly blue screen and flashing cursor.

Commodore 64

And its ability to load The Hobbit text adventure in under half-an-hour. But what I loved most was that I could program it.

I would spend hours typing in programs from magazines like Commodore User, Your Commodore and Your 64, and then working out how to customise them. And if I felt brave I’d write my own programs from scratch, in nothing but Commodore BASIC but it was a start.

These days you buy a computer and it boots into Windows, or Linux, or MacOS, or Google Chrome, or Android, or a host of other operating systems with friendly, colourful graphical user interfaces and there is nowhere obvious to begin trying your hand at programming.

If you do want to get into Windows programming, for example, many of the programming languages and environments look quite intimidating to a beginner (and often have a price-tag to match). And that’s before you even attempt to decipher what .NET is, or WPF (that’s Windows Presentation Foundation), or DirectX, or… you get the idea.

I once dabbled with an early version of Delphi (having done a year of Pascal at high school), and Dolphin Smalltalk. I even looked into C and Borland C++ Builder. I didn’t create anything particularly mind-blowing. But you know, they were my programs. I had created them and I knew how they worked, and the process was just really good fun.

That’s one reason I loved my Psion PDAs: they had an OPL programming editor built in. You could start writing programs straight away, using Psion’s own BASIC-like procedural language. I have a half-written Mahjong scoring program somewhere on file that I would like, one day, to finish. Maybe next year!

I definitely think that young people, especially, should be taught programming (again) in school. Something that an article in The Guardian last month agrees with: Programming should take pride of place in our schools.

Codecademy

This year Codecademy seem to be making a push for 2012 to be a year of programming. They are encouraging people to sign up for their getting started with programming course. They are using JavaScript as their chosen language.

JavaScript is a great language to start with (as Mike Loukides will tell you “everyone needs to learn JavaScript” in 2012). The course is online. You do it all within a Web browser. Web browsers know what to do with JavaScript. Perfect.

I’ve completed the first lesson already. It was called FizzBuzz and it gets you recreating that favourite game of primary school, where you start counting from 1 to 20, but instead of saying numbers divisible by 3, you say “Fizz”. And instead of saying numbers divisible by 5, you say “Buzz”. For numbers divisible by both 3 and 5, you say “FizzBuzz”.

If you’re interested in trying your hand at learning JavaScript (and programming in general) then do check out Codecademy.

DataTables for jQuery

Screenshot of data tables website

At lunchtime today one of my colleagues at work showed me the DataTables jQuery plugin which really impressed me.

DataTables is a plugin for the jQuery JavaScript framework that adds interactive controls to any HTML table, e.g. sort columns, column filtering, pagination, Ajax loading of data, etc.

For its ‘basic’ functionality the code is simple:

A couple of hours later I was in a meeting with the University’s Moodle (VLE) and MMS team who were showing me some of their recent developments which included use of—you guessed it—the DataTables jQuery plugin.

One of the things, I have to say, that impresses me most about DataTables is how extensive and well written the documentation is.

Check out the DataTable examples page. Impressive stuff.