Not only is the software very powerful but the underlying classes and functions give developers an all-access pass. It is extremely simple to develop apps and modules within WordPress. Today we’ll be looking into author meta data functions for building an “About the Author” box.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Towards the end of single post pages you may frequently see a box explaining a bit about the writer. This will generally include their Gravatar or some sort of photo, a description about them, and possibly links to their profiles or personal website.

If things seems difficult check out some of WordPress’ documentation on template tags. These include much of what can be covered in this project and a whole lot more. The WP community also runs a very pleasant forum for in-depth system questions.

The WordPress Architecture

There is something referenced throughout WordPress code titled The Loop. This is a section where meta functions can be called based on a single article to pull down specific information from the database. As per our example we can call functions to pull out author data from any single post within The Loop.

Most notably this should be done within your template folder. For the lazy, it may be easier to edit individual files by adding code you’ll need. For example, the WP theme single.php file generally contains all code to parse on an individual posts’ page. You may find it easier to pull data while inside The Loop and add HTML code here.

Alternatively, a safer method would be to add a new file to your theme directory and include it whenever you’d want your author box to appear. This allows for greater control regarding variable terms and template files. This also saves you time and energy so as to not go back and re-invent the wheel.

WP Template Code

There aren’t many functions we’ll be using, though many could be new to WP amateurs. Below are just a few examples which you should familiarize yourself with. Much of what we’ll be covering works within the WordPress library with just a few key ideas – nothing that can’t be learned with a few hours of study.

<?php echo the_author(); ?>

The author function pulls data from within the loop to display the author’s name. This can be changed in the WordPress backend on anybody’s profile settings page. You are able to set this value to First/Last name, username, or even a custom set.

To make this process simpler, WordPress has released an entire function library for the_author_meta(). This replacement takes in arguments which can pull any author data from the database on request. You can check out the page documentation if you’d like to research more into the subject.

What’s fascinating about this function is how much information can actually be obtained. By default the function accepts two arguments: the type of data you need and the user ID to pull. The ID is an optional parameter which is only required in cases outside of The Loop. Possible values to pull include user_login, user_email, user_url, nickname, description (bio), jabber/aim/yim, and so much more!

What many don’t consider here is just how much potential information can be shared. WordPress allows for administrators to edit author profile pages to add in custom avatars, bios, and even home page links. These can then be pulled from the database and used as marketing information for each author.

With just these functions alone we are able to display all of the set data we will need. The only thing left to do is add our sample HTML and CSS code and publish the file!

Cordial Author Box Styles

CSS is an important language in our project scope, being a web application. We need to define specific sets of styles and display cases to incorporate for all major browsers, monitor resolutions, and other hidden variables. As web developers it is our job to study and work over these climates.

