Blog2Works

WAMP Setup Guide - Window 7/Vista

Sat, 10 Nov 2012 14:01:35 +0000

This is a quick reference guide on setting up WAMP for development on Windows 7 with:

Memcached
Send Mail

1. Download/Install WAMP.

Latest is not always the best and well supported. I had a issue with ionCube only suport 32 bit versions of PHP

http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.1/WampServer2.1d-x32.exe/download

Apache: 2.2.17
MySQL: 5.5.8
PHP: 5.3.4

Set auto start: Right click My Computer -> Manager -> Services and Applications -> Services:

Enabled services: "wampmysqld/wampapache", right clicking select properties and set to Auto.

Also WAMP can sometimes cause conflict with Skype when they try to start together.

2. Memcached

Download: http://code.jellycan.com/memcached into: c:\wamp\memcached

Edit properties of memechaced.exe set "Run as administrator"

Run -> cmd
- c:\wamp\memcached\memcached.exe -d install
- c:\wamp\memcached\memcached.exe -d start
- c:\wamp\memcached\memcached.exe -d runservice -m 512 (increase memory limit)

Download: http://code.google.com/p/thinkam/downloads/detail?name=php_memcache-cvs-20090703-5.3-VC6-x86.zip
Into: c:\wamp\bin\php\php5.3.4\ext\php_memcache.dll

php.ini add: extension=php_memcache.dll (or do this all later)

3. Send Mail

Download: http://glob.com.au/sendmail into: c:\wamp\sendmail
Update setting with your email address or make up a testing gMail account. Ensure you enable the settings in gmail to allow external

smtp_server=mail.domain.co.uk
auth_username=mail@domain.co.uk
auth_password=password
;pop3_server=
;pop3_username=
;pop3_password=
hostname= yourdomain.co.uk

3. Set Apache Settings

From the WAMP icon on the desktop, left click: Apache -> Apache Modules

Enabled the follows, or ensure they are selected:

autoindex_module
expires_module
filter_module
headers_module
rewrite_module
vhost_alias_module (c:\wamp\bin\apache\Apache2.2.17\conf\extras)

4. Set PHP.ini Settings

From the WAMP icon on the desktop: PHP -> php.ini (Or manually open from C:\wamp\bin\apache\Apache2.2.17\bin\php.ini)

Find/Update the following options. Manily so there is no limit whne importing into phpmyadmin and you can run large utility scripts via the browser.

post_max_size = 256M
max_execution_time = 5000
max_input_time = 5000
memory_limit = 1000M
upload_max_filesize = 750M
include_path = ".;c:\wamp\www\php\includes"
sendmail_path = c:\wamp\sendmail\sendmail.exe –t

extension=php_curl.dll
extension=php_memcache.dll

Create the php include directory: c:\wamp\www\php\includes

MySQL Settings:

To fix this error: ERROR HY000: This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA

From the WAMP icon open: MySQL -> my.ini

Added/replace:

log_bin_trust_function_creators = 1
lower_case_table_names=2

Fix Apache Auto Index Icons:

Edit: c:\wamp\bin\apache\Apache2.2.17\conf\extra\httpd-autoindex.conf
Find: "/httpd-2.2-x64/icons" or some reference to a locations/folders and replace with:

Alias /icons/ "c:/wamp/bin/apache/Apache2.2.17/icons/"
** MAKE SURE YOU HAVE FORWARD SLASH AT END

<Directory "c:/wamp/bin/apache/Apache2.2.17/icons">

Example vHost:

<VirtualHost *>
   ServerName www.example.local
   ServerAlias example.local *.example.local
   DocumentRoot "c:\wamp\www\"
   <Directory "c:\wamp\www\">
       Options Indexes FollowSymLinks Includes
       AllowOverride All
       Order allow,deny
       Allow from all
   </Directory>
</VirtualHost>

Windows 7 restore address book for Mozilla Thunderbird from previous profile

Fri, 09 Nov 2012 13:59:59 +0000

On windows 7:

CLOSE THUNDERBIRD.
Open the address book from the backup eg: R:backup123\Users\*\AppData\Roaming\Thunderbird\Profiles
Select the profile eg: 6sdgakb6.default
Find file: abook.mab

Select Start menu.
Type: %appdata%
Open: Thunderbird\Profiles
Select the profile eg: 6sdgadf6.default
Replace file: abook.mab

Open Thunderbird

Reference: http://kb.mozillazine.org/Moving_address_books_between_profiles

Different types of Domain Names

Fri, 04 May 2012 14:07:36 +0100

Different types of Domain Names

There are three main types of domain names:

Nominet Domains (.uk):

.co.uk
.org.uk
.me.uk

Top Level Domains (TLD’s):

.com
.net
.org
.biz
.info
.mobi
.name
.eu
.tv
.cc

CentralNic Domains:

ae.org
.cn.com
.de.com
.eu.com
.gb.com
.gb.net
.kr.com
.qc.com
.sa.com
.us.com
.se.net
.se.com
.uy.com
.br.com
.no.com
.hu.com
.ru.com
.jpn.com
.uk.net
.uk.com
.za.com

WAMP Auto Index - Fix missing icons

Wed, 04 Apr 2012 16:45:44 +0100

When enabling the auto index on WAMP you will need to make a small cahnge to the apache: httpd-autoindex.conf

This can be found (apending on your version) here: c:\wamp\bin\apache\Apache2.2.17\conf\extra\httpd-autoindex.conf

Find:

Alias /icons/ "/apache/icons/"

 <Directory "/apache/icons/">

Replace: "/apache/icons/" with the absolute path to your Apache Icons directory. E.g: C:/wamp/bin/apache/Apache2.2.21/icons/

Restart APACHE.

DONE

You need to make sure that you use FORWARD SLASH not BACK SLASH if you are copy/paste from windows.

Useful VI bash commands

Sat, 03 Mar 2012 12:48:58 +0000

First of all you need to know how to close vi: ctrl-c : q!

These are some of the basic and most common used command to get you started.

:q -> quit
:w -> save
:q! -> quit and don't save
:x -> save and quit
:[number] -> go to line number
G -> go to end of file
dd -> delete line
p -> "put" line
yy -> "copy" line
:s/[searchfor] -> search
u -> undo last type word

Further examples can be found at:

PHP Upgrade: Cannot load the ionCube PHP Loader - it was built with configuration 2.2.0, whereas running engine is API220090626,NTS

Sat, 04 Feb 2012 10:24:10 +0000

Cannot load the ionCube PHP Loader - it was built with configuration 2.2.0, whereas running engine is API220090626,NTS

This PHP error is being caused because IonCube is trying to load the old version. To update this on Debian:

EDIT: /etc/php5/conf.d/aa_ioncube.ini
FIND: zend_extension = /usr/local/ioncube/ioncube_loader_lin_5.2.so
REPLACE: zend_extension = /usr/local/ioncube/ioncube_loader_lin_5.3.so

This error was caused when upgrading from PHP 5.2 to 5.3, I wanted to make sure no configuration files was overwritten. So when upgrading via apt-get, I made sure to always select the option for the local configuration files.

Clear browser cache

Fri, 28 Oct 2011 12:02:43 +0100

In order to speed up web browsing, modern web browsers are built to download web pages and store them locally on your computer's hard drive. So when you visit the same page for a second time, the browser speeds up loading time by loading the page locally from cache instead of downloading everything again.

Although storing Internet cache makes web browser faster you sometimes want to overwrite this defualt behaviour, for example to see recent changes made to a webpage you just uploaded.

Clearing Cache Memory

This is done by doing what is called a "force refresh" by pressing both control and F5 buttons simultaneously on your keyboard (depending on your browser).

Depending on your operating system all you need to do is the following key combination:

Windows: ctrl + F5
Mac/Apple: Apple + R or command + R
Linux: F5

If you find this does not work you can find step by step guides for Chrome, Firefox 3, Firefox 2, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Safari.

Common MySQL data types

Sun, 28 Aug 2011 09:45:46 +0100

When designing a new database, each time I have to re-think what types should be used for one or the other columns. So I decided to make my own mainly just for reference but somebody may find this useful.

Column	Data Type	Comment
id	INT	AUTO_INCREMENT, UNSIGNED
page name	VARCHAR(64)
meta title	VARCHAR(150)
meta description	VARCHAR(160)
meta keyword	VARCHAR(255)
status	enum('ENABLED','DISABLED')	DEFAULT "DISABLED"
featured	TINYINT(1)	DEFAULT "0"
content	TEXT
username	VARCHAR(32)
password	VARCHAR(64)
email address	VARCHAR(100)
phone/mobile	VARCHAR(20)
firstname/company	VARCHAR(32)
address_1	VARCHAR(128)
postcode	VARCHAR(10)
file	VARCHAR(255)
price	DECIMAL (7,2)	UNSIGNED
order	INT(11)
ip	VARCHAR(15)	DEFAULT "0"
modified	TIMESTAMP	on update CURRENT_TIMESTAMP
create	DATETIME	DEFAULT "0000-00-00 00:00:00"
forien_key	INT(11)

jQuery Selectors

Tue, 31 May 2011 12:40:13 +0100

Jquery Selectors are used to specify which element from the HTML document you would like to use. If you are familuar with CSS 1-3 you will noticed the simularity.

All meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) must be escapes with two backslashes: \\.

All Selector ("*")
Select all elements

Contains Prefix Selector [name|="value"]
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
Contains Selector [name*="value"]
Selects elements that have the specified attribute with a value containing the a given substring.
Contains Word Selector [name~="value"]
Selects elements that have the specified attribute with a value containing a given word, delimited by spaces
Ends with Selector [name$="value"]
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
Equals Selector [name="value"]
Selects elements that have the specified attribute with a value exactly equal to a certain value.
Not Equal Selector [name!="value="]
Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value
Starts with Selector [name^="value"]
Selects elements that have the specified attribute with a value beginning exactly with a given string

:animated Selector
Select all elements that are in the progress of an animation at the time the selector is run
:button Selector
Selects all button elements and elements of type button.
:checkbox Selector
Selects all elements of type checkbox
:checked Selector
Matches all elements that are checked
Child Selector ("parent > child")
Selects all direct child elements specified by "child" of elements specified by "parent"
Class Selector (".class")
Selects all elements with the given class
:contains() Selector
Select all elements that contain the specified text
Descendant Selector ("ancestor descendant")
Selects all elements that are descendants of a given ancestor
:disabled Selector
Selects all elements that are disabled
Element Selector ("element")
Select all elements with the given tag name
:empty Selector
Select all elements that have no children (including text nodes)
:enabled Selector
Selects all elements that are enabled
:eq() Selector
Select the element at index n within the matched set
:even/:odd Selector
Selects even elements, zero-indexed and odd
:file Selector
Select all elements of type file
:first-child Selector
Selects all elements that are the first child of their parent.
:first Selecto
Selects the first matched element.
:focus selector
Selects element if it is currently focused.
:gt() Selector
Select all elements at an index greater than index within the matched set.
Has Attribute Selector [name]
Selects elements that have the specified attribute, with any value.
:has() Selector
Selects elements which contain at least one element that matches the specified selector.
:header Selector
Selects all elements that are headers, like h1, h2, h3 and so on.
:hidden Selector
Selects all elements that are hidden.
ID Selector (“#id”)
Selects a single element with the given id attribute.
:image Selector
Selects all elements of type image.
:input Selector
Selects all input, textarea, select and button elements.
:last-child Selector
Selects all elements that are the last child of their parent.
:last Selector
Selects the last matched element.
:lt() Selector
Select all elements at an index less than index within the matched set.
Multiple Attribute Selector [name="value"][name2="value2"]
Matches elements that match all of the specified attribute filters.
Multiple Selector (“selector1, selector2, selectorN”)
Selects the combined results of all the specified selectors.
Next Adjacent Selector (“prev + next”)
Selects all next elements matching "next" that are immediately preceded by a sibling "prev".
Next Siblings Selector (“prev ~ siblings”)
Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.
:not() Selector
Selects all elements that do not match the given selector.
:nth-child() Selector
Selects all elements that are the nth-child of their parent.
:only-child Selector
Selects all elements that are the only child of their parent.
:parent Selector
Select all elements that are the parent of another element, including text nodes.
:password Selector
Selects all elements of type password.
:radio Selector
Selects all elements of type radio.
:reset Selector
Selects all elements of type reset.
:selected Selector
Selects all elements that are selected.
:submit Selector
Selects all elements of type submit.
:text Selector
Selects all elements of type text.
:visible Selector
Selects all elements that are visible.

Reference Manual: Jquery, W3C

http://api.jquery.com/category/selectors/

Install SmartyPDT Plugin into Zend Studio

Sun, 22 May 2011 21:46:04 +0100

This guide explains how to install Smarty PDT with Zend Studio. Smarty PDT is a Smarty template syntax colouring, a feature that is not available by default with Zend Studio.

Installing Smarty PDT into Zend Studio

Be sure to check that the .tpl fule are not associated with any content type. Go to Window -> Prefences -> General -> Content Types
Download the latest SmartyPDT .zip (currently 0.9.0) from http://code.google.com/p/smartypdt/
Go to Help -> Install New Software
- Click Add then click Archive button and select the .zip downloaded previously
- By default the Group item by category ensure you unselect this
Click Next, accept the condition and restart Zend Studio
If you are prompted that this is an unsigned package, just ignore the warning and install it anyway.
Right click on the PHP project in the PHP Explorer and Select Configure -> Add Smarty Support

Update/Fixes if this does not work by default

Check you have the Smarty Editor selected as default for *tpl file in File Association in Preferences -> Ceneral -> Editors -> File Associations

If after restarting Zend Studio you may find that the .tpl file type is locked. The only option I found was to remove the .tpl directly from the plugin PDT.
Firstly close Zend Studio to edit the core files:
1. Go to the plugins folder where Zend Studio is installed (Mine was C:\\Program Files\Zend\Zend Studio - 8.0.0\plugins
2. File the file org.eclipse.php.core_2.2.1.vxxxxxxxx-xxxx.jar - the exact version of the plugin may change with updates to the PDT
3. You can infact open this file as a normal archieve file just like a .zip file. Right click a select open with is this does not open by default, if this does not work try renaming the file extension.
4. Extract all the file and edit the the plugin.xml file
  - Search for "tpl", this was line number 53 and remove "tpl" from the list

FREE Search Engine Optimisation Tips

Wed, 27 Apr 2011 05:37:31 +0100

The following steps will help your Google search rankings:

-------- Create Quality Content
This is the most important one; make sure you have good, original content that people will want to read.

-------- Create a Lot of Content
The more pages, the better. This can easily be achieved by creating your own pages with lots of content.

-------- Keep Content Fresh
Keep updating the site regularly.

-------- Remove Duplicates
Do not create pages with the same, or almost same, content. The CMS will ensure that no two pages have the same name or URL

-------- Versatile, Precise Wording
Alternate the wording for repeated phrases if you like to target them in web searches.

-------- Focus on Important Keywords
Imagine your audience and what keywords they might enter in a search, and use those words.

-------- Create Valid HTML
Each HTML version can be validate, obviously Web2Works only develops to the highest strict standards.
You can validate your website for free here:
W3C Validator
http://validator.w3.org/

Link Checker
http://validator.w3.org/checklink

-------- Create Structured HTML
Use headings and other phrase mark-up (h1, h2, em, strong). These are HTML code that wraps around each different sections of text, each element represents importance of the page, allowing search engines to easily find the correct content.

-------- Provide text-alternatives
When including images, especially those containing text, provide a text-alternative via the "alt"-attribute.

-------- Use Meaningful Meta-Data
Every page should have a unique title. You might also want to add meta-keywords and a meta-description. Although this was abused in the early days of the Internet and most modern Search Engines will ignore them completley. Although if you have the time I would recommend entering as much content as possible to the page. One day the Google of the future may change their ways to reading the meta data.

-------- Get a Reliable, Robust, Fast Server
Get your website on a proper server shared with a few websites not thousands with the cheap hosts.

-------- Create Meaningful File-names
Don't abbreviate file and folder names, but instead use the full keywords which are important for that page.

-------- Add Your URL to Search Engines
Use services like following:
Google's Add URL
://www.google.com/addurl.html

-------- Communicate Your Site to Others
Write to other people who you think might be interested and tell them about your site (but do not rely on spamming newsgroups).

-------- Test Your Ranking and Fine-tune
Check how Google reacts now that you've done the changes.

What's the difference between Website Accessibility & Usability

Mon, 25 Apr 2011 18:58:28 +0100

Both Website Accessibility and Usability are often misused and confused. Usability is a measure of how easy it is to use a site, while accessibility relates to whether the site can be accessed by everybody.

Website Usability:

Is a measure of how easy a system is to use and can be applied to any interaction between a user and the website. Usability is made up of several key factors:

Ease of learning - how steep the learning curve is.
Efficiency of use - how quickly a user can perform a task on a website, may be finding a certain piece of information, using the navigation menu and many other tasks depending on the website.
Ease of memorisation - how simple (or difficult) it is to remember how to perform a particular task.
Error trapping - ensuring errors are prevented by informing the user how to use the website before errors occur. When they do occur the user experience is not completely broken by providing feedback to the user why the error has accrued.
Satisfaction - a user is able to perform a given task on a site satisfactorily.

Website Accessibility:

Allows for equal access to all users regardless of technological device and physical means. This ranges from people with mobile phones, screen readers and monitor size. Accessibility can even cover how accessible your website is for users with slow connections. A blind user will use a screen reader, whilst a businessman uses a mobile phone and granny turns her font size up, accessibility is about ensuring your site can be accessed equally in all these scenarios

A good example of how to over comment PHP code

Thu, 24 Mar 2011 22:41:35 +0000

Opencart header navtion - Three levels deep http://www.shahz.net/web-development/open-cart-header-navigation-three-level-list.html

jQuery Default Input Text - placeholder HTML5

Mon, 21 Mar 2011 00:35:11 +0000

jQuery plugin to provide a backwards compatible default input text fully browser compatible using JavaScript.

// Input Clear Default
    $('input[placeholder],textarea[placeholder]').each(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('placeholder'));    
        }
        $(this).focus(function() {
            if($(this).val() == $(this).attr('placeholder')) {
                $(this).val('');    
            }
        });
        $(this).blur(function() {
            if($(this).val() === '') {
                $(this).val($(this).attr('placeholder'));    
            }
        });
    });

