Tag Archives: css

Writing a Firefox addon

Just written the first version of my Firefox add on stat-o-matic. It lists the number of pages viewed in your browser over the last 4 months. Graphs the top 7 sites visited and the pages viewed by Month and Hour.

Its currently been reviewed preliminary, it should be listed publicly on the addons site as experimental. Which is probably correct for now as its a bit of stub and rough around the edges. Or minimal viable prototype as the developer said to the investor. In the future I’ll probably extend it to do more and tidy it up but I wanted to get through the review process before I spent more time on it.

Have been trying it out on my Firefox on a mac so I know it works under load. It revealed my rather to heavy internet usage. 13000 pages viewed in April, 33300 in last 4 months which seems excessive.

Writing an Firefox addon turns out to be mostly writing JavaScript so that was interesting. You never really know what these things entail fully until you do them.

You can try it out here

If your interested in writing your own Firefox/Thunderbird extension the documentation is here.

Simple Blog for TLC Live

Note: 2014/06/30 This blog was replaced as part of a larger site rebuild in mid 2013.

TLC are online tutors based in the UK. We recently added a simple blog to their site to allow anyone in the company to add content to the site. They can use it to trumpet company announcements and extol the virtues of their learning platform.

TLC Live blog

We added a few plugins in that the client requested from an earlier system they had used. Other than that its pretty plain vanilla WordPress with some adaptions.

We wrote a custom excerpts function so we could finish the excerpt at the end of the first paragraph. The client also wanted the excerpts to keep their formatting and links which are often removed by default.

Also wrote a couple of widgets to emulate the behaviour of some links on their main site.

They also have a more useful than standard 404 page which lists recent articles if you mistype an address.

You can see the site at www.tlclive.com/blog.

Mock-up and Print Solutions

Put this small site together for Martin’s new company. He just wanted a small site to get started and provide a place for people to find out a little more about him.

He makes mockups for graphic designers and agencies also plates for Flexo and Letterpress printing.

We spent a good while going backwards and forwards so Martin could get it all how he wanted it to be. He seems very happy with what he has ended up with so I’m happy.

Mock-up and Print Solutions

The nature of what he does means that he doesn’t have a huge amount of printed material he can use without compromising someones copyright or confidentiality. So we made up some ‘type of’ illustrations to show the types of work he does and provide some visual interest.

From a technical point of view its quite simple just flexible stylesheets for different screen sizes besides the normal HTML5, CSS and Javascript.

Flexible stylesheets

Been working on some flexible style sheets for someone else so I thought I should do some for me so I’ve started on the homepage of this site (its the one most people look at). As ever its a work in progress I have not done this blog yet.

This is the homepage at 900px wide:

Homepage at 915px wide

This is the homepage at 300px and 500px wide:

Homepage at 500px and 300px Wide

Why

People are using a wide range of devices of different screen sizes and resolutions. You want your content to look good on all those devices don’t you?. Even if its only for legibility. Designing a site to only work on a huge great desktop monitor will please the art director when he prints it out but it isn’t going to please a customer who is using a 1060px wide screen or even a customer with his browser window set as a small portion of a larger screen.

How

I’ve been using media queries support does vary somewhat across desktop devices. The most notable one I found didn’t work for me was Internet Explorer 8. You can get around that one if you include a js script. You can get an idea of the support offered by various browsers on When can I use.

What sizes? devices

It depends on your circumstances, what kind of devices are people using to visit your site with. If you have a load of visitors using massive art director style monitors you might want create a very big screen set of styles. If lots of people are using small screen devices then you need to look at those. If only a very small number of people use that very odd dimension then it might not be worth bothering.

Desktop browsers

This is reasonably easy you can resize your browser window and see how you site adapts in your various browsers. Opera is good for this as they have a simple tick box that allows you to turn on ‘show webpage dimensions in titlebar’ which gives you a simple way to see the current depth and height as you resize. On a Mac its under Opera > Preferences > Advanced > Browsing.

Mobile devices

You can check your site in emulators as starting point but support does vary from device to device and ideally you want to test on real devices. They have settings that alter how they display your content that might be set to zoom out a larger site or ignore the media queries you have made completely.

bashing a stylesheet to flexibility

When

Ideally you should do this stuff when your putting a site together to start with and consider it when designing the site. Some things are awkward to scale, I’ve found tables awkward in the past.

You can bash an existing site into a more flexible approach or just the most used parts of the site.