.aboutauthor { overflow: hidden; background: #f4f4f4; border: 1px solid #999; padding: 5px; margin-bottom: 10px; }
.aboutauthor img { background: 0px; border: 0px; padding: 0px; }
#aboutauthorimg { float: left; padding: 5px 0 5px 10px; }
.aboutauthor .span-desc { overflow: hidden; margin: 0px; width: 500px; float: left; }
.aboutauthor .span-2 {display: block; float: left; margin: 0px 10px 0 0; padding: 10px 0 0 10px; }

The simple class .aboutauthor should be applied to your covering box. We have added a light background color with a solid border and extra padding. Our img tag is also displayed floating left with extra padding. This will keep our author’s avatar in line with box content.

Further, we have two classes which demonstrate how we need our inner data to perform. .span-2 is a class held inside where our main content will be found. Inside here we have removed all extra margins/padding to keep spacing neutral, along with rearranging the box model for left alignment. This code would do best inside your template’s style.css file, though it could be added inline with your block element.

The HTML code is very short and similar as seen below. Here we have added a few extra functions which can be explained very quickly.

<div class="aboutauthor">
<div id="aboutauthorimg" class="span-2"></div>
 
<div class="span-desc">About Author: <strong><?php the_author(); ></strong>  (; Articles)
<strong><?php the_author_meta('display_name'); ></strong>
</div>

We are calling a function get_avatar() which takes a set of parameters. The two we have passed above are the current author’s e-mail address which is the unique identifier for a database query. This could be equivalent to a user’s ID, too. We also pass in 64 as a string value – this represents the size of the image we want returned squared off in width and height.

the_author_posts() is another fairly straightforward function which pulls the total number of articles a writer has published. This is more of an added feature as I don’t see many blogs running this info. Commonly, though, this is useful from a users’ perspective since it gives more information about the current author and deeper insight into their interaction with the blog itself.

These are just some of the basics techniques for building a simple WordPress author block. From here it’s very simple to save a new file, let’s say author-box.php into your themes folder and upload into your root directory. From there a simple PHP include can add all of your code right into any source automatically.

<?php include(get_bloginfo("template_url").'/author-box.php'); ?>

If this is still a bit fuzzy, check out the example code above. This would be the most direct way to include your file and sustain security in your actions. Here we are calling the get_bloginfo() function to pull our entire template directory structure out first, followed by our single data file. Be sure to rename this file to whatever will suit your theme best and don’t get confused between function calls!

Conclusion

Hopefully this tutorial has given you a starting point for reference in WordPress development. Blogs are all too common in today’s web, but adding an author box gives your online articles some flare. They also give incentive for authors to post more frequently and build up a small portfolio of their writing. Many of the most popular magazines online now feature detailed information and profile links from their article writers.

If you’d like to experiment with these features without messing around in PHP or HTML/CSS, there are a few alternatives. The WordPress plugins system is one such scenario which works perfectly. I recommend the Cool Author Box plugin which will automatically add author info and supports gravatar icons. Do you have any suggestions or tips for building unique author boxes in WordPress? Share your ideas in the discussion below.

We’ll be working with an open connection technology OAuth to authenticate users into our own 3rd party Foursquare apps!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Checking In

The latest social media craze on the web today is focused around location-based social networking. Companies such as Gowalla and most notably Foursquare run off a social grid check-in system. For every visit to your local shopping plaza, pizza shack, park or school you can update your status and earn points towards unlocking badges.

The network pivots traveling the globe into a digital game of sorts. Through Foursquare’s mobile app you can run your own user account, update check-ins to Twitter or Facebook, upload photos, and so much more! The numbers have been growing rapidly and Foursquare’s community circles the world.

Beginner’s Resources

When you first start developing over Application Programming Interfaces there are many hurdles to overcome. Through some fantastic articles Google searches hold the answer to a lot of your basic questions on PHP and API connections.

When discussing Foursquare’s API I highly recommend their Google groups forum. It comes with a few FAQ pages and great user discussions archived over time. More specifically they offer the web API documentation in an elegant way for novice and professional alike.

To get started you’ll need a simple PHP web setup. If you’ve got remote server space you could alternatively host everything elsewhere. However if you’re impatient and don’t need Internet access it’s much simpler to install a local server environment.

For Windows and Mac the WAMP and MAMP packages work tremendously well. They install with PHP and MySQL database capabilities running under the Apache web server software.

External Libraries and OAuth

We only need a few external files to work with Foursquare efficiently. When building an OAuth application there are many simple steps required to get started. This is an open platform built with simplistic standards in mind.

Below is a general overview for an OAuth connection:

• Obtain request key and secret from Foursquare API
• Add login/authentication link somewhere on website
• User clicks link. Directed to Foursquare and approves/rejects access to their account from 3rd party application
• Store now secured key and secret to call requests from Foursquare database

You will need a Foursquare account to obtain your key and secret in the first place. It’s a free signup, and if you wish to work on the API I’m sure you’ve already had an interest in the application! Once logged in check out their OAuth registration form to create your new app.

You’ll need to give three (3) bits of data before obtaining your unique key and secret string pair. The app name, website URL, and return URL. The first two are fairly self explanatory while the return URL is simply the page Foursquare will re-direct users back towards after authentication is complete.

Picking Libraries

The final step after account creation is figuring out which external libraries to use. The simpler and easier we can access bits of data, the quicker our application will run. Github is a fantastic community where developers share their bits of code with the world.

Specifically user jmathai’s Foursquare async library is perfect for what we’re doing. You can download the package directly from that page. Inside you’ll find a few files, namely the core libraries we’ll need to be working with. Listed below:

• index.php
• callback.php
• EpiCurl.php
• EpiFoursquare.php
• EpiOAuth.php

Inside our index.php file there are a few fields requiring some input. Towards the top we’ve got two (2) variables named $consumer_key and $consumer_secret. Inside you’ll want to set the string value to whatever Foursquare has set up in your OAuth application settings.

The second file we need to edit is callback.php. This will handle a generic callback from Foursquare and allows us to pull information about the authorization request (acceptation/rejection). Towards the top of this file you’ll see the same variables requesting the same set of values – seemingly redundant, but useful to keep scripts independent.

Pulling User Data

Try loading your index.php file inside any browser from your local server. You should see a small page with a login link – clicking this will redirect to Foursquare where you can choose to allow or deny the connection to your application. Upon acceptance you’ll be re-directed towards your callback URL and can pull user data at will!

As a brief example let’s examine checkin history. Through these few lines of code we can easily pull the past few checkins from any authorized account and display them onscreen (or possibly store them in a database for easy access!)

// call 4sq data
$fsqUsrHistory = $foursquareObj->get_history();
print_r($fsqUsrHistory->response);

We first set a unique variable $fsqUsrHistory to hold our history object. This should return an array containing specific information about each of the previous checkins from the target account. The PHP print_r() function will display the response array in plaintext on the screen.

Conclusion

This has been a basic look into getting started with Foursquare’s API. OAuth is a very powerful open protocol for connecting into larger social communities. It offers the most secure solutions for both users and webmasters.

If you’re still a bit lost that’s to be expected at first. Try downloading the package from Github and messing around with some of the files. Even rudimentary PHP skills will suffice when working with these libraries, so it’s difficult to mess things up.

The Foursquare Developers center is an amazing tool for newbies. Scour the resources and look up and function calls you may be interested in working with. Similarly the official OAuth website has some terrific readings outlining the purpose and practical solutions for the protocol.

The community has been intricately planned and opened with an API. This stands for Application Programming Interface and would dramatically widen the range of adaptation to anybody who can understand the framework.

In this brief tutorial I’ll be going over some of the basic concepts for developing over the Dribbble API. We will be focusing on PHP as the main programming language. This is causal to the fact PHP is supported in nearly every environment and it offers a very small learning curve for newbie developers.

Examining the API

In all truth It’s not a difficult sight to go through. In fact, Dribbble’s official documentation offers some great constructs into the powerful network of design shots.

When preparing for this type of project it’s key to consider a wrapper or library to work around. This saves us a load of time since we don’t need to re-create the most common functionality found within the API. The various libraries openly available through GitHub is another reason why PHP makes a great choice for the backend dev language.

For our example we can go through Martin Bean’s Dribbble wrapper to find exactly what we’re trying to do. You should download the most recent version and extract all the files into an open directory. Inside you’ll find two folders examples and src. It may be straightforward but “examples” will contain a few common implementations for function calls while “src” includes all of the files we need for a new project.

Working with our PHP Wrapper

Now that we’ve got everything settled we should create our application directory. At this point you’ll want to create a new project directory either on a locally installed version of Apache or in a remote web server.

WAMP and MAMP are still today the best options for all-in-one install packages. These include Apache as a web server with PHP/MySQL support for backend functionality. Once installed you’ll be working within a root www directory – this should hold all your server files.

I’ve created a new folder titled “dribble1″ and moved the entire “src” folder into this. Also inside of our “dribble1″ folder I’ve created a new file index.php which we can use to store all of our example code. You can structure your hierarchy in any way you’d like, just be sure all the src files are kept together and can be accessed from your project.

Including Headers

At the very top of your new index.php file it’s important to include the following code bits. These are used to create a connection into the wrapper package we downloaded.

<?php
 
require_once('src/dribbble.php');
$dribbble = new Dribbble();
?>

Above we first require the core dribbble file from our wrapper’s src. Then we declare a $dribbble variable and set this to a new instance of our dribbble class. This is just some basic OOP in PHP, very basic constructs. Don’t fret too much if you don’t understand the syntax used.

Once this is included we have access to manipulate almost any area of the site at whim. There are many pre-defined functions written which allow us to pull comments, users, shots, and tons of other data.

As a basic example let’s look at a single user feed. This is possibly the most in-demand technique and does not require very much code. The inclusion of your most recent Dribbble shots into your portfolio page offers a level of professionalism which just can’t be matched with Twitter.

Pulling Single User Data

The code below is an example pulling data from a sample user. In this case we’re working with alexanderustinov who creates many icon sets and user interfaces.

<ul class="shots">  
<?php  
    $player = $dribbble->player->find( 'alexanderustinov' );  
    $shots = $player->shots( array( 'per_page' => 5 ) ); 
 
    foreach ( $shots->shots as $shot ) {  
        echo sprintf('<li><a href="%s"><img src="%s" alt="%s" /></a></li>', $shot->url, $shot->image_url, $shot->title);  
    } ?>
</ul>

The shots should be called as above with $shot->image_url. This is the default 400×300 image size seen on all shots from the network. The API also offers access to a teaser image which is used in profile pages and search results. To use this replace image_url with image_teaser_url in the same context.

Above we are looping through each shot entry found for the given username. The only reason we can quickly cycle through these is because of the wrapper class we included earlier in our page. We set the per_page variable to 5 meaning once we hit 5 shots we don’t want to pull any more from the database. This number could be updated to any value you’d like.

Displaying In-Page Shots Comments

Known little to outsiders of the community many of the popular shots in Dribbble have constructive feedback and some interesting page comments. This is one of the best ways designers can share their ideas and criticisms with others in a pleasant way.

The following code could also be placed anywhere in your index.php file below the wrapper include. It will pull comments from a generated shot ID and display 5 from the first page.

$shot = $dribbble->shot->find( 62170 );  
$comments = $shot->comments( array( 'page' => 1, 'per_page' => 5 ) );  
 
    <?php if ( $comments ) : ?>  
 
        <ul class="comments">  
        <?php foreach ( $comments as $comment ) { ?>  
            <li>  
                <p class="a"><a href="<?php echo $comment->player->url; ?>"><?php echo $comment->player->name; ?></a> says: <?php echo $comment->body; ?></p>  
            </li>  
        <?php } ?>  
    </ul>  
 
    <?php else : ?>  
        <p>Whoops! No comments found here, sure is quiet...</p>  
    <?php endif; ?>

The $shot and $comments variables are used to hold initial values for the loop. $shot is the ID and connector into which specific shot we’re targeting, while $comments holds an array containing data about each pulled comment.

Afterwards we confront some simple if/else logic checking if any comments could be pulled. If so we create another foreach loop to extract the data into a set of paragraphs inside an unordered list. All of the page HTML is easily malleable and shouldn’t take long for even novice web developers to pick up on.

Conclusion

This has been a brief introduction into developing over PHP and Dribble’s API. The network is constantly growing and features some of the best design work found from around the web. Thanks to Martin Bean and his Github repos to expedite the process.

If you’re lost I’d recommend checking out a few PHP tutorials on Google. There are options for beginners to dive into classes and Object-Oriented constructs. I’d also suggest our list of video tutorials in web design which covers a cascade of topics including markup and project development.

This post will briefly point you to 27 great utilities that not only help you store your favorite snippets both locally and in the cloud, but also make sharing with others a breeze. Enjoy!

Full-Scale Storing and Sharing

The sites below are a great way to build a personal code repository that you can access from anywhere and easily share with others. They’re also great sites to find helpful snippets in a number of languages.

I haven’t used them all in-depth but my preferred site is Snipplr. I really like the interface, the huge library of snippets, the versioning options, etc. They’re definitely all worth checking out though.

Snipplr

“With Snipplr you can keep all of your frequently used code snippets in one place that’s accessible from any computer. You can share your code with other visitors and use what they post, too. Did we mention that Snipplr works with TextMate? Yeah, we rock.”

CodeSnippets

“Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)”

