What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

Its got to the stage where I can no longer read Mashable or Techcrunch because of the saturation and influence that these so called ‘social media’ experts and journalists seem to be having on the industry. This so called next movement has unfortunately made everyone (even my Mum and Dad!) an expert in social media (whatever social media really is?) so it seems. I used to be an avid reader of Mashable and Techcrunch however i started to notice articles that were just plain crap observations, for example recently i found this post on Mashable, ‘The top ten Twitter trends this week.’ I mean WHAT THE HELL! This made it into an article! This is a classic example of so called social media biting itself in the ass. Im a savvy internet user if i want to know what’s trending on Twitter i’ll check the Twitter homepage. Social media really just stands for, ‘We’re going to make your browsing experience twice as complicated by bombarding you with pointless facts an figures and plain obvious tips on how to promote your business using Twitter, Facebook and social networking.’ I mean HELLO! bands and teenagers have been doing this stuff for years on MySpace, Hi5, and Bebo its nothing new.

It’s just plain marketing bullshit, and it just purports to makes anyone an expert if you have a Twitter or Facebook account, so in effect it just bastardises people who actually are knowledgeable in this area. I don’t class myself as an expert in anything. If your an expert you have nothing more to learn and we all have something to learn even more so on the internet.

Social Media = Way too much noise!

The Objective

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.

The button style

This is the default class that is applied to each button on our page. We can customise a button is by adding a chain of CSS classes, this way we can set the colour and size. You’ll see below that we have an overlay.png background image. This gives us the gradient effect if your still conscious about IE6 you’ll need to use a PNG transparency hack to make 24 bit PNG’s render correctly.

Another feature with CSS3 is RGBA, This is the same as RGB but with an alpha layer allowing you to set the opacity of a colour. This allows us to easily change the background of our buttons containing div without us having to adjust the buttons style

