- What is cross-browser testing? As a web developer, it is your responsibility to make sure that your project work and works for all your users. Cross-browser testing is the practice of making sure that the websites and web apps you create work across an acceptable number of web browsers. You need to think about: => Different older browsers that some people might still be using, which don’t support all the latest, shiniest CSS and JavaScript features. => Different devices with different capabilities, older feature phones that may run browsers with limited capabilities. Remember that your MacBook Pro or high-end doesn’t mean it will work for all yours users — there’s a whole lot of testing to be done! 2.Why do cross-browser issues occur? There are many reasons why cross-browser issues occur. Cross-browser issues commonly occur because: Sometimes browsers have bugs, which made life hell for developers. Browsers are much better at following standards these days, but differences and bugs still creep through sometimes. Some devices may have constraints that cause a website to run slowly or display badly. If your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low-end device. And more reasons besides.
- Workflows for cross-browser testing If you are working on a large project, you should be testing it regularly, to make sure that new features work for your target audience and that new addition to the code doesn’t break old features that were previously working. The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases. Initial planning > Development > Testing/discovery > Fixes/iteration *Initial planning:- In the initial planning phase, you will probably have several planning meetings with the site owner/client, in which you determine exactly what the website should be — what content and functionality should it have, what should it look like, etc. cross-browser issues can have a serious effect on such planning. you should go back and review the required features and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won’t work in IE versions before 11. *Development:- Now on to the development of the site. You should split the different parts of the development into modules. There are multiple general strategies to cross-browser development, for example: Get all the functionality working as closely as possible in all target browsers. Accept that some things aren’t going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don’t support the full functionality Accept that your site just isn’t going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it. ES6 Var Declarations and Hosting Variable declarations are one of the most basic aspects of any programming language. However, JavaScript has a little quirk, known as hoisting, which can turn an innocent-looking declaration into a subtle bug. JavaScript is an extremely flexible language, and will happily allow you to declare a variable almost anywhere. For example, the following immediately-invoked function expression (IIFE) declares three variables and then displays them using an alert dialog box. (function() { var foo = 1; var bar = 2; var baz = 3; alert(foo + " " + bar + " " + baz); })(); This looks like sane JavaScript code. As expected, it displays the string “1 2 3”. Now, assume that the alert is moved, as shown below. (function() { var foo = 1; alert(foo + " " + bar + " " + baz); var bar = 2; var baz = 3; })(); Default Parameters Default function parameters allow initialized with default values. In the following example, if no value is provided for b when multiply is called, b's value would be undefined when evaluating a * b and multiply would return NaN. function multiply(a, b) { return a * b }
multiply(5, 2) // 10
multiply(5) // NaN !
With default parameters in ES2015, checks in the function body are no longer necessary. Now, you can assign 1 as the default value for b in the function head:
function multiply(a, b = 1) {
return a * b
}
multiply(5, 2) // 10
multiply(5) // 5
multiply(5, undefined) // 5
Top comments (0)