Home | byteMyCode

“byteMyCode is a project designed to make the task of sharing source code easier. We have modeled a community around making it easy to find, share, revise, comment on, and rate code snippets.”

SnippetsMania

“Organize and share your code snippets. Snippetsmania is a free accessible collection of code snippets. It currently supports 34 different programming languages. The database holds a total count of 99 code and programming snippets and examples.”

codesnipp.it

“codesnipp.it is a social site for developers to post their snippets, follow and share code with other devs and get coding help. ”

Paste and Share Quickly

The apps below are similar to those we just looked at but place much more emphasis on fast code sharing as opposed to organized code storage. Most just require a copy and paste and you’re ready to go!

Snipt.org

Share source code on Twitter and the Web.

New – Pastie

“Clean user interface with sensible defaults. Need to nickname, describe, set tab settings and more? You’ll have to look elsewhere. One text box, paste, done. Simple.”

Smipple – Social Code Snippets

“Smipple is a social service for saving, storing, organizing, and sharing snippets of code with your friends and coworkers. Make friends. Improve your coding skills. Earn bragging rights.”

Gist – GitHub

“Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.”

Copy Paste Code

“Copy Paste Code allows you to publish your code with colored syntax for most popular programming languages out there. After publishing you can share your code to colleagues and friends, and they can debug and use your code snippets.”

