Wordpress Leaks

Throughout this series, we’re taking a look at the significance of design patterns and the roles that they play in WordPress development.

In the first post in the series, we took a high-level survey and even reviewed the Observer Pattern to see how it’s possible to register various functions or objects with certain events that occur within the lifecycle of an application.

In this post, where’s going to take a look at the Singleton Pattern.

Specifically, we’re going to take a look at the definition of the pattern and how it works, we’re going to review a diagram of what the architecture of the pattern looks like, we’ll cover some sample code for the pattern, and then we’ll discuss the advantages of the pattern as it relates to WordPress development.

/>

The Singleton Pattern

Wikipedia defines the Singleton Pattern as follows:

In software engineering, the singleton pattern is a design pattern that restricts the instantiation of a class to one object.

Perhaps a simpler way of explaining the pattern is this: The Singleton Pattern ensures that a class can only have one instance and it provides a single way to retrieve an instance of itself.

So Why Does This Matter in WordPress?

As far as theme development is concerned, I personally don’t see much of a use for it unless you’re bundling some type of helper class or library with your theme; however, if you’re building plugins, then this can be exceptionally useful.

As of now, there are really only a handful of ways to instantiate plugins (excluding widgets – that’s another topic) within WordPress:

• You can instantiate the plugin at the bottom of your plugin file, but this can lead to an orphaned object
• You can stick the plugin in the PHP $GLOBALS collection, but this can be dangerous as you could trash something that already exists or it’s making the collection needlessly larger
• If you instantiate it with, say, each page load then the data isn’t being persisted unless you serialize and hammer the database each time the plugin is instantiated

None of the above are particularly good strategies (although you could make a case that they all work).

However, we care more than just getting something to work, right? We want it to work and we want an elegant solution to the problem. This is where design patterns – more specifically, the Singleton Pattern – come into play.

/>

What It Looks Like

First, let’s take a look at a diagram of the Singleton Pattern. Check out the diagram below, then we’ll talk about the specifics after the image:

So here are the key features of the Singleton Pattern:

• There is a private, static instance variable defined in the attributes that is used to maintain a reference to the class
• The constructor has been marked as private
• There is a public static function named get_instance which is used to return an instance of the class

Nothing too complicated, but I think reviewing the code for the Singleton Pattern goes a long way in making it a bit clearer, so let’s do that now:

class Foo 

	/*--------------------------------------------*
	 * Attributes
	 *--------------------------------------------*/

	/** Refers to a single instance of this class. */
	private static $instance = null;

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Creates or returns an instance of this class.
	 *
	 * @return	Foo	A single instance of this class.
	 */
	public function get_instance() 

		if ( null == self::$instance ) 
			self::$instance = new self;
		

		return self::$instance;

	} // end get_instance;

	/**
	 * Initializes the plugin by setting localization, filters, and administration functions.
	 */
	private function __construct() 

	 // end constructor

	/*--------------------------------------------*
	 * Functions
	 *--------------------------------------------*/

} // end class

Foo::get_instance();

Obviously, there’s been a lot of code left out of the above class, but the pattern’s principles remain.

Notice that we have a private, static instance variable that’s used to refer to this class. Specifically, it’s set in the get_instance function whereas the constructor has been marked as private.

Typically, when instantiating classes, the constructor is the function that is called whenever we initialize classes; however, in this case, the constructor is marked as private.

So what gives?

Notice that we have a public get_instance function just above the constructor. This function literally checks to see if the static instance variable is null and, if so, creates a new instance of the class (which it can do since it’s within the context of the class); otherwise, it returns the current instance.

This is how no more than a single instance of a class is created.

Finally, note that we instantiate the class not with the standard new keyword, but by calling get_instance. Not only that, but we also get future references to the class by using the same method.

So, for example, let’s say that you’re working in another template and you need to call a function – say bar() – that exists in your plugin. In that case, you’d do something like this:

$foo = Foo::get_instance();
$foo->bar();

Pretty neat, isn’t it?

/>

The Advantages of the Singleton Pattern

Despite the fact that we’ve covered the Singleton Pattern from an architectural and a practical standpoint, we haven’t actually talked about the advantages of the pattern.

Generally speaking:

• The Singleton Pattern prevents other objects or clients from duplicating instances of the class. This makes sure that there’s only one copy of the data maintained at any given time. All access to the object is done so by the single instance.
• We have a wide array of flexibility when it comes to implementation because we can actually impact the instantiation process (though this is a bit out of scope for this particular post).

