Category Archives: WebMaster

Image Optimizers

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

http://ypoweb-01.experf.bf1.yahoo.com/ysmush.it/

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

http://imageoptim.com/

Form helpers

jQuery Validation Plugin

Form validation made easy. The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

17 jQuery Plugins that will Make your Life Easier

AngularJS Form Validation

angular-forms[1]

 

pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

17 jQuery Plugins that will Make your Life Easier

Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms.

17 jQuery Plugins that will Make your Life Easier

jquery.cookie

A simple, lightweight jQuery plugin for reading, writing and deleting cookies.

17 jQuery Plugins that will Make your Life Easier

Placeholder jQuery Plugin

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet.

17 jQuery Plugins that will Make your Life Easier

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

17 jQuery Plugins that will Make your Life Easier

Color palette generators

But finding the right color scheme is tough and usually involves a lot of trial & error. With Ambiance, you can auto-generate color schemes right from the COLOURlovers API, all at the click of a button!

———————-

tintui.com – A very useful color picker tool by João Piedade with all the famous UI colors in one place.

Collective151_TintUI[1]

 

 

 

 

 

———————-

Colourcode is another one which offers a very original-yet-easy way of creating them.

The color schemes are generated with the mouse location/movements and multiple options exist for setting the scheme type: monochrome (with light/dark grey), analogic, triad and more.

Colourcode

Once created, it can be downloaded as styles (.less and .scss) or .png. It is also possible to save the palette for future use or share with a link.

Colourcode can be used freely online or, it is open source, it can be self-hosted.

———————-

iWantHue is a web-based color palette generator that provides powerful settings for finding the colors that play well with each other.

It works by defining a range of hue, chroma +lightness and the app can return a palette of any size instantly.

iWantHue

The palettes are provided in multiple formats (RGB or HEX, as a list or JSON) and, also, there are also presets to create faster.

iWantHue is open source and anyone can use it to create palettes with only JavaScript.

———————-

COLOURlovers, an impressive website/community focused on colors, is sharing a handy tool named COPASO.

The tool is a web-based color palette generator for creating palettes and saving them for future use.

COPASO - Color Palette Generator

COPASO allows you to pick the colors from a color wheel or upload an image, optionally pixelate it, and grab from there.

There is a built-in search to find colors and palettes generated by the community with a sorting feature using various parameters.

P.S. Some features requires signing-in with a free membership.

———————-

source: http://www.webresourcesdepot.com

1. COLOURlovers

colourlovers

COLOURlovers proclaims itself an international creative community. In fact, it is 8 million users strong.

You could spend hours on this website, it’s that comprehensive. And at first, you might even find COLOURlover’s interface a bit overwhelming. Though it’s definitely not the simplest of the color palette generators on this list, with so much going for it, it’s worth taking the time to peruse all COLOURlovers has to offer.

coulourlovers palettes

On COLOURlovers, you can browse color palettes contributed by millions of users (along with commercially-generated color palettes), shapes, patterns, or the latest trends. If you’d like to brush up on your color theory, you can read articles on the psychology of color in relation to products or troubleshoot your color quandaries on the forums.

As we alluded to in our introduction, COLOURlovers is a tool where you not only can you view palettes, but you can also create palettes of your own.

2. Coolors

coolors

Coolors is one of the easiest color palette generators to use. All you have to do is hit your spacebar to generate a new 5-color palette (and click on colors to lock them in). This tool also allows you to view alternative shades of all of the colors of your palette at the same time and adjust hue saturation and brightness.

coolors color palette generator

This color palette generator also lets you create a profile and keep your palettes filed under names and tags for easy retrieval.

On the technical side of things, Coolors allows you to export or save color palettes as SVG, PNG, SVG, SCSS or COPIC. You can download Coolors as an iOS app, Adobe Photoshop or Illustrator plugin, and a Chrome extension.

3. BrandColors

brandcolors

BrandColors is as straightforward as it sounds. The site is a resource for color palettes of well-known brand names. The originator says the site was born because he needed a handy reference for himself (which started out with 30 colors).

Now, the site includes brand name colors for Delta Airlines, DHL, eBay, and Ferrari, to name a few.

brandcolors color palettes

The list of brand name colors on this site is quite comprehensive (and organized alphabetically), but if you feel there’s something missing, you can still make a suggestion for the site’s creator to add a brand.

BrandColors also enables you to Share the URL to your color palette or download it in ASE (Adobe), CSS, Sass, LESS, or Stylus.

4. Colr

colr.org

As you can see from the screenshot below, Colr breaks your image down into tiny, colorful boxes. Click on a box to view the color, or choose to view the scheme as a whole.

colr pixel color palette generators - example

The most unique aspect of this tool is that it allows for some extra flexibility, as you can ask the tool to fetch a random Flickr image or upload your own.

Colr also gives you access to a few other tools, like a search engine that generates the color schemes used on websites, and the opportunity to view the latest schemes created by other users.

5. Palettable

palettable

Palettable reminds us of a dating app – only the choice is much simpler. Instead of looking for the love of your life, you’re just flipping through colors.

To start off, the site presents you with your first color. It will choose your next color based on whether you Like or Dislike the color before it.

palettable color palette generators

You can have a maximum of five colors in your palette at once. Otherwise, you can opt to trash a color, or adjust the hue.

This color palette generator is for those who are looking for simple fun. The fact that the color combos are based on the input of thousands of designers doesn’t hurt either.

6. Palette Cam

palette cam

This app has a 4.7/5 start rating in the App Store, and it’s free!

If you like the colors you see in the world around you, this could be the color palette generator for you. All you do is snap a photo and use the app to display the color palette of your photo.

palette cam color palette generators - examples

Plus you can easily access the RGB and hex codes to use in any upcoming projects.

7. Material Design Palette

material design palette

The Material Design Palette tool is also super simple to use. All you need to do is select two colors from the tiles and your work is done!

material design color palette generators

The color palette generator automatically comes up with a four-color palette that you can download or Tweet.

90 Beautiful Flat Icons By Elegant Themes

Elegant Themes, a brand that creates lovely WordPress themes, is sharing a very nice freebie.

It is a set of 90 free flat icons that are high-quality and available in 2 variations: colored or single-color.

The items are presented inside a circle and the download package includes multiple file types: .AI, .EPS, .PDF, and .PNG (64px and 128px).

90 Flat Icons

Website: http://www.elegantthemes.com/blog/freebie-of-the-wee…

 

Source: http://www.webresourcesdepot.com/90-beautiful-flat-icons-by-elegant-themes/

Glide

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.

Glide.js

You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://jedrzejchalubek.com/glide/
Download:https://github.com/jedrzejchalubek/Glide.js

Source: http://www.webresourcesdepot.com/glide-js-simplistic-touch-friendly-and-responsive-jquery-slider/

Responsive jQuery lightbox plugin

Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).

What makes this plugin different?

Light and modular

You can choose to include only the features that you need using the online build tool or by compiling it yourself with Grunt.js. Size of core JS file is about 3KB + each module weights about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you’re not obligated to use it.

Content is resized with CSS

The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – feel free to use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.

Fast

Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

High-DPI (Retina) display support

Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.

Conditional lightbox

Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Brad Frost has a terrific article about this technique.

Memory management

Popup has an extendable micro templating engine that reuses existing DOM elements (example), which is expecially useful when your popups same pattern.

http://dimsemenov.com/plugins/magnific-popup/

Powerful WordPress Tips And Tricks

1. WordPress Has A Ton Of Built-In Scripts

Using the great wp_enqueue_script() and wp_enqueue_style(), you can include styles and scripts easily with dependency management. But did you know that WordPress has a lot of scripts already built in? jQuery, many elements of jQuery UI, jQuery Form, SWF Object, Tiny MCE, Jcrop and Thickbox are just some the better known ones. The whole list can be found in the WordPress Codex. If you’re interested in learning how to use the enqueue functions effectively, I recommend “The Developer’s Guide to Conflict-Free JavaScript and CSS in WordPress” right here on Smashing Magazine!

2. Replace Built-In Scripts By Deregistering Them

If you live on the bleeding edge, you can use versions of scripts other than the built-in ones. Using a newer jQuery version is common (though not necessarily good) practice, which can be done in the following way.

function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-new.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

But do not do this just to brag about using latest stuff. WordPress includes the version of jQuery that it does to ensure maximum compatibility.

Use another version of jQuery only when encountering compatibility issues, such a plugin that specifically requires it.

3. Force Perfect JPG Images

This is a classic example of why working on a team is beneficial. My good friend Lars told me that WordPress doesn’t use 100% quality for images served on the website, to conserve space and bandwidth. He also showed me a solution, of course:

add_filter( 'jpeg_quality', 'smashing_jpeg_quality' );
function smashing_jpeg_quality() {
	return 100;
}

WordPress uses a default quality of 90%. This is fine in most cases; I doubt many people can see the difference. But if top-notch image quality is a must on your website (for a portfolio, photography, etc.), modifying the value might be best.

4. FeedBurner Redirection

FeedBurner is used on almost every blog that I’ve worked on, and yet I never know how exactly to set it up by heart. Thanks to Elio for writing “10 Tips to Optimize Your WordPress Theme,” which contains this snippet:

add_action( 'template_redirect' , 'smashing_rss_redirect');
function smashing_rss_redirect() {
	if ( is_feed() AND !preg_match( '/feedburner|feedvalidator/i', $_SERVER['HTTP_USER_AGENT'] ) ){
		header( 'Location: http://feeds.feedburner.com/my_smashing_feed' );
		header( 'HTTP/1.1 302 Temporary Redirect' );
	}
}

5. Using General Taxonomy Functions

A number of taxonomy functions can handle your custom taxonomies as well as the built-in tags and categories. The Codex’s reference of functions contains the full list of taxonomy functions. I particularly like using get_term(), get_terms() and wp_get_object_terms(). To make things more modular, I use these functions as much as I can, even for tags and categories.

6. Setting Up Sessions In WordPress

Sessions are great for storing information between pages and are widely used on websites. WordPress doesn’t use them at all internally, so the session is never set. Using the following method, you can start a session on all pages before any output.

add_action( 'init', 'smashing_session_start' );
function smashing_session_start() {
	if ( !session_id() ) {
		session_start();
	}
}

Note that, while sessions are generally pretty safe, implement IP checking or added nonce protection just to be on the safe side. As long as you’re transmitting non-sensitive data, though, you’ll fine. Check out Mark Jaquith’s great article on nonces for more info.

7. List All Hooked Functions

I started writing a function to do this. When I did a quick Google search, it turned out that WP Recipes had exactly what I needed.

function list_hooked_functions($tag=false){
	global $wp_filter;
	if ($tag) {
		$hook[$tag]=$wp_filter[$tag];
		if (!is_array($hook[$tag])) {
			trigger_error("Nothing found for '$tag' hook", E_USER_WARNING);
			return;
		}
	}
	else {
		$hook=$wp_filter;
		ksort($hook);
	}

	echo '<pre>';

	foreach($hook as $tag => $priority){
		echo "<br />&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;\t<strong>$tag</strong><br />";
		ksort($priority);
		foreach($priority as $priority => $function){
			echo $priority;
			foreach($function as $name => $properties) {
				echo "\t$name<br />";
			}
		}
	}
	echo '</pre>';
	return;
}

Used without an argument, you’ll get a nice list of all hooked functions. This will be a bit long, so you can specify a hook to narrow the list a bit. This is particularly useful when debugging or fiddling around with hook priorities. Knowing what’s hooked into wp_head() in what order is important, and this function is a great asset!

8. Automatically Add Paragraph Tags To Anything

WordPress does this automatically to the content and the excerpt, but there’s no reason not to use it elsewhere. The function responsible for turning double line breaks into paragraphs is wpautop().

$my_text = 'Welcome!
Smashing Magazine is a great place to learn new things.
I hope you're having a nice time!';

echo wpautop( $my_text );

Sometimes you’ll want to disable this filter by default, which you can do by removing it from the content and excerpt, like so:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

9. Send Emails Using WordPress

A little while back, I wrote a long article on “Creating Perfect Emails for Your WordPress Website,” a part of which has to do with using the wp_mail() functions. These functions let you use built-in WordPress awesomeness to send emails to users.

$message = 'Hello, thanks for reading my post! I hope to see you back soon.';
wp_mail( 'someonesemail@example.com', 'Thanks for reading my post!', $message);

You can also send HTML content by using a filter:

add_filter ("wp_mail_content_type", "smashing_mail_content_type");
function smashing_mail_content_type() {
	return "text/html";
}

10. Native Pagination Links

It came as a surprise to me about six months ago that you don’t need any plugins to pull off proper paging (i.e. not just “Previous” and “Next” links); you can do it with a native function. The paginate_links() function is a handy little thing that lets you show pagination for any type of content, not just a WordPress loop.

// Pagination for a WordPress loop
$list = new WP_Query( $query_args );
$pagination = array(
	'base'       => str_replace( 99999, '%#%', get_pagenum_link( 99999 ) ),
	'format'     => '?paged=%#%',
	'current'    => max( 1, get_query_var( 'paged' ) ),
	'total'      => $list->max_num_pages,
	'next_text'  => 'next',
	'prev_text'  => 'previous'
);
echo '<div class="pagination primary-links">' . paginate_links( $pagination ) . '</div>';

// Pagination for anything
$list = range(1, 100);
$items_per_page = 12;
$pagination = array(
	'base'       => get_bloginfo( 'url' ) . '/mypage/%_%',
	'format'     => '?paged=%#%',
	'current'    => $_GET['current_page'],
	'total'      => ceil( max($list) / $items_per_page ),
	'next_text'  => 'go forth',
	'prev_text'  => 'go back'
);
echo '<div class="pagination primary-links">' . paginate_links( $pagination ) . '</div>';

11. Upload Files With Ease

WordPress has a bunch of great uploading functions for everything from checking the file type to finding the uploads directory. A more obscure function is wp_upload_bits(), which you can use to upload a file to the uploads directory.

$upload = wp_upload_bits( $_FILES['myfile']['name'], null, file_get_contents( $_FILES['myfile']['tmp_name'] ) );
echo 'Well uploaded! The path to this file is ' . $upload['file'] . ' and the url to this file is ' . $upload['url'];

12. Twitter-Like Time Display

This was another shock to me a while back, especially since it has been in WordPress since version 1.5! If you’d like to show viewers a relative date in a human-readable format, like “5 minutes ago” or “one month ago,” try the human_timed_diff() function.

$diff = human_time_diff( '2012-05-05 12:05:00', '2012-05-05 12:10:00' );
echo 'This comment was submitted ' . $diff . 'ago';

// Output: This comment was submitted 5 minutes ago

13. Log In As Any User

If you’re building a complex website with many roles, being able to switch between them quickly and easily would be useful. The wp_set_auth_cookie() lets you log the current user in based on ID.

$user_id = 4;
	wp_set_auth_cookie( $user_id );

Take great care when using this function; left unchecked, it could log every user in as user number 4. Even while testing, I target it specifically to my IP, and maybe even to a special URL string just to be sure. That said, with proper safety, it can be used as part of a custom log-in script.

14. Add Custom Profile Fields In The Admin Area

I can’t say that WordPress offers much in the way of profile customization in the administration area. Especially nowadays, when you want to show the Twitter and other social accounts of authors, this is a shortcoming. It can be fixed easily, though. Have a look here:

<?php
add_action( 'show_user_profile', 'smashing_profile_fields' );
add_action( 'edit_user_profile', 'smashing_profile_fields' );

function smashing_profile_fields( $user ) {
?>

	<h3>Social Sites</h3>

	<table class="form-table">

		<tr>
			<th><label for="twitter">Twitter</label></th>

			<td>
				<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" /><br />
				<span class="description">Your Twitter Username</span>
			</td>
		</tr>

		<tr>
			<th><label for="twitter">Facebook</label></th>

			<td>
				<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $user->ID ) ); ?>" /><br />
				<span class="description">Your Facebook Profile URL</span>
			</td>
		</tr>

		<tr>
			<th><label for="twitter">Linkedin</label></th>

			<td>
				<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" /><br />
				<span class="description">Your Linkedin Profile URL</span>
			</td>
		</tr>

	</table>

