Development

Snippet O’ the Week: Preload images with jQuery

March 29th, 2012 by Patrick Cox | No Comments

jQueryLogo

The popularity (and rightly so) of responsive web design is growing and while it’s fairly easy to set up flexible grids and text styling via medi queries, images tend to be harder to work with in a responsive design. Slow loading images can be a big deal to users especially when your site it trying to load images that just aren’t being used – like different header backgrounds for different display sizes. A great way to make sure you images load quicker is to preload your images in the background while the rest of the page is loading.

I found the following snippet at Engineered Web after I failed to find any snippets that worked correctly. View the source code here for the full explanation of the code.

Use this script:

(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery)

Call the script by:

jQuery.preLoadImages("largeHeader.png","medHeader.png","smallHeader.png");

Good luck!


Excellent HTML5 LocalStorage Tutorials

March 26th, 2012 by Patrick Cox | No Comments

HTML5LocalStorage

So lately I’ve been falling deeply in love in with HTML5. Its power, versatility and simplicity is so attractive to web designers and web developers. One area of HTML5 that I absolutely love is LocalStorage. LocalStorage gives you the ability to easily create a DB for your site or app right in the browser. After reading article after article and tutorial and tutorial here’s a great collection of excellent articles from around the interwebs on the subject.

HTML5 Local Storage – kirupa.com

Because web pages do not persist data, various solutions have been proposed over the years ranging from cookies to 3rd party plug-ins to browser-specific implementations. With HTML5, you have something new – something that everyone hopes will stick! This “something new” is a solution affectionately known as Local Storage……

HTML5 Local Web Storage Database Tutorial And Example - aquim.com

Up until the introduction of HTML 5 web storage, the most common method for storing data locally on a user’s machine was to use cookies and sessions. While these methods are adequate for storing simple values anything other than trivial amounts becomes problematic. This is where HTML 5’s Web Storage comes in to play. Referred to as “Local Storage”, “DOM Storage” or a “Web SQL Database”, HTML 5 web storage allows a developer the freedom to store large amounts of data on the clients machine that persists past past sessions, doesn’t require unencrypted……

Create super-efficient SVG characters with localStorage - netmagazine.com

SVG is a great way to paint and animate high quality, scalable vector graphics on the web. It’s a form of XML and can be easily exported from vector packages, such as Illustrator, for use in your website. Once rendered it can be scaled to any size without losing quality and animated or manipulated like a collection of DOM objects……

Wrapping Things Nicely with HTML5 Local Storage – 24Ways.org

This is great, as it gets people excited and it gives the media something to show. There is much more to HTML5, though. Let’s take a look at one of the less sexy, but amazingly useful features of HTML5 (it was in the HTML5 specs, but grew at such an alarming rate that it warranted its own spec): storing information on the client-side……

HTML5 localStorage Part One – paperkilledrock.com

We all know how awesome the future of the web will be with HTML5. This new spec has some amazing potential and is already getting a lot of use. From the new tags like section, article, header and footer to the video debate taking center stage with Apple vs Adobe. There are so many great things about HTML5 but today I want to go over just one; localStorage……

HTML5 code example: Intelligently store Images in localStorage for faster page loads! – ibm.com/developerworks

Recently I was exploring lazy load techniques as a method to improve perceived page load times.   There are a number of methods to lazy load web artifacts, which enable a web developer to delay or load page elements on demand.  Typically these methods are used to control and prioritize the rendering of primary web page elements to the benefit of the overall user experience……

Maintaining the user journey with HTML 5 web storage – punkchip.com

The HTML 5 specification includes a web storage API for data storage in web clients. It means we can store large amounts of data, client-side, to read and write to as we like without causing the site to slow down (when compared to using cookies). …..

The Past, Present & Future of Local Storage for Web Applications – diveintohtml5.info

Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions……

Working with HTML5 localStorage() - http://html5tutorial.net

I want to focus on localStorage() this time. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer……

Exploring HTML5′s localStorage – Persistent Client-Side Key-Value Pairs - bennadel.com/blog/

The other day, when building the Things I Give website and web app, I used HTML5′s localStorage object for the first time. Like cookies, the localStorage object provides a way to persist string-based, key-value pairs on the client. Unlike cookies, however, these values don’t have to be passed back to the server with every request. And, the localStorage has a much larger quota than cookies – about 5 megabytes on supporting browsers……


9 Awesome HTML5 Audio and Video Tutorials

November 26th, 2011 by Patrick Cox | 1 Comment

Teen Gazing Through Mirror

Trying to learn HTML5? Wanna embed your videos and audio using HTML5? Check out these great tutorials on how to use HTML5 to embed your videos. Each tutorial goes through the simple HTML5 code necessary and how to create fall backs for older browsers that don’t use HTML5. Happy embedding.

1 – Using HTML5 Video and Audio in Modern Browsers