CodeTidy

A quick and easy, no-frills code sharing utility.

Ideone

“Ideone is something more than a pastebin; it’s an online compiler and debugging tool which allows
to compile and run code online in more than 40 programming languages.”

Pastebin

One of the most popular tools of this kind, Pastebin supports a huge list of languages.

Mystic Paste

PasteSite.Com – Easy Usable Pastebin

“PasteSite.Com is a tool which allows you to submit a sample of code which can then be viewed with syntax highlighting from the website.”

Slexy 2.0

“Slexy.org is a powerful, slick, and sexy pastebin designed with the user in mind. Use Slexy.org to paste errors for debugging, show off your code or your tech specs, or share anything else with other Internet users worldwide.”

Mac Applications

In my search for online snippet sharing tools I came across a number of Mac applications that are great for building code libraries so I figured I’d toss them in as well. Check out jCodeCollector and Snippely first if you’re looking for a solid free option.

Snippet: $12.95

“Easily create Snippets from selected text anywhere.”

Snippets: $39.95

“Snippets is a powerful application for Mac OS X that stores the most valuable pieces of code you can reuse in different projects many times.”

Snippely: Free

“Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location. A snippet is a collection of one or more pieces of code and notes. Snippets are stored in groups for organization and quick retrieval.”

jCodeCollector: Free

