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.
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.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.
We are towoglo, a new British online freelance market place. We are offering all the pre-subscribers a free 1 year premium membership, So do join in soon at https://www.towoglo.com