Cross Browser Testing and ES6 Explanation

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

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

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

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

I'm a junior web developer. JavaScript is my favorite programming language. As a programmer, I love taking on challenges and love being part of the solution.