Archive for the ‘Web Development’ Category

How to Set Up Virtual Hosts in Xampp on Ubuntu

Over a year ago I discovered how to set up virtual hosts in Xampp and posted my method in the Ubuntu forum. Today I had to do it again. My memory is not very good and as it is not something I do every day I could not remember the precise details. I had to go searching in the Ubuntu forums to find my instructions again and of course, this took quite a while to find as there is a mass of excellent hints and tips over there and it is very easy to become distracted. Therefore, I have decided to post my method here hoping that the next time I need to install virtual hosts I will be able to find the instructions straight away!

At the moment I am using Ubuntu 10.10 and XAMPP Linux 1.7.3a

1. First of all enable virtual hosts by editing httpd.conf:

sudo gedit /opt/lampp/etc/httpd.conf

Find #Include etc/extra/httpd-vhosts.conf and remove the # so it looks like:

Include etc/extra/httpd-vhosts.conf

Save and close.

2. Now add the virtual host:

sudo gedit /opt/lampp/etc/extra/httpd-vhosts.conf

You will find two virtual hosts set up as examples. Remove or edit these with your own details.


ServerAdmin webmaster@mysite.com
DocumentRoot /opt/lampp/htdocs/myname/mysite
ServerName mysite.com
ErrorLog logs/mysite.com-error_log
CustomLog logs/mysite.com-access_log common

Save and close the file.

3. Now tell Xampp where to find this site:

sudo gedit /etc/hosts

Add this:

127.0.0.1 mysite.com

Save and close the file.

4. Restart xampp server

sudo /opt/lampp/lampp restart

5. Now you can point your browser to http://mysite.com and it should fetch your site.

I hope this method helps you too.

First impressions of CodeIgniter

These last few weeks I have been trying out CodeIgniter and so far I have been very impressed. For those who do not know, CodeIgniter is an open source PHP framework. It is very easy to set up, works with version 4 and 5 of PHP, uses the MVC approach which separates logic from presentation and has a very good user guide and tutorials. I have built several applications while learning CodeIgniter and it does seem to make coding web projects quicker, easier and fun! If you have not used a framework before but are interested in learning how one works, I think CodeIgniter is an ideal first step. I will keep you updated as to how I progress with it.

Linking to stylesheets and favicons

Link to a favicon:

<link rel=”shortcut icon” href=”/favicon.ico” />

Link to a stylesheet:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Importing a stylesheet:

In the head section put:
<style type=”text/css”>
@import “import.css”;
</style>

Importing a stylesheet from another stylesheet:

In the stylesheet have:

@import url(import.css);


Link to stylesheet for Iphone:

<!–[if !IE]>–>
<link media=”only screen and (max-device-width: 480px)”
rel=”stylesheet” type=”text/css” href=”iphone.css”/>
<!–<![endif]–>

Link to stylesheet for a small broswer window (may or may not be Iphone):

<!–[if !IE]>–>
<link media=”only screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”iphone.css”/>
<!–<![endif]–>

Opera Web Standards Curriculum

The Opera Web Standards Curriculum is a complete course to teach standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. An interesting read for both beginners and more advanced web developers.

Text Generator

I always seem to need filler text for various things, especially web design. I have various pieces of filler text in text files but it’s never convenient to stop what I’m doing and hunt out the text files so I was very please to come across this great resource:

Dummy Text Generator

It will generate various types of filler text and you can set the number of characters and words. It even puts in the paragraph tags for you so you can just copy the text and paste it straight into an html document. It also has some advanced options where you can change the font and it generates the stylesheet to go with the text you select.

A great timesaver and definitely a site for my bookmarks!

Pagination

I’ve been thinking of pagination recently and looked to the web to see what inspirations there were there. I have bookmarked these sites:

Hopefully, I will now be inspired to improve the pagination on my own sites.

My Favourite Firefox Extensions

Here are my favourite extensions for Firefox:

  • British English Dictionary – enables me to check my spelling for typos when filling in forms online.
  • ColorZilla – Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  • DownThemAll – Great for downloading lots of files.
  • HTML Validator – adds HTML validation inside Firefox.
  • IE View – Enables me to view pages in IE by just right clicking on the Firefox browser window and selecting View This Page in IE.
  • Opera View – the same as above but with Opera.
  • Palette Grabber – extracts a color palette for the current page and exports it to a Photoshop/Illustrator color palette file
  • Sage – a lightweight RSS and Atom feed reader.
  • Screengrab – makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window – from a small selection, to a complete page.
  • Web Developer – various web developer tools I would find it difficult to do without.
  • Password Exporter – allows you to export and import your saved passwords.
  • Scrapbook - helps you to save Web pages and manage the collection. Great when you come across a great piece of information you wish to keep handy.

What are your favourite Firefox extensions?

Testing web page in multiple browsers

I found this great utility which enables you to check a web page in multiple browsers:

Browsershots

It is very useful for checking pages in browsers you don’t have installed on your computer.