.button, .button:visited {
	background: #222 url(overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}

In the image below you can see that the background colour is different but the shadow around the edge of the button remains the same. If we had used a HEX colour value the left button on white would no doubt be something like #dedede and the button on black would be #333333. So you can see that using RGBA allows us much more flexibility when rendering shadows.

Button Size

Now we have the main structure of our button set on the .button class we can now go ahead and setup some instances of size. below we’ve set the classes .small .medium .large and .super. In all cases except for the .medium button we’ve just adjusted the font size and padding with the same button structure.

       .small.button, .small.button:visited 			       { font-size: 11px}
	.button, .button:visited,
	.medium.button, .medium.button:visited 		{ font-size: 13px;
												  font-weight: bold;
												  line-height: 1;
												  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
												  }

	.large.button, .large.button:visited 			        { font-size: 14px;
											  padding: 8px 14px 9px; }

	.super.button, .super.button:visited 			{ font-size: 34px;
											  padding: 8px 14px 9px; }

Button Colour

The final step is to specify a CSS class for whatever colour we want our button(s) to be. In this case we have a set of predefined colours but you can adjust or add to these as you like.

.pink.button, .magenta.button:visited	{ background-color: #e22092; }
	.pink.button:hover					{ background-color: #c81e82; }
	.green.button, .green.button:visited	{ background-color: #91bd09; }
	.green.button:hover				        { background-color: #749a02; }
	.red.button, .red.button:visited		{ background-color: #e62727; }
	.red.button:hover					{ background-color: #cf2525; }
	.orange.button, .orange.button:visited	{ background-color: #ff5c00; }
	.orange.button:hover				{ background-color: #d45500; }
	.blue.button, .blue.button:visited   	        { background-color: #2981e4; }
	.blue.button:hover					{ background-color: #2575cf; }
	.yellow.button, .yellow.button:visited	{ background-color: #ffb515; }
	.yellow.button:hover				{ background-color: #fc9200; }

Wrapping Up

I like to put all of this style in a separate style sheet and adjust it to fit my needs. It’s completely flexible so you can easily add or remove styles to suit your needs.

Header tags

It’s important to workout your page structure and a hierarchy of elements. Once your page structure is determined you can go ahead and use the header tags where necessary to allow the search engines know which content is important. Usually text should be put in ‘p’ tags with titles or headers being expressed in h1 h2 h3 h4 h5 h6 tags. There are six levels of headings in HTML with h1 being the most important and h6 the least.

Meta Tags

A much disputed topic. In particular the ‘keyword’ tag where you can put tags or ‘keywords’ describing your page or site content. Google recently spoke out about how they no longer take into account a pages keywords as it’s an inaccurate way to determine quality content. I won’t hurt to leave any keywords in your page, but just be aware that search engines no longer rate it.

The meta description tag is intented to be a brief and concise summary of your page’s content. If you provide a meta description within your page it will be used as description that apears in search results. You can see an example below for a Google search of ‘papermashup’.

Have a sitemap

In the Meta tags image above you can see the sub-links below my result in Google. These sub-links are created because I have the sitemap plugin for wordpress which automatically creates an XML file with links to all my posts which are given priority by a percentage. You can see my sitemap.xml file here. Then using the Google Webmaster Tools you can submit your sitemap.xml file which will then be indexed giving Google a better view of the structure of your sites pages.

Title and Alt tags

It goes without saying a picture paints a thousand words. Unless your a search engine. I’m sure one day google will have an algorithm that will rate your page not just on your HTML text but also images that accompany your page. For the meantime however we still need to add ALT and TITLE tags to images, not just for SEO purposes but also for accessibility and screen readers.

Link Building

Link building is all about who links to your site and who you’re linking to. For example if a lot of websites in the web design industry link back to my site over time my posts will start popping up more regularly in google searches. I know this works because after submitting my posts to a few well known sites my traffic from search engines jumped through the roof. On average 48% of my traffic a month comes from search engines. If i had any advice for link building within web development it would be submit your blog posts to community news sites like Dzone.com scriptandstyle.com and noupe.com

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

Take Time To Learn

In order to get into your new programming language you need time and commitment to perfect your new skill. Take the time to spend a day learning rather than and hour here and an hour there, you’ll learn more this way. it took me about a week to get comfortable with jQuery. I use jQuery everyday so it was relatively easy to get to grips with as the learning process was continuous, however you need sleep so your brain can de-fragment everything you’ve learnt that day.

Buy a selection of books

The truth is you just can’t learn a programming language in 24hrs, some books purport to teach you the basics in 24hrs. I’ve never found these books useful. I’d recommend buying a selection of books for whichever language your learning and sit down and read the basics. You’ll find some books easier to read than others so pick your books carefully. Remember you won’t be able to learn everything from a book but it’s a great starting point to start to understand the logic.

Collect tutorials and demos

Start building up a folder of download demos that you can refer to and reverse engineer. I find this very useful, and still do it if i want a quick fix for a project. Reading tutorials on your specific language will also give you a better understanding. generally tutorials are short and sweet and give you all the info you need to know.

Bug fixing

It’s inevitable that your going to run into code errors. Don’t pull your hair out, we all go through it, work through the error and go back on yourself to find out what the problem was. If your building an application, don’t just code it all then test it. Test your code as you go along, then if you find an error you’ll quickly be able to identify the problem.

1. You can serve your page elements from multiple servers each with a different ip address or hostname
2. Or create multiple subdomains to serve your content from

the second option is a more elegant solution which requires you to set up multiple subdomains that point to the same server. This technique fools web browsers into believing the page elements are being served from different hostnames, thereby allowing more than two-threads per server. For example you can set:

• images1.yourdomain.com
• images2.yourdomain.com
• images3.yourdomain.com
• images4.yourdomain.com
• images5.yourdomain.com

Anything simpler?

But fear not, there is a quick and easy solution that you can do with just HTML and CSS. Use Image Sprites. This reduces the number of image requests to the server. Combine all the images in your page into a single image and use the CSS background-image and background-position properties to display the desired image segment. Its very useful and used on big sites such as MySpace and Mashable.

There are a variety of web thumbnail services out there but the best and easiest to use by far is shrinktheweb.com

Using the Shrinktheweb.com Pro Features

• Specific Page Captures – “inside pages”
• Full Length Captures
• Custom Sized Captures
• Refresh On-Demand – queued instantly
• Custom System Messages – private label with your own system message thumbnails

Native Capture Resolution

• Capture using browser resolution of 800×600 or 1024×768
• Widescreen Thumbnail Capture
• Capture using any browser resolution (i.e. 1440×900, 1024×750, etc)

Check out the FAQ section for more documentation.

Lets add thumbnails to an application

I’m going to run through the concept of adding web thumbnails to an analytics application. Lets say we have a concept and want to display our data like the image below taken from the popular link shortening service http://tweet.me.it.

So we have our data in a database including the URL or link to our target site that we want the thumbnail for. In the code example below you’ll see that I’m just doing a simple database query in a while loop. You can see from my example that it’s very easy to add web thumbnails from shrinktheweb.com to your application and sites, and it improves the readability, stickiness, and retention rate of your users.

This is the kind of query used to create the example in the image above.

<?php

// simple database query
$result = $connector->query("SELECT url, title, clicks  FROM analytics order by date ASC LIMIT 10");
while($row = $connector->fetchArray($result)){			

// store the variable from the database
$clicks = stripslashes($row['clicks']);
$title = stripslashes($row['title']);
$url = stripslashes($row['title']);

?>

<div class="analytics">
<img style="float:left;" src="http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=YOURKEY&stwsize=tny&stwUrl=<?php echo $url;?>"/>
<?php echo $title;?>
<?php echo $url;?>
<?php echo $clicks;?>
<div style="clear:both;"></div>
</div>

<?php
// end of while loop
}
?>

Here are a few web trends that i think we will see emerge in 2009.

1. Firstly IE6 must die this year right? I’m sure every web developer would be happy to see the backside of IE6. There’s a fairly good reason why as well. IE8 is now in the second phase of public beta, so if all goes well i predict that it should be released at the end of this year, meaning that at least everyone stuck in the past can upgrade to IE7 . Although this isn’t likely as large corporate companies refuse to upgrade.
2. Something that will start to emerge in 2009 but probably not really get going until the later part of the year, is users keeping their details in one place known as data portability, like OpenID centralising your personal information online. We are starting to see many sites like Vimeo and Joost adopt services like Facebook connect and Google friend connect, sites using these services are making it easier and easier for users to interact with their sites. With the current climate of socialmedia being adopted my the  masses this can only increase as the year progresses.
3. We will start to see more of a shift from traditional advertising to more refined search advertising, making products even more relevant to users, as the price of TV, Radio and more traditional forms of print advertising rise advertisers will look to make their budgets stretch.
4. Blogging is still on the rise, 2008 saw more professionals adopt blogging as a way to express their personal views, if you don’t have a blog or micro blog in 2009 you’ll simply be left behind. Twitter has opened the door for micro blogging with the quick 140 character ‘what are you doing’ more and more people are using this as their life stream and a way to communicate global issues.
5. Cloud computing made the headlines a few months back with the Microsoft data center being unveiled. This will be a big part of businesses in 2009 Google and Microsoft battle it out to see who will be the provider to go with. This will probably start to take off but it will probably take 3-5 years to take hold properly.
6. We will see many more Rich user experience sites within the coming year, more and more sites interact like desktop applications, and we are moving away from plain HTML pages to complete flex and flash sites.
7. Local Search will be key in 2009, making products and services more refined and relevant, this will also open up new advertising and sponsorship opportunities.

I’m sure there are many more trends that we’ll see emerging as the year progresses if you have and of your own or think some of mine are wrong, let me know why, below.