jQuery Select Option:Selected

Sun, 20 Mar 2011 22:54:28 +0000

A really simple Options selected fully cross browser that even works in IE6.

jQuery Select Option

$('select').change(function () {
     $(this).find('option').removeClass("selected");
     $(this).find('option:selected').addClass("selected");
});

Element section not allowed as child of element ul in this content

Tue, 15 Mar 2011 11:23:42 +0000

HTML5 Validation Error Message: Element section not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

This means that you have: <ul> -> <section>

It needs to be inside of an <li> so should look like this <ul> <li><section>text</section></li>

Creating Modern website using HTML5

Sat, 12 Mar 2011 16:57:22 +0000

HTML has some great new features to offer, such as the new semantic elements that aim to give meaning to the various parts of a modern Website. Over the past few years concepts such as Web 2.0, Rich Internet Applications and the Semantic Web have all pushed HTML, CSS and JavaScript beyond their limits replying on plugins such as Adobe Flash to power components sch as video and audio. For many years, the Web has relied on external plugins to deliver features that cannot be natively supported by the Web browser, particularly in terms of 2D drawing, animation, and multimedia. The latest versions of the HTML and CSS specification aim to remove the need for these additional browser components to facilitate such features, as well as reduce the amount of JavaScript required.

HTML5 is a relatively young specification, and as a result, browser support is limited to:

The HTML5 specification includes a series of new semantic elements that is used to give some meaning to the various sections or parts of a Website, such as a <header>, <footer>, <navigation> etc. Previously you would typically use <div> elements to create these parts, using ID or class attributes to differentiate them from each other. The problem with this is that this has no semantic meaning, as there are no strict rules defined that specify what class names or IDs are to be used, making it extremely difficult for search engines to determine which sections of the website hav emost importance.

The main semantic elements that HTML5 introduces are:

<header> - Define a header section of the website.
<footer> - Like the <header> element athough for the footer.
<nav> - Used only for the primary navigation links on a Web page.
<article> - An independent item on the page that can be distributed on its own, such as a news item, blog post, or comment.
<section> - This element represents a section of a document or application, such as a chapter or a section of an article or tutorial.
<aside> - This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks.

The <canvas> element

The <canvas> element was standardised and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element. The <canvas> element itself is quite basic, defining the width, height, and unique ID for the object. The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering. These APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients; create text; transform canvas objects; and perform animation. The APIs also allow the <canvas> to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas.

Playing <audio> and <video>

In recent years, the popularity of video sharing sites such as YouTube has seen a huge explosion in the use of the Web for multimedia streaming. Unfortunately, the Web was not built with such content in mind, as a result the provision of video and audio has by Flash Video (.flv) file format and the Adobe Flash platform.

HTML5, however, includes support for two new elements, <audio> and <video>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed such as Flash. Several browsers, including Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these new elements and providing standard browser playback controls, should the user choose to use them. In addition, a set of standard JavaScript APIs has been provided to allow developers to create their own playback controls, should they wish to do so.

Local storage and offline applications

Web developers have traditionally used cookies to store information on a visitor's local machine, allowing a Web page to read this information back at a later point. While cookies are very useful for storing basic data, they are limited by the fact that Web browsers are not required to keep more than 20 cookies per Web server or more than 4KB of data per cookie (including both name and value). In addition, they are sent to the Web server with every HTTP request, which is a waste of resources.

