9 Useful Tips and Tricks for Web Developers

9 Useful Tips and Tricks for Web Developers


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. 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.

tips and tricks3D 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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

8 comments

Milan Kaneria
Tue, 5th June 2012
Useful tips for sure.

If you are using HTML5 placeholder JS code then do clear the placeholder text when submitting the form otherwise the placeholder text will be submitted as a regular input text by user. Reply
Dalton Bateman
Tue, 5th June 2012
The best thing to do for textarea resizing issues is set a minimum/maximum height and width and set overflow to auto. I generally keep the min/max height the same. It works like a charm. Reply
Adrian Sandu
Wed, 6th June 2012
Regarding #4: Support for the "resize" property is wider than just Webkit. Firefox supports this property since version 4.0 (source: http://caniuse.com/css-resize) Reply
Website Development
Mon, 11th June 2012
Really very great tips..thanks for share !! Reply
Rms Rahman
Mon, 8th April 2013
Some of these tutorials are extremely good, magazine like. Thanks for sharing! Reply
clippingpathzone
Sun, 21st April 2013
Thanks for sharing such informative post its help me to know deeply Photoshop work step by step. Reply
web development in chennai
Mon, 5th August 2013
Thanks for sharing this nice article. I had gain an better information about the developing codes in step-by-step process. Reply
SENTHILKUMAR BP
Fri, 9th August 2013
#4.Disable Textare resizing - typo "Disable Textarea resizing" Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement