With the introduction the custom post type feature, WordPress has made a very important move from just a blogging solution (very powerful but limited with it’s concept) to full-fledged CMS system. All 3.x releases more or less are evolving steps in the same direction. But some quite common tasks that we’re expecting from CMS are still missing in the Core leaving the battlefield open for plugin developers. One such task is creating and management of many-to-many relationships between posts of different types.

Fortunately there is an excellent plugin "Posts 2 Posts" by Silviu-Cristian Burcă aka scribu which solves that task. It’s beautifully coded and deadly simple to use. It provides as with very simple but powerful API allowing the creation of connections and the out-of-the-box administrative UI allows you to manage them. With the following tutorial I’m going to show you how to use this plugin to create and manage connections between posts of different types in practical steps.

Let me first describe the task. Assume we have a custom post type at our WordPress-powered site named "project" to represent (how surprisingly) projects of some nature (eg. some downloadable apps or plugins). At the same time we post notes or updates related to these projects in the blog (representing with default "post" post type). Of course we would like to clearly state this relation - in every project’s page we’d like to have links to notes in the blog and vice versa - in every blog post we’d like to have links to related project(s). This could be achieved manually but the disadvantages of such an approach are quite obvious. So we would use Post 2 Post plugin to make this possible through the following steps:

• register "project" post type and register it’s connection with "post" post type
• create connections between published items using appropriate metabox
• create template tags to help us list related posts or projects
• edit "single" post template to use our introduced template tag for presenting related items

Bonus: At the end we’ll make things a bit more complicated to see the full power of Posts 2 Posts plugin - we’ll provide registered relationships with additional metadata nearly the same way we could have such metadata for posts themselves.

A Note about Code Placement

Following Thord Daniel Hedengren’s (wpmu.org) advice I’d try to be smart enough and would not recommend you to include the following code into the theme functions.php file. Instead I would recommend to create your own Custom Functionality Plugin to handle all code that is connected with content of your site and powers the functionality that should not disappear just because you switched the theme. So it’s the perfect place for registering custom post types and creating relationships between them. It’s worth mentioning also that to make the code below work you need to install Post 2 Post plugin first and activate it in WordPress admin.

Registration

function frl_p2p_registrations(){

    /* Register 'project' post_type */

    $register_args = array(
        'label' => __('Projects', 'frl'),
        'labels' => array(
            'name' => __('Projects', 'frl'),
            'singular_name' => __('Project', 'frl')
        ),
        'public' => true,
        'rewrite' => array('slug'=>'project', 'with_front'=>false),
        'show_in_menu' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title','editor','thumbnail', 'excerpt'),
        'show_in_nav_menus' => false
    );

    register_post_type('project', $register_args);

    /* Register connection */

    $connection_args = array(
        'name' => 'project_post',
        'from' => 'project',
        'to'   => 'post',
        'sortable'   => 'any',
        'reciprocal' => false,
        'admin_box' => array(
            'show' => 'any',
            'context' => 'normal',
            'can_create_post' => true
        ),
        'admin_column' => 'any'
    );

    p2p_register_connection_type($connection_args);

}

add_action('init', 'frl_p2p_registrations');

The heart of Post 2 Post API is a p2p_register_connection_type function which is quite similar to other register_something WP functions and allows us to register relations between posts of different types and customise it’s behaviour through the set of accepted parameters:

• name - an unique identifier of connection type
• from - post type(s) on "from" side of the connection
• to - post type(s) on "to" side of the connection
• prevent_duplicates - whether to allow duplicated connections
• sortable - whether to allow connections to be ordered via drag-and-drop.
• reciprocal - whether to allow the same post type on "from" and "to" sides of connection
• admin_column - whether to display column with related posts list in posts table in admin
• admin_box - set of parameters that customise connection’s metabox appearance, in particular:
  • show - whether to show default metabox and where ("any", "from", "to")
  • context - regular metabox context parameter ("normal" or "advanced"),
  • can_create_post - whether to allow create new post directly from connection metabox

For the full set of registration parameters and their default values please consult the core/api.php file of the plugin.

First we prepare the registration of project post type as described in the Codex. Then we register connection with post post type with necessary parameters. All these registrations we wrap into a separate function to be able to call it upon init hook.

Creating Connection in Metabox

P2P plugin creates a connection metabox on edit post screens for connected post types if it was configured upon registration. The usage of this metabox is quite intuitive. Simply start typing the desired post name in the search box, select the appropriate item from the drop-down list and click the add icon. To remove a connection click trash icon. Create as many connections per each post/project as needed.

Among other admin UI goodies P2P plugin creates (if configured) the column for a list of connected items in the posts' management table for each of the connected post types. The latest version of the plugin introduces also an informational admin screen (located under "Tools" menu) containing reference data about registered connections and their parameters.

Listing Related Posts

function frl_list_related($post_id, $title = ''){

$query_args = array(
    'connected_type' => 'project_post',
    'connected_items' => intval($post_id),
    'nopaging' => true
);

$query = new WP_Query($query_args);

if($query->have_posts()):

if(empty($title))
    $title = __('Related items', 'frl');
?>
<h3><?php echo $title; ?></h3>
<ul class="related-items">

<?php while($query->have_posts()): $query->the_post(); ?>
<li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
<?php endwhile;?>

</ul>
<?php
endif;
wp_reset_postdata();
}

One of the greatest advantage of P2P plugin is an ability to get connected posts using standard (and familiar) WP_Query syntax. Everything you need is to pass additional query variables to limit set of posts:

• connected_type - the identifier(s) of the connection used when registering
• connected_items - ID of post(s) from one side of the connection to search
• connected_direction - optional parameter allowing to restrict the direction of queried connections ("from", "to", "any"), when omitted the direction is inferred from connected_type + connected_items combination.

In our example we wrap the query into a separate function - frl_list_related template tag. This function query connects posts based on submitted $post_id parameter. If the query produces any results the function lists them using the standard WordPress Loop approach. It also accepts $title parameter to customise the title of related items’ block depending of context.

Template Editing

/* code for project template - single-project.php */

if(function_exists('frl_list_related'))
    frl_list_related($post->ID, __('Related Posts', 'frl'));

/* code for post template - single.php */

if(function_exists('frl_list_related'))
    frl_list_related($post->ID, __('Related Project(s)', 'frl'));

Finally we should edit the template files that represent "project" and "post" post types respectively (most likely the single-project.php and single.php files of your theme) so they included the call of our new template tag. We also passed the title string when calling our function for setting the correct title of the connected posts list. The result (eg. for particular "project") after some styling is similar to the following:

More Complicated Example

Assume that blog posts related to a particular project could be divided into different types, eg. changelog and how-to information. On the project page we’d like to list posts of different types separately and apart from that accompany each link with a short comment. All these enhancements could be easily achieved using the connection metadata functionality provided by P2P plugin. Connection metadata behaves the same way as other types of metadata supported by WordPress (eg. postmeta, usermeta etc.). To use them we will implement the following steps:

• rewrite connection registration function to support "type" and "comment" meta-fields
• add metadata values to existing (and new) connections
• rewrite post listing function to behave as described above
• use new function in template

function frl_p2p_registrations(){

    /* Register 'project' post_type */

    $register_args = array(
        'label' => __('Projects', 'frl'),
        'labels' => array(
            'name' => __('Projects', 'frl'),
            'singular_name' => __('Project', 'frl')
        ),
        'public' => true,
        'rewrite' => array('slug'=>'project', 'with_front'=>false),
        'show_in_menu' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title','editor','thumbnail', 'excerpt'),
        'show_in_nav_menus' => false
    );

    register_post_type('project', $register_args);

    /* Register connection */

    $connection_args = array(
        'name' => 'project_post',
        'from' => 'project',
        'to'   => 'post',
        'sortable'   => 'any',
        'reciprocal' => false,
        'admin_box' => array(
            'show' => 'any',
            'context' => 'normal',
            'can_create_post' => true,
            'fields' => array(
                'type' => array(
                    'title' => __('Type', 'frl'),
                    'values' => array(
                        'changelog' => __('Changelog', 'frl'),
                        'tutorials' => __('Tutorials', 'frl')
                    )
                ),
                'comment' => array(
                    'title' => __('Comment', 'frl')
                )
            )
        ),
        'admin_column' => 'any'
    );

    p2p_register_connection_type($connection_args);

}

add_action('init', 'frl_p2p_registrations');

We have added fields array to the list of connections registration parameters. The used configuration creates two fields in the connection metabox: the "type" field allows you to select from two possible options and the "comment" field allows you to type comment text.

After filing in the metadata for all created connections we can access it the using "meta_query" syntax or using P2P API function p2p_get_meta. Our new listing template tag is going to use both.

function frl_list_related_by_type($post_id, $type, $title=''){
    global $post;

    $query_args = array(
        'connected_type' => 'project_post',
        'connected_items' => intval($post_id),
        'nopaging' => true,
        'connected_meta' => array(
            array(
                'key' => 'type',
                'value' => $type,
            )
        )
    );

    $query = new WP_Query($query_args);

    if($query->have_posts()):

    if(empty($title))
        $title = __('Related items', 'frl');
?>
    <h3><?php echo $title; ?></h3>
    <ul class="related-items">

<?php while($query->have_posts()): $query->the_post(); ?>
    <li>
        <a href="<?php the_permalink();?>"><?php the_title();?></a>
        <span class="comment-meta"><?php echo p2p_get_meta($post->p2p_id, 'comment', true );?></span>
    </li>
<?php endwhile;?>

    </ul>
<?php
    endif;
    wp_reset_postdata();
}

First of all, our renewed function accepts the $type parameter which allows us to select related posts based on stored "type"-field value. We achieve this using connected_meta query variable. It has syntax similar to regular WordPress meta_query query. Then when printing each found post inside the loop we access the value of its "comment" meta-field with p2p_get_meta function. Each related post found with our query stores the id of the appropriate connection in the $post->p2p_id property. With this id p2p_get_meta allows us to get any connection metadata by it’s key. The third boolean parameter indicates whether we are expecting a single value or array of possible values (as it required by WordPress Metadata API).

/* code to list 'changelog'-type posts on project template - single-project.php */

if(function_exists('frl_list_related_by_type'))
	frl_list_related_by_type($post->ID, 'changelog', __('Project\'s Changelog', 'frl'));

The result of this function implemented somewhere in the single-project.php file for "changelog"-type posts (as an example) could look as follows:

And so this is practically the end of our demonstration. You can download the whole PHP code as a separate plugin below.

Conclusion

There are a number of discussions in the WordPress community whether such features as posts relationships should be in the core or not. The practical result of these discussions belongs to the future. Meanwhile we could solve this relationship problem, in particular, with the help of Posts 2 Posts plugin through a few easy steps.

Of course, the example used in the tutorial is quite a basic one but it demonstrates the logic and flexibility of the P2P approach and its excellence in terms of integration with the core. If you have examples of interesting and creative implementations of this approach please share your experience with us. Lastly, let me use the last sentence to say many thanks to the P2P developer for the great and inspiring work.

• Taking Control of WordPress 3.0 Admin Bar
• 8 New Exciting WordPress 3.0 Features
• Practical Uses for the Post-Thumbnail Function in WordPress 2.9
• 13 Useful WordPress SQL Queries You Wish You Knew Earlier

The web design industry is constantly evolving, whether that be with the latest trends in design – big header images, large photographic backgrounds, etc, or with the latest technologies – HTML5, jQuery, CSS3, and so on. It's important as a web designer and developer to keep up with these ever changing “trends” within the industry.

One of the biggest “trends” that has hit this field over the past year or so, is the concept of responsive web design. It has become much more than just a buzz word and has taken the industry by storm. It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it's about time to start warming to the idea.

Responsive Web Design

What is Responsive Web Design?

Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. By device, this could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. The term 'Responsive Web Design' was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart - Responsive web design”

Image source: Flickr

In the book, Ethan covers where the term 'Responsive Web Design' came from and why it was required.

As a start, its' important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.

Why is Responsive Web Design Such a Big Thing?

With technologies evolving and new products and devices being introduced to the market it's only natural that consumers will want to keep up with the latest gadgets that we become more and more reliant on.

First it was desktop computers and laptops, then mobile phones and tablets. What's next?

The fact that we are in an era where it is becoming easier to browse the web means that we need to make it easier for consumers to “reach” us and see what we have to offer, at their convenience.

We naturally have a requirement as designers and developers to provide our end user with the option, or rather, convenience to browse through whatever medium (within reason) they see fit. Therefore, we need to provide a clearer means of portraying the information on different screen sizes, whether this be big or small, vertically or horizontally.

Image source: Flickr

It has been noted that in the past creating different versions of a website was the way forward, however it was not the most practical solution, especially as in most cases the user would end up having to download a lot of extra code and design, alongside receiving a poor user journey.
This is why responsive web design has become such a big thing.

Responsive web design provides us with the solution of meeting these requirements without having to create and design different versions of a website depending on the device.

One point to make is that from a business perspective it is not essential we make these changes or adjustments, but rather by doing so we are inevitably meeting the unconscious needs of our end user.

OK so we know what responsive web design is and we know why we may need it. The next step would be how to go about producing it.

How to Make a Website Responsive

As mentioned earlier responsive web design is a collection of techniques and ideas. The two main techniques consist of flexible grid and media queries.

Flexible grid
When designing a website we first start off in Photoshop, making sure each element is designed to pixel perfect measurements. We then translate this design into code, all again based on pixels.

This is fine, and still correct. The website will be viewable all on devices, however not in the most convenient manner, or the prettiest. Stating pixel measurements and viewing on a screen smaller than the one it is intended for forces horrible scrollbars to appear.

Hence we need a solution that is fluid, more relative to the issue, but also keeps its proportional values.

To find a proportional value of an item we use the formula:

“ target / content = results ”

Image source: Flickr

It's quite an important formula and one that is key to making designs responsive.

If all values are proportional then the grid based design will scale nicely between devices. So, in other words, no scrollbars.

So, for example, using a Photoshop design mock up, we can find the layout width, typically this could be 960px (this being your main body container). Now say you want this container to “shrink” to 310px wide then the formula would read as follows:

310px / 960px = 0.32291666666667

To obtain the percentage value we multiply by 100 to get: 32.291666666667%

More often than not the percentage value may result in NOT being a whole number. If this is the case then it is important to NOT round up or down to the nearest whole number. Although it may look pretty, your machine will understand the figures in a proportional manner, so its important to keep them as they are!

The Grid System
Perfect grid layout that can be very useful.

Once the fluid grid is in place, the web design is scalable but not responsive.

That is where media queries come into play.

Media Queries

CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.

Luckily CSS3 is supported by many modern browsers.

Media queries were first investigated by W3C a few years ago. A media query allows you to gain information about the viewport from which the user/visitor is looking at the website and target that particular screen size by applying specific CSS styles.

For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.

As a starting point, and possibly the most common pixel min-widths that are targeted are the following:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

Image source: Flickr

It goes without saying that targeting more resolutions will naturally require more time and effort, so it generally depends on the clients' requirements and your judgment as to whether targeting all resolutions is necessary or not.

Progressive Enhancement

Progressive enhancement is the term or rather strategy for web design which focuses on the content, rather than device or browser. The aim is to enhance the web design by creating semantic HTML markup and giving prominence to accessibility and content.

Many web designers will argue that content is the most important element of a website project and should therefore be considered ahead of the presentation layer, or design.

With this in mind, we could relate progressive enhancement to responsive web design by aiming to design for mobile first.

Essentially when designing for mobile first the restriction due to the smaller screen automatically pushes the thought process into considering what important elements (content) need to be featured for this device. Therefore we naturally start to design around content.

Obviously as the screen sizes differ between tablets, laptops and desktops more space is available and therefore secondary content (social media or RSS links) can be added in a "nice to have" manner for the larger mediums.

It can be said that designing for mobiles enriches the experience of the user by focusing on the content and providing them, the user, with what is considered the most important elements on first view/load.

Showcase of Responsive Web Designs in Action

Below are a few examples of responsive web design in action. The screenshots show a couple of the variations, however to see the full variation of each site (in some cases there are more than others), view the website and change the browser window size. Alternatively view the website on a different device.

Full Frontal

Future of Web Design London

Clear Air Challenge

Forefathers Group

Andersson-Wise

The Boston Globe

1140 CSS Grid

Laufbild Werkstatt

Responsive Web Design Resources

• Mobile Web Resources
• CSS3 Media Queries
• Responsive Images: Experimenting with Context-Aware Image Sizing
• Creating Intrinsic Ratios for Video
• Fluid Images
• Beginner’s Guide to Responsive Web Design
• A Better Photoshop Grid for Responsive Web Design

Responsive web design concentrates quite heavily on devices, viewports and how to gracefully degrade the designs we create across these mediums. In all of the “hype” about RWD we shouldn’t forget Progressive enhancement and its relationship with responsive web design.

Conclusion

It's safe to say that as technology evolves and new gadgets are invented, new trends happen.

Do you think responsive web design is here to stay? What do you think of responsive web design? Let us know what you think at the bottom of this article.

• Responsive Web Design: Layouts and Media Queries
• 40 Beautiful Watercolor Effects in Web Design
• Neuro Web Design: Tips and Techniques
• Is the Development Community Alive?

Boredom or spare 'empty' time can inspire people to do the strangest things with great results!

Finger art is just one of those strange but magical pastimes. There is probably more patience than skill required for the majority of examples of finger art, but in my opinion, patience is a skill in itself.

Here we have collected some very creative and effective finger art, followed by some painted hands that are truly artistically, imaginatively and skillfully created.

Artistic, Creative and Imaginative Painted Fingers and Hands

Funny Fingers from Matta

Finger Art by Nader Yamoun

Meet the Mr & Mrs Berry

Sleeping Hug

Finger Art

Mr Index

John Wayne

Madame Lila

Three Amigos

Zzzzzz

Parisino

Day 31/365

Nom Nom Nom

Killer

Demon Finger

Doigt Prepare pour l'Hivers

Reading is Cool!

Fifi Doigtdacier

Jan 10 day 355 of 365

Finger Punk!

Raperos

DanzaUngherese

Mr Einstein

Abrigos

Ladri Finger

Paseo por el Campo

Catching Some Rays

Pelen!

Happy Snow Day!

Woops!

Painted Hands

The following showcase is from the painted hands created by Guido Daniele, which have been given the name 'hanimals'. They are examples of stunning artistry and creativity. They can all be found on the Guido Daniele website.

The following hand paintings are also the creations of Guido Daniele, and are from a range created for an advertising campaign.

Conclusion

I hope the painted fingers made you smile, and the painted hands produced the wow-factor for you.

Have you come across any painted fingers that are comical or cleverly imaginative that we missed from this list?

Please share your opinions and links with us in the section below.

• 26 Creative & Modern Office Designs from Around the World
• A Tribute to the Dragon – 35 Awesome Examples of Bruce Lee Artwork
• Year of the Dragon – Outstanding Dragon Digital Art
• Showcase of Creative Booklet Designs

Studies have shown, that if you can picture your future-self, it’s easier to increase savings – so how do you see yourself in the future?

People always have the mindset of working hard for money to secure their future or retirement but in these uncertain times where inflation, high cost of living, economic crisis and other mitigating factors, just working hard may not be the solution for a comfortable life in the future. This is especially important for freelancers where a fixed salary is often impossible. So you would want to make your money work harder, but how?

Well, you could try your luck on the lottery or gambling but this is definitely not recommended as the risk is high and the returns are unreliable. So the next thing you can turn to is investment, but are you undecided about which type of investment portfolio suits you? Do you lack the knowledge of what type of investment product to invest in? Do the terms, stocks, options, futures, bonds, mutual funds, certificates of deposit, money market investments, ETFs, Unit trusts and annuities confuse or even intimidate you?

That is where Betterment comes in.

What is Betterment?

Betterment is a smart, simple way to invest, especially for freelancers and designers. Betterment allows freelancers to enjoy the investment benefits that their corporate counterparts receive, without having employer-sponsored retirement or investing benefits. This is because they can open both regular investing accounts to save for things like a house or more education, as well as IRA accounts to get some tax-advantaged retirement savings.

Well, let’s look at the idea behind Betterment. By shouldering the complexity of various investment products and removing lots of unnecessary choices, it’s investment made easy with Betterment.

Here’s a video run-down of how Betterment works:

Why Betterment is Great for Freelancers

Betterment is a perfect investing product for freelancers and designers because:

• It has a sleek and simple UI - Signing up takes less than a minute, and determining how much money you want to invest in stocks versus bonds (your asset allocation) is as simple as moving a slider.
• Betterment is quick and easy to use. Freelancers are busy with their projects and clients and do not have time to constantly check and manage investment accounts. Everything with Betterment is a matter of a quick click or slider. Moreover, customers do not have to spend time picking the stocks or bonds in which they'd like to invest since Betterment has already done the work of creating a diversified portfolio (representing over 3500 companies in the US and abroad through 8 ETFs) for all of their customers.
• You can even access your Betterment account online or on your iPhone.
• Freelancing/design work can often be unpredictable as far as income is concerned, so freelancers often need to have quick access to their cash in an emergency. Most investment accounts come with minimums and withdrawal penalties, but with Betterment, there are no minimums and you can access your money at any time without a fee or penalty. Betterment combines the ease of online banking with the higher returns of investing in stocks and bonds.
• Many designers, freelancers, and entrepreneurs are already using Betterment! You can check out some of them here.
• Betterment was built by some of the best developers and designers in the financial technology space, so they understand how designers think! They won Best NY Startup at Tech Crunch Disrupt in 2010 and Best of Show at Finovate Fall 2010.
• Aside from those details, the way Betterment works is simple: You sign up, link your bank account, and set up investing goals, whether those goals are retirement, a vacation, a house, etc. They will recommend the right asset allocation and monthly contributions to make in order to achieve those goals, and you can always go back to the Betterment platform for more advice.
• Betterment takes care of important details for you: you are automatically diversified across the 8 ETFs, they automatically re-balance your account, and you can set up automatic deposits so you can regularly invest without lifting a finger.

Pricing

The only fee Betterment customers ever pay is an annual management fee, which is 0.15% to 0.35% of your balance. You can see more details on pricing here.

Great Features

Betterment is very different from a traditional brokerage. After you open a Betterment account and connect a bank account, you will then choose your investing goal and timeline followed by your asset allocation.

After that, Betterment basically goes into autopilot mode and handles the rest. You are free to move on and let Betterment do their work. Betterment will invest your money in a mix of six stock Exchange Traded Funds (ETFs) and/or two Treasury bond ETFs. If you set up an automatic investing transfer (highly recommended) then Betterment will pull the money each month and invest it using the original asset allocation.

They also periodically re-balance your investments so that you maintain the proper asset allocation. For the management of your investments, Betterment charges a fee of 0.15% to 0.35%, depending on your account balance. There are no others fees that Betterment charges and no hidden fees, and there are also no minimum balance or investing requirements.

Free Allocation and Visualization tools

Betterment offers free allocation and visualization tools that they have available. The tools make it easy for the average investor to see what kind of returns they might project (given historical returns) if they invest with a 5, 10, 20 or even 30-year time horizon. Once you decide upon an allocation and time horizon that you are comfortable with, simply hit the button to change your allocation, and within a few minutes your changes are made!

You can check out their online demo here.

Conclusion

Investing could be a very tedious and time-consuming chore. That’s why Betterment comes in to take over your investment woes so you can concentrate on other more immediately important stuff. Betterment is very easy to use and simple to get started in less than 5 minutes. They strongly encourage automated investing and offer retirement investing through IRAs.

The best part is that they are highly liquid so you can move your money in and out of the brokerage without any fees or lock-in requirement. With the transparency of their fees and their sound knowledge of fund choices to broad index-based ETFs, Betterment could be well worth a try for anyone.

Disclaimer: Please note that Betterment is only for customers in the US.

PS: The opinions and views presented in this article on Betterment are solely those of the author and do not necessarily represent those of the company. We strongly encourage you to try the recommended product/service to experience it personally.

Random Posts

• 69 Sexy and Explicit Advertisements: See It Creatively
• 13 Useful WordPress SQL Queries You Wish You Knew Earlier
• Understanding Domain Names: Why and When?
• The Designers Republic Guide to Catchy Color Combinations

Although often overlooked, posters are, for sure one of the most excellent ways in which you can effectively communicate your clients’ information to their prospective customers or buyers. Although in the graphics industry designing or printing a poster is one of the most excruciating areas where clients would like to convey the whole thing from company to product to catch the attention of the most number of prospective customers.

Poster designs symbolize the fundamental nature of a business or event, and therefore can be a great way to demonstrate one’s creativity. They permit artists to put themselves across in innumerable ways. Unlike other print media, posters do not confine graphic designers with certain layouts and design elements. In this post, we have compiled a list of 50 Poster Designs for your inspiration. Hope you enjoy this assortment.

Showcase of Stunning Poster Designs

Movie Posters

Crank 2: High Voltage

Body Snatcher

Vector Movie Poster

Deep Red

Rockstar Posters

Avatar

Treasure Planet poster

Saw

Assassin's Creed movie poster

Retro Futurism in Poster Design

I Created Disco

Retro Space

Found

Retro Futurism III

Retro Futurism

Retro Futurism II

Omega code

Triobelisk

Computer Arts - Stereo

Vector Posters Design

Peanuts: great pumpkin

Sound Idea Presentation Cover Page

John Petrucci BFR

Every Color Of Your Summer

2008 Volleyball Poster

Ovenglove

Captain America Retro Poster

Cinema

WAR-PEACE

Typography Posters

Waste Not. Want Not

Typo-graphic Dope

Dsuvhh

Let's Rock Around The World

Hyper Spectrum

D-Edge Awards

N. JoyFlow Typo

Go Catch Some Waves

Guimaraes JAZZ 2009

Print Advertising Poster Design

Microsoft Virtualization: Universe

Levi's: Live unbuttoned, 2

Samsung: Teen

Panasonic 3D TV: Dino

Sony NEX 5: A little professional, Press

Harley-Davidson

Bacardi - Shoot & Fly

Gatorade: Running

Global Warming Poster Design

Global Warming

Stop It Now

Stop Global Warming

Climate Change

Help Stop Global Warming Ad

Save the Earth 3

Conclusion

We are sure that after browsing this collection of poster designs you are now convinced that poster design is always an essential part of a designer’s profile. Posters can be designed for a variety of reasons be it movies or events or only for personal reasons, the design needs to be convincing so that you do not have to force the viewers to think from your perspective. What do you have to say about this assortment?

• Fascinating and Inspiring Canvas Prints
• 40 Unique and Beautiful Examples of Brochure Design
• The Grindhouse – 30 Awesome Fan-Art Movie Posters Inspired by Quentin Tarantino Films
• 50 Beautiful Photos on Instagram

Wireframes are a simple yet effective way to plan and prototype the layout of a website before writing any code. They help structure ideas and test assumptions, and are great for facilitating early feedback from clients. That's why, over the past few years, wireframing has become an integral part of web design and web development. Therefore, the question is not whether to create wireframes, but rather how.

Although there are dozens of web-based wireframe tools available, I prefer to do my wireframing in a native desktop application for the following reasons:

• I can work offline at places with poor or no internet connection, e.g. when riding the train or a plane.
• I am not dependent on someone else to take good care of their servers.
• I prefer to pay a one-time fee instead of monthly subscription charges.
• I have the freedom of knowing that I can continue using the tool even if its vendor goes out of business tomorrow.

In this article, I will introduce you to seven desktop-based wireframing tools for Windows, Mac OS X or Linux.

Non-Web-Based Wireframe Tools

WireframeSketcher
WireframeSketcher can be installed as a plug-in for any Eclipse-based IDE and is also available as a standalone application for Windows, Mac OS X and Linux. It lets you choose between two different styles for the look of your wireframes: Sketch (to make wireframes appear hand-drawn) and Clean (with crisp, straight lines). Other major features include the ability to create interactive prototypes and the possibility to present wireframes as storyboards.

WireframeSketcher can be tested for 14 days without restrictions; afterward, you have to pay $99 for a single-user license.

PowerMockup
PowerMockup is an add-on for turning Microsoft PowerPoint into a wireframe tool. It provides a library of wireframe elements and icons that you can drag and drop onto a PowerPoint slide. You can also create your own elements using standard PowerPoint shapes and add them to the library.

PowerMockup works with PowerPoint 2007 and 2010 (Windows only) and can be tested as a trial version free of charge. The full version is priced at $39.95.

SketchFlow
Another wireframing solution for Windows only is SketchFlow, a UI prototyping tool provided by Microsoft as part of its Expression Studio suite. While SketchFlow is a little complicated to use and has a rather steep learning curve, it is extremely powerful when it comes to creating interactive prototypes that simulate real functionality. You can bind controls to data sources or even make use of the .NET Framework for adding application behavior.

Expression Studio 4 Ultimate, which includes SketchFlow, costs $599. A 60-day free trial version can be downloaded from the Microsoft website.

Axure RP
Axure RP is one of the oldest and most comprehensive prototyping solutions available. It supports the whole chain from drawing quick wireframe sketches to creating interactive, high-fidelity design prototypes and generating detailed specifications.

Axure RP is available for Windows and Max OS X. To try it out, you can download a 30-day trial version from the Axure RP website. A single-user license for Axure RP costs $589.

Pencil
Among the seven tools listed in this article, Pencil is the only one that's completely free and Open Source. It can be installed as a Firefox add-on or as a standalone application for Windows, Mac OS X or Linux. Pencil is easy to use, includes a large set of stencils, supports linking between pages, can export to various formats, and allows you to create your own personal collection of stencils.

As mentioned before, Pencil is free (released under GPL version 2). Don't hesitate to give it a try.

MockupScreens
By default, MockupScreens uses a Windows XP style for the screen prototypes that you create. This makes them look a bit outdated at first, but you can easily switch to a different skin via a drop-down menu in the toolbar. Compared to other wireframing tools, MockupScreens provides a relatively small number of basic user interface elements and icons. Two great features of this tool are its ability to annotate individual elements and the possibility to group and arrange screens in scenarios.

MockupScreens is available for both Windows and Mac OS X. The price for the full version is $99.95.

DesignerVista
DesignerVista allows you to create both low-fidelity wireframes and high-fidelity GUI mockups. It supports page templates and themes, can export to HTML and PDF, has a slide show feature, and is able to generate UI specification documents.

DesignerVista runs on Windows XP or higher and is priced at $79.99 per license. A free 20-day trial version is available for download at the DesignerVista website.

Conclusion

Although some of these wireframe tools may seem costly, online tools can cost around $60 per month, so in the long run, offline tools can save you money and they are far more convenient.

Do you use an offline or web-based wireframe tool? Which is your choice? Please share your comments with us in the section below.

• ProtoShare: Effective and Efficient Website Wireframing and Application Prototyping
• MightyDeals Giveaway: 5 Winners of Any Current Deal!
• Top 10 Ways to Embed Video into a Web Page
• 6 Outstanding Wireframe Resources to Inspire Your Next Design

Good packaging design is a formula; traffic stopping, relevant design + innovative and intuitive forms + language that speaks to the consumer's values. When it comes to food packaging, getting consumers to fantasize about what this food might taste like is paramount. Effective food packaging curates insatiable cues that lead consumers to act irrationally and impulse buy based on the promise of a delicious reward.

Here are our 10 top picks for the tastiest food packaging design for their ability to tantalize our taste buds even before we’ve taken a bite.

10 of the Tastiest Food Packaging Designs

Sir Kensington's Scooping Ketchup

When a ketchup giant has cornered the market for so many years you may think that there is little opportunity for a newbie. Enter Sir Kensington Ketchup. Their innovative design brings sophistication to this often scorned condiment so much so that it may even be dinner party worthy. Gasp!

Sir Kensington's Scooping Ketchup

King's County Jerky Co

Beef Jerky is a fairly no-frills type of food. And what could be more reflective of that than this simple paper package. King's County’s bag is a strong departure from the usual plastic wrappers we see in this space and it’s also reflective of this product’s natural heritage. When you are used to seeing beef jerky marinating in its own juices within a tightly wrapped plastic film, this paper version certainly ups the gourmet ante and makes us want to sink our teeth right in.

King's County Jerky Co

Sheffield & Sons for Bloom Grocery

I’m no whiz in the kitchen, but the Bloom Grocery’s line of private label spices makes me yearn to be the next iron chef. The diaphanous vials let the integrity of the product speak for itself and the colorful, information packed labels, add to the visual delight. Spicy!

Sheffield & Sons for Bloom Grocery

Steve's Leaves

Let’s face it, we may not always be in the mood to eat our greens, but Steve’s Leaves is making it a way more enjoyable experience. From the tongue-in-cheek copy to colorful designs geared towards shopability, these are not your average leaves. I never thought I’d be lusting for watercress?!

Steve's Leaves

Terra Chips

Bravo to Terra, for their potato-chip innovation. Not only are these chips more nutritious, but they look absolutely delicious. The colorful array speaks of the various flavors and textures each bag holds and references the naturalness of this snack. You can practically taste the euphonious crunch you are about to experience!

Terra Chips

Waitrose

We have to applaud Waitrose for having some of the tastiest private label packaging across the board, but this pizza packaging takes the cake. Even as a gluten-free consumer, I’m yearning to take a bite. The artful cut-out is a nice reference to portion size but also highlights the use of wholesome ingredients. Simply mouthwatering!

Waitrose

Pom Wonderful

The bottle shape is iconic, we’d know it anywhere. Pom blazed a trail in the beverage category with this unique shape that pays homage to the powerful anti-oxidant-packed pomegranate you are about to imbibe. The rich colors of this natural beverage shine through to captivate consumers. It screams “Drink me!”, in a way that very few have the willpower to ignore.

Pom Wonderful

Haagen-Dazs Five

Haagen-Dazs did a tremendous job with their packaging for five. This all-natural ice cream is prepared with only 5 wholesome ingredients and the pureness of their package is reflective of this natural philosophy. The use of singular flavor images amidst the clean backdrop makes us yearn for a taste of this frozen slice of heaven. I’ll take two, please.

