Web development blog, news and tutorials - Developer Drive

Installing and Configuring a WAMP Server on Your Computer

There are times when we are so anxious to jump into creating something new that we forget to cover the basics. For web developers it is important,...
Read more →

Creating a Slider Control with the HTML5 Range Input

HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding...
Read more →

20 Best Sites Built with Ruby on Rails

Ruby on Rails became a popular web application framework because of how easy it promotes the rapid prototyping methodology used by web developers...
Read more →

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

CSS HTML Aug 1, 2012 5 comments

The official January 2011 launch of the robust HTML5 has brought with it a number of powerful coding elements. Among them is the <progress> tag, a very useful tool in putting together quick, attractive online presentations.

CSS3 provides a highly flexible methodology for customizing default HTML5 tags. At present, both technologies are undergoing considerable revision. ‘Pseudo-elements’, such as those prefixed by -moz- and -webkit-, were implemented within the CSS3 framework to allow web developers the ability to create new and experimental features targeted toward specific browsers.

Mozilla Firefox corresponds to -moz, while Google Chrome and Apple’s Safari fall under the auspices of -webkit. These two pseudo-elements are the most widely used.

Progress Chart

Charts and bar graphs have long been utilized for instant viewer comprehension of raw data, as opposed to only showing the statistical figures.

Say, for instance, that you wanted to display an easily updated progress report pertaining to the completion status on a number of ongoing company projects. Plugging the relevant data into the <progress> tag is an easy way to do so.

HTML5 coding:

<body> Project Completion Status Project #1 <progress id="bar" value="6" max="9"> 6 of 9 stages completed</progress> Project #2 <progress id="bar" value="20" max="100"> 20% complete</progress> Project #3 <progress id="bar" value="12" max="20"> 12/20 components completed</progress> Project #4 <progress id="bar" value="4" max="8"> 50% complete</progress> Project #5 <progress id="bar" value="9" max="10"> 9 out of 10 stages completed</progress>...

Java Interview says: Yeah, robust HTML5 has come around with some useful coding elements. Basically I am a man of JavaScript but after watching the...

PHP Error Checking

PHP Jul 31, 2012 5 comments

“Just when you think you’ve made something foolproof, God makes a better brand of fool.”

This maxim of manufacturing also applies to software development, especially on a highly accessible technology like web applications. As much as programmers attempt to anticipate every possible action or combination of actions that a user can take when encountering a web application, no one can foresee them all. When the user takes an unanticipated course of action and “breaks” the application, the software needs to catch them before they fall.

Die() Function

One of the techniques that early PHP programmers used to catch errors was the “die” function. When the program would “die”, this function stops the script and displays an error message.

<?php if(!file_exists("hello_world.txt")){ die("File not found"); } else { $file=fopen("hello_world.txt","r"); echo(“Hello World file found”); } ?>

Without the die function, the program would return a specific error message, but not one that users could readily understand:

Warning: fopen(hello_world.txt) [function.fopen]: failed to open stream:No such file or directory in C:\wwwroot\developer_drive\file_opener.php on line 2

Exception Handling

