9 Useful Tips and Tricks for Web Developers

Introduction

Alright guys, it has been a while since I shared with you all about some web development tips and tricks. If you were able to take classes in web design you would be fortunate enough to have had peers in the classroom to absorb knowledge from, and I want to bring that experience here. This time, I have a few useful tips and tricks up my sleeve. In this post, I have 9 useful HTML, CSS and Javascript Tips and Tricks I got it online and have been using them many times. A few of them are CSS3 and HTML5, so If you are a frontend developer like me, you will certainly find them useful.

3D Tips and tricks crosswords from BigStock

1. Use the html5 placeholder

A useful script created to toggle between placeholder and normal javascript in field label. I know it's a bit redundant but if you want a more stable and clean solution for modern browsers, you can use the html5 placeholder now. I got this script from Franck Maurin.

Support: Opera 11+, Firefox 9+, Safari 5+, IE 10+

// jQuery code
var i = document.createElement("input");

// Only bind if placeholder isn't natively supported by the browser
if (!("placeholder" in i)) {
    $("input[placeholder]").each(function () {
        var self = $(this);
        self.val(self.attr("placeholder")).bind({
            focus: function () {
                if (self.val() === self.attr("placeholder")) {
                    self.val("");
                }
            },
            blur: function () {
                var label = self.attr("placeholder");
                if (label && self.val() === "") {
                    self.val(label);
                }
            }
        });
    });
}

<!-- html5 -->
<input type="text" name="search" placeholder="Search" value="">

2. Using font face

Sick of the web safe font and want to use something better and unique? You can use font-face now. Some people may stick with Google font web service, but if you want to host the font yourself, you can use Font Squirrel's @font-face generator and use it on your webpage directly with the following CSS.

Support: Opera 11+, Firefox 3+, Safari 5, IE6+

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
	
body {
       font-family: 'MyWebFont', Fallback, sans-serif;
}	

3. Box Sizing

Alright, I would say this is my recent favourite CSS properties. It can solve layout issue. for example, when you add padding to a textfield, the width will be the width of textfield + paddings, it's annoying and it usually will break the layout. However, by using this property, it solved the problem. For more explanation, you can read it from CSS Trick Box Sizing

Support: Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

4. Disable Textare resizing

Sometimes, you just want to disable the resize feature in textarea for safari and chrome to make it consistent with other browsers, and this is how to do it:

Support: Webkit browser only (Chrome and safari)

textarea {
	resize: none
}

5. jQuery.trim()

Last time, I always search for a trim function only and didn't realize that jQuery actually has it built in as one of the utilities. This method can come in handy if you want to remove white spaces at the start and at the end of the string.

$.trim("       a lot of white spaces, front and back!      ");

6. jQuery.inArray()

A similar function with Javascript's native .indexOf(). If you know PHP, this function basically doing the same thing. It looks for a needle (data) in a haystack (array). If item is found, it return boolean value.

var arr = [ "xml", "html", "css", "js" ];
$.inArray("js", arr);

7. jQuery Plugin Patterns

This is one of the greatest article I have read recently. Thanks to Doug Avery, he written down fire patterns that you can use to write your jQuery plugin. Each of them come with their pros and cons and it's up to you to find a suitable one. For detailed explanation, you need to read it from his jQuery plugin patterns article

Also, I have created a simple jQuery plugin pattern as well, or you can read our 10 Tips for writing awesome jquery plugins.

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
 
    //Attach this new method to jQuery
    $.fn.extend({ 
         
        //This is where you write your plugin's name
        pluginname: function() {
 
 			//options
 			var defaults = {
 				option1: "default_value"
 			}
 			
 			var options = $.extend(defaults, options);
 
 			//a public method
 			this.methodName: function () {
 				//call this method via $.pluginname().methodName();
 			}
 
            //Iterate over the current set of matched elements
            return this.each(function() {
             
             	var o = options;
             
                //code to be inserted here
             
            });
        }
    });
     
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

8. Extending jQuery selector capabilities

James Padolsey has created a few useful jQuery selector. You can head over his website for a comprehensive tutorial about extending jQuery's selector capabilities which come with many examples and ideas that you can possibly do with selector.

This is the one I used recently in one of my project, it's a Regex Selector.

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

/******** Usage ********/

// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');
 
// Select all DIVs with classes that contain numbers:
$('div:regex(class,[0-9])');
 
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

9. Most effective method to reduce and optimize PNG images

And lastly, this isn't something new, but it helped me a few times in the past and some other people as well, so I decided to revive it once again in case you missed it. It basically reduce the file size by posterize a PNG image (reduce the number of color). You can read our PNG file optimization tutorial.

Conclusion

That's it for now, frontend development is a very interesting field, we can never able to learn everything. Every time I work on a new project, I always find myself discover something new or something bizarre. I think these few tricks will be very handy and useful ;)

You can support us by following us on twitter or like us on facebook for more post about the latest web development trend.

• TAGS:
• CSS
• HTML
• Javascript
• Tips