9 useful tips in web development

In this article, we give 9 useful HTML, CSS and JavaScript tips and tricks that you may often need to use in web development. Several of them are about HTML5 and CSS3, if you are a front-end Developers, then it might be of some use to you.

1. Use the placeholder attribute of html5

In the past, we often had to write a lot of JavaScript code to implement the function of the placeholder attribute in HTML5. An input box displays a certain prompt message when it does not gain focus, and automatically clears the prompt message when it gains input focus. Browsing of this attribute is currently supported. The browsers include: Opera 11+, Firefox 9+, Safari 5+, IE 10+, but the code provided below is also applicable to 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 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. Use font face

You can use font face to use some better and unique fonts, supporting most browsers: 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

Well, I would say this is my favorite CSS property these days. It can solve layout problems. For example, when you add a textfield padding, the width will be the textbox's width + padding, which is annoying and will usually break the layout. However, by using this property, it solves this 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 Textarea size change

Sometimes you don't need the user to change the size of the textarea of ​​the multi-line text input port, but some Webkit-based browsers (such as safari and chrome) allow users to change the textarea size at will. Fortunately, you can disable this feature:

textarea {
    resize: none
}

5.jQuery.trim()

Used 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 plug-in (template)

//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. Extend the functionality of 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 ps with classes that contain numbers:
$('p:regex(class,[0-9])');
  
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

9. Optimize and reduce PNG image file size

You can reduce the size of PNG files by reducing the number of colors. For details, see PNG file optimization

in conclusion

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

Original English text: 9-useful-tips-and-tricks-for-web-developers

The above is the detailed content of 9 useful tips in web development. For more information, please follow other related articles on the PHP Chinese website!