My portrait by Nigel Goldsmith

A few weeks ago I was complaining about my avatar picture and Nigel Goldsmith, photographer and colleague offered to shoot me.

I wanted some shots that I could use for all my public accounts and conference talks that showed me in a professionally nerdy way and Nigel did a great job. The background is the stairway of the Wills Memorial Building here in lovely Bristol. Several people are shocked I stickered my laptop but it won’t get easily confused at a conference now will  it?

Portrait
Portrait

 

Black Leakage for the walls

Black Leakage is a new product from one of my favourite studios Design Chapel.

I haven’t seen this kind of wall art on sale before and it reminds me of my painting days and when I used to ‘F5’ the Design Chapel site before I discovered RSS!

Notes from Weelearning

Weelearning held the first event on Wednesday and I was in attendance in bristol. Dan and Sam are hoping to build a regular following for us e-learning types in the commercial and public sector. I really enjoyed the night and not just because I won a prize of e-learning books from packt.

What made this really enjoyable in addition to the two talks was that we had plenty of time to kick it with fellow folks. I attend plenty of formal rigid event so it was cool to almost have the other end of the spectrum.

We talked about the differences between commercial/public sector approaches, terminology and value of e-learning to traditional workshop models.

If weelearning can attract a regular following and keep the essence of a relaxed and diverse crowd then I look forward to meeting you at a future event.

Scalable and Modular Architecture for CSS

One of my web heroes Jonathan Snook recently released a website about organising CSS:

I’ve long lost count of how many web sites I’ve built. You’d think after having built a few hundred of them I’d have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

I have long tried to grapple with the same problem and after a week or so really think this idea and website has legs. Below is a cut down version for quick reference, read and then head over to Scalable and Modular Architecture for CSS.

The four types of categories are:

  1. Base
  2. Layout
  3. Module
  4. State


1. Base styles are the defaults that we set. They’re almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that where ever this element is on the page, it should look like this.

 Examples of Base Styles

html, body, form { margin: 0; padding: 0; }

input[type=text] { border: 1px solid #999; }

a { color: #039; }

a:hover { color: #03C; }

2. Layout styles divide the page into sections. Layouts hold all your modules together

Examples of Layout Styles
#header, #article, #footer {    width: 960px;   margin: auto;}
 
.l-header {    float: left; }

3. Modules are the reusable, modular parts of our design. They are the navigation, callouts, the sidebar sections, and the product list and so on.

This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

4. State styles are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive?

.s-error {    color: #F00;    background-color: #FEE; }

 Grouping properties  

  1. Box – display, float, position, left, top, height, width and so on.
  2. Border- border-image, and border-radius.
  3. Background
  4. Text – font-family, font-size, text-transform, letter-spacing etc
  5. Other

Missing a trick – Hotel guestbooks

It is a constant struggle to identify good hotels/hostels – this time we were lucky that a colleague suggested ‘The Havelock‘ on the Isle of Wight, a place which has exceeded our expectations and we couldn’t have been happier.

On the front desk the owners have a guestbook which reflects the happy stay of many guests . What’s wrong with that? Nothing except we are already here and so the comments don’t  really add value much to anybody – although my better half suggests it can be good for local recommendations.

Those comments would be very helpful to anybody who is considering the hotel via the website. I propose that all hotels transfer those comments to their own websites on a regular basis. This would help interested potential guests AND surely help keep fresh material on the site – who loves this more than a search engine and a bunch of hotels with static sites vying for a higher search ranking that’s who.

It is good that The Havelock is on tripadviser as at least those comments can help you decide.

Enabling webgl in Firefox

Earlier today I was attempting to view an example of 3D in the browser that makes use of webgl but the browser kept insisting webgl wasn’t enabled.

Initial web searches indicate that webgl, which is used to get the 3D working should be running on Firefox (im using 6.0.2) but it clearly was not!

Instructions

To enable webgl simply type “about:config” into the browser address, promise to be care and then type “webgl” into the filter at the top.  The second option should be “webgl.force-enable” and you’ll need to double-click the value of false changing it to TRUE.

Reload the 3D example page and you should now be up and running.

Jquery – .slidetoggle()

Remember when using the .slidetoggle feature of jquery that you need to set the element that you wish to start hidden e.g. a div called ‘map’ to display:none or else the div will start visible.

Also if using multiple toggles remember to give each a unique set of names (unless you know how to properly code and this can be done in a cleaner fashion.

Dear future self, this will save you 12hrs of head scratching.

Look at the wheels!

Bike up on the stand in the garage

I just got a new set of tyres for the bike and my impression after a mere 6 miles is that it now feels like a completely different bike.

This is the first time that I have had new tyres on the same bike, as I traded the last bike before they were too gone.

The steering immediately felt different, initially I am putting this down to having the correct tyre pressure! There is def increased height at the front now which I wasn’t used to and couldn’t get a feeling in roundabouts but the last mile felt comfy.

I inherited a square rear tyre (caused by lack of turning and mainly motorway miles says the fitter) which always made leaning strange when hitting the edge of the tyre.  Under acceleration I can feel the improvement to grip (experts may laugh at this notion) as the bike was quicker through the first two gears.

I am amazed at just how different the bike feels already and will be assuming fresh tyres is a good thing!

I got a set of Avon Storm ST ultra’s (£252.93 with fitting) from Protyre Bristol based on what a few of the BAM guys recommended.

How long will they last? note to self, you are on 21K the day they were fitted.

Making Firefox mine – extensions and such

Whenever I use another computers browser it is always setup in a unique way, and mine is no different.

Though I have opera, chrome and safari I always come back to ye ole faithful Firefire. I like it naturally because I am used to it, and I got used to it due to some handy extensions that I probably use daily. I thought i’d list them as you may also find them of use:

  1. Firebug. THE must have extension if you are in anyway curious about what is under the hood of any website you come across. This beauty lets you select any page element and reveal the coding secrets behind. Better still, you can make changes and see live previews before your very eyes.
  2. ScreenGrab! I collect website screengrabs of sites that catch my eye and for keeping an archive of old designs before I update.
  3. Colorzilla. A really quick way to grab all the colours you find that you just have to have.
  4. Web developer toolbar. The ruler for measuring gaps between elements is worth the download alone.
  5. Open Attribute. The ultra fast way to get Creative Commons license details in the correct format at the click of a button.