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:
Website Templates, Themes and Inspiration
Furnished Dining Room
We got some furniture for our Dining room. We now have a drinks cabinet 🙂 (and a table, sideboard and book shelves):
| Before: |
|
| After: |
|
Although, it’s more of an office than a dining room now.
Frog Woes
The sight of a frog makes me feel sick so Kix found it funny that we had to edit a blog post that contained a real frog photo for a client of ours. Good phobia therapy? 🙂
The Bitvolution Webserver
The hardware behind Bitvolution is called “Butterfree“, he’s based in Germany (www.hetzner.de):
Specs:
- CPU: Intel® Core™ i7-920 Quadcore incl. Hyper-Threading Technology.
- RAM: 8 GB DDR3.
- Disk: 2 x 750 GB SATA II (Software-RAID 1).
Features:
- LAMP – Full root access.
- 24h reset service via Web interface
- 92 GBit bandwidth with unlimited traffic usage (but the connection speed is restricted to 10 MBit/s if more than 2000 GB/month are exceeded).
Introducing Butterfree
I have a new machine. He’s called “Butterfree”, he’s German and I rent him for £45 per month from http://www.hetzner.de/en:
- Specs:
- CPU: Intel i7-920 Quadcore incl. Hyper-Threading Technology.
- RAM: 8 GB DDR3.
- Disk: 2 x 750 GB SATA II (Software-RAID 1).
- Features:
- LAMP – Full root access.
- 24h Reset service via Webinterface – I already had to use this once due to a typo I made in the firewall configuration!
- 92 GBit Bandwidth
- Unlimited Traffic Usage – but the connection speed is restricted to 10 MBit/s if more than 2000 GB/month are exceeded.
PeoplePerHour.com search page redesign
My latest project was to implement a redesign of the PeoplePerHour “Find Freelancers” page.
Previous Design
New Design
Why is the new search better?
- It’s twice as fast
- Many less DB queries per page (old: >100, new: 10)
- Less page reloads needed (results refinement via AJAX)
- Uses faster DB queries, less table JOINs and better indexes
- It returns more relevant results
- It supports multiple keywords and uses Natural language full-text search so ranking takes into account proximity and duplication
- Users get feedback about why a result was returned (keyword match highlighting)
- It’s more powerful
- More search options, e.g. search on hourly rate of provider.
- Returns more information, e.g. provider earnings, hourly rate
- It has better SEO
- Used fairly nice URLs, higher keyword density, better HTML markup, better code to content ratio.
- Added links to “Related queries”, “Popular queries” and “Top Searches by sector”.
- The user-interface and page layout has been improved. (UI built with JQuery).
- Users can now link to any search (cut&paste URL)
Clearing floats with pure CSS
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:
Bad:
<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.
Better:
<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.
HeidiJoyceGardens.com
We have just finished and published http://www.heidijoycegardens.com. It should hopefully look clean and simple?
Technical details of site:
- The site is written in PHP using WordPress as a development framework.
- Uses the Yahoo grids CSS framework (and their CSS Reset).
- Uses Jquery and Jquery UI (hosted by Google)
Finished First “for-pay” website
|
Our first site as freelancers is more-or-less finished. It should hopefully look clean and simple? |
My new company – Bitvolution Limited
Bitvolution is a company I set up to provide freelance web development and consultancy. I have got the website up and running:
Let’s see how it goes…
Finished Hallway
We finished the hallway (i.e. finally got round to doing the skirting board).
| Before: |
|
| After: |
|
Installing fonts in Ubuntu
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:
- cd /usr/local/share/fonts
- If the truetype/custom directory doesn’t exist already: sudo mkdir truetype sudo mkdir truetype/custom
- sudo cp where_you_downloaded_the_new_font/fontname.ttf /usr/local/share/fonts/truetype/custom
- sudo chown root.root /usr/local/share/fonts/truetype/custom/fontname.ttf
- fc-cache – Otherwise, the font will disappear at the next reboot.
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:
Stop websites turning off the “remember password” browser feature
I’m currently in the process of incorporating a company and www.businesslink.gov.uk is my friend (now gone away but there is https://www.gov.uk/browse/business), especially the “Business start-up organiser” which is the ultimate “to do” list of things that need to be done. However, I found the site was annoying in that it kept logging me out if I went away for 5 minutes and the login procedure is frustrating because it asks you for a long number and doesn’t remember it. To force Firefox to remember the login details you need to edit a settings file, nsLoginManager.js:
 |
|
I’m going to add this to the list of “Essential things to do immediately after installing an Operating system” as it saves so much time.
The Three Peaks Challenge
The three peaks challenge involves walking 25 miles while climbing 2940m and driving 466 miles in 24 hours. The 3 peaks are the tallest in Scotland (Ben Nevis), England (Scarfell Pike) and Wales (Snowdon). We did it as a group of 10 including a very kind driver who didn’t walk. My legs have never been so stiff and tired, I can hardly get up the stairs 2 days later!
Walking in the dark is hard, especially on the top of a mountain in the fog. We lost the path for a while and lost time. Consequently we came in a bit late. Total time: 27 hours.
| Planned start time | Aimed time | Actual start Time | Actual Time | |
|---|---|---|---|---|
| Ben Nevis (5 miles ascent, 1280m climb) | 9am | 5 hours | 9am | 5 hours |
| Drive 256 miles | 6 hours | 7 hours | ||
| Scarfell Pike (3 miles ascent, 920m climb) | 8pm | 3.5 hours | 9:30pm | 5 hours |
| Drive 210 miles | 5 hours | 5 hours | ||
| Snowdon (4.5 miles ascent, 740m climb) | 04:30am | 4.5 hours | 7:20am | 5 hours |
Thanks to everyone who sponsored me – our team raised more than £2000 for Cancer Research.
Building a MythTV Box
We have quite a good Freeview box which does scheduled recordings including series-record but it could be better because it is missing a HD output, DVD playback and Video streaming.
We decided to build our own HTPC in order to take control of our viewing options once and for all.
Hardware List:
- Case: Lian Li PC-C37B Muse HTPC Chassis – Black. This case didn’t come with a PSU so we bought a Corsair CX 400W ATX Power Supply (CMPSU-400CXUK).
- Motherboard: ASUS P5N7A-VM – micro ATX – GF 9300 / nForce 730i – LGA775 Socket – UDMA133, Serial ATA-300 (RAID), eSATA – Gigabit Ethernet – video – High Definition Audio (8-channel)
- CPU: Intel E8400 Core 2 Duo Processor – 3.00 GHz, 6MB L2 Cache, 1333MHz FSB, Socket LGA775, 45 nm
- RAM: 2GB (2 x 1GB) DDR2 SDRAM, PC2-6400
- Hard Disk: Samsung SpinPoint HD103UJ F1 Series – 1 TB – 32 MB – 3.5″ SATA
- DVD burner: Samsung SH-S223QBEBN 22x DVD±RW SATA Dual Layer Lightscribe ReWriter (Black)
- TV-Tuner card: Hauppauge Nova-T 500 twin TV-tuner card.
This list was based on the suggestions from page 56 of issue 117 of Linux Format Magazine. One thing to note is that the Nova-T 500 comes with a full-height backing plate so it wouldn’t fit into the case until Hauppauge, apon request, mailed us a half-height backing plate. The case fits in our Ikea Besta Burs TV Bench (albeit with a little jigsaw butchery to the thin plywood back panel). The case is missing a IR port but the TV-Card comes with a external IR receiver which is perhaps more useful because it means the PC can be out of sight with only the little IR receiver poking out.
|
|
Software
Install and configure Arch using “The Beginners Guide”: http://wiki.archlinux.org/index.php/Beginners_Guide. Then install MythTV using the great Arch wiki: http://wiki.archlinux.org/index.php/MythTV_HOWTO
Issues
Sound over HDMI – HDMI video worked out of the box but sound didn’t – To get sound through HDMI to the TV: Upgrade your version of ALSA, then in alsamixer, unmute all IEC958 channels (i.e. IEC958, IEC958-D, IEC958-1). Then:
- For Xine – Go to the audio tab and change the “audio-driver to use” to “alsa” and the “device used for stereo-output” to “pcm.hw:0,3”.
- For Mplayer – Right click->Preferences->Audio. Select alsa from the Available drivers. Then click “Configure driver” and enter “hw=0,3”
- For MythTV – Go to Utilities/Setup->Setup->General->”Next” until you get to the Audio section. In “Audio output device:” enter “ALSA:hw:0,3”. For MythTV DVD playback – Go to “Utilites/Setup”->Setup->”Media Settings”->”Video Settings”->”Player Settings”-> and add “-ao alsa:device=hw=0.3” to the mplayer options in the the “Default Video Player” field.
- For Flash – Create (or edit) a file called ~/.asoundrc and add the following:
defaults.pcm.device.3
so that flash uses the correct Audio output device.
mythtv-setup keeps crashing when tuning the channels – The solution is to run mythtv-setup using only one CPU core: taskset -c 0 /usr/bin/mythtv-setup
Tuning issues – The Nova-T 500 does not pick up a signal as well as normal stand-alone Freeview boxes or TVs. I had quite a few problems.