Haagen-Dazs Five

Gu Chocolate Puds and Fru Fruity Puds

Pre-packaged desserts have never looked so good. The sumptuous desserts are at the forefront of these packaging designs so when you hit your 4pm sugar crash, these morsels feel like a little slice of heaven. Somehow when something so sinful is packaged in something so delicious…you feel a little less guilty.

Gu Chocolate Puds and Fru Fruity Puds

Migros Ravioloni

And last, but not least, we have Migros’ private label packaging. From the beautiful photography to the stark white backdrop, this elegant and impactful package from the Swiss retailer is simply divine. Throwing this in your shopping cart makes you feel more like a gourmand and less like a glutton.

Migros Ravioloni

Conclusion

If you’ve reached the bottom of this post and you’re feeling hungry, congratulations, your subconscious is buying in exactly the way marketers had hoped! We eat with our eyes as well as our mouths and the visual experience can be as satisfying as what we taste. So when you’re designing your food packaging the most important question you can ever ask yourself is, “Does this look good enough to eat?” Bon appétit!

Which one of the above showcased food packaging designs is your favorite? Let us know at the comment.

• Inspiring Digital Art Featuring Hands
• 50+ Amazing Console Mods
• 20 Exquisite Portraits of Poverty
• A Tribute to the Dragon – 35 Awesome Examples of Bruce Lee Artwork

Oh forms! For the most part, forms look ugly, old and inconsistent across browsers, but they play one of the most important roles on the web; user input.

User input is everywhere, from contact forms to sign-up forms and from surveys to complex user interfaces. Forms come in many shapes and sizes, colors and styles, but they all have something in common; validation.

The Validation Process

The validation process can occur in the back-end or in the front-end, using PHP or JavaScript respectively, but most of the time, both the server and the browser will be involved in order to create a robust and secure solution.

HTML5 brings many validation filters to the table and it works pretty well, but only on supported browsers, which means, no IE8 or less. The old fashion way, using PHP exclusively, will offer support for IE, but it's not up to current web standards, where the user expects validation to be processed on the same page, which is also much better in terms of usability. This is where JavaScript comes in handy.

These are some of the most common concepts of input validation in the front-end:

• Prompt a list of errors when the user submits the form providing a description for each and every field that failed to validate.
• Display a description next to the field(s) that failed to validate when the user submits the form.
• Live validation. Validate as the user types or when the field looses focus displaying a description next to the field that fails validation.

The first and second examples are probably the most commonly used patterns to validate forms in the browser. The third option is less popular but it has that extra “feature” that makes it a bit more usable and predictable providing a better experience to the end-user.

Regular Expressions

Regular expressions are essential to the validation process. Each input has to match a set of rules or filters in order to determine if its value is valid or not. We'll be using regular expressions often in this tutorial.

Regular expressions are easier and more powerful than they seem. Think of them as a unique and independent micro-language that it's embedded in almost any other programming language in the world.

The best tutorial you can probably find on how to use regular expressions is regular-expressions.info. It's a language agnostic resource on best practices and common uses of regular expressions that goes into every important detail providing easy to follow examples.

You can also use this quick JavaScript RegExp Reference.

In JavaScript you can create a regular expression in two ways.

• Literal notation: /regularexpression/
• As a RegExp object: var regex = new RegExp('regularexpression')

It's important that you understand the basics of regular expressions to follow this tutorial. Feel free to refer to those websites whenever you encounter something that you don't quite understand or that you think needs some more explanation.

What You Need to Get Started

We're going to build a small jQuery validation plugin based on the third concept mentioned in "The validation process".

This tutorial assumes that you have experience in HTML and CSS as well as some knowledge of JavaScript and jQuery.

Before we start, prepare a basic HTML template and load the latest jQuery library, an empty plugin.js, the normalize.css reset and a separate CSS stylesheet.

You can also use jsfiddle as a starting point.

Building the Form

Let's build the basic markup and styles of the form. I'm not going into too much detail since this is a more JavaScript oriented tutorial.

<form id="my-form">
    <p><label>Name <span>*</span>:</label><input type="text" class="required name"/></p>
    <p><label>Password <span>*</span>:</label><input type="password" class="required pass"/></p>
    <p><label>E-Mail:</label><input type="text" class="email"/></p>
    <p><label>Phone:</label><input type="text" class="phone" placeholder="999-999-9999"/></p>
    <!-- Empty label to align button to the rest of elements –->
    <p><label>&nbsp;</label><button type="submit">Submit</button></p>
</form>

We use classes to specify the filters we want to link to each input. You can name these filters whatever you want as long as you're consistent. We'll be using these class names in JavaScript to evaluate each field against a regular expression as we type.

Let's style the form with CSS. If you're using your own project template, make sure to load the normalize.css reset, otherwise it might look different.

#my-form p {
    float: left; /* so it doesn't span 100% width */
    clear: both; /* so every input is in a new line */
    position: relative; /* to be able to position other elements */
    margin: .5em 0;
}
#my-form label,
#my-form input { display: inline-block; }
#my-form label { width: 100px; } /* depends on the length of your labels */
#my-form label span { color: red; } /* required star */
#my-form input {
    padding: 0 .3em;
    height: 24px;
    line-height: 24px; /* for IE */
    width: 200px;
    border: 1px solid #ccc;
}

At this stage, the form should look like this:

Building the Plugin

It's important to think about how do we want to use this plugin, or how will the user make use of it. The most obvious way is to be able to call the plugin like this:

$('#my-form').quickValidate();

With that in mind we can begin building our plugin using a common jQuery plugin template as a base.

Open your plugin.js if you're working locally. If you're working with jsfiddle use the JavaScript panel and make sure the latest jQuery is loaded in the framework dropdown menu.

(function($){
    $.fn.quickValidate = function () {

        // Cache variables
        var $form = this;

        // Only text and password fields will be processed
        var $inputs = $form.find('input:text, input:password');

        // Plugin code here

        // Allow jQuery to chain stuff to our plugin
        return this;
    };
})(jQuery);

The plugin will be divided in four parts so it's easier to follow and understand how it works:

• Filters
• Validation
• Error handling
• Events

We'll be putting everything that follows within the "Plugin code here" area.

Filters

We need to create a reference and store all the filters that we previously set as classes in our HTML. The most organized way of doing this is by using an object literal. We'll use the class name as the filter name or key, and each key will contain a regular expression and an error message linked to it.

The required filter is the only one that doesn't belong here. It's a really simple filter that doesn't need a regular expression. We'll go into more detail later on.

var filters = {
    name : {
        regex : /^[A-Za-z]{3,}$/,
        error : 'Must be at least 3 characters long, and must only contain letters.'
    },
    pass : {
        regex : /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/,
        error : 'Must be at least 6 characters long, and contain at least one number, one uppercase and one lowercase letter.'
    },
    email : {
        regex : /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
        error : 'Must be a valid e-mail address (user@gmail.com)'
    },
    phone : {
        regex : /^[2-9]\d{2}-\d{3}-\d{4}$/,
        error : 'Must be a valid US phone number (999-999-9999)'
    }
};

