| Web development blog, news and tutorials

Home > Monthly Archives: October 2011

Page 1

How To Change A Page’s Background As The User Scrolls

JavaScript jQuery Oct 31, 2011 10 comments

jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we’re going to use jQuery and two plugins to gradually change a website’s background as the user scrolls the page.

We’ll be using the Color Animation and Waypoints plugins. The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function when a user scrolls past a certain element. I’m sure it’s obvious how these two plugins will help us achieve our goal.

First things first, let’s set up our project folder. Create index.html and style.css. Leave them in the root directory. Then, add a js folder. This is where we’ll put our JavaScript files.

We can grab the newest version of jQuery here and put it in the js folder. Next, create a script.js file in the js folder.

We’ll use script.js to add the Color Animation and Waypoints plugins. Get Color Animations from here and Waypoints from here. We can paste these two plugins directly into our script.js file.

The Markup

The HTML markup in this tutorial is going to be very simple. We’re just going to have a bunch of paragraphs and headings. The idea is to simulate a fairly long page so we’ll have a lot to scroll through.

Start by adding this code to index.html:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> </div> </body> </html>

This gives us a nice basic structure to start from, but remember, we need to include our JavaScript files too. Before the closing head tag, add these two lines:

Inside the div with the class container add the following code:

<h1>A Story About Colors</h1> <h2 id="chapter1">In The Beginning, There Was Yellow</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accum. Sed a ornare massa. Donec ac sapien a sem aliquet facilisis. Nulla vitae nunc tortor, at luctus risus. Integer viverra sapien a nibh condimentum sed luctus lorem interdum. Aliquam...

Leo Aljiro says: Demo would be nice but I can see you really want us to try it out on our own to see the effect. Either way useful tutorial....

5 iPad Apps Every Web Developer Must Have

Tools Oct 26, 2011 14 comments

When you are stuck waiting in line or for an appointment your iPad can your saving grace.

Not just to check your Google+ account or play a quick game of Trailer Park Zombies, but to get actual work done.

That is if you have the right apps.

Listed below are some of the best apps for web developers. And this list isn’t one that only contains a few time management and task list apps. You might actually be surprised at how much you can get done with your iPad.

iMockups

Quickly and easily create wireframes for websites and applications on this app created specifically for the iPad. iMockups lets you use snap-to-gridlines and a customizable canvas to layout not only what a web page may look like, but also iPhone and iPad apps.

Projects can also be shared with other iPad users for easy collaboration or exported as a PNG or Balsamiq BMML format for those still tied down to a desktop.

Winner of Applied Arts – Best Mobile App 2010 Award

App Star Runner up – Best Utility App 2010 Award

Cost: $6.99

Penultimate

There was a time when creative types had to jot down all other notes, ideas, sketches, etc. in whatever notebook they had on hand.

The problem is, notebooks get lost or left behind and then there’s the jerk in Starbucks that spills his mocha grande whatever all over your stuff.

But those were the days before iPads and Penultimate. This app lets you organize your handwritten notes and drawings in a collection of digital notebooks organized by project, client or whatever.

You can even send these notes to others via email, Facebook or Twitter. Now if you could just keep that guy from Starbucks away from your iPad…

Cost: Free

OmniGiraffe

With the high cost of this app, you would expect great things, and that is what OmniGiraffe delivers. Mimicking the power found in a desktop solution, this app allows you to create diagrams, process charts, page layouts, wireframes and even graphics to use on your sites.

Cost: $49.99

iThoughtsHD

Mindmapping is one of the most highly touted methods for organizing your thoughts and helping you recall information at a later time. And an iPad is a perfect platform for this type of application.

Not only does iThoughts HD make it easy to plan projects, set goals, take notes, create task lists and brainstorm new ideas, but it also works seamlessly with these desktop applications:

Freemind/Freeplane Novamind MindManager XMind iMindmap Mindview (Windows only) ConceptDraw MINDMAP MindGenius

Cost: $9.99

Gusto

Who would have thought that you could organize, edit, publish and then preview your web projects all while sitting in your doctor’s waiting room? Gusto makes that entirely possible.

Boasting a build-in FTP/SFTP server that allows you to work on files locally and publish them with the simple touch of a button.

Gusto also provides users with a rich interface when it comes to editing files. Syntax highlighting makes your code in a variety of languages easy to read, tabbed editing gives you the ability to work on multiple files at once and the option to preview files locally or remotely gives you the option to see changes before you publish.

Did I leave your favorite app off the list? Let the rest of us know in the comment section.

However the most convenient feature is Gusto’s persistent project state that allows you to leave the application and return to your Gusto workspace just as you left it.

Cost: $9.99

...

Zoomy says: You should certainly add ZoomNotes to the list. It is a note-taking/drawing app which uniquely has unlimited zoom and also has a...