“jCodeCollector is an application that helps you to manage your code snippets. Using jCodeCollector you can: store, tag and comment your snippets, find quickly the code you need.”

Code Collector Pro: €20

“When you spend all day writing code, it is only natural to start having feelings of déjà vu. Didn’t you write that same few lines of code a few days ago, and again a few days before that? Why are you wasting time re-writing that code again and again? Code Collector Pro is the answer, giving you the ability to store snippets of code and retrieve them with a few keystrokes”

MySnippets: $14.95

“All of your snippets, the files you need, drafts, parts of a text, CSS templates and anything else you still need in order to deliver outstanding results: All of that is now just one single click, one single keystroke away. ”

Droplr: Free

Unlike the apps above, Droplr is not the ideal place to store code snippets. However, among other things, it is a super easy way to share snippets of code. Just select some text and drag it to your menu bar. A URL will automatically be placed in your clipboard for you to paste in anywhere you want.

Text Expanders

One special breed of snippet applications is those that allow you to type a few characters which then automatically expand into a larger chunk of text. I’ve recently started using TextEpander and it has completely revolutionized the way I work. Now I can’t imagine trying to code without it!

I’ve searched for hours in vain in an attempt to find a free text expanding utility, leave a comment if you know of one.

TextExpander: $34.95 (Mac)

“TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings and images.”

Typinator: €19.99 (Mac)

“Typinator boosts your productivity and eliminates errors by automating the process of inserting frequently used text and graphics and auto-correcting typing errors.”

FastFox: $34.99 (Windows & Mac)

“FastFox is an easy to use text expander that can create and store keyboard shortcuts that expand to an entire phrase, paragraph or document.”

SnippetMonkey

“Snippet Monkey saves you countless hours monkeying around by allowing you to create shortcuts for phrases you frequently type. We call the phrases snippets and Snippet Monkey allows you to create new snippets from the clipboard or via our easy to use snippet editor.”

What Are Your Favorites?

There are a lot of utilities here to choose from and I would love to hear your feedback on those that you’ve tried. For my own purposes I use TextExpander to quickly insert code, Snipplr to store random bits long-term, and Droplr to quickly share snippets. What combination will fits your workflow best?

The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.

Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.

What Is a Front End Package?

What I mean by front end package is essentially a set of tools and conventions that standardize certain elements of the web development process. The inspiration for this article comes from the creative minds at Erskine Design. As a designer, you’re probably a visual thinker so we’ll cut straight to the diagram:

The Basic Outline or Erskine’s Ultimate Front End Package

As you can see, Erskine has essentially built a basic framework from which to jump off for major web design projects. They sum it up as “a bumper compendium of cascading and connected CSS files, naming conventions, modules, plugins and library scripts that ensure any project led or worked on by any member(s) of the team will stay on convention, and be simpler for anyone else to step into and work with at any time.”

Possessing such a framework can be invaluable for a number of reasons, which we’ll discuss below. The argument posed by some is that such a framework or toolkit is not only helpful, but absolutely necessary. Erskine Design’s Simon Collison goes so far as to say “Without question or compromise, every website needs to be built with a solid foundation layer and an Ultimate Package.”

Let’s take a look at some of the benefits from, and reasons for, building your own custom front end package. (Based on some of the suggestions from Erskine’s Presentation, found here)

Elimination of Repetition

This is the most basic and understandable reason for developing a front end package. Every time you start to build a site you go through several setup steps such as forming the bare HTML structure, creating the external CSS files, linking the HTML to the external CSS, importing jQuery and/or any other JavaScript libraries you often use, etc. Developing a front end package recovers all of this lost time by making it extremely easy to start a new site: just copy the folder containing the framework and you’re up and running.

You might argue that these tasks don’t take a significant amount of time or are even necessary to get your brain into a web development mindset. To answer these arguments I would first suggest that you time yourself to see just how long you lose on every project getting your file hierarchy in place, setting up and loading scripts and styles, figuring out naming conventions, and fixing sloppy mistakes. I’ll wager it’s a lot more than you think. Finally, to the latter argument I would challenge you to retrain your brain to accept a new part of the process as the beginning. Try jumping right into experimentation with your system in place and discover how much nicer it is to skip all of the tedious, repetitive tasks.

Standardization

Standardization is a major benefit from using a prefab toolkit. Every time you start a new project, you might do things slightly different. This can be something big, like changing the way you layout your HTML, or something small, like deciding on a new naming convention. This can make it extremely difficult for others to follow your work or even for you to go back later and remember how you were doing things at the time.

As you develop your front end package, keep standardization at the forefront of your mind. Decide on the best way you know to do every little thing and stick with those conventions through every project you start. Markup your comments the same way, organize your CSS the same way, use the same variable naming conventions, utilize the same folder hierarchy, use the same CSS resets, etc. Taking all the little decisions and guesswork out of your system has the benefit of streamlining the entire development process to ensure you’re creating a discernible, organized site as quickly as possible.