<?php
}
add_action( 'personal_options_update', 'smashing_save_profile_fields' );
add_action( 'edit_user_profile_update', 'smashing_save_profile_fields' );

function smashing_save_profile_fields( $user_id ) {
	if ( !current_user_can( 'edit_user', $user_id ) )
		return false;

	update_user_meta( $user_id, 'twitter', $_POST['twitter'] );
	update_user_meta( $user_id, 'facebook', $_POST['facebook'] );
	update_user_meta( $user_id, 'linkedin', $_POST['linkedin'] );
}

15. Sanitize URLs With Ease

When working with URLs, always make sure they are properly formed and don’t contain any invalid or dangerous characters. The esc_url() function lets you do just that.

$my_url = 'http://mypage.com/?awesome=true';
	$url = esc_url( $my_url );

Be sure to check out all of the other escape functions. You can find a list of them at the bottom of the page that I linked to in the related section.

16. Empower Text Widgets

To make text widgets so much better, you can enable the use of shortcodes in them. This is a great tool for theme developers because it makes your product much more flexible for the user.

add_filter( 'widget_text', 'do_shortcode' );

17. Add Custom Post Types To The RSS Feed

Not being able to do this easily from the admin area is a big issue. Many website owners separate their content into custom posts, and they also want all of their items to show up in the feeds. Never fear — a function is here!

add_filter('request', 'smashing_custom_feed');
function smashing_custom_feed( $vars ) {
	if ( isset( $vars['feed'] ) ) {
		$vars['post_type'] = get_post_types();
	}
	return $vars;
}

While this is great, it forces all of your post types into the feed. If you’d like to add just some of your custom post types to the feed, you can list them separately.

add_filter('request', 'smashing_custom_feed');

$post_type_list = array( 'post', 'products' );
function smashing_custom_feed( $vars ) {
	if ( isset( $vars['feed'] ) AND !isset( $vars['post_type'] ) ) {
		$vars['post_type'] = $post_type_list;
	}
	return $vars;
}

18. Don’t Break WordPress Loops

Multiple loops are great but can wreak havoc if not used correctly. To make sure your loop runs smoothly and you can still use all of the functions that rely on globals, store the original query in a temporary variable.

$tmp_query = $wp_query;
query_posts('cat=5&amp;order=ASC');
while( have_posts() ) : the_post()
?>
	<a href="<?php the_permalink() ?>'><?php the_title() ?></a><br />
<?php
$wp_query = $tmp_query;

19. Custom Database Queries

If you need something more than what the default WordPress functions give you, you can use $wpdb, the WordPress database class to query the database directly.

$recent_users = $wpdb->get_results( "SELECT display_name, user_registered FROM $wpdb->users ORDER BY user_registered DESC LIMIT 0,10" );

This class has great features and functions. Take a look at “Interacting With the WordPress Database” for an in-depth tutorial.

20. Customize WordPress Post Revisions

The post revisions feature in WordPress is great, but the majority of users don’t use it. Database entries are created for revisions, even if they are not used. While they’re not a huge hit on your server’s performance, if you don’t use revisions, you can disable them by placing the following code in your wp-config.php file.

// To remove revisions
define( 'WP_POST_REVISIONS', FALSE );

// To limit them
define( 'WP_POST_REVISIONS', 5 );

20. Styling Author Comments

If you’d like author comments to jump out, simply use the bypostauthor class in your CSS.

li.bypostauthor {
	background:#fafafa;
	color:#555;
}

21. Storing Your Whole Page In A Variable

In some cases, storing your whole output in a variable can be very helpful. This allows you to make global changes, compress or obfuscate code and more very easily. All we need is PHP output buffering and two hooks.

add_action('wp_head', 'smashing_buffer_start');
add_action('wp_footer', 'smashing_buffer_end');

function smashing_buffer_start() {
	ob_start( 'smashing_callback' );
}

function buffer_end() {
	ob_end_flush();
}

function smashing_callback( $content ) {
	// Feel free to do things to the content here
	$content = str_replace( 'great', 'awesome', $content );
	echo $content;
}