Wrapping Your Head Around Canvas: Part 3

HTML5 Oct 25, 2011 one comment

We’ve only truly begun to scratch the surface of possibilities with our little series about Canvas, and as we journey deeper into the API you can see the benefits that it has over Flash technology concerning mobile device/browser support.

Today I’d like to continue our adventures in learning the basics by talking about working with images and text.

Working with Images

It’s time to introduce the drawImage method that does exactly what you thought it would, it inserts images. Just like with patterns we’ll have to wait for the image to load before you can initialize drawImage. Let take a quick look:

ctx.drawImage(imageOjb, dX, dY);

Using the onload property of the image object, should place it on your canvas. Your code should look similar to this:

window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var dX = 20; var dY = 20; var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj,dX,dY); } imageObj.src = "zombies.jpg"; }

That wasn’t too hard was it? Now you can add images all over your canvas. The script above results in the image being placed at the coordinates of 69, 50 on our canvas. Below you can see how our fore into images turned out:

To resize an image using Javascript you only have to modify the existing code from earlier by adding a width and height property:

var dX = 20; var dY = 20; var dWidth = 420; var dHeight = 250; var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, dX, dY, dWidth, dHeight); }

Now we’re getting into the cool stuff and we’re going to crop, invert colors, and pixelate the image.

So let’s say you like everything you’ve been able to create up until this point using canvas, but now you’d like to crop the photo you inserted earlier. That’s no problem, you’ve got that covered by introducing some new variables into your JavaScript called sourceX, sourceY, sourceWidth, and sourceHeight.

var sourceX = 150; var sourceY = 0; var sourceWidth = 150; var sourceHeight = 150;

Now we’ll change the destination X, Y, Width, and Height to parse through the variables we created above.

var dX = canvas.width/2 - dWidth/2; var dY = canvas.height/2 - dHeight/2; var dWidth = sourceWidth; var dHeight = sourceHeight; var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,...

Joshua Rapp says: Duly noted Tom. I have linked to my previous article in Part 4 (coming soon) and you can find Parts one and two listed under...

New methods in jQuery 1.6

jQuery News Oct 24, 2011 2 comments

jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library.

In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements.

Delaying the ready event with the holdReady() method

The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. As of jQuery 1.6 we can now postpone the triggering of this event for an arbitrary length of time in order to wait for other conditions to be satisfied, such as the loading of a plugin.

It’s a dual-purpose method, as is the jQuery way, and can be used to both delay the event and release the event using the same simple signature. The method accepts a Boolean argument which specifies whether the event should be held or released.

One downside to this method is that it should be called as early in the document as possible, such as in the <head> of the page, and can obviously only be called after jQuery itself has loaded. As we know, for performance reasons, scripts should usually be placed as close to the end of the document as possible, so moving jQuery to the <head> should only be considered when absolutely required.

Using holdReady() is super easy; as early in the document loading as possible simply call the method with the value true as the argument:

jQuery.holdReady(true);

Then, once the additional file(s) you require have loaded, call the method again with the value false:

jQuery.holdReady(false);

Adding and removing element properties

The prop() method is a way to explicitly retrieve element property values. There is a subtle difference between properties and attributes and this difference used to cause occasional issues when trying to get or set property values using jQuery’s attr() method.

The classic example is with checkbox elements; there were sometimes issues when trying to dynamically set the checked property using the attr() method. When the prop() method was released in version 1.6 the attr() method was changed so that it retuned only the initial state of the property, however this was changed in the 1.6.1 release so that it also returns the current state when using attr(). To use the prop() method we use the same syntax as with attr():

$("input[type='checkbox']).prop("checked");

The method in this format returns the current value. To use the method in setter mode we just supply a second argument specifying what we would like the value to be.

The prop() method can also be used to set custom properties on elements, and you should note that the method only returns the property value for the first element in a collection, not each element in the collection.

To remove custom properties, the new removeProp() method is also available since jQuery 1.6. This method should only be used to remove custom properties; if native properties are removed it is not possible for them to be re-added. Custom properties should always be removed before the element that they have been added to is removed from the DOM in order to prevent memory leaks in old versions of IE.

Promise objects

The new promise() method returns a promise object that can be used to execute arbitrary code once all actions on each element in the collection the method is attached to have completed. By default the promise object monitors fx queues, but custom queues can also be specified by supplying an optional first argument to the method. The object that the promise methods are attached to can also be specified using an optional second argument to avoid creating a new object.

The method can be used in conjunction with methods such as done() to execute a function when all animations on an element have completed:

$("#animated").promise().done(function () { //do stuff });

A new selector

We can now make use of the :focus pseudo-selector to select a focused element, or determine whether an element has focus, a great new addition that could help save on convoluted work-arounds.

New deferred methods

jQuery 1.6 brings two new methods for use with deferred objects; the first is the always() method which can be used to execute a function regardless of whether the deferred object is resolved or rejected. The second new method is pipe(), which can be used to filter deferred objects either when they resolve or fail. The method returns either a filtered value which can be passed to the done() or fail() methods of the deferred object the pipe() method is attached to, or a new promise object.

Method updates

In addition to the totally new methods we’ve looked at so far, some of jQuery’s existing methods have also been modified, these include:

attr() This method now returns undefined when retrieving an attribute that has not been set closest() This method now accepts jQuery elements and DOM nodes as the filter find() This method now accepts jQuery elements and DOM nodes as the filter Is() This method now accepts jQuery elements and DOM nodes as the filter map() This method can now iterate over objects as well as arrays nextUntil() This method now accepts jQuery elements and DOM nodes as the filter parentsUntil() This method now accepts jQuery elements and DOM nodes as the filter prevUntil() This method now accepts jQuery elements and DOM nodes as the filter Undelegate() This method can now unbind all...

Kaloyan Banev says: jQuery is one of my favorite frameworks, probably same apply for MooTools. Recently I've checked different libraries, but none is...

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

Bundle of Bundles! 2,500 Vector Icons - only $37!

Magnolia: 150+ Professional Infographic Elements - only $9!

Create an HTML5 Browser Game from Scratch - only $19!

Common Mistakes to Avoid When Coding in PHP

PHP Oct 19, 2011 15 comments

Despite the high expectations placed on them at times, developers are human. They were the last time we checked anyways.

As humans, we are bound to make mistakes from time to time. And simple, common mistakes often slip past our filters the more comfortable we become with something.

Think about it, when you first started writing code you most likely checked every line to make sure things were perfect. As you grow more comfortable with the process, little things often get overlooked and mistakes are made.

But knowing what these common mistakes are and how to avoid them can really help speed up the development process and keep our clients smiling.

Below you will see some of the more common mistakes that are made with PHP, even by advanced developers…

Poor Housekeeping

People can get lazy and code can get messy.

To keep it organized you can use things like comments and indents. I know, these are basic best practices but think to yourself, when was the last time you hacked up your code without commenting?

I thought so.

How about breaking your code into modules based on function? Many agree that as a rule of thumb your function should not exceed one page on your screen unless it is necessary.

Another good housekeeping practice is to backup all of your files before you upload changes. Sure you may be in a hurry, but the time it takes to make a quick backup is far less than having to go back and undo a disaster.

Forgetting Your Punctuation

One of the best things about PHP is that you don’t need expensive software to write code in. Any text editor will do.

Unfortunately, a basic text editor won’t tell you if something isn’t right.

One of the most common, and basic, mistakes made when coding in PHP is to either forget or misplace a quote, brace or semi-colon causing a syntax error. Before you try to run anything, make sure that every:

[ has a ] ( has a ) { has a }

Now check to make sure that all string keys are enclosed with matching quotes. Remember, “ does not match with ‘.

While you are at it, double check the semi-colons to make sure they aren’t missing or misplaced.

Forgetting to Validate Input

By now you should know that user provided data cannot be trusted. Allowing this from your users is one way that cross-site scripting, buffer overflows and injection flaws can all be used to attack your site. Unfortunately, it is also one of the most common mistakes people make when coding in PHP.

In the following lines of code, notice that the three variables are not validated:

$birthdate = $_GET['birthdate']; <br> $birthmonth = $_GET['birthmonth']; <br> $birthyear = $_GET['birthyear']; <br>

By adding the following lines of code we use preg_match to perform a regular expression match against the input. In our birthdate and birthmonth variables it is checking to verify that a one or two digit number between zero and nine was entered. For birthyear, it needs to be a four digit number between zero and nine:

if (!preg_match("/^[0-9]{1,2}$/", $birthdate)) die("That is not a valid date, please check that again."); <br> if (!preg_match("/^[0-9]{1,2}$/", $birthmonth)) die("That is not a valid month, please check that again."); <br> if (!preg_match("/^[0-9]{4}$/", $birthyear)) die("That is not a valid year, please check that again."); <br>

We are able to make sure that the proper type of characters are input by the users are actually numerals and only numerals that we expect to be entered. Anything else results in an error being thrown back to the user.

So I call on our readers to share with us some of the most simple mistakes we have made over the years. And don’t worry, we’re all human here.

...

Andrew woods says: The preg_match function is part of a suite of functions that's use Perl compatible regular expressions. That's where the 'p' in...

Implement an Image Slideshow Using a jQuery Plugin

jQuery Oct 18, 2011 3 comments

Image slideshows are a dime a dozen on the web.

You see them used for advertisements, featured articles, product showcases, and plain old photo reels.

Today, we’re going to quickly implement a slideshow using the jQuery plugin Cycle by Mike Alsup.

Cycle is a great plugin with years of development behind it. We’re going to use the Lite version. It lacks some of the features of the full version (like different transitions), but it is super lightweight. While the full version is 49kb, the lite version weighs in at only 8kb.

Let’s begin by creating a project folder. Within this folder create two text files and rename them to index.html and style.css. Also, create two sub-folders named js and img. This is where we will put our javascript files and images, respectively.

Next, we’re going to need the JavaScript library jQuery and the Cycle plugin file. Download the latest version of jQuery here and Cycle here. Put them both in the js folder.

Note: If the files open in your browser as text, right-click the link and “Save as.”

Find, or create, five images for your slideshow and place them in the img folder. Make sure they are all the same size for now.

The Markup

Now, using your favorite text editor, open index.html. Paste the following code in:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div> </div> </body> </html>

The above code sets up a basic HTML file and includes our stylesheet. We also need to include our JavaScript files. Before the closing head tag, include the following lines:

Now index.html should look like this:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="js/jquery-1.6.2.min.js"></script> <script src="js/jquery.cycle.lite.js"></script> </head> <body> <div> </div><!--...

Jens Grochtdreis says: This slideshow is nothing more than a list of images which is presented one after the other. So why don't you use an ordered or...

CSS3 Media Queries: Part 2

CSS Oct 17, 2011 one comment

With an emerging market of innovative mobile devices it has become more important to create responsive designs.

In my last article (Part 1) we started with the setup of our HTML and our media queries. The pad.css was the easiest to format due to the change in the screen resolution.

I saved the formatting of the handset for the last part of this series because it’s the device that will start to see changes to our fluid layout. Every site developed without flash content is mobile compatible but is the content mobile friendly?

A couple of the first few changes we’ll make to make our content more mobile friendly is to increase the fonts sizes and the line heights in the body:

body { font-size: 16px; line-height: 20px; }

We need to reduce the width of our design to fit the device as well. By decreasing the size of our container from 680 pixels to 300 pixels, we can make this fit within our media query. There is another factor we have to consider when developing our HTML for iOS devices, we’ll add a meta tag in our head section:

If you take a look at your device and refresh, your design should look like crap.

But that’s ok, really. We’re going to fix it and make everything better because we can remake the navigation in our ‘mobile.css’ file.

Let’s try and make our navigation a bit more mobile friendly much like the rest of our mobile layout.

I’ve given my navigation menu the id of menu; if you want to utilize a bit of HTML5 tagging feel free to use the tag ‘nav’. I just happen to do a lot of corporate work that needs to be compatible with legacy browsers like IE7:

#menu { height: 40px; width: 280px; font-size: 1.143em; line-height: 20px; margin: 5px auto 5px auto; text-align: center; }

Make sure to cover your bases with your unordered list as well. The reason for changing the ul’s width is the fact that it’s a little too large for the device at the moment. Set the margin to ‘margin: 0 auto;’ and the width to the same size as the #menu at 280 pixels.

Since you’ve taken the moment to address the changes in the unordered list we’ll need to pay attention to the list items as well. Depending on the number of links, we’ll need to consider how we would like them laid out both in portrait and in landscape. For the intended purpose of this article, we’ll stick with portrait for now. Let’s locate the #menu li and take a look at our code:

#menu li { width: 260px; display: block; /*--As opposed to inline for Screen--*/ margin-left: 0px; }

Remember to always check your device as needed throughout development. If you don’t have a suitable device, you can use Dreamweaver’s Multiscreen preview or any other online tools at your disposal.

Applications such as PhoneGap and AIRiPad are just a couple to name a few. By now our navigation menu should start taking shape on your mobile device, whether you’re using text links or the menu in your design is a group of buttons, we need to rethink the padding of the links. This makes the links easier to engage on the smaller screen.

/*--- I like to shorthand a lot of my CSS ---*/ #menu a:link, #button { padding: 5px 1.5em 5px 1.5em; margin: 5px 5px 5px -35px; }

From this point forward we’ll work on more of making the existing content in our design fit into the size of the mobile device, so let’s keep in mind any images you may have for logos of featured areas.

The screen width will more than likely be limited to 320 pixels (iPhone 3Gs). Using the min-device-width and max-device-width properties, we can do our best to make sure that our design stands up to the intended integrity whether the device is portrait or landscape.

Something I didn’t cover last time is that you can include your media queries in one external CSS file either at the bottom of your main sheet or in their own separate sheet. Below is an example of using the query in your main stylesheet with a method of @media:

/*--- Responsive CSS for mobile devices---*/ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body { font-size: 16px; line-height: 20px; } #container { width: 300px; margin-left: auto; margin-right: auto; } #menu { height: 40px; width: 280px; font-size: 1.143em; line-height:...