Perhaps the largest drawback from using the pattern is lack of clarity that the plugin actually uses the pattern. If someone tries to instantiate the class, instantiation will fail because there’s no public constructor.

As such, documentation is key.

/>

Conclusion

Whether you’ve seen them before or this is your first foray into design patterns, the Singleton Pattern is arguably the simplest design pattern there is. It’s easy to implement, and it provides a significant source of functionality when implemented correctly especially as it relates to web applications.

In the next post, we’ll take a look at another pattern – the Simple Factory Pattern – which is useful when you have a number of classes each of which has a unique purpose and that will be needed based on certain input criteria.

Original from: http://feedproxy.google.com/~r/Wptuts/~3/LiE2W9rPjEo/

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

The History of Typography

Adobe Pulls the Plug on Fireworks

Don’t Blame Flat UI for your Design Problems

Designing Disqus Gravity

The Colors of Dribbble

Great Programmers Write Debuggable Code

Speeding up your Webfonts

Designing For A Maturing Android

Contact Form in HTML5 and CSS3 for Dummies

Responsive Retina-Ready Menu

Responsive Layout Design Templates

fartscroll.js – Everyone farts, and now your web pages can too

instano.js – Instantly detect if JavaScript is disabled

Contextinator – Divide your web browsing sessions into projects

CSS3 Pong with Working Scoring System

Dunked – Create your online portfolio without learning code

Freebie: iPhone 5 Sketch Template

Freebie: App Icon Templates

Freebie: 200 Micro (16px) Icons

Freebie: Flat File Icons

Symbol Icons – 1239 FREE Symbol Icons

Freebie: Responsive Grid PSD for Bootstrap

Palacio Free Font

Last Week on Speckyboy…

• We have 3 copies of ‘jQuery Hotshot’ to giveaway
• WordPress Shortcodes Plugin + 3 Premium WP Themes – only $19!
• Landing Page Design Trends for Selling Digital Products
• 30 New jQuery Plugins Worth Taking a Look At
• Shave Your Designs With Occam’s Razor
• Tools, Tips and Tricks for a Blazing Fast Website
• Collections of Useful Photoshop Custom Shapes – Speckyboy Design Magazine

You might also like…

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/wu9eIKGvEig/

For those who have an extensive background in software engineering, design patterns should be familiar territory; however, there’s an entire group of developers – especially in the web development community – who aren’t necessarily familiar with design patterns (even though they’ve likely used them!).

In this series, we’re going to take a look at design patterns, specifically in the context of WordPress, how they’re useful, and some practical examples that we can use in our themes and plugins.

The ultimate goal of the series is to provide a solid definition of what design patterns are, why they’re useful, how they’re used in WordPress core, and then review two popular examples that we can easily employ in our own work.

Before we get to taking a look at some practical examples, let’s define design patterns, and look at an example of how they are used in WordPress core.

/>

Design Patterns Defined

For those of you who have never heard of or who have never used design patterns, it’s important to understand what they are before we actually begin using them in our work.

Wikipedia provides the following definition:

A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise. An organized collection of design patterns that relate to a particular field is called a pattern language.

Perhaps a more simplified definition would be:

A pattern is a design that can be applied to a problem in a specific situation.

If that’s still not clear, think of it this way:

• Whenever you’re building a piece of software, you’re likely to recognize that you’re solving a problem that you’ve already solved before. As such, you know how to solve it.
• Naturally, the solution to the problem will be a slightly more generalized form that’s applicable to how you’ve previously applied it.
• This generalized form of the solution can be considered the design pattern.

The general implementation and architecture will look exactly the same; however, the specifics of the implementation will naturally vary from project-to-project, but that’s simply the nature of the beast.

In the upcoming sections and upcoming articles, we’ll be taking a look at this in a bit more detail.

/>

Design Patterns in WordPress

If you’ve done any type of WordPress development involving the hook system – that is, you’ve written entire plugins, themes, or even a simple function and taken advantage of the add_action or add_filter functions – then you’ve used design patterns.

WordPress uses what’s called an event-driven design pattern. There are several variations of event-driven design patterns one of which we’ll review momentarily, but the gist of the patterns are all the same:

• Part of the pattern implements what’s known as a publisher
• Part of the pattern implements what’s known as a subscriber

Generally speaking, the publisher broadcasts a message that something has happened to all objects that are subscribed to that particular publisher.

Another way of looking at this is that, in software, whenever something happens we say that an event is raised. Perhaps the most common place we see this in web development is in JavaScript with things such as the mouse being clicked, a key on the keyboard being pressed, or something similar.

We then write functions that handle those functions, and these functions are appropriately referred to as event handlers because they are responsible for handling the case when an event happens.

Not terribly complicated, right? Honestly, sometimes I think the terminology can be more confusing than the actual implementation.

So anyway, in the context of WordPress – or any web application, for that matter – events aren’t limited to key presses or mouse clicks. Instead, it can happen during various parts of the page load lifecycle, when data is written to the database, when data is read to the database, and so on.

Ultimately, you can implement the pattern however you like so that you can provide hooks into which developers can register functions to fire as soon the event occurs.

This brings us full circle back to WordPress’ architecture: Hooks are placed throughout the code such that we’re able to register a function to fire whenever something occurs (that is, whenever an event happens).

/>

A Look at an Event-Driven Architecture: The Observer Pattern

There are a number of event-driven design patterns, one of which is known as the Observer Pattern. This particular pattern is also known as the Publisher-Subscriber Pattern or, more concisely, Pub-Sub.

In the simplest implementation of this pattern, there is a single publisher that is responsible for broadcasting messages to one or many subscribers. The subscribers are responsible for registering themselves with the publisher, and then the publisher is responsible for sending a message or taking action on all of the subscribers.

A high-level diagram would look something like this:

From a code perspective, the Publisher needs three things:

1. A way to maintain a list of the subscribers
2. A way for the subscribers to register themselves
3. A way to broadcast a message to all of the subscribers

Similarly, the Subscriber needs to be able to do two things:

1. Register itself with the Publisher
2. Optionally take action when the Publisher sends a message to it

There are a number of ways in which this can be implemented, but for all intents and purposes and to keep the example relatively simple, let’s say that the Subscribers will register themselves with the Publisher with the Observer’s register method and the function accepts a reference to the Subscriber and each Subscriber has an update method that the Publisher calls when broadcasting the message.

Publisher Code

class MyPublisher 

	/** The list of subscribers that are registered with this publisher */
	private $subscribers;

	/**
	 * Responsible for initializing the class and setting up the list of subscribers.
	 */
	public function __construct() 
		$this->subscribers = array();
	 // end constructor

	/**
	 * Adds the incoming subject to the list of registered subscribers
	 *
	 * @param  array  $subject  The subject to add to the list of subscribers
	 */
	public function register( $subject ) 
		array_push( $this->subscribers, $subject );
	 // end register_subscriber

	/**
	 * Notifies all of the subscribers that something has happened by calling their `update`
	 * method.
	 */
	public function notify_subscribers() 

		for ( $i = 0; $l < count( $this->subscribers ); $i++ ) 

			$current_subscriber = $this->subscribers[ $i ];
			$current_subscriber->update();

		 // end for

	} // end notify_subscribers

} // end class

The code above is about as simple as we can make it:

For those who are more experienced with object-oriented techniques, then you’ll likely see the need for creating a class interface for the Publisher, but that’s outside the scope of this particular tutorial.

Remember, the purpose is to simply provide an example of what a simple observer may look like.

Subscribe Code

Creating a Publisher is really only half of the implementation. Remember, we have to have something that actually, you know, subscribes to the Publisher to take action whenever something happens.

This is where the aptly named Subscriber comes into play.

class MySubscriber 

	/** The publisher to which this class registers */
	private $publisher;

	/**
	 * Responsible for initializing the class and setting up a reference to the publisher
	 */
	public function __construct() 

		$this->publisher = new MyPublisher();
		$this->publisher->register( $this );

	 // end constructor

	/**
	 * This is the method that the Publisher calls when it it broadcasts its message.
	 */
	public function update() 

		/** Implementation is based purely on however you'd like. */

	 // end update

} // end class

In short, this is it. Notice above that this implementation of the update function isn’t actually defined. That’s because it gives us the ability to provide unique behavior to this specific instance.

But remember, there’s a lot of code in WordPress core that is not object-oriented. Instead, it’s procedural. As such, the implementation of a pattern like this varies a little bit.

For example, an analogy in WordPress would be something like this:

function my_custom_subscriber( $content ) 

	$content = 'This is my custom content.' . $content;
	return $content;

 // end my_custom_subscriber
add_action( 'the_content', 'my_custom_subscriber' );

Notice that the syntax is a bit different, but we’re essentially doing a very similar thing:

• We have a subscribe function – my_custom_subscriber – and it’s registered with the the_content event
• When the the_content function fires, our custom function will fire.

Nothing too complicated, I hope.

One of the goals in this series is not only to provide a few examples of design patterns and how to implement them, but they are already in place in existing systems.

/>

The Patterns We’ll Examine

In addition to the event-driven pattern that we’ve examined above, we’re also going to take a look at two patterns that are common, practical, and highly useful in our day-to-day work.

Specifically, we’re going to take a look at the following patterns:

1. Singleton Pattern. In object-oriented design, the Single Pattern ensures that only a single instance of a class is created. This is useful so that we don’t accidentally create multiple instances maintaining their own sets of data ultimately giving conflicting results during a project’s lifecycle.
2. Simple Factory Pattern. If you have a collection of classes each of which are designed to handle a specific type of data (as opposed to have one large class do it), then the Simple Factory Pattern is useful for taking a look at the incoming data and then returning an instance of the proper class for processing the data.

Obviously, talking about software only goes so far without talking about diagrams and/or code so we’ll be taking a look at both of those in the upcoming set of articles.

/>

Conclusion

As you can see, the concept of design patterns isn’t anything terribly complicated and there’s a lot to be gained by using them in our work. Perhaps the greatest challenge that developers face is using design patterns for the sake of using design patterns.

Instead, it’s important to recognize that there are certain situations in which design patterns are applicable. That is to say that there are certain problems for which design patterns are the perfect solution. Experience is arguably the best teacher for knowing when to use a design pattern and when not to use it.

In the following articles, hopefully we’ll be able to cover enough territory to provide two solid examples of design patterns, when they’re applicable, how to use them, and how they can help us in our future work.

Original from: http://feedproxy.google.com/~r/Wptuts/~3/9OSVpqV7FhY/

Today, we are excited to announce a fantastic new workshop led by Instructor Tom McFarlin: Introduction to WordPress Plugin Development

Are you an aspiring WordPress developer? Are you ready to take the next step and start building your own custom plugins for WordPress? Our newest Tuts+ Live Workshop is the perfect way to get started!

Early Bird tickets are half-price at only $49, but places are strictly limited so act fast to make sure you don’t miss out! />

Try Tuts+ Premium and get cash back on a monthly subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you! For a limited time, we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal.

If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides, there’s never been a better time to join up and dive in.

But this offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member to take your creative and technical skills to a new level. />

Do you have a solid construction of categories on your blog? If so, you might not need a “Related Posts” section at all – you can just display latest posts from the same category.

In this post, we’re going to go through the “More From This Category” section, an alternative to “Related Posts” (which we covered earlier).

ID );
    $first_cat = $categories[0]->cat_ID;
    // Let's start the $output by displaying the title and opening the 

    $output = '
' . $title . '
';
    // The arguments of the post list!
    $args = array(
        // It should be in the first category of our post:
        'category__in' => array( $first_cat ),
        // Our post should NOT be in the list:
        'post__not_in' => array( $post->ID ),
        // ...And it should fetch 5 posts - you can change this number if you like:
        'posts_per_page' => 5
    );
    // The get_posts() function
    $posts = get_posts( $args );
    if( $posts ) 
		$output .= '
';
		// Let's start the loop!
		foreach( $posts as $post ) 
			setup_postdata( $post );
			$post_title = get_the_title();
			$permalink = get_permalink();
			$output .= '
' . $post_title . '
';
		
		$output .= '
';
	} else 
		// If there are no posts, we should return something, too!
		$output .= '
Sorry, this category has just one post and you just read it!
';
	
    // Let's close the 
 and return the $output:
    $output .= '
';
    return $output;
}
?>

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

Calling Bull$#!%: On Flat Design

Infinite Scrolling: Let’s Get To The Bottom Of This UX Design

The iOS Design Cheat Sheet

Intern – A Next-Generation JavaScript Testing Stack

The Periodic Table of WordPress Plugins

Light Table – A New Interactive IDE

MixItUp – A CSS3 and JQuery Filter & Sort Plugin

