This is a video that I’ve been meaning to watch for ages, so found the time yesterday to view it. It’s very good, very thought-provoking, very practical.
There have been a few occasions over the last few months when I’ve been standing at one end of my office and needed to keep an eye on the time. Each time I’ve pulled up What colour is it? on my browser. Because it’s fun.
What colour is it? is one of those really simple why didn’t I think of it ideas: use the time to specify RGB values.
How does it work?
RGB is a system for representing colours on a computer display. Red, green, and blue can be mixed in different proportions (on a scale of 0 to 255) to display any color in the visible spectrum.
A few examples:
- rgb (0, 0, 0) represents black: no red, no green, no blue.
- rgb (255, 0, 0) represents bright red.
- rgb (0, 83, 155) represents the dark blue used on the University of St Andrews website.
As well as decimal values, CSS also accepts hexadecimal values. Hex is useful for computers because you can count up to 255 using only two characters. Decimal 255 equals hex FF.
The same examples, but in hex:
- #000000 black
- #FF0000 red
- #00539b St Andrews blue
Which brings us back to the clock.
Take the time in 24 hour format, HH:MM:SS and map hours to red, minutes to green, and seconds to blue.
- 19:06:46 = #190646 = rgb (25, 06, 70) = dark blue/violet
- 23:58:00 = #235800 = rgb (35, 88, 00) = dark green
Another example of a hex clock can be found on Jaco Pocolo’s website: Hex clock.
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 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.
View a comparison of the three versions.
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 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.
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.
Unlike some code editors that I’ve used, CodeLobster’s autocomplete and code hinting capabilities are very quick, and rather quite helpful.
Hovering over a WordPress function, a speech bubble appears showing brief, but useful, documentation about it. It’s fast and it’s unobtrusive.
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.
On the right, double-clicking a function in the help panel opens the corresponding documentation in the WordPress Codex.
Creating local WordPress projects
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.
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.
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.
Ukip will be pleased, it returns the Circle line to being a circle again!
Not content with the London underground map he has also tackled maps of
While we’re on the topic of tube maps. Here’s a tube map made entirely from HTML and CSS.
I’ve been using Bootstrap on and off for the last couple of years, having been a firm user and contributor to the Blueprint CSS community.
For the last few months I’ve been really keen to check out Foundation. From what I’ve seen so far it looks very impressive. I’ll report back once I’ve had a more in depth look.
In the meantime, check out the video: Bootstrap vs Foundation.