The following list is 10 favourite pieces of software which I’m thankful for every single day:
No Comments » | 
Category: Technical | Tags: List, Software | 
Permalink
Posted by Tom
If you want to use the “Purisa Light” font on your Linux hosted website, you can follow the following steps:
Home
@font-face {
font-family: 'Purisa';
src: url('fonts/Purisa.eot'); /* For IE */
src: local('Purisa'),
url('fonts/Purisa.ttf') format('truetype');
}
<div style="font-family:Purisa,arial"> This should be in the "Purisa Light" font... </div>
cd ~/ttf2eot-0.0.2-2 sudo apt-get install build-essential make
@font-face is a HTML5 feature supported by Safari 3.1+, Firefox 3.5+, Opera 10+ and IE 4+. At the time of writing Google Chrome currently doesn’t support @font-face (but the beta version does so it won’t be long).
This post was inspired from an excellent article called @font-face in Depth.
2 Comments | Category: Web Design | Tags: Fonts, Ubuntu, WebDesign | Permalink
Posted by Tom
What is a “Amazon Carousel”? It is a advert showing a bunch of items you can buy on Amazon:
Amazon put a limit on the number of items in a carousel. However, if you have more than 10 items, you can use a little javascript to select 10 at random so a different set are shown on each page view.
This is some javascript that randomises an array of ASIN numbers:
var asinArray = new Array('0874477182', '0764138057', '0764136321', '0375428569', '0375764313', '037576433X', '0375428607', '141955252X', '141955039X', '0874477565', '0874477727', '037576593X', '0375429115', '0375765891', '0375765883', '0375429093', '0375429077', '0375429123', '0375429085', '0953265978', '0856609781', '1402209592', '0375428720', '0312366914', '0142003085', '0374525137', '0143112821', '0099479028', '1932080309', '0140620184', '0141185570', '014023750X', '014103534X', '0312361785');
document.write('Normal : ' + asinArray + '<br />');
asinArray.sort(function(){return (Math.round(Math.random())-0.5); });
document.write('Random : ' + asinArray + '<br />');
To select 10 from the randomised array:
if (asinArray.length > 10)
asinArray.length = 10;
document.write('Random 10: \'' + asinArray.join(',') + '\'<br />');
To apply this to the Amazon Carousel:
<script type='text/javascript'>
var asinArray = new Array('0874477182', '0764138057', '0764136321', '0375428569', '0375764313', '037576433X', '0375428607', '141955252X', '141955039X', '0874477565', '0874477727', '037576593X', '0375429115', '0375765891', '0375765883', '0375429093', '0375429077', '0375429123', '0375429085', '0953265978', '0856609781', '1402209592', '0375428720', '0312366914', '0142003085', '0374525137', '0143112821', '0099479028', '1932080309', '0140620184', '0141185570', '014023750X', '014103534X', '0312361785');
asinArray.sort(function(){return (Math.round(Math.random())-0.5); });
if (asinArray.length > 10)
asinArray.length = 10;
var asinText = "'"+asinArray.join(',')+"'";
var amzn_wdgt={widget:'Carousel'};
amzn_wdgt.tag='<your Amazon id>';
amzn_wdgt.widgetType='ASINList';
amzn_wdgt.ASIN=asinText;
amzn_wdgt.title='New Video Game titles from Amazon';
amzn_wdgt.width='600';
amzn_wdgt.height='200';
amzn_wdgt.marketPlace='GB';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.co.uk/20070822/GB/js/swfobject_1_5.js'>
</script>
No Comments » | Category: Web Design | Tags: Amazon, Javascript | Permalink
Posted by Tom
Are you looking for website templates you can buy or borrow? Here’s a handy list:
|
Buy: |
Borrow: |
Also, here’s some good links for inspiration:
No Comments » | Category: Web Design | Tags: Inspiration | Permalink
Posted by Tom
The hardware behind Bitvolution is called “Butterfree“, he’s based in Germany (www.hetzner.de):
No Comments » | Category: Technical | Tags: Toys | Permalink
Posted by Tom
My latest project was to implement a redesign of the PeoplePerHour “Find Freelancers” page.
Why is the new search better?
No Comments » | Category: Client Work | Tags: BeforeVSAfter, Design, PeoplePerHour | Permalink
Posted by Tom
Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:
<div style="float:left;width:300px">left text block</div> <div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div> <br style='clear:both' /> Text that you need to appear below the previous text blocks
Why is it bad?
<br style='clear:both' /> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.<div style='clear:both'></div> is bad because you shouldn’t use empty HTML elements.
<div class='clearAfter'>
<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks
where the clearAfter css class is defined by:
.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1} /*IE necessary workaround*/
I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/
What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.
No Comments » | Category: Web Design | Tags: CSS, HTML | Permalink
Posted by Tom
We have just finished and published http://www.heidijoycegardens.com. It should hopefully look clean and simple?
Technical details of site:
No Comments » | Category: Client Work | Tags: HeidiJoyceGardens | Permalink
Posted by Tom
If you have a font file with a “ttf” extension you can easily install it in Ubuntu (v9.04) and use it in applications such as the Gimp. Essentially, all you have to do is drop it in the correct folder:
The following text was created in the Gimp: It uses 3 free fonts, the “B” is Heavy Data, the “it” is Sans Bold and the “volution” is Ballpark:
No Comments » | Category: Technical | Tags: Fonts, Graphics, Ubuntu | Permalink
Posted by Tom
It only takes a few lines of Javascript to make a HTML table start rotating it’s rows. Example:
| field 1a | field 1b |
| field 2a | field 2b |
| field 3a | field 3b |
| field 4a | field 4b |
| field 5a | field 5b |
| field 6a | field 6b |
| field 7a | field 7b |
| field 8a | field 8b |
Using javascript, you need to remove the last row of the table and then insert it in front of the first table row and then repeat continuously.
2 Comments | Category: Tutorial | Tags: Javascript, JQuery | Permalink
Posted by Tom
My latest project at PeoplePerHour was to implement a redesign of the website homepage. The new page is a lot less busy and less work for the webserver:
I’m loving jquery at the moment.
No Comments » | Category: Client Work | Tags: BeforeVSAfter, Design, PeoplePerHour | Permalink
Posted by Tom