Fixed Background Scrolling Layout Tutorial

Toy Chest · A “Flat UI” Inspired Color Scheme for Programmers

Retinize It – Photoshop Actions for Slicing Retina Graphics

iOS Grid System – A Free Extension For Adobe Fireworks

Halftone Creator Photoshop Plugin

Vertical Infinity – A Free Mega Flat Style UI Kit

Jolly Icons Freebies

Free Social Media Icons (96 Icons)

Free Flat Icon Set

Free Dark Noise Backgrounds

Agilis – A Free Font

WPVenue – A showcase ofBbeautiful WordPress Sites

Last Week on Speckyboy…

• Illustrated Aliens Series – Everyday a New Alien
• Deal of the Week: SpyBar: Reverse Engineer Any Website – only $7!
• 50 Sites with Pastel/Washed-Out Color Schemes
• Waking Up Your Clients’ Taste Buds
• Bootstrap Toolbox – Tools, Utilities, Generators and Templates
• The Science of Buttons: How to Get People to Click
• A Scientific Perspective on Minimal Design
• 30 Wireframe Templates and Toolkits

You might also like…

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/VOSBqe50Ux8/

WordPress has a sufficient, mostly responsive, back-end and great applications for mobile devices, but there might come a day when you’ll just want to send an email to post an entry to your website.

In this post, we’re going to go through this handy little feature of Jetpack: Post by Email.

WordPress has a Post via Email functionality in its core, but it’s far from being handy or user friendly.

As the Codex says, you have to:

1. Create a dedicated e-mail account to be used solely for posting to your blog
2. Configure WordPress to access that account via POP3
3. Configure WordPress to publish messages from that e-mail account

And even if you do, you’re stuck with plain text posts and you can’t post any email attachments!

Plus, you have to at least set up a function in your theme (or as a separate plugin) for WordPress to recognize your email as a post. Oh, did I mention that you can only select one category to post and you can’t set any tags or any other kind of taxonomy?

Luckily, this problematic approach can be replaced with Jetpack, another creation from Automattic. The Post by Email module solves all the problems above and allows you to do lots more. In short, you can:

• Use HTML in your email
• Include attachments (and include the attached images as a slideshow or an inline gallery)
• Set a title (and a slug) different than your email title
• Set categories and tags
• Turn on or off comments for the post
• Set an excerpt
• Change the status of the post
• Set a password for the post
• Set a time for the post to be published
• Add <--more--> and <--nextpage--> tags inside the post
• End your post anywhere inside your email
• Include a PollDaddy poll
• Turn off geotagging
• Set Publicize options, another module of Jetpack

[poll type="3" style="medium" other="yes"]
What are your favorite Tuts+ blogs? (select three)
* Wptuts+
* Nettuts+
* Webdesigntuts+
* Psdtuts+
* Phototuts+
[/poll]

Who does not want a fast website? After all, most internet users are an impatient lot. If your website does not load at a satisfactory rate, you will end up losing traffic. In fact, Google even considers page speed to be a decisive factor in search engine rankings. Naturally, it is not just beneficial but even mandatory to have a website that loads blazing fast.

In this article, I shall take a look at some simple steps that you can take in order to speed up your website.

Improving Page Load Times

The Groundwork

First up, before you actually start using any tools to improve the page load times for your website, you need to figure out how your website fares in terms of page speed.

Basically, a website takes time to load if there are various HTTP requests made to the server. The longer such requests take, the slower your website will load. Examples of such requests include loading of scripts, images, stylesheets, and so on.

In order to understand and analyze your website’s page speed performance, you can use tools such as Google PageSpeed or Yahoo! YSlow. Both of these tools help you optimize your website and improve page load times.

Also, both YSlow and PageSpeed come with browser extensions to help you get the most out of them — the interface is rather simple, and both are backed by decent documentation, so you will not feel lost even if you are using them for the first time.

Another really useful tool is GTmetrix, which uses both Yahoo! YSlow and Google PageSpeed to analyze your website’s speed and offer recommendations and suggestions for the same. You can download your results in a PDF file, and there are separate tips and recommendations for WordPress websites. GTmetrix also shows both YSlow and PageSpeed results side by side, so you can compare how your website fares with each.