HTML5 provides a solution for these problems with the Local Storage APIs, which are covered in a separate specification to the main HTML5 document. This set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date. In addition, the information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request. The specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites.

Web form enhancements

HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Support for these new form fields is quite limited. The Mobile Safari browser on the iPhone makes use of some of these new types to change the type of keyboard presented to the user (for example, with the e-mail type, the @ symbol and .com shortcuts will be shown). Also, Opera provides some new widgets for many of these controls, including a spinner for the number type and a calendar date picker for the date-related types. The most widely available type of these new offerings is the range type, which is rendered as a slider by Opera, Safari, and Google Chrome.

Browser Support

In addition to these new input types, HTML5 also supports two major new features for form fields. The first of these is autofocus, which tells a browser to automatically give focus to a particular form field when the page has rendered, without requiring JavaScript code to do so. The second enhancement is the placeholder attribute, which allows the developer to define the text that will appear in a textbox-based control when its contents are empty.

Other new features

HTML5 includes so many new features; it's impossible to cover them all in this tutorial. This section provides a brief overview of some of the other enhancements in the specification.

Web worker - This allows JavaScript code to be set to run in a background process facilitating the development of multi-threaded applications. The chief benefit that Web workers offer developers is that intensive calculations can be processed in the background without adversely affecting the speed of the user interface.
Geolocation - HTML5 includes a geolocation API that allows a Web application to determine your current geographical location, assuming the device you are targeting provides features for finding such information (for example, GPS on a cellphone). If you do not have a device that supports this feature (such as an iPhone or an Android 2.0-based smartphone), you can use Firefox and download a plug-in that allows you to set your location manually.
Drag and Drop - Another interesting feature is the inclusion of a drag and drop API. Up until now, implementation of drag and drop without plug-ins was dependent on some very complex JavaScript or the use of a JavaScript library such as jQuery

Attribute selectors

E[foo^="bar"] - Select an element, E, whose foo attribute begins exactly with the string bar
E[foo$="bar"] - Select an element, E, whose foo attribute ends exactly with the string bar
E[foo*="bar"] - Select an element, E, whose foo attribute contains the string bar

Structural pseudo-classes

E:root - Select an element, E, the root of the document (the <html> tag)
E:nth-child(n) - Select an element, E, the n-th child of its parent element
E:nth-last-child(n) - Select an element, E, the n-th last child of its parent element
E:nth-of-type(n) - Select an element, E, the n-th sibling of its type
E:nth-last-of-type(n) - Select an element, E, the n-th last sibling of its type
E:last-child - Select an element, E, whose is the last child of its parent element (Note that E:first-child was previously defined in CSS2)
E:first-of-type - Select an element, E, the first sibling of its type
E:last-of-type - Select an element, E, the last sibling of its type
E:only-child - Select an element, E, the only child of its parent element
E:only-of-type - Select an element, E, the only sibling of its type
E:empty - Select an element, E, that has no children (including text nodes)

The target pseudo-class

E:target - Select an element, E, who is the target of the referring URI

UI element states pseudo-classes

E:enabled - Select a user interface element, E, which is enabled
E:disabled - Select a user interface element, E, which is disabled
E:checked - Select a user interface element, E (a radio button or checkbox), which is checked or selected

Negation pseudo-class

E:not(s) - Select an element, E, which does not match the simple selector s

General sibling combinator

E ~ F - Select an element, F, which is preceded by an element, E

Browser support for the new attribute selectors and the general sibling combinator is excellent, as they work on almost all modern Web browsers. Support for the new pseudo-classes is included with the latest versions of most browsers, but you may need to include fallbacks for older browsers such as Internet Explorer 6/7 and Firefox 3.0.

New effects

Although the new selectors are probably the features that reduce developers' headaches the most, the enhancements people most want to see are the shiny new effects that are available. These are facilitated through a slew of new CSS properties, including:

background (now supports multiple backgrounds)
background-clip
background-origin
background-size
border-radius (rounded corners)
border-image
border-color (gradient borders)
box-shadow (drop shadow on boxes without images)
box-sizing
opacity
outline-offset
resize
text-overflow
text-shadow
word-wrap

Multicolumn layouts