This is not to say you should decide on a system and stick with it permanently. Let it evolve as you learn and discover better methods, just don’t integrate new methods flippantly or frequently enough to void the usefulness of the entire package. When you decide on a better way to do something, make sure you are absolutely certain that it will improve your system and be sure to make a note outlining the change and when it was integrated so you know what to expect from older projects.

Better Collaboration

This is where a front end package crosses over from “nice to have” to “absolutely essential.” When you’re working with a team of developers on a large project, one of the biggest inefficiencies you can have is a failure to get everyone on the same page from the outset of the project.

If you’ve got Bill structuring his part of the project one way, Jill structuring her part another way, and Will trying to keep up with both Bill’s and Jill’s methods, things are going to get messy fast (and not just because all of your employees’ names happen to rhyme). This will inevitably lead to long meetings spent arguing over trifles. If you have team members that have already started a project using certain conventions, you can bet they’re going to defend that method to the death to avoid going back and fixing what they consider to be finished work. This is why it’s extremely important to develop a front end package in cases where significant collaboration is involved. You’ll probably still have to hold a meeting to decide on specific conventions to follow, but you’ll find that team members are much more flexible to new methods if it doesn’t require backtracking.

The key takeaway here is to develop a system before a project begins, not during. This will increase the chance of acceptance and prevent a lot of incompatibility issues down the road. Also, be sure to include your team in the decision making process. This is hugely important to the success of the package for a number of reasons. First, it’s always a bad idea for management to create a system to streamline a given task without consulting the people who are closest to that task. No matter how many more college degrees you have than the people under you, chances are they are the single best authority on what will and won’t work. Finally, apart from the issue of effectiveness is again the issue of acceptance. If you hand your team a set of guidelines that they’ve had no part in developing, they will drag their feet and complain the entire way because you are forcing them into something they don’t want to do. However, if you let team members from every level actively participate in the development of the conventions, they are much more likely to conform to the new system because they aided in its creation and direction.

Quality Control

Developing a front end package allows you to implement a certain degree of quality control across the members of your team from the outset of the project. It ensures common mistakes, such as grabbing the wrong doc type or forgetting to include a certain browser specific style sheet, aren’t made. Further, having a strict system in place can help prevent intentionally sloppy work. In a mad rush to get a project going, developers will often use non-standards compliant code, vague variable names, obscure tricks, and any number of other shortcuts with the argument that they will go back and fix these things later. The problem of course is that there usually isn’t time to go back and fix these things later in the project as you approach key deadlines. Many of these problems will disappear if your foster a culture that avoids such practices and discourages straying from agreed upon conventions.

In Regard to Design & Innovation

Before I close and ask to hear your opinions, I want to preempt an argument that might arise. Many see common conventions and strict rules as something that will cripple the design process, virtually eliminating any room for creativity or innovation. This simply is not the case in this instance and is in fact the opposite result of what a well-designed front end package will provide.

A good front end package will actually allow you to focus more on the creative elements of the development process through standardization of areas that eat up time and whose variation would not making a significant difference in the end result. What I mean by this is that such elements as your folder hierarchy will go completely unnoticed by the end user and are therefore not the place to focus your creativity on every single project. The idea here is to get through the boring stuff in one fell swoop so that you can quickly dig into the things that do, and should, vary from site to site; the things that make each site unique. With this type of system in place, you can spend more time developing original user interfaces, choosing custom color schemes, trying different font-families and coding innovative functions.

If the system you come up with hinders the creative process, it simply isn’t doing its job and should therefore be scrapped in favor of a trip back to the drawing board.

Free Resources

Sold on the idea of developing your own front end package but don’t know where to begin? Here are some free resources to get you started.