http://www.sitepoint.com/using-html5-video-and-audio-in-modern-browsers/

2- How to Make Your Own Video Player On HTML5 Video

http://www.splashnology.com/article/how-to-make-your-own-video-player-on-html5-video/2654/

3 – HTML5 Audio and Video: What you Must Know

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

4 – Embed Audio and Video in HTML 5 Pages

http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/

5 – HTML5 – Audio & Video

http://www.tutorialspoint.com/html5/html5_audio_video.htm

6 – Comprehensive video tutorial on HTML5

http://www.html5trends.com/tutorials/comprehensive-video-tutorial-on-html5/

7 – Degradable HTML5 audio and video Plugin

http://soukie.net/degradable-html5-audio-and-video-plugin/

8 – How to incorporate video with HTML5

http://answers.oreilly.com/topic/990-how-to-incorporate-video-with-html5/

9 -Tutorial: Serving HTML5 Video Cross Browser (including iPad)

http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/


Snippet O’ the Week: Add Custom Post Type to Feed in WordPress

September 14th, 2011 by Patrick Cox | 1 Comment

custom_post_feed

So you designed a slick WordPress theme for a client, you set up WordPress for them and installed all the plugins and you have even gone the extra mile and designed a sweet video player and built a new custom content type for them. Then, about a month later you get a call that says the video posts aren’t showing up in their RSS feed – what is a designer to do?

Add your custom post type to you feed silly. Its really pretty easy, just add another little function to your functions.php file, way easier than building the custom post type in the first place. Here is the code, good luck ya’ll.

function myfeed_request($qv) {
    if (isset($qv['feed']) && !isset($qv['post_type']))
        $qv['post_type'] = array('post', 'videos');
    return $qv;
}
add_filter('request', 'myfeed_request');

source for snippet: wp-snippets.com


Responsive Web Design Tutorials for Web Designers

September 6th, 2011 by Patrick Cox | No Comments

leemunroe

Responsive Web design is the new big thing in web design. Whether you believe its valuable or if its just “fools gold” you should still probably learn something about it, at very least just so you can stay up with the water cooler design talk at work. Mobile web browsers are climbing in popularity and the new reality for all of us web designer types is that we need to start designing both for display and mobile. Responsive design is another way to design and develop a mobile web site, it may not be the best way to design a mobile site but the ideas and methods in responsive web design are very much worth learning – especially if you’re concerned with usability.

There is a lot of resources, book and tutorials out there about responsive web design, but it can be fairly complicated to find what you want. I put together a little list of tutorials that can help you learn the different methods and angles on responsive design, so here is is. Enjoy.

TriStar Web Design

SixRevisions

NetMagazine

ElliotJayStocks

Smashing Magazine

Webdesignerwall

SitePoint

NetTuts Crash Course

csswizardry

AListApart

filamentgroup

1stWebDesigner

Bloop

NathanStaines

LeeMunroe

KeithClark

CSS Tricks

CSS Tricks – Tables

Think Vitamin – Premium Video


Useful WordPress Hacks for Bloggers

September 2nd, 2011 by Paddy O'Neill | 2 Comments

FeaturedHacks

Customizing your WordPress Blog

WordPress has long since been a favourite choice for bloggers world-wide. We love it’s flexibility and expandability through the use of themes and plug-ins, but for those bloggers who want to customize their WordPress blog even further, there is the following WordPress hacks. Blogs with several authors may find these these tips and tricks particularly useful!


Customize your Log-In Screen – Without a Plug-in

If you have many authors / guest bloggers logging in, you may wish to brand your log-in screen. The following code, added to your theme’s functions.php file, will replace the default WordPress logo on the log-in screen with an image of your choosing.

