9 Helpful tips and tricks for Web development

In this article, we give you 9 useful tips and hints for HTML, CSS, and JavaScript, which you might often need to do in WEB development, some of which are about HTML5 and CSS3, and if you're a front-end developer, it might be useful for you.

1. Using the HTML5 placeholder property
We used to write a lot of JavaScript code to implement the current HTML5 placeholder properties, an input box to display a hint when the focus is not obtained, when the input focus will automatically clear the prompt message, the browser currently supports this property is: Opera 11+ , Firefox + +, Safari 5+, IE + +, but the code provided below is also applicable for browsers that do not support placeholder:

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 = $ (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. Use the font face
You can use some of the better unique fonts through the font face, which supports most browsers: Opera 11+, Firefox-only, 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
Well, I would say this is my favorite CSS property lately. It solves layout problems. For example, when you add a TextField fill, the width will be the width of the text box + fill, which is annoying and it will usually break the layout. However, by using this property, it solves the problem.

Supported browsers: 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 the Textarea size change
There are times when you don't need users to be able to change the size of multiple lines of text input textarea, but some Webkit-based browsers (such as Safari and chrome) can let users change the textarea size at will, so you can disable this feature:

TEXTAREA {

Resize:none

}
5.jquery.trim ()
To remove spaces before and after a string:

$.trim ("A lot of white spaces, front and back!");
6. Jquery.inarray ()
Used to determine whether an element is in an array:

var arr = ["xml", "HTML", "CSS", "JS"];

$.inarray ("JS", arr);

7. Write a simple JQuery plugin (template)

You need a 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 the This method via $.pluginname (). MethodName ();

}

Iterate over the current set of matched elements
Return This.each (function () {

var o = options;

Code to is inserted here

});

}

});

Pass JQuery to the function,

So, we'll able to the use of any valid Javascript variable name

To replace the "$" sign. But, we'll stick to $ (I like dollar sign:))

}) (JQuery);
8. Extending the functionality of the JQuery 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. Optimize and reduce the size of PNG image files
You can reduce the size of PNG files by reducing the number of colors, see PNG file optimization for details

Conclusion
Front-end development is a very interesting area and we can never learn everything. Every time I work on a new project, I always feel like I've found something new or strange. I think these tips will be very handy and useful;)