Internet Explorer 6: let’s kill it…

February 3rd, 2010

I’m extremely encouraged that the calls for companies to upgrade away from Internet Explorer 6 are intensifying. If you’re reading in the UK, there’s now an online petition to register your feelings on Microsoft’s crippled and ageing browser (it was released in summer 2001 no less). If your outside the UK, sign the Twitter based equivalent.

IE6 is both slow and insecure and if you’re using it as your primary browser, it’s likely your view of the world wide web is extremely limited. The motoring equivalent of driving a 1982 model car when you could have a 2010 model, complete with ABS, traction control, Air Con etc (for free)!

From a designer’s point of view, making a website Internet Explorer 6 compatible currently takes an unacceptable length of  development time. Time that could be spent further improving a site for more mainstream browsers. As such I’ve taken the policy that I won’t be supporting the browser in future development work. I’d encourage other designers to discourage their clients from supporting the browser too. This means we can all look forwards to newer technologies like HTML5, CSS3 and Jquery 1.4 without the headaches of workarounds for Microsoft’s tired old browser.

In the meantime, it’s possible guide users to a different browser with a gentle warning. For example, my own site has only a handful of IE6 visitors (that’s quality readership for you) so with the imminent design refresh I’ll be implementing a Jquery based warning to IE6 users.

Use Jqquery to guide users to other browsers

Use Jquery to guide users to other browsers

Bookmark and Share

Adding Jquery and jquery lightbox to Cubecart 4

January 22nd, 2010

As you will note from my previous post I’ve been working on another Cubecart based site. Cubecart 4 uses the Prototye & Scriptaculous Javascript library, which I’m not a fan of and I wanted to add some Javascript functionality to the site I can only find in Jquery. The task was therefore to remove add Jquery and remove the other unneeded libraries (multiple Javascript frameworks rarely run happily together). The one additional task was to amend Cubecart to use a Jquery lightbox rather than the default.

So here is a step by step of how you can add Jquery to your Cubecart 4 based site (interestingly, Cubecart 5 is using Jquery rather than Protoype/Mootools) and amend the Cubecart templates to use a Jquery lightbox instead of the default:

1. Download jquery

2. Save jquery to the JS folder of your Cubecart site. I also renamed mine from ‘jquery-1.4.min.js’ to simply ‘jquery.js’.

3. Download Lightbox and extract the ‘jquery.lightbox.min.js’ from the JS folder of the archive into the JS folder of your Cubecart installation (it’s in the root). Rename the file to ‘jquery.lightbox.js’ for simplicity.

4. Now extract the jquery.lightbox.packed.css file from the CSS folder of the Jquery Lightbox archive to the CSS folder of your Cubecart skin which will be like so: ’skins/your skin/styleSheets’. For simplicity rename the file to simply jquery.lightbox.com

5. Within the ’skins’ folder of Cubecart, within your skin, browse to ’styleTemplates’ > ‘global’ and open index.tpl

By default (for example with the Carreta-Bright skin), line 17-19 are this:

1
2
3
<script type="text/javascript" src="js/jslibrary.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Replace those lines with the following:

1
2
3
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jslibrary.js"></script>

6. You will also need to change the style sheets so amend the following line:

1
<link href="skins/{VAL_SKIN}/styleSheets/lightbox.css" rel="stylesheet" type="text/css" media="all, screen"  />

To read:

1
<link href="skins/{VAL_SKIN}/styleSheets/jquery.lightbox.css" rel="stylesheet" type="text/css" media="all, screen"  />

So the other libraries won’t get loaded now and we have also added the stylesheet for the new Lightbox plugin.

7. By default the ‘next’ and ‘previous’ images of the Jquery lightbox effect live in an ‘images’ folder at the same level as the ‘JS’ folder. Therefore, extract all four images from the ‘images’ folder of the Jquery Lightbox archive into the ‘images’ folder in the root of your Cubecart installation.

8. Now open ‘viewProd.tpl from the skins/your skin/styleTemplates/content folder of your Cubecart installation.

9. Around line 21, change the following line of code:

1
rel="lightbox[imageset]"

To read:

1
rel="lightbox-myGroup"

This is the call for the new Jquery based Lightbox.

That’s it, Jquery is added and the default lightbox effect has been switched for a Jquery based one. Best of all you can now add new Jquery scripts to your site without any javascript conflicts.

Happy coding…

Bookmark and Share

How to setup MAMP and Coda for Cubecart development

January 22nd, 2010

I was looking for a simple tutorial that described how to use MAMP and Coda together for locally developing CMS (php based) systems before making them live, in this instance Cubecart. I searched high and low and couldn’t find anything on the net for this.

My web development app of choice is Panic’s Coda. This tutorial describes how to set up MAMP for use with Cubecart and development with Coda.

Credit where it is due: I had particular problems getting Ioncube for PHP working with MAMP. The following forum post was very helpful in setting that part up: http://forum.mamp.info/viewtopic.php?f=2&t=6875&start=0

Instructions:

1. Download and install MAMP

2. Download and extract Ioncube. (choose the relevant Ioncube download for your processor). You need to extract the file ‘ioncube_loader_dar_5.2.so’ into the ‘Applications/MAMP/bin/php5/zend/lib/’ folder

3. Browse to Applications/MAMP/conf/php5/ and open the file ‘php.ini’ in Coda

4. Add the following line at line 1085:

1
zend_extension=/Applications/MAMP/bin/php5/zend/lib/ioncube_loader_dar_5.2.so

Be sure to add it at the correct line. When in places you should see lines above and below like this:

1
2
3
4
5
6
7
; Local Variables:
; tab-width: 4
; End:
zend_extension=/Applications/MAMP/bin/php5/zend/lib/ioncube_loader_dar_5.2.so

;zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-20060613/eaccelerator.so"
eaccelerator.shm_size="16"

5. Download Cubecart. Extract the contents to the local folder you want to use. For example, I extracted it into a folder on my desktop e.g. ‘Desktop/benfrain.com/clients/clientname/’