One more tool worth checking out is Site Optimizer by Media4x. It does not really use a grading mechanism like the other tools mentioned above, but instead, simply scans your website, and comments on each section. Good areas are highlighted in green, whereas problem issues are marked in red. Some of the significant areas that Site Optimizer checks include CSS, HTML and JavaScript elements. In fact, Media4x offers much more than that — we shall turn to it once again later in this article.

Once you are done tracking and measuring your website’s load times, it is time to take the necessary steps in order to improve the page load times!

Compressing and Scaling Images

No matter how big or small or website is, at some point or the other, you will make use of images. Maybe you upload an image as a Featured Image with each blog post, or probably you offer screenshots with your tutorials. If this is the case, you should consider compressing your images for web quality. Google PageSpeed has a default image compressor, though for all practical purposes, I find TinyPNG.org to be the most useful. It works only with PNG files, and all you need to do is upload your images, and it will compress them and offer you the compressed versions for download.

Some other useful tools include the image compressors offered by Media4x. There are separate minimizers for PNG and JPEG files, and the mechanism is similar to TinyPNG: upload, compress, download.

Furthermore, before you actually upload images to your website, make sure they are scaled according to the pixel dimensions that your HTML code uses. This will save unnecessary server lag that is otherwise required to scale and re-size images. For instance, all images used on Speckyboy have a maximum width of 640px. Also, if you are looking for a comparative demo of the benefits of a properly resized image and the effects that it can have on speed,view this. For further details, check out this awesome guide.

Caching and CDN

Using cached versions of static content to speed up your website has been in vogue for quite some time now. You can start with browser caching, though you should also implement certain other site-wide steps. You may even try Alternative PHP Cache if you are not on a shared host (most web hosts disable it on shared servers since it has server-side effects).

If you are using a CMS such as Joomla! or Concrete5, you already have caching and other features built-in and you just need to activate and configure them. For WordPress users, the best step is to install and use a caching plugin. I will keep this one short and simple: SpeckyBoy has a guide to help youchoose the best caching plugin. I personally use Hyper Cache Extended, and if I may add, I have talked about WordPress
caching plugins here and here.

A Content Delivery Network, or CDN, can go a long way in improving the page load times of your website. Simply put, a CDN has a global infrastructure of servers that can not only help in reducing the load on your web host but also increase page speeds by dynamically serving content from the servers that are closest to the visitor’s location. If yours is a busy website with a lot of visitors and media content, you should consider investing in a CDN. The options are plenty, and you should choose one that suits your needs (once again, SpeckyBoy hasgot your back on this too). SpeckyBoy uses MaxCDN, which integrates well with W3 Total Cache plugin for WordPress.

Apart from the likes of CloudFlare and Amazon S3, another CDN service that I have really grown fond of lately is Incapsula. They are a new player in the segment, and to be fair, they offer a lot more than just CDN. Apart from site optimization and CDN, you also get DDoS protection, real-time stats and analytics, web application firewall as well as security stats. Yes, all of that. In terms of pricing, the cheapest plan costs $9 per month, though if you are looking for just the CDN, there is also a free plan (no firewall, limited features).

CSS Sprites, JavaScript et al

If your page loads slow on account of multiple images, you can cut down this number by combining images into CSS Sprites. In easier words, a CSS Sprite is a combination of multiple images put together to form one image. Say, for example, instead of having your web browser load five different images, you can make it load just one by means of a CSS Sprite. The easiest way to accomplish the same is via SpriteMe, a free tool that lets you create CSS Sprites.

Apart from that, you can also decide to defer the parsing of JavaScript. Ideally, JS should be called at the end of an HTML document, because if JS is present at the top of the document, it can slow down the rendering of the page. You can use the “defer” attribute to defer the parsing of the JavaScript until the page has been loaded, as follows:

Additional steps that you can take include combining JavaScript and CSS files. If you are using a CMS, chances are that your website will rely on various CSS and JS files, which can invariably slow down the load times. You can combine such scripts and stylesheets into larger files and improve page speed.

Furthermore, you can also minify or compress HTML, CSS or JavaScript to improve their loading time. A very useful tool for such minification is this.

With that, we come to the end of this article about speeding up your website. Got any tip or trick of your own? Share it with us in the comments below!

You might also like…

Website Speed Part 1: Write More Efficient CSS →
Website Speed Part 2: Working With and Optimizing Images for the Web →
Website Speed Part 3 – Caching WordPress →
Website Speed Part 4 – PHP Programming for Speed →

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/SegdA6yk6rs/