function my_blogs_logo() {
echo '
h1 a { background-image:url(http://www.yourlogo.com/image/location.png) !important; }
';
}

add_action('login_head', 'my_blogs_logo');

Don’t forget to replace the URL with the location of your logo!


Brand Your Admin Screen – Footer Credits

This code, when placed in your functions.php file, will automatically replace the default credits within your admin screen’s footer, with the content you specify.

add_filter( 'admin_footer_text', 'my_admin_footer_text' );
function my_admin_footer_text( $default_text ) {
return '<span>A Blog by <a href="http://www.yourwebsite.co.uk">Your Name</a><span> | Powered by <a href="http://www.wordpress.org">WordPress</a>';
}

Remember to change the credentials above. We would suggest leaving the credit to WordPress in place; after all , it is both free and priceless at the same time!


Create a Teaser Section – Show Upcoming Posts

One of the best ways to keep visitors coming back to your blog is to give them a taste of the awesome content that’s coming soon!. This code will help you create a teaser section populated by scheduled posts. Place this code in your theme’s template files.

<?php
$my_query = new WP_Query('post_status=future&amp;amp;order=DESC&amp;amp;showposts=5');
if ($my_query->have_posts()) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><?php the_title(); ?></li>
<?php endwhile;
}
?>

This code can be added anywhere in your theme files or you can even create a page template using it. It’s also worth remembering that currently the list will show post titles; but it could also show an excerpt (the_excerpt) to entice your readers even more!


Breathe New Life Into Old Posts – “This time last year…”

Often visitors to your blog only see the freshest content. We ask, whats wrong with your older posts that never see the light of day? A nice feature to show off some of your older posts is a “This time last year…” section. To achieve this, add the following code anywhere you would like these posts to appear:

<?php
$current_day = date('j');
$last_year = date(‘Y’)-1;
query_posts('day='.$current_day.'&amp;amp;year='.$last_year);
if (have_posts()):
while (have_posts()) : the_post();
the_title();
the_excerpt();
endwhile;
endif;
?>

Once again, remember that the appearance can be altered by using the the_excerpt and the_title functions.


Hopefully you will find these tips and tricks useful! If you enjoyed reading this article, please consider sharing it!


Who’s Using WordPress?

August 25th, 2011 by Patrick Cox | 5 Comments

featured

WordPress is now over ten years old and its popularity is still growing. Originally a blogging platform, since the release of WordPress 3.0, WordPress has made its full fledged triumphant step onto the CMS stage. WordPress developers used to hack the snot out of WordPress to get it to do what they wanted, but now, with features like Custom Post Types, Custom Taxonomies and Widgets, WordPress is a legit CMS platform that is even better to use than most of the other popular CMS’ on the market.

There are still plenty of developers and designers (mostly developers) who don’t believe in the power of WordPress. They don’t believe that WordPress is a powerful, easy to develop and user friendly CMS that is actually being used to build “real” websites and not just blogs. But they are wrong.

WordPress is being used all over the interwebs for more than just blogs and by some really powerful names and companies. WordPress.org has a really great showcase of websites that are powered by the mighty WordPress; full CMS sites, blogs, e-commerce, business, education and colleges.

Here is a few of my favorite websites that are showcased on WordPress.org:

mashable


arcadefire


omgubuntu


spotify


kimkardashian


uxbooth


mozillalabs


odysseybmx


bungobox


techcrunch


playstation


mikeroweworks


surfermag
sylvesterstallone

Well, if Rocky uses it, then I think WordPress has finally arrived.


Snippet O’ the Week: Disable Right-Click Completely with jQuery

August 24th, 2011 by Patrick Cox | 9 Comments

right-click

This is a snippet I’ve been looking for for a very long time now but have never found a legit solution. Some script functions do a warning pop up or only partially disable right-click, but this little snippet completely disables it. To disable right-click is really great if you are trying to protect photos from getting stolen or things like that and I know a lot of designers and developers hate when a web site takes control over basic browser functions. But privacy is becoming a huge deal on the internet and in some case its important to protect yourself, your images and your designs from being blatantly stolen right off your digital property.

Here’s the snippet, sweet and simple – oh, don’t forget to include jQuery: (big thanks to Codrops.com for this fantastic snippet)

<script>
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>

Snippet O’ the Week: Include jQuery in Your WordPress Theme

August 18th, 2011 by Patrick Cox | No Comments

jqwordpress

There are a ton of different ways to include jQuery in your WordPress theme, but after I stumbled upon this snippet I have never turned back. Brought to us by the pure genius of Chris Coyer – CSS Tricks – this snippet is a simple PHP function to add to your functions.php file. The real benefit to this is that you can avoid loading jQuery multiple times if you have plugin, widgets or anything else that requires jQuery.

Here’s the code:

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}

Thanks CSS-Tricks.com!!!


Kick Ass Snippet of the Week: WordPress Pagination Without Plugin

August 10th, 2011 by Patrick Cox | 2 Comments

wp-snippet

Today’s Kick Ass Snippet is a nifty little WordPress snippet that allows you to add pagination to your posts anywhere without using a plug in. I was working on a project recently and needed a better solution for pagination, I tried a few plug-ins but never fell in love with any of them and then I found this snippet on WP-snippets.com and it solved my problem.

This snippet creates a pagination style just like the WP-PageNavi plugin and its pretty easy to install. You’ll just need to start by adding this snippet to your functions.php:


function pagination($prev = '«', $next = '»') {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => __($prev),
'next_text' => __($next),
'type' => 'plain'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );

if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) );

echo paginate_links( $pagination );
};

Then add this code – pagination() - to where you want to add your pagination, outside the loop but inside the if( have_post() ) statement, like this:


<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
// post goes here
<?php endwhile; ?>

<div><?php pagination('»', '«'); ?></div>

<?php endif; ?>

Here are the CSS classes to use when styling:

<pre><code>.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers { font-size: 14px; color: #3888ff; }

Thanks WP-Snippets.com and @pjrvsWP for the great snippet!