• A Killer Collection of Global CSS Reset Styles
• HTML Blank Page Examples
• A Simple PHP Template System
• Google Code: Hosted JavaScript Libraries (jQuery, MooTools, etc)
• 16 Basic CSS Layout Templates

Speak Your Mind

The above represents my long-winded argument for why I believe Erskine Design is right in asserting that every website should be built from a strong, standardized and preset foundation. Let us know if you think developing such a system is worth your time. Better yet, if you have a system in place, let us know how it works!

Security aside, one might also want to prevent users from misusing the upload facility, e.g. uploading copyrighted music files illegally and using the service to promote piracy! In this article, we’ll look into a few ways in which we can achieve this.

File type detection using extension and MIME types

I am not going to talk about this in too much detail as after all, this is what we normally do when we want to restrict certain files. We simply get the MIME type of the file using $_FILES['myFile']['type'] and check if it’s of a valid type.

Or we might scan the last few characters of the file name and reject files ending with a certain extension. Unfortunately, these methods are hardly sufficient, as one can easily change the extension of a file to bypass this restriction. Furthermore, MIME type information is given by the browser and most browsers, if not all, determine the mime type based upon the file’s extension! Hence MIME types can be pretty easily spoofed too.

Let’s now explore some others ways which offer better fool-proofness.

Using Magic Bytes

The best way to determine the file type is by examining the first few bytes of a file – referred to as “magic bytes”. Magic bytes are essentially signatures that vary in length between 2 to 40 bytes in the file headers, or at the end of a file. There are several hundred types of files, and quite a few of them have several file signatures associated with them. You can see a list of file signatures over here.

Although inconsistent, this is our best bet in detecting file types reliably. This seemingly difficult task has been made really easy by a PECL extension called Fileinfo. As of PHP 5.3, Fileinfo is shipped with the main distribution and is enabled by default, so this is definitely a robust and simple way to detect and impose restrictions on the types of files uploaded.

Let’s now see how we can detect a file type using Fileinfo:

$file = "/path/to/file";
 
// in PHP 4, we can do:
$fhandle = finfo_open(FILEINFO_MIME);
$mime_type = finfo_file($fhandle,$file); // e.g. gives "image/jpeg" 
 
// in PHP 5, we can do:
 
$file_info = new finfo(FILEINFO_MIME);	// object oriented approach!
$mime_type = $file_info->buffer(file_get_contents($file));  // e.g. gives "image/jpeg"
 
switch($mime_type) {
	case "image/jpeg":
		// your actions go here...
}

Handling image uploads

If you intend to allow only image uploads, then you can use the inbuilt getimagesize() function to ensure that the user is actually uploading a valid image file. This functions returns false, if the file is not a valid image file.

//  Let's assume that the name attribute of the file input field you have used is "myfile"
 
$tempFile =  $_FILES['myFile']['tmp_name'];  // path of the temp file created by PHP during upload
$imginfo_array = getimagesize($tempFile);   // returns a false if not a valid image file
 
if ($imginfo_array !== false) {
    $mime_type = $imginfo_array['mime'];
    switch($mime_type) { 
 
	case "image/jpeg":
		// your actions go here...
 
    }
}
else {
    echo "This is not a valid image file";
}

Reading and interpreting magic bytes manually

If for some reason, you are not able to install Fileinfo, then you can still manually determine the file type by reading the first few bytes of a file and comparing them with known magic bytes associated with the particular file type. This process definitely has an element of trial and error, because there is still a chance that there are a few undocumented magic bytes associated with legitimate file formats. As a result, valid files could be rejected by your system. However it’s not impossible as a couple of years back, I was asked to work on a script that allowed only genuine mp3 files to be uploaded, and since we could not use Fileinfo, we resorted to this manual scanning. It took me a while to account for some of the undocumented magic bytes for mp3, but pretty soon, I got a stable upload script running.

Before I end, I would just like to part with a general word of caution: Make sure that you never call an include() with a file that was uploaded, as PHP code can very well be hidden as part of the picture, and the picture would pass your tests for file validation just fine, only to cause havoc when executed by the server.