CSS3 multicolumn layouts allow for text to be spread over a number of columns, like you might find in a newspaper. This can be done in two ways, either using the column-width property, where you define how wide each column should be (the number of columns is determined by the space available to the container), or using column-count, where you define the number of columns that should be used. The width will then vary based on the space available to each column.

Other features of multicolumn layouts include the column-gap property, which allows the developer to define the space that should be present between columns when the column-width method is used. Another useful addition is the column-rule property, which allows a border-style rule to be placed between columns. Finally there is the column-space-distribution property, which determines how left over space should be allocated between the columns.

Multicolumn layouts are currently supported by Mozilla and WebKit browsers. At present, these are implemented by means of temporary proprietary properties prefixed with -moz or -webkit, respectively. When the specification has been finalized, these browsers will eventually move to the CSS standard properties.

Web fonts

Web fonts were actually proposed for CSS2 and have been available in Microsoft Internet Explorer since version 5. Unfortunately, this required the use of the proprietary .eot (Embedded Open Type) font format, and none of the other browser vendors chose to implement it. As a result, Web fonts never really took off on CSS2-based Web sites.

Basic HTML5 Page

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>   
<header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>
    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features  that HTML5 and CSS3 has to offer. This article contains several sections, each with its own heading, as well as a video element which will play a video without Flash on browsers that support it.</p>
    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document.  A section can refer to different parts of a document, application, or page. According to the draft W3C spec, HTML5 sections usually have headings.</p>
    </section>
</article>

<footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

</body>
</html>

Video Elemment

<video src="http://www.double.co.nz/video_test/transformers480.ogg" controls autoplay>
            <div>
                <p>This video will work in Mozilla Firefox or Google Chrome only.</p>
            </div>
</video>

Web form enhancements

<section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" autofocus />

        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter your email address" />

        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your phone number" />

        <label for="contact_callback">Callback on:</label>
        <input type="datetime" id="contact_callback" />

        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" id="contact_priority" />

        <input type="submit" value="Request Call" />
    </form>
</section>

You'll notice that the first input elemtn has the placeholder text "Enter your name" and is set to autofocus. Supporting browsers will automatically switch focus to this element when the page has been rendered. The next element is of type "email" and again contains a placeholder text value. The only browser that recognizes this type of input element as anything special is Opera, which displays a mail icon in the field to signify that it's an email field. The next field of interest is the datetime field with the label "Callback on:". In supporting browsers, this will display a date and time picker. In Opera, this displays as two controls, a textbox with a datepicker and a spinner for the time. Finally, you'll see a control of the type range, with min, max, and value attributes set. This control will be rendered by Safari, Chrome, and Opera as a slider, with a minimum value of 1, selected by default, and a maximum value of 5. Unsupported browsers will simply display this as a textbox with the text value set to 1.

How to upgrade PHP 5.2 to PHP 5.3 on Debian Lenny

Thu, 03 Mar 2011 22:39:13 +0000

Its very simple to upgrade PHP 5.2 to PHP 5.3 for Debian Lenny and it's easy to upgrade via a few commands with the apt-get

Add these lines to the apt sources at /etc/apt/sources.list

deb http://php53.dotdeb.org stable all
deb-src http://php53.dotdeb.org stable all

The dotdeb repositry will require you to download and import the key

wget http://www.dotdeb.org/dotdeb.gpg
cat dotdeb.gpg | sudo apt-key add -

Now all that is left is to upgrade:
```
apt-get update
apt-get dist-upgrade
```
I have to confirm a couple of files that have to be overwriten.

Backup2l

Tue, 01 Mar 2011 22:56:53 +0000

Description

backup2l is a lightweight command line tool for generating, maintaining and restoring backups on a mountable file system (e. g. hard disk). The main design goals are are low maintenance effort, efficiency, transparency and robustness. In a default installation, backups are created autonomously by a cron script.

backup2l supports hierarchical differential backups with a user-specified number of levels and backups per level. With this scheme, the total number of archives that have to be stored only increases logarithmically with the number of differential backups since the last full backup. Hence, small incremental backups can be generated at short intervals while time- and space-consuming full backups are only sparsely needed.

The restore function allows to easily restore the state of the file system or arbitrary directories/files of previous points in time. The ownership and permission attributes of files and directories are correctly restored.

An integrated split-and-collect function allows to comfortably transfer all or selected archives to a set of CDs or other removable media.