The Internet is one huge swap meet. So many sites “borrow” code or plugins from other sites to make their own that much better. And then someone else borrows from their site, and so on. Keeping up with the latest and greatest Web features is an exhausting experience, though. You can check out tons of forums, blogs, newsletters and more just to read up on the latest releases. You can also pay a ton of money to various online services to pull in stats and suggestions.

The best way, though? Just browse. Check out what your competition’s doing. If you find something you like, copy it. If only it were that easy to look beneath the hood. Well, it is. Thanks to SpyBar, you can pull in tons of useful data about any site, and you can do it all right from your Firefox or Chrome browser!

NOTE: Since this video was recorded SpyBar has been UPGRADED to v2.0 (EVEN more features but just as fast!). Scroll down now and purchase to get the new version!

SpyBar Highlights:

• Discover New WordPress Themes & Plugins
  With just a single click, SpyBar will instantly spit out a list of WordPress themes and Plugins used on whatever website you’re currently on. So surf over to your competition’s site or some of the industry leaders’ pages, and take a peek at what’s working for them.
• Easy Browser Add-On
  There’s no heavy, clunky software to download to your desktop. SpyBar is just a single simple icon that sits on your browser’s toolbar. Just click it on any site you’d like to “spy” on. SpyBar is compatible with Firefox and Chrome on either a PC or a Mac.
• Real-Time Results
  SpyBar pulls in your results dynamically, rather than hitting a static database. That means you’ll get the most up-to-date results. If a plugin or theme was just installed on a site, you’ll see it listed in your results.
• Uncover Backlinks
  SpyBar can also help you find out what other sites link into a specific site. Backlinks are a critical part of improving a site’s Search Engine Optimization (SEO), so finding new sites that can potentially link to your site is invaluable.
• Crucial Data
  You can also learn some critical information about a site thanks to SpyBar. Important info like Google Page Rank, Alexa Rank, autoresponder in use (MailChimp, InfusionSoft, etc.), which Content Management System is in use (WordPress, Drupal or Joomla), and more!
• WhoIs Information
  Ever have trouble getting in touch with the owner of a website? Whether you’re looking to guest post, interview someone, set up an affiliate program, or have a business proposition for the site’s owner, there’s plenty of reasons you’d like to contact them. SpyBar helps link you directly to all of the contact details for website’s owner.

BONUS: WordPress Rolodex

You’ll also receive a PDF version of The WordPress Rolodex, which is a directory of over 50 of the best free and premium WordPress Themes and Plugins for:Traffic generation, list building, social media, Amazon, offline/local business, security, membership sites, eCommerce, graphics, video, blog monetization, geo-targeting… and much more!

Testimonials:

“SpyBar is one of those rare tools that immediately become classic must-haves because it is simple, instant and serves a very real purpose.” – Martin Avis, KickStartNewsletter.com

“SpyBar is brilliantly simple, yet saves so much time. Often, I just want to know which plugin or theme someone is using, not necessarily how they’re implementing it. SpyBar makes this as simple as having all the information in an About page. Adding a link to a Google search was the icing on the cake in case I want to go get more information about the plugin or theme. Well done! (And thanks!)” – Steven Sanchez, Inexus.com

“First of all, having the tool appear as an icon on our browser is absolutely brilliant. Secondly, the dynamic detection is pure gold and something that really allows users to always stay on the cutting edge and not worry about outdated static databases. Thirdly, I really liked being able to easily see a competitor’s backlinks. Again, this tool is a HUGE timesaver and is so easy to use!” – Jit Uppal, GettingStartedOnlineFast.com

“I have to say, I can’t think of any other IM product I’ve bought that literally – LITERALLY – within five minutes of purchase has proved its worth! Not only that, I find it so accessible it’s almost addictive… I use it continuously.” – David Thomson, ProcessMappingMagic.com

“I had to come back and tell you how much I am IN LOVE with this tool! I seriously use it at least once a day & have uncovered some of the coolest wp plugins & themes I had no idea even existed. Thank you so much for sharing this with us!” – Tammy Lee, Canada

Pricing:

SpyBar normally sells for just $12.95, but for a limited time only, you can purchase this incredible browser extension for only $7!That’s nearly 50% off the original price! Can you afford not to take advantage of this offer?

Uncover a world of information and new WordPress themes and plugins by clicking the BUY button below.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/VwoE4kn3HPE/