Using a structure like this is future proof. Adding new filters is as easy and fast as it can get. Now, take a moment to analyze the regular expressions you just wrote. Let's take the very first regex as a simple example and break it down:

^[A-Za-z]{3,}$

• ^: matches a string that starts with
• [A-Za-z]: an uppercase or lowercase letter
• {3,}: at least 3 or more times
• $: and ends. (not allowing any other characters but letters)

You can find most common regular expressions on Google, like e-mail, telephone, password, etc, but it's crucial to understand how they work. You can use the resources from "Regular expressions" to guide you.

Validation

This is the core of our plugin. The validate() function or method will evaluate all classes of a given input and it will test its value against the filter that matches the class. It's important to note that an input can have many classes, not only the ones related to our plugin but our plugin will only read two main classes; the required class and one of the filters from the filter object.

The validate() method takes two arguments, klass and value. The class will be a string containing all the classes of the given input, and the value, well, it's the value of the input which we'll test against the matching filter.

To build this function we're going to use the popular JavaScript module pattern. Let's break it down and comment out the important parts:

var validate = function (klass, value) {

    // Initial values of the public variables
    var isValid = true,
        error = '';

    // If the field is empty
    // and it has the `required` filter...
    if (!value && /required/.test(klass)) {
        error = 'This field is required';
        isValid = false;

    // If the field is not empty...
    } else {

        // Loop through all filters
        for (var f in filters) {

            // Create a new regex with the filter name
            var regex = new RegExp(f);

            // If the the current filter
            // in this iteration matches
            // a class...
            if (regex.test(klass)) {

                // If the value doesn't match the
                // regex of the current filter
                if (value && !filters[f].regex.test(value)) {
                    error = filters[f].error;
                    isValid = false;
                }

                // Exit the loop as soon as we find
                // a filter that matches a class
                break;
            }
        }
    }

    // Return public variables
    return {
        isValid : isValid,
        error : error
    }
};

Error Handling

When we run the validate() method with some parameters, it will return the isValid variable as well as an error if the value failed to validate. The error is just a string assigned to a variable, but we want to create an HTML tag so we can style it with CSS and integrate it in our form.

When the value of an input doesn't validate we want to highlight the field and show and icon that indicates something is wrong. When the user hovers over the information icon, an error popup will appear next to it with a brief description on what's going on and/or how to fix it.

Now, let's go back to our HTML and add some temporary markup to just the first field. This markup will be dynamically generated for every field with jQuery in the error handling function so we use this merely as a template for now, so we can style it with CSS.

<p><label>Name <span>*</span>:</label><input type="text" class="required name invalid"/><i class="error-icon"></i><span class=”error”>This is an error</span></p>

We've just added an invalid class to the input, an icon < i class="error-icon" > and a < span class="error" > which will contain the error message. Again, this will be added dynamically with jQuery.

Let's style those new elements in CSS to look like the image above:

/* Error highlight */
#my-form input.invalid {
    background: #FFFAC4;
}

#my-form .error-icon {
    position: absolute;
    top: 0;
    right: -32px;
    height: 24px;
    width: 24px;
    background: url(http://i43.tinypic.com/dbsh3m.png) no-repeat;
    cursor: pointer;
}

/* Error description */
#my-form .error {
    display: none;
    position: absolute;
    top: 10px;
    right: -195px;
    z-index: 999;
    padding: 10px;
    width: 120px;
    font-size: 12px;
    background: #222;
    color: white;
}

/* Popup arrow */
#my-form .error:after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent #222 transparent transparent;
}

The icon used in this tutorial can be downloaded for free at Iconfinder.

Now that the styles are all set, you can remove that markup from the HTML and revert to the original code. Next, we have to create that markup with jQuery.

The printError() method takes an $input jQuery object as parameter and creates the necessary HTML markup. It uses the validate() method to test if the given input validates or not. Then it prints the error and icon accordingly.

var printError = function($input) {
    // Cache variables
    var klass = $input.attr('class'),
        value = $input.val(),

        // Run the `validate()` method and store
        // it's returned values in a variable `test`
        test = validate(klass, value),

        // Create markup for the error and icon
        $error = $('<span class="error">' + test.error + '</span>'),
        $icon = $('<i class="error-icon"></i>');

    // Reset:
    // Remove the current markup
    // and `invalid` class if found
    $input.removeClass('invalid').siblings('.error, .error-icon').remove();

    // If the input fails to validate...
    if (!test.isValid) {
        $input.addClass('invalid');

        // Insert error and icon
        $error.add($icon).insertAfter($input);

        // Show the error when hovering the icon
        $icon.hover(function() {
            $(this).siblings('.error').toggle();
        });
    }
};

Events

We need to make sure that the required fields are invalid when the plugin loads. Then we'll bind the events to our inputs and form.

// Initialize:
// Go through every input and
// check if it has a required class
// If it does, run the `printError()`
// method on that input
$inputs.each(function() {
    if ($(this).is('.required')) {
        printError($(this));
    }
});

// Run the `printError()` method
// everytime we press a key in an input
$inputs.keyup(function() {
    printError($(this));
});

// Make sure that no invalid inputs
// are found when we submit the form
// Otherwise stop the form from submitting
// and prompt an error
$form.submit(function(e) {
    if ($form.find('input.invalid').length) {
        e.preventDefault();

        // The `alert()` is the simplest example
        // but you can really do whatever you want
        alert('The form does not validate! Check again...');
    }
});

The Final Step

Finally, call the plugin on your form:

$('#my-form').quickValidate();

Conclusion

QuickValidate brings easy to use validation in an unobtrusive small plugin with improved usability and very easy extensibility.

This plugin is GPL licensed and it's been tested in IE8+, Webkit and Firefox.

Download QuickValidate at github.

Check out the final result an fiddle with it at jsfiddle.net.

• 15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs
• 15 Simple & Effective jQuery Plugins that Enhance Your Forms
• Animating Colors: Using CSS3 Transitions with jQuery Fallback
• Gain A Better Understanding of jQuery

Today, our pals from ThemeFuse would like to share 3 premium WordPress themes licenses with us. How about some free stuff to start the day off on a high note?

When you're working with WordPress to run your site then you're in luck. The fortunate winners of today's giveaway will be given access to download one WordPress theme of their selection from ThemeFuse ... free of charge.

About ThemeFuse

ThemeFuse is known inside the premium WordPress themes niche for their original designs and world-class support. At this point, they appear to be the first choice in case you are out there looking for an original WordPress theme.

ThemeFuse is the genuine top league in terms of WordPress theme stores. No matter what sort of website you are building you are sure to get yourself a proper theme at ThemeFuse.

Plus what you end up with is not only looks and stylish designs. The themes are carefully crafted on the source code side as well. Just to make your life easier they provide easy-to-use configuration interface with a lot of capabilities. Also, you can always visit the Support Forum, the FAQ section, or the online documentation to get more information about the theme you have won.