6. Start MAMP (Applications > Mamp. Click ‘Stop Servers’.

7. In MAMP, click ‘Preferences…’, choose the ‘Apache’ tab and enter the local folder address you are keeping your files in (same as the ‘Local Root’ field in Coda - we’ll get this in Step 9). Click ‘OK’ and click ‘Start Servers’.

8. Still in MAMP, click the ‘Open Start Page’ button. The start page will open in your default web browser. Click the phpMyAdmin link (under the MySQL header).

9. We now need to create a database for use with Cubecart. Enter a name in the ‘Create new database’ field. E.g. ‘cubecart_test’, ensure ‘Collation’ is selected from the drop down and that ‘utf8_general_ci’ is selected in the drop-down below and click ‘Create’. Now click the ‘Privileges’ tab.Set up a SQL database for use with Cubecart

10. Either amend the user and password of ‘root’ (the default user for SQL databases in localhost) to your preference or create a new user by clicking the ‘Add a new User’ link. Either way, make a note of the username and password and ensure the user has ‘ALL PRIVILEGES’ set. You can now close this browser window.

11. Now open up Coda and select ‘Sites > Add site’

12. Name your site. Enter ‘http://localhost:8888/’ in the Root URL and Local URL boxes, leave ‘Remote Root’ blank and in the ‘Local Root’ box enter the location of the folder you are keeping your local copy of the site at. Click the ‘Set…’ button and browse to it. You don’t need to enter anything in the ‘Connecting’ section for local development. Here’s what it looked like on mine (click for full size version):

Settings in Coda for MAMP

Settings in Coda for MAMP

13. Now two options to set-up Cubecart. Either open the site in Coda, (open the index.php page in your local folder and click Preview in Coda) and it should kick the setup process off.

14. Everything should be straightforward now, when it gets to the database details, you will need to user the database details from step 10.

15. After setup completes it is possible that you will be unable to access the Admin panel. To rectify this you may have to email Cubecart support and ask them to add ‘localhost’ to your licence.

That’s it, Cubecart is setup locally and you can do all your development work locally before uploading your amendments to a live site.

Bookmark and Share

Review: Twelve South SurfacePad

December 21st, 2009
The SurfacePad for MacBook Pro 13 by Twelve South

The SurfacePad for MacBook Pro 13" by Twelve South

The Twelve South SurfacePad is one of those products that you don’t realise you want until you have it…

After reviewing the Twelve South BookArc for MacUser magazine, Twelve South asked if I’d also be interesting in taking a look at their ‘SurfacePad’ product: a cover for the palm-rest area 13 or 15″ MacBook Pro.

Having checked out the Twelve South website (by the way, I piggin’ love their logo - only just figured out the arrow is a ‘12′ on its side!) there didn’t seem like there was anything to get particularly excited about. It’s just a cover, right?

So it arrived and I installed it and… I wouldn’t be without it!

So what’s the big deal?
The SurfacePad is, on the surface (ahem - see what I did there?), merely a thin piece of custom-cut napa leather which covers the area around the keyboard and trackpad. It costs $39 (roughly £20) and if you don’t want to buy direct from Twelve South, the Apple store stocks it. But the comfort the product bestows belies its physical simplicity.

Installing it on the MacBook Pro is as simple as peeling off the back and sticking it to your MacBook Pro. However, here’s a little positive thing that is worth mentioning: the adhesive cover on the back of the SurfacePad is split into three sections and numbered 1-3. The benefit of this is that if you are a mole-handed clown like myself, it gives you chance to align the sticky stuff a section at a time which stops it looking like a dog’s dinner when installed.

Once applied the MacBook opens and shuts perfectly (it’s cut so it doesn’t intervene with the lid) and provides a nice soft surface to rest your hands on whilst typing. It’s also nice in colder locations too as even when the MacBook is cold, the surface doesn’t feel anywhere near as cold as the standard aluminium. There are some swirly patterns on the sample I received but they are fairly inoffensive. If you’d rather, Twelve South also make a smooth version without the pattern. Either way, patterned or not, the black actually looks great when on the MacBook Pro, complimenting the black bezel of the screen.

Should you need to remove the SurfacePad down the line, I’m reliably informed it will peel away without leaving any horrid residue. In the name of investigative journalism I should probably check that claim. But I won’t; because then I’d be without my trusty SurfacePad!

Bookmark and Share

HTML5 feature by Ben Frain in MacUser magazine

December 16th, 2009

I’ve been looking at the HTML5 specification a lot recently and intend to use parts of the specification in my upcoming website redesign. I’ve consolidated a lot of the research on the subject I’ve done into an HTML5 feature for MacUser magazine (it will be in issue 25/25). It’s kind of a primer on the subject so if you’re wondering just what is in HTML5 for you, or whether you should consider using portions of the specifications in your next website, it may be worth you taking a look. In the meantime, for more on HTML5, take a look at the HTML5 gallery and HTML5 Doctor - two sites that give you a good insight on the features of the new spec and how they can be applied today.

Bookmark and Share

21.5″ iMac screen bezel damage and misalignment

December 16th, 2009

I recently reviewed the all-new 27″ iMac for Computer Active Magazine and was pretty impressed. I certainly didn’t experience any of the screen issues that are getting all the headlines. On the back of that, I recommended my brother get the 21.5″ version of the new iMac. Which was a mistake…

The first one suffered a damaged bezel, around where the black of the screen meets the aluminium ‘chin’. A one off I thought. Not so. To cut another long (but dull) story short, he has now had FIVE models delivered and all of them either had bezel damage or the black surround wasn’t aligned properly against the silver ‘chin’. Not what you’d expect when you’re dropping the best part of a grand on a system.

Despite Apple support team acknowledging the issue, they have ultimately refused to go any further to resolve the issue and instead provided a full refund. So instead, he’s going to plump for one of the previous generation models on the Apple refurb store.

However, with everyone shipped suffering some obvious defect or another I am amazed I’m not hearing any grumbles about this on the net. No one else had a squiffy screen on their new 21.5″ iMac?

Bookmark and Share

Beginners guide to CSS: article in Computer Active

December 16th, 2009
Computer Buyer Isssue 308

Computer Buyer Isssue 308

I’ve recently contributed another article to Computer Active magazine. This one is a ‘Masterclass’ on CSS. In reality it’s very much a beginners guide to the subject, written in layman’s terms. If you’ve ever wondered just how on earth CSS works, head over and pick up issue 308 (10-23 December) now.

Bookmark and Share

New Cooper D engines in January 2010, Cooper S Diesel and Mini One Diesel coming in 2010

December 1st, 2009

If you’re about to order a new Mini you may want to hold off a little. I had a conversation with the ’shoe shine man’ yesterday which revealed the following…

The Cooper Diesel is (from January) to be fitted with a leaner Diesel engine which produces comparable emissions to the current model but WITHOUT the stop/start technology. The start/stop will be re-introduced later in the year (and provide further economy/emissions saving) but as a payable option (around April was the best guess).

The Cooper S Diesel is also due in 2010 but not until much later in the year (Q3/Q4). There are no part references on the BMW systems for this which means it isn’t in production yet. Unlike the Mini One Diesel…

The Mini One Diesel is due first half of 2010. There are part references to it on the BMW systems so it’s a definite. That’s all I now, afraid I wasn’t interested so didn’t ask further.

Bookmark and Share

Windows 7 WASN’T my idea!

November 27th, 2009
Warning: this post contains some profanity (sorry Mum).

I’ll admit it, I initially thought Windows 7 was OK. In fact, fairly decent. However, the m0re I’ve used it, the more it has disappointed me. Windows it seems, regardless of the version number, will always be Windows…

At first it was all zippy menus and I enjoyed the (admittedly aped from OSX) interface. However a couple of months on, despite installing little in the way of additional software it now runs like a sack of loose shit. Applications launch at a glacial pace - it seems as ever, the only way to keep Windows running truly lean is to re-install every few months: a situation I find preposterous.

I’ll explain the end of my brief ‘like affair’ (’love’ would be way too strong a word) with Windows 7. The part where any modicum of respect for the new OS vanished.

I’d filmed a gig for someone and wanted to knock them together a quick and dirty DVD of the show. I used Windows Live Movie Maker to trim the footage. Here the problems started. Firstly Windows Live Movie Maker won’t let you add a cross dissolve to the end of the footage - only the beginning. Having overcome that odd little hurdle I’d trimmed my imports and opted to ‘export to DVD’. Now things really started going tits up.

To export from Windows Live Movie Maker to DVD Maker it encodes the footage to WMV format. Feck knows why as it will only have to encode again to MPEG-2 to make the DVD (all DVD’s are MPEG-2 based) - hardly economical! What’s more, it took about 12 hours to convert the four files! 12 bloody hours to encode about 100 mins worth of footage - dog-shit! What’s more, you can’t select a few files at once, you have to do them one at a time and ‘baby sit’ the stupid bloody Windows box…

So, long (not to mention tedious and soul sapping) story short the videos arrive into DVD Movie Maker. I choose my menus, label the buttons and tell it to make the video. So, off it sets to encode the WMV files into MPEG-2. Hours (and hours) pass and eventually it fails with some random unintelligible message about the Disc. The message gives a link to ‘more information on this problem’ which leads nowhere (wow - thanks Microsoft) so I click ‘OK’. Thinking it must be a duff disc I opt to retry the burn and here’s the kicker - it has to re-encode the sodding disc all over again, even though that part had been done before it started (attempting) to write to the disc !

What an ill conceived piece of shit! What cruel minded bastard programmed it to work this way? Sadists…

Suffice to say, 20 minutes later the footage is on my Mac and being burned to a DVD. It will work. I know it will because it had nothing to do with Windows.

I like to be able to do things with my computer and have some time left in my life for other things. Because of that, I’d like to make one point plain and clear: there’s no way in hell that Windows 7 was my idea…

Bookmark and Share

Review of Knomo Stirling Messenger bag: a perfect MacBook carry case?

November 6th, 2009
Knomo Stirling Messenger laptop carry case

Knomo Stirling Messenger laptop carry case

The Knomo Stirling Messenger bag is a premium laptop carry case available in 13, 15 and 17″ sizes. The version reviewed here is the 13″ and it has been tested with the current 13″ MacBook Pro.

I won’t discuss the aesthetics of this bag. If the design of the bag initially appeals but you’d like to be sure if it is for you, I’d suggest visiting your local Apple store as the majority of UK stores stock this item.

Knomo are a premium brand and any doubt over the pedigree or the attention to detail they lavish on their products is dispelled the moment you open the packaging of the Knomo Stirling. Furthermore, the quality of the materials used in the construction of the Knomo Stirling and the manufacturing finish are also beyond reproach.

Quality evident throughout

Two examples that exemplify this are the succinct  ‘Knomo’ branding etched onto the strap buckles and the ability to register your bag with Knomo. On the off chance your back is lost and found, the ID number on the bag can be used and Knomo will provide your details for its safe return. It’s not a geo-tagged solution like some carry cases provide but it’s a welcome (un-advertised) addition.

Not entirely waterproof - but close.

The front leather section of the Stirling Messenger is quite waxy and repels water well, whilst the main body and inner is constructed of a tough canvas. Whilst the canvas sections aren’t waterproof, given that the large leather area covers almost the entirety of the case when worn, I’d imagine your belongings would be safe in all but the most torrential of downpours.

Closures: great aesthetics but questionable practicality

The large front leather  flap fastens shut with magnets, sewn within the body of the case and flap. Visually this is very appealing as there are no visible buttons and it’s also great for the extremely lazy as there is no need to buckle your case shut. However, on the down side the magnetic closure doesn’t give you the security of a true physical buckle; gymnasts and Parkour proponents should perhaps look elsewhere.

Perfect protection for your MacBook Pro

Internally the Stirling enjoys a large padded envelope section to safely stow your MacBook (or any other laptop of similar size). It’s a sturdy thick divide that keeps the laptop snug and it eliminates the need for a separate laptop sleeve to keep your laptop protected. With this 13″ version I could happily fit my MacBook, an A5 diary, some A4 documents, MacBook charger and some odd bits and pieces (pens, earphones etc).

Compartments

Aside from the aforementioned laptop holder, within the main storage area there are two open wallet sized pockets (120mm wide x 120mm deep). On the outside, under the main flap, there is then a further, almost full height open pocket (270mm wide x 270mm deep) on the front with flaps sewn in for a pen and wallet/ID card and a half height zippable pocket (270mm wide x 145mm deep). On the back of the Stirling there is another open full height pocket (270mm wide x 310mm deep), again with a couple of smaller pockets (120mm wide x 95mm deep) sewn in.

Complaints

One notable omission from this bag is any sort of specific phone pocket. For most this will be a non issue as the majority of people tend to keep their phone closer to hand but a separate section would be nice to keep it from scratches.

The strap is a thick canvas, almost like seatbelt material. That’s not meant as a negative, as it’s incredibly sturdy material but some sort of padding for the shoulder area would have been welcome, especially on longer commutes. There’s also a handy little carry handle at the back of the case for carrying the case closer to. When not in use it simply tucks away within the open rear pocket. Neat and functional.

Conclusion

At a retail price of £89 (15 and 17″ variants slightly more) the Knomo Stirling Messenger is hardly a snip. However, for users looking for a premium product, designed and manufactured to exacting standards, it actually represents great value for money. I have no reservations recommending the Knomo Stirling Messenger to anyone looking for a stylish and functional MacBook carry case/bag. The only considerations for potential buyers are the lack of a physical closure buckle, absence of a dedicated phone pocket and the slightly uncomfortable shoulder strap when used under full load for extended periods of time. These reservations aside, the Knomo Stirling Messenger is top class product.

Bookmark and Share

Valid XHTML 1.0 Transitional © benfrain.com 2007-2008 | UK Based Freelance Writing and Web Design