Normally when family or friends say they need a website I roll my eyes and hope there's a way I can get out of doing it. But then my older brother, Tim, asked me to do one that actually got me quite interested.
Tim's the engineer for a local radio station and is responsible for making sure - amongst other things - the station stays on air. He wants a way to monitor the output level of the station's signal remotely. So he's bought an Arduino kit and written a "sketch" file to have it monitor audio signal levels via a 3.5mm input jack.
The Arduino board has a network connection and the plan is to put it on their network and it give a publically resolvable IP address. The Arduino board will respond to a HTTP request with a text/plain response that contains a number from 1 to 20 that is a measure of the output at that moment.
What Tim wants me to do is write a web front end to this. It needs to regularly "ping" the Arduino board to get the output signal and make some kind of visual indicator of historic output. If it drops to 0 for any length of time then he's got an issue. Either the Arduino has packed up or station is off air.
This is the kind of geekery I enjoy and I'm looking forward to getting stuck in to it. The Arduino in the shot above is in my possession and I'm free to mess about with it as I please.
Also on my to-do list is to make a website for Quinn's boyfriend's dad's driving school. He too has produced a "sketch" to show me how it should look:
Quinn's boyfriend is a talented artist and currently studying on a Computer Animation course at university. He must have gotten his talents from his mum's side me thinks.
Which website do you think I'll do first? Hmm....
4/10 Comments Read - Add | Fri 27 Jan 2012 | 
| Open »
Almost ten years ago I bought some Bose MediaMate. Thankfully Bose have got their online act together since then and buying the new pair you see below was quite a bit easier.
I've replaced the MediaMates with a set of Companion 5s. They're a bit pricey, but I listen to music 8 hours a day, 5 days a week. The speakers I use are arguably as important a choice as the monitor. Well, that's the argument I made to my wife anyway.
The MediaMate's (which are on ebay if you want them) were always good speakers, but the Companions have blown me away (almost literally until I turned the "bass compensation" knob down). I can't believe the difference. Probably made by the subwoofer - sorry, "AcoustiMass Module" - under my desk.
I'm not an expert in acoustics but have an appreciation for what - to me - seems like a decent sound. If you read in the forums, which I don't, then you'll hear a lot of bad stuff about Bose. Over-priced and cleverly marketed, apparently, which may be true but they've got me. I get "brand blindness". Once I've bought something I like then I'll only ever buy another of them from the same company.
If you want to test out your speakers here's a good track. If they can't handle that you need a new pair.
4/7 Comments Read - Add | Thu 26 Jan 2012 | | Open »
I used to pride myself on keeping this site up there on the bleeding edge of best web design practice. That hasn't been the case as much lately though and this site's backend HTML has stagnated for years. It keeps up with things but generally lags behind.
In trying to catch up with the pace I posted on Friday about how I'd funked-up the search box. Not wanting to stop there I've now taken it a little further and converted as much of the site's markup to HTML5 as I dare.
The general structure of a page is now like this:
<!doctype html>
<body>
<div id="container">
<header>
<nav>
<ul></ul>
</nav>
</header>
<section id="side">
</section>
<section id="content">
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<footer>
<nav>
<ul></ul>
</nav>
</footer>
</div>
</body>
If you're left wondering what all these new HTML elements are then worry not - they're simply new HTML5 elements. Most of them are simply used where you'd normally use a <div> but they give the markup more semantic meaning.
I now feel a bit better about the state of site.
Backwards Compatibility
Nothing's ever simple is it. To make sure these changes were backwards compatible I had to do two things.
First I had to add the HTML5Shiv trick, which uses conditional comments to load an extra JavaScript file for IE8 or less:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Can't say I'm over the moon that my site now needs JavaScript to make the CSS work, and I've always liked that fact that one code-base rules all browsers, but I don't want to be held back by old browsers.
At some point in the future I'll remove the above Shim trick and remove "support" for <IE8.
The other thing I had to do was add the following CSS to make sure older browsers like Firefox 3.6 understood what these new elements were.
article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
display: block;
}
All done.
4/14 Comments Read - Add | Mon 23 Jan 2012 | | Open »
For the last seven years the site-wide search field on this site has looked like this:
This week - in a moment of boredom - I decided to spruce it up a little and now it should look like this:
Whether it looks like that for you or not depends on the browser you're using. If you're using a modern and capable browser it should. If not you might see something like this:
Either way it should still be obvious what it is without the field label or the "Go" button?
How'd I Do That?
Simple. First I changed the HTML markup to use a little HTML5:
<form method="post" action="search?CreateDocument">
<input type="search" placeholder="Search" name="Query">
</form>
I've highlighted the key parts. Adding the placeholder attribute is what puts the "Search" text inside the field and removes it when clicked on (no JavaScript required!). That's a new HTML feature and you can use it on any input field.
Then I added some CSS3:
input[type="search"] {
padding: 4px 6px 4px 23px;
border-radius: 10px;
background: white url(images/icons/search.png) no-repeat 2px 50%;
-webkit-appearance: none;
border: 0;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
input[type="search"]:focus{
outline: none;
}
The last rule in the code above is to stop the field getting and orangey outline when the user clicks inside it.
And that's all there was to it really. Next time you add a search field to a form why not consider using a similar approach?
7/18 Comments Read - Add | Fri 20 Jan 2012 | | Open »
Of all the code I write my CSS is probably the messiest and least well-maintained. While I get near-obsessed over the tidiness of other "actual" code I often find my CSS is a complete mess.
When coding I try and follow the DRY approach but with CSS am usually "happy" to duplicate rules over and over; copy and pasting all over the place until CSS files become unmanageable.
Writing CSS if no fun! Especially when you get to the nitty gritty of vendor-specific stuff in CSS3 like border radiuses, background gradients and drop shadows. If you plan on embracing CSS3 then you might want to read on for a better way to code CSS.
A Better Way
Writing CSS should be more like programming - with variables, methods and the like. This is where LESS steps in - calling itself a "dynamic stylesheet" - it lets you use variables, operators, functions and arguments.
LESS is how CSS should have been implemented in the first place!
Show Me Some LESS
Here's a basic example of some LESS code:
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
When the above code is passed through the LESS "compiler" you get the following CSS out the other end:
#header{
color:#333333;
border-left:1px;
border-right:2px;
}
#footer{
color:#114411;
border-color:#7d2717;
}
Perhaps that's enough to convince you of the need to use LESS? If not, read on.
Getting a bit more advanced let's look at another example:
input{
.border-radius(8px);
.inner-shadow();
}
The CSS outputted for the above LESS code is:
input{
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-topleft:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border-top-left-radius:8px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
Which would you rather maintain - the LESS or the CSS? If you want to change the border radius to 6px you'd have to do it in about a dozen places in CSS, compared to 1 place in LESS. Sold on the idea yet? You ought to be!
In the LESS code above the .border-radius() and .inner-shadow() bits are what's known as "mixins" in LESS parlance. You can write your own mixins but I just downloaded a load of predefined ones called "LESS Elements". This gives you a file called elements.less which you need to include in your LESS code before using the mixins. So the LESS code I pasted above should actually have been this:
@import "elements.less";
input{
.border-radius(8px);
.inner-shadow();
}
For a good example of advanced use of LESS download Bootstrap and take a look at how they organise their LESS files and how it all works.
If you do any decent amount of CSS coding then I'd say it's worth your while looking at how using LESS could help with that. I love it!
I've only really scraped the surface of what it can do in this post. To get a better example, take a look the LESS website and the Bootstrap code.
Where to Write LESS?
The best way I've found to write LESS code and compile to CSS is with the Crunch App, which you can see below:
There's a .Net library with which you can write LESS directly in Visual Studio and have .Net produce a cacheable CSS file from it - on the fly!
If you're a Domino developer then you'll have to resign yourself to the idea of maintaining the CSS outside of Domino Designer. Although I guess you could use WebDAV to save CSS files directly in to the NSF? That's a rainy day project I guess...
9/21 Comments Read - Add | Thu 19 Jan 2012 | | Open »
More blog entries are available in the archive »
Jaap on 
maddy on 
Jake Howlett on 
Aden on 
Jerry Carter on 
Mark Barton on 
Roman Kopac on 