All control files are stored together with the archives on the backup device, and their contents are mostly self-explaining. Hence, in the case of an emergency, a user does not only have to rely on the restore functionality of backup2l, but can - if necessary - browse the files and extract archives manually.

For deciding whether a file is new or modified, backup2l looks at its name, modification time, size, ownership and permissions. Unlike other backup tools, the i-node is not considered in order to avoid problems with non-Unix file systems like FAT32.

Screenshots

Generating a backup: mail received from cron

The monitored area covers 26803 (=23733+3053) files and directories and over 2.2 GB of data. Look at the time stamps!

backup2l v0.9 by Gundolf Kiefer

Tue Nov  6 07:58:00 CET 2001

Mounting /disk2...

Running pre-backup procedure...
  writing dpkg selections to /root/getselections.log...

Removing old backups...

Preparing differential level-3 backup <all.1104> based on <all.1103>...
 657 / 23745 file(s), 94 / 3058 dir(s), 63945 / 2332639 KB (uncompressed)
 skipping: 498 file(s), 14 dir(s), 3144527 KB (uncompressed)

Creating archive...
Checking TOC of tar file (< real file, > archive entry)...
Creating check file for <all.1104>...

Tue Nov  6 07:58:41 CET 2001


Summary
=======

Archive     Date       | Size (KB) | Skipped  Files+Dirs |  New  Obs. | Errors
------------------------------------------------------------------------------
all.1       2001-07-15 |   1475248 |     620       17795 |17795     0 |     45
all.101     2001-07-27 |    235720 |     617       17002 |  812  1605 |      2
all.102     2001-08-19 |    210648 |     626       23446 | 7077   633 |      1
all.103     2001-08-30 |    125396 |     670       23796 | 1963  1613 |      0
all.104     2001-09-07 |    203880 |     669       25597 | 5353  3552 |      1
all.105     2001-09-20 |     87076 |     409       24333 | 2192  3456 |      6
all.106     2001-10-01 |     88492 |     409       27611 | 4591  1313 |      1
all.107     2001-10-12 |     67624 |     409       26589 | 1194  2216 |      0
all.108     2001-10-21 |    111580 |     506       26553 | 1351  1387 |      0
all.1081    2001-10-21 |       948 |     506       26554 |   70    69 |      0
all.1082    2001-10-22 |       164 |     506       26554 |   90    90 |      0
all.1083    2001-10-23 |     46680 |     506       27814 | 1465   205 |      0
all.1084    2001-10-24 |     29672 |     506       28578 | 1111   347 |      0
all.1085    2001-10-25 |     28272 |     506       26869 |  282  1991 |      0
all.1086    2001-10-26 |     45000 |     506       26866 |  314   317 |      0
all.1087    2001-10-27 |     33136 |     506       27162 |  610   314 |      0
all.1088    2001-10-28 |     12280 |     506       27645 |  673   190 |      0
all.11      2001-10-29 |    822056 |     506       27725 |13582  3652 |      8
all.1101    2001-10-30 |     20888 |     506       23707 |  858  4876 |      0
all.1102    2001-10-31 |     11336 |     512       26807 | 3372   272 |      0
all.1103    2001-11-05 |       312 |     512       26786 |  173   194 |      0
all.1104    2001-11-06 |     49592 |     512       26803 |  751   734 |      0

Filesystem            Size  Used Avail Use% Mounted on
/dev/hde1             5.8G  3.5G  2.3G  61% /disk2

Unmounting /disk2...

Restoring the directory /home/home/gundolf/prog/ from snapshot <all.1102>

lilienthal:/scratch# backup2l -t 1102 -r /home/gundolf/prog/
backup2l v0.9 by Gundolf Kiefer

Mounting /disk2...

Active files in <all.1102>: 246
 found in all.1102:     119   (  127 left)
 found in all.1101:       7   (  120 left)
 found in all.11:       120   (    0 left)

Restoring 35 directories...
Restoring files...
  all.11: 120 file(s)
  all.1101: 7 file(s)
  all.1102: 119 file(s)
Unmounting /disk2...
lilienthal:/scratch#

Jquery Simple Continuous Hover

Mon, 28 Feb 2011 17:14:30 +0000

This is a example of a simple few lines of jQuery magic to produce a contious action.

var hoverInterval;

function doStuff() {
    // Set button's background to a random color
    $("#button").css("background", "#" + Math.floor(Math.random() * 16777215).toString(16));
}

$(function() {
    $("#button").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval(doStuff, 100);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
    );
})