Following are a few examples of themes created and produced by ThemeFuse. View a full list of WordPress themes on their website.

Sportedge - Sport WordPress Theme
The versatile SportEdge Magazine is the best sport WordPress theme ThemeFuse could have come up with, that's a given! See for yourself.

Lifestyle - Magazine WordPress Theme
An online magazine oriented WordPress theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.

Clean Classy Corporate - Enterprise WordPress Theme
Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.

PhotoArtist - Photography WordPress Theme
If you are a photographer looking to showcase your work in style then let us present you your soon to be portfolio website.

Bon Apetit - Restaurant WordPress Theme
This WordPress theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.

Creative Juice - Portfolio WordPress Theme
They've crafted this WordPress theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.

Prizes

3 coupons, each worth $49. Valid for any available themes.

Enter the giveaway

• Submit a comment to this post and tell us which is your favorite theme and where will you use it if you were one of the winners.
• Spread the word on Twitter: Win a free copy of @ThemeFuse #WordPress Theme from @onextrapixel (RT to Enter) to increase your chance of winning.
• Like ThemeFuse on ThemeFuse Facebook page (they will notify the winners there too).

This giveaway ends on 14th May, 2012. Please use a valid email address when filling out the comment form. Please comment only once.

The winners will be selected at random, contacted by email within 3 business days after the contest is over and announced in this article.

Good luck, everyone!

• WordPress Themes Giveaway: 5 coupon codes from Themify
• A Collection of the Most Recent and Useful WordPress Themes and Plugins
• WordPress Theme Giveaway: 3 Venture Themes Up for Grabs!
• Tokokoo Giveaway: 5 x Parquet Premium WordPress eCommerce Themes

To some degree, everyone never fully grows up. No matter how hard anyone wants to fight it, there will always be some part of your childhood self lingering around. Some people might not view this as being a good quality for themselves to have. Let’s face it, children aren’t widely known for being the most wise and best decision makers.

However, there is one thing about children only an idiot can’t recognize or would ignore. This being that children are instinctively better learners than their adult counterparts. To them every day is a new learning experience, so its pretty obvious why an older person simply can’t compete here. That’s all okay though because for older people, that same ease of learning can be found when learning about something there is a personal passion for.

That is why in this article, we’re going to take a look at how to properly utilize your inner child to better your career.

Using Your Inner Child to Better Your Career

What Is the Inner Child of a Web Professional

For any professional in their chosen field for the right reasons, it’s impossible not to have encountered your inner child. The inner child of any professional becomes most clear to the eye when what you’re doing no longer appears to be work, and pursuing a higher level of knowledge in this field it seems like the most fun idea that materializes into your head.

For professionals apart from the web industry, the inner child is visible almost all the time. Here are a few instances where it is most easily recognizable to better illustrate this point.

When You First Entered The Web Industry

Remember how it felt having that first encounter with HTML? How about PhotoShop? An even better question, how clear is your memory of your first time looking at a website and just being dumbfounded from looking at it?

Speaking from personal experience, those moments will never be lost memories. For everyone that was a special time, and this is where your first encounter of your inner child occurs.

Realizing Making a Quality Living is a Reality

When we’re young, the thoughts of what was an ideal adult life were based off of being able to do what was fun then for a professional living. With that ideology in mind, and age range, its no wonder most children want to be professional athletes or entertainers. These were the people they saw all the time doing the things they enjoyed, and living quality lifestyles by doing it on a professional level.

The early adapters of web designers and developers didn’t have an industry as prosperous as we see now. Stories of long nights working diligently, on things we now can do in an instant, really showed the true passion and hunger for this field those early adapters had. Now try to imagine the feeling someone working a minimum wage job during the day, and studying web technologies at night would have when they realized what type of quality living was possible through the web industry when it grew a little.

This feeling felt is another instance where the inner child can be found.

Learning a New Skill or Furthering One

The main word anyone would be a fool to associate this fast paced industry we make up is boring. There is seemingly something new popping up everyday to learn and master, and new technology for viewing that is changing everything we know. It wasn’t too long ago when parallax design was the new trending practice leading the industry, but seemingly as fast as it came to prominence a new practice took its place. This practice of course being responsive design.

The way new skills and techniques keep popping up out of everywhere, even the most advanced professional has to be amazed from time to time. This amazement of embracing a new and foreign skill is the most common recurring instance where the inner child is present.

How You Lose Sight of Your Inner Child

Despite how fun and exciting this industry is, there are a lot of negative factors that can affect your connection with your inner child and your career. This is nothing new of course, these things are always present for any creative who chooses to use their creative talents for a living.

The only difference for web professionals is that seemingly everyone thinks they can give good insight into how a project should be carried out because they browse the web all the time. Instead of going into detail on these negative aspects, especially since they have been talked about in an abundance of other articles, simply listing them will suffice:

• The stress of pursing regular learning to stay up to date
• The long hours
• The sometimes awful clients
• The never ending stress
• The constant game changers almost making you obsolete

The list can go on forever, but these five are good enough to get the point across. This may seem like there is no hope for ever maintaining the connection to your inner child because these factors mentioned above are continuous. However, it is quite possible to find and maintain it despite these factors contributing to its loss.

Finding and Maintaining

Energy is never created or destroyed, it is either present or moving to a new destination. Looking past the oblivious chopping up of the definition of energy to suit this article, it perfectly relates to the topic of finding and maintaining your inner child.

So with that in mind, let’s take the time to look at some ways of finding and maintaining your inner child in this joyfully chaotic industry.

Spend Time Around Those Less Experienced

There is nothing that can match the same pure excitement of someone new to the industry. That highly energized tumbling around in hopes of one day obtaining a higher grasp of web technologies creates a ton of wonderful memories.

For those more seasoned in the industry, these days are long gone. So by spending time around fresher industry faces, you’ll easily be able to pick up on all those good vibes they're sending off. The less seasoned one will also benefit from having someone with quality experience in their corner.

Looking Back At Old Work

For everyone, the work they did when they first started feels like it should never see the light of day. This of course is understandable, especially depending on when you started.

However taking the occasional quick glance into past projects, will give a quick laugh and energize you into pushing with what you are currently doing.

Take the Time To Look At How Far You’ve Come

As everyone with any amount of serious experience in any field will tell you, the best times were always in the unknown at the beginning. The questionable destination, the seemingly impossible goals, the unimaginable difficult learning curve imagined, and let’s not forget the making money aspect. Taking a few seconds to take note of where you are, compared to where you were when you started will give a great appreciation for what you have now, and the journey that led you there.

Conclusion

The person found in childhood youth is never truly gone as maturity begins to occur. It simply transfers from the conscious to the subconscious mind, waiting to find usefulness again. For any professional in a stressful industry, finding a career where finding your inner child is a breeze is vital to maintaining sanity.

In this article hopefully you’ve learned more about your inner child, and where to find him when things get a little unbearable.

• Finding a Balance Between Personal and Paid Work