As with other C-based languages (C#, Java, etc.), PHP 5 has a technique for catching exceptions. The keywords “try”, “throw” and “catch” find exceptions and enable better error handling.

Try: Any function that employs the use of an exception to handle errors should be in a “try” block. If the exception is not triggered, the rest of the script will continue executing as written. If the exception is triggered, the exception is said to be “thrown”. Throw: The “throw” block triggers an exception. For each “throw” block, there must be one or more “catch” blocks. Catch: The “catch” block retrieves an exception and instantiates an object that holds the exception data.

<?php try { $error = 'Throw this error'; throw new Exception($error); // Code following an exception is not executed. echo 'This line is ignored'; } catch (Exception $e) { echo 'Exception caught: ', $e->getMessage(), "\n"; } // Continue execution echo 'This line is executed.'; ?>

The Exception class that the catch block creates contains several methods: getMessage()- displays message of exception getFile() – finds error source filename getLine() – finds error source line getCode() – displays code of exception getTrace() – creates an array of the backtrace() getTraceAsString() – formats string of trace array

Trigger Error

In most cases, programmers attempt to avoid errors. In some instances, however, developers may want to test their error handling capabilities. The “trigger_error” function throws an error message when the program encounters an error:

<?php $text= “Hello”; if ($text !== “Goodbye”){ trigger_error(“Say Goodbye. Error Triggered.”); } ?>

Error Messages

Not only do applications have to catch errors before the user encounters them, they must present the reason for the error in a way that the user will understand why it “broke”.

Error messages should always be easy to read for the users; these message allows the user to remain confident that the application can be fixed. The error messages also help developers chase down potential problems.

Remember, confused users can become angry users, and a user’s anger can lead to a developer’s impending unemployment.

...

Alex Vernacchia says: You would use try/catch when you throw an exception as an error and you want to don't want to break your application. For...

6 Ways Web Developers Can Damage Their Career

Miscellaneous Uncategorized Jul 30, 2012 22 comments

The web development industry is one that is always growing because of how we use the web. No longer do we expect the Internet to simply host a digital pamphlet for a business.

The expectations nowadays are for a site to be rich with content, provide the means for visitors to interact and be dynamic in every interaction.

With the demand at an all time high, freelance web developers may think that there is little they could do to harm their career. Unfortunately, there are many ways that people in this industry sabotage themselves when it comes to their career.

1. Clinging to technologies

Like any industry, web developers usually work with their favorite languages, databases or platforms. However when it comes to technology, we sometimes tend to be a bit hardheaded.

Whether you prefer to work with Micro$oft, Open Sores or you are a die hard Apple fanboy, painting yourself into a corner when it comes to any particular technology is never a good thing. Be open to learning new ways to do things and you will find more doors open to you professionally.

2. Fail to network

Attending conferences and trade shows are a great way to learn about what is new in the industry, but it is also a great way to network with other developers.

Maintaining relationships within the industry is extremely important. You could find it a valuable source of referrals for clients and a support system to help you solve problems in your own work.

3. Taking on projects for family and friends

So your aunt wants to sell her fruit jellies that made her a local legend. Of course, you are the first person that is called on to help her launch the online portion of her business.

Now you are stuck with a client that can be extremely hard to please and they may be expecting you to work free of charge. Family and friends often have trouble distinguishing between personal and professional boundaries as well.

Of course if you say no, you might not be welcome when the holidays come around.

The best bet when taking on these projects is to set the parameters right from the beginning and charge a small fee. This reinforces the fact that you are actually paid to do this type of work. It also helps let them know that they are not your only client.

4. Underbidding on a project

I am sure we can all remember a time early in our careers when we underbid on a project, but it happens even to more experienced developers as well.

Whether we blame the economy, the scope of the project or the slick talking of the project manager underbidding never works out for the best. Even if we need the work.

First of all, paying you less only undervalues your importance to the client. If they see you as the cheap alternative, they won’t view you as a professional.

Secondly, underbidding seriously waters down the market. Colleagues who are fighting for every client quickly lose respect for those who undercut them every chance they get.

5. Failing to market

I have actually met web developers who don’t have their own portfolio site. That’s kind of like the doctor who smokes and eats fast food for breakfast, lunch and dinner.

Marketing your skills is a must if you want to grow your freelance business. But an online portfolio isn’t the only way you should be doing this.

Contribute guest posts to web development blogs and web sites, answer questions and solve problems for others and spend some time (and money) advertising.

6. Forgetting why you were hired

The bottom line is a developer is hired to provide a service for a client that lacks the technical knowledge and/or skills to do the job themselves.

So when they don’t understand that AJAX won’t be used to clean their web site it is up to you to educate them.

Yes, working with clients who don’t make any effort to understand the technology that powers their web presence can be extremely frustrating, it is imperative that you don’t come across as pompous or intolerant.

Of course, we would like to hear from our readers any thoughts they may have on things they feel can “damage” their careers.

...

Sean Meyer says: I understand that we web developers are the ones that sometimes need to educate our employers but that doesn't always work. ...

W3C ‘Media Queries’ Proposal Boosts Responsive Web Design

CSS HTML Jul 26, 2012 one comment

Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers.

The CSS Working Group’s proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation.

Media queries consist of a media type (ex. screen or print), combined with defining expressions that pertain to specific media features, like height and width, in the following general format:

@media type { HTML tag { expression: value } }

The growing influence of Responsive Web Design has ushered in more fluid design styles that can automatically adapt page content to a user’s viewing device. It is most commonly associated with the industry mandate to develop websites that are compatible with desktops and laptops, as well as on smartphones.

Media Query Support

Established W3C standards, like HTML4 and CSS2, already support style variances based on media types.

For example, a stylesheet can specify that different fonts be utilized for screen viewing and for print.

In CSS format, this looks like:

@media screen { body {font-family: tahoma, sans-serif; font-size: 14px;} } @media print { p {font-family: times new roman, serif; font-size: 12px;} }

The above command directs a user agent to display a 14px Tahoma font on screen, but if the text content is printed the designated font will be Times New Roman, at 12px.

The HTML directive to use a certain stylesheet, based on the desired media type, is expressed as:

In general, ‘sans-serif’ fonts (like Tahoma and Verdana) are more readily viewable on a computer screen, while serif fonts such as Times New Roman are typically utilized for printing purposes. This is reflected in the stylesheet designations above.

Media Query Specifics

As defined, a media query will only be deployed when the user agent determines that the answer for a given directive is ‘true’.

A query can address more than one feature in the same expression – for instance:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Limiting statements, such as ‘not’ and ‘only’ can also be utilized:

Media Features

‘Features’ act as qualifiers for media queries, and describe the requirements for an output device.

One such feature is ‘device-aspect-ratio’, which correlates with device orientation, and would be shown as:

In a mobile device that allowed for both landscape and portrait views, the above stylesheet command would ensure that if the widescreen orientation was selected (landscape), then a browser would render web pages according to the correct set of style rules.

Other features have a ‘min-’ or ‘max-’ prefix, and are tied to a specific measure, like:

In the above case, a mobile device possessing a screen width of less than 500px would be targeted by the mobile.css stylesheet.

Say, for instance, you wanted to target devices with a minimum color-index of 256, the command would look like this:

In another example, if you desired to ensure that a document was printed by an output device of least 300dpi capability, the CSS media query would be in the following format:

@media print and (min-resolution:...

Baytech Web Design says: Well great codes and boost in web designs steps i like it very much thanks

Hot deals

See all deals →

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

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

1000+ Royalty Free Vectors + 50 Free Textures - only $17!

Beautiful Solomon Font Family (12 fonts) - only $9!

What You Should Know About WordPress SEO

WordPress XML Jul 25, 2012 12 comments

When it comes to publishing tools, WordPress is most likely on top of the food chain. Its simplicity and ease-of-use is especially favored by publishers and its wide community support by developers makes it particularly attractive for plug-in development. WordPress is also an excellent medium to improve your website’s search engine rankings. The countless number of SEO plugins that have been developed for WordPress are a good start for most people. SEO for WordPress is however slightly different from other platforms. What should you know about WordPress SEO?

Permalink Structure

When you open a web page from a website running on WordPress, you will notice that the URL is just a number with some symbols. This is usually not very descriptive and WordPress uses it to make it easy to organize your posts and pages. For SEO purposes however, this is not good news. Fortunately, you can change your permalink structure to make it more descriptive of your posts right inside your WordPress dashboard. Navigate to the “Common Settings” section and change the settings from “Default” to “Custom Structure”. Your posts will not only reflect well on search engines, but it will be easy for people to easily link to them.

Optimize Titles

Search engines like Google take your titles as important ranking factors and thus have a direct impact on your SEO. Its not only search engines that put more weight on your page title, but people scanning results pages will also click on what they consider more relevant, based on the titles they see. Most titles on WordPress blogs and sites follow the syntax: Blog Title > Blog Archive > Blog Title To get people clicking on your posts however, you need to have your titles use the syntax below: Blog Title > Blog Archive > Blog Title

Image Optimization

One of the best tools for image optimization in WordPress is the Smush.it plug-in. This tool removes unnecessary bytes form image files without changing their look or visual quality. The plug-in strips an image’s meta data from JPEGs, optimizes JPEG compression, converts certain GIFs to indexed PNGs and strips the unused colors from indexed images. Adding relevant file names and title and alternate text (ALT) definitions to describe the image makes it easy for both search engines and visually-impaired visitors or those accessing your site from a mobile device that strips the images, visually appealing.

XML Sitemap

An XML sitemap is necessary to help search engines like Google and Bing better index your blog. A sitemap helps crawlers see your entire site structure making it possible to have new content indexed faster every time you push a new post on your site. Plugins like Google XML Sitemaps can help generate a Sitemap and notify the major search engines.

Add Breadcrumbs

Breadcrumbs are links usually added above the title post and they allow users to easily navigate your site and allow search engines to determine your site structure more easily. Ensure that breadcrumbs link back to your homepage and categories. You can use a WordPress SEO plug-in like the Yoast plug-in to accomplish this.

Others Ways you can Optimize

There are other things you can do to further improve your search engine rankings. These include cleaning up your code, preventing indexing of irrelevant pages on your site, pagination and linking to related posts on your site. There is a lot you can do when it comes to WordPress SEO, but remember that creating great and compelling content should always take priority.

...

Dave Colgate says: Hi Swamykant, yes you should. Use Google Webmaster Tools to submit one and also make sure that the URLs within the sitemap file...

Displaying the Progress of Tasks with HTML5

HTML5 Jul 24, 2012 5 comments

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can’t rely on it just yet.

For demonstration, we are simply going to update the progress element using a JavaScript timeout. We will allow the user to start the task by pressing a button, which we will disable while the task executes, updating the progress element and a textual indicator throughout. When the task is complete, the button will be enabled again and the user can start the task over again if they wish. This is how the progress bar looks in my installation of Firefox while the function is executing:

Create a Page

Create your HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will place our JavaScript function in the script section and the page elements in the body next.

Add the Progress Element

Add the progress element to the body section of your page, together with a little informative text:

Task progress: <progress id="prog" value="0" max="100"></progress>

We are starting our task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100. We will update the value from JavaScript, so this markup is purely for the initial display of the progress element when the user browses to the page.

Provide User Interaction

Let’s allow the user to start the progress of the task by pressing a button. We will also indicate the percentage of progress in a textual element:

The input element will start the task executing, which will cause the JavaScript function to update the progress element. We will also update the div with the percentage indicator as the task progresses.

Implement the JavaScript

Let’s now complete the JavaScript for our task progress. In the script section of your page head, add a few variables to track progress:

//current progress var currProgress = 0; //is the task complete var done = false; //total progress amount var total = 100;

Now add the function outline:

//function to update progress function startProgress() { }

Inside the function, first retrieve references to the page elements we are working with:

//get the progress element var prBar = document.getElementById("prog"); //get the start button var startButt = document.getElementById("startBtn"); //get the textual element var val = document.getElementById("numValue");...

Laxmeesh Joshi says: This is in the case of JAVASRIPT Tasks.. How about task where-in u wil click button and code-behind file executes for Long...

Use Compass In Your Sass Projects

CSS RoR Jul 23, 2012 3 comments

If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven’t decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It’s well worth the time and will make your coding and development life a lot easier.

Today, we’re going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run off of Ruby.

Installing Compass

Compass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed. If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to install Compass and start working with it.

Now that we know we have Ruby running, we can install Compass. To install Compass, jump back into the Terminal and run this command:

sudo gem compass install

This will install Compass and you’re all set. Next, we’ll create a Compass project.

Creating a Compass Project

The creation of a Compass project is fairly unique. Again, we use the command line to set it up, but the commands can be a little different depending on what you want to call your project. Head on over to compass-style.org/install and run through their project creation ‘wizard’. It will help you set up either a new or existing Compass project, as well as naming the project, determining whether or not to set it up with Blueprint’s or Compass’s default stylesheets, and more.

For example, the project that I’m creating uses this command:

compass create developerdrive

This creates a new folder called developerdrive in the directory where I run the command line. [Hint, use the command line's "ls" and "cd" commands to list the files and change directories to make sure you install your files in the place you want them.]

So now that you’ve got those files installed, let’s look at how we can use some of Compass’s features.

Using Compass

So Compass, which as we’ve mentioned is a form of Sass, uses a set of mixins and functions that can help you powerfully and quickly create websites, web apps, and more.

To get started, visit Compass’s website and check out the References section. This will give you an extremely detailed look into all that Compass can provide.

Let’s first look at a CSS reset, which many people include in every one of their projects. Many of the resets are very robust, and usually you have to head over to Eric Meyer’s website to get the reset. But if you’re running a Compass project, including a CSS reset is as simple as

@import "compass/reset";

in your Sass file. That one line in .scss will compile (via CodeKit or the command line) to output

@mixin global-reset { html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { @include reset-box-model; @include reset-font; } // Unlike Eric's original reset, we reset the html element to be compatible // with the vertical rhythm mixins. html { @include reset-body; } ol, ul { @include reset-list-style;...