What colour is it? Hex clock

Who knew that 7.06 PM looked dark blue?
Who knew that 7.06 PM looked dark blue?

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.

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.

Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

span-6 append-2 colborder

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

.span-6 {
  width: 460px;
}
.append-2 {
  padding-right: 160px;
}
.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

span-6 append-2

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

/* Border with more whitespace on left hand side
    of a column, spans one column. */
.precolborder {
  padding-left: 24px;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

and so our HTML now looks like this:

span-6 colborder

Lorem ipsum dolor sit amet, …

precolborder span-3 last

Lorem ipsum dolor sit amet, …

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.

Why web standards matter

Screenshot of web code
Screenshot of web code, as viewed in the excellent Firebug add-on for Mozilla Firefox.

These last couple of weeks I’ve spent much of time, both at home and work, puzzling over a coding project I’m currently working on at the University; which is partly why my blogging activity has been more intermittent than usual.

Baseline browsers

For this particular project we set a baseline of which browsers we would support, based in part from the visitor information we gather on the University’s homepage. This collects information about which browsers are being used, the user’s screen resolution and the number of colours their computer will support; no personal information is gathered. Having examined this data we decided to support Safari (Mac OS X), Internet Explorer 6 and 7 (Windows), Mozilla Firefox (Windows, Mac and Linux) and Opera 9 (Windows, Mac and Linux).

What happens when you have to support IE6

That we have to support IE6 — because many of the PCs at the University run Windows 2000 which will not run the newer IE7 — has had a serious impact on our coding time. Here’s what happens on a typical day as I work through our specifications list:

  1. I spend maybe 30-60 minutes coding one particular aspect of the site, e.g. page layout, using standards-compliant CSS.
  2. I test it in Firefox 2 – it works.
  3. I test it in Opera 9 – it works.
  4. I test it (by sending the code to colleagues) in Safari and Linux Konqueror – it works
  5. I test it in IE7 – it (usually) works.
  6. I test it in IE6 … and then say something like “Oh dash it!”
  7. I spend anywhere up to 3 or 4 hours ‘debugging’ it to find out exactly why IE6 won’t render the page correctly. This usually involves either adding an additional CSS statement (e.g. width: 200px;) or completely rewriting the code from scratch.
  8. Repeat with the next element on my project spec.

As you might imagine, this can get quite tedious.

Acid2 Browser Test

The problem lies in the way that different browser manufacturers have interpreted the web standards as laid down by the World Wide Web Consortium (W3C). These standards, published as W3C Recommendations, are guidelines for, amongst others, browser software developers so that they know how their products should properly render web pages.

And as you might guess, some are better than others. Some follow the rules closely; others are a little more relaxed. And to test how compliant a particular browser is the kind folks at the Web Standards Project have provided an online ‘acid test’, called the Acid2 Browser Test. Using XHTML and Cascading Style Sheets — so no graphics, just div tags and background colours, and stuff™ — it tries to display a smiley face with the words “Hello world” above it.

Acid2 Browser Test results

Here is how the four Windows browsers I mentioned before (Firefox, IE7, IE6 and Opera 9) fare with the Acid2 test:

Firefox 2

Firefox tries the Acid 2 test and almost passes

As you can see Mozilla Firefox does not too badly. At least, it looks sort of like a face, even it is wearing a mask. If it were a film it would probably be Girl Interrupted.

Gran Paradiso (Firefox 3) Alpha 2

Firefox 3 passes the Acid2 test

Thankfully the core layout code has been rewritten for Firefox 3 (currently in Alpha) which fixes the problems evident in Firefox 2’s rendering of the Acid2 page.

Internet Explorer 6

IE6 fails the Acid 2 test

The troublesome Internet Exploder 6 utterly decimates the page. It should perhaps be renamed Internet Exploder and left in a drawer to gather dust. Would you believe this is the world’s most popular browser? Look what it has done to some nice programmer’s code! If it were a film it would probably be [insert name of gore-fest horror pic here].

But worry not, Microsoft improved things and released …

Internet Explorer 7

IE7 tries the Acid 2 test and fails spectacularly

The latest (and greatest?) version of the mighty Microsoft’s browser, Internet Explorer 7, which erm … well, to be honest, fares only a little better than its little brother (browther?). If it were a film it would probably be the sequel to [insert name of gore-fest horror pic here]!

Opera 9

Opera 9 passes the Acid 2 test and shows a smiley face and Hello World!

And then Opera 9 steps up to the plate and delivers 100%. That is how the page should look. If it were a film it would be your favourite feel-good movie, one that you could watch day-in, day-out. Lovely.

Konqueror (Linux)

Konqueror passes the Acid 2 browser test

And since I know you’re all wondering the same thing: “But how well does the Linux browser Konqueror do on the Acid 2 Browser Test?” I’ll tell you. It passes with flying colours too. (Thanks to Mike for the image.)

Safari (Mac OS X)

Safari passes the Acid 2 test

And good old Apple also manage to get their browser to pass the Acid 2 Browser Test with their Safari browser. (Thanks to “a mate” of Mike for this screenshot.)

The moral of the story

Imagine if your tv did this to the programs, videos or DVDs you watched. Viewers wouldn’t stand for it. So why do web users stand for it?

The moral of the story is don’t use Internet Explorer, use something better. I can thoroughly recommend both Firefox and Opera, which I’ve been using for a good few years now.

If you like customizing your software, with various add-ons, then choose Mozilla Firefox. If you just like a fast, attractive browser that shows things the way they should look then download and install Opera 9.

If you’re using Mac OS X then you are probably using Safari already, which I believe is pretty cool. And if you are using Linux then you’ve probably already compiled the Konqueror source code and installed it on your über-geeky homemade distro yourself, and I’m preaching to the converted!

You know it makes sense.

Geek adventures in Glasgow

Glasses

Yesterday I travelled through to Glasgow (by railway) to attend the Scottish Web Folk forum meeting at the University of Strathclyde.

The Scottish Web Folk group is an open forum for all the web managers and web developers from the 22 Scottish Higher Education Institutions. Yesterday’s meeting was attended by representatives from

(Apologies if I’ve missed anyone.)

Of course, before I got there I had to make sure that I wasn’t killed in transit.

Shortly after leaving Queen Street station I stepped out onto North Hanover Street, en route to the University of Strathclyde’s Collins Building on Richmond Street, only to be stopped suddenly in my path as a Strathclyde Transport bus came swinging around the corner.

I stepped quickly back onto the pavement and stood looking at the side of the bus, which had paused, unable to turn the corner completely because of a car on the opposite side of the road which had stopped for the traffic lights.

Right in front of me — blocking both the road and my line of view — was a lingerie advertisement for Matalan: five or six scantily-clad ladies, who would have caught their death (not to mention would have been arrested) if they had been wandering around Glasgow in person dressed that way.

Imagine if the bus had knocked me down, I thought. Imagine if that had been the last thing I’d seen as I shuffled off this mortal coil. Depending on one’s theology, in comparison heaven may have been a sorry disappointment! But thankfully for me it wouldn’t have been, and since I wasn’t mown down in my prime I’ll live to see another day (and presumably another similar advertisement on the side of another similar bus).

The first item on the agenda at the Scottish Web Folk meeting was an excellent presentation by someone from SAC about CSS which led to a minor debate as to whether the XHTML <br /> tag is a block-level or an inline element.

David, who was making the presentation, had copied a list of block-level elements from somewhere which had included the BR tag. A number of us questioned this and so I decided to settle the matter and sent a text to Any Question Answered (63336).

Ten minutes later I had a reply:

AQA: Within XHTML the <br /> tag is a block element. Block elements define a discrete block of text, whilst inline elements are used to style content.

Which is just so wrong on so many levels (‘block’ or otherwise!). I suspect yet another £1.00 refund winging its way to me shortly from AQA.

Here’s what the W3C — the internet body that sets standards, such as HTML, CSS, etc. — says about inline elements. This is from section 3 “XHTML Semantic Modules” within the document “Modularization of XHTML™“:

3.3. Inline modules

Inline modules defined elements and their attributes that, when used in a document, effect their contents but do not cause a break in the rendered output.

Within both block and inline modules there are three subcategories of module:

  1. Phrasal
  2. Presentational
  3. Structural

And paragraph 3.3.3 shows that <br /> is an inline XHTML element:

3.3.3. Inline Structural Module

This module defines inline level elements to help control the structure of their enclosed content. Elements included are:

  • bdo
  • br
  • del
  • ins
  • span

So, David owes me a new kidney (he’d offered me a pint, but I don’t drink because of my dodgy kidneys so I felt that that was the next best thing) and AQA owes me a quid!

A fine day all round, then.

(Incidentally, the early time of this posting (pre-05.00 am) is courtesy of a nocturnal “meet the neighbours” incident involving our two cats and another similar beast in the utility room.)