9 most important terms every web developer should know
- What is cross browser testing?
Cross browser testing is a practice that a web site or web app you created can work on acceptable number of web browsers. As a web developer, you have to ensure that your project will not only work for you also can work for your all users. You have to think about different browsers other then one or two you use regularly. Including some older browsers which has less features and do not support all the latest features. Also you have to think about different kind of devices from latest smartphones and tablets. specially older smartphones which may be run browsers with less capability. - Why do cross browser issues occur?
There are many different reasons why cross browser issues occur. One of the most important reason is bugs in the browsers. In the very fast of browser history browser companies were competing to be the dominant browser in 1990s. They continuously implement their browser differently to each other to gain the competitive advantage. Another reason is some browsers are not being developing now. So if you want that your project work smoothly work on those browsers you have to convert your code to that syntax which is supported by the browsers. And the last issue is difference of devices. If a site has been designed for desktop PC then it might be not working smoothly in a tablets or smartphones. - Workflows for cross browser testing?
There are four phases of cross browser testing.
1. Initial Planning:- In the initial planning phase you might have several meetings with site owner/client or your boss. Then you have to know that what the site should be, what content and features it should be, what should it look like and also how much they pay for it. After then you have to know your audiences for you will designed the website.
2. Development:- Now on the development phase you have to split your whole project into different parts. For example- (Home Page, Product Page, Checkout Page etc.). Also you may need to subsplit those parts. You have to figure out that your website functionality working as closely as possible in all different browsers. For that you might be write a part of code differently.
3. Testing/Discovery:- In the testing phase you have to test your web site in different web browsers and devices. But first of all you have to identify that your website has no general issues. Firstly you need to test your site in some stable browsers in your device like- Chrome, Firefox, Opera. Then try to use your site with only keyboard and screenreaders. Then test a mobile platform such as Android or iOS. If it is not possible to use different physical devices then you can use emulator in your computer.
4. Fixes/Iteration:- If you find any bug in your website then you have to fix it in this phase. There are two reasons for bug occurs. One of them bug in browser. It is not your fault that having bug in browser. It will be fixed very soon. On the other hand if it is your fault then you have to fixed it as soon as possible. Finding out the bug and fixed it then you should retest it in the perticular browser or devices the bug occurs. - Error Object — —
When an error occurs then JavaScript generate an object with the details about it. Then the object is passed as an argument of catch. There are two main properties of object. One of them name which is the name of the object and another is message which shows the details of error. And also there are also another property of it which is non-standard. That is stack. - Using try…catch — —
Let’s see a real-life use case of try…catch. As we know that JavaScript supports the JSON.parse(str) method to read JSON-encoded values.
Let’s try to do it in the correct way-
let json = ‘{“name”:”Rokybul”, “age”: 24}’; // data from the server
let user = JSON.parse(json); // convert the text representation to JS object
// now user is an object with properties from the string
alert( user.name ); // Rokybul
alert( user.age ); // 24
Now try it in the wrong way so that we can make catch-
let json = “{ Rokybul Hasan }”;
try {
let user = JSON.parse(json); // ← when an error occurs…
alert( user.name ); // doesn’t work
} catch (e) {
// …the execution jumps here
alert( “Our apologies, the data has errors, we’ll try to request it one more time.” );
alert( e.name );
alert( e.message );
6. Throwing our own errors — —
What if json is syntactically correct but doesn’t have a required name perperty?
Like this:
let json = ‘{ “age”: 30 }’; // incomplete data
try {
let user = JSON.parse(json); // ← no errors
alert( user.name ); // no name!
} catch (e) {
alert( “doesn’t execute” );
}
In here json.parse runs normally but the absence of name is an error. To handle error we need to use throw operator. The
throw operator generates an error.
Syntex:- throw <error object>
Example:-
let json = ‘{ “age”: 30 }’; // incomplete data
try {
let user = JSON.parse(json); // ← no errors
if (!user.name) {
throw new SyntaxError(“Incomplete data: no name”); // (*)
}
alert( user.name );
} catch(e) {
alert( “JSON Error: “ + e.message ); // JSON Error: Incomplete data: no name
}
By throw operator we can generate SyntaxError and pass a message on it.
7. Rethorwing — —
By the rethrowing operator we can generate unexpected error occurs in the try…catch block.
Example:-
let json = ‘{ “age”: 30 }’; // incomplete data
try {
user = JSON.parse(json); // ← forgot to put “let” before user
// …
} catch(err) {
alert(“JSON Error: “ + err); // JSON Error: ReferenceError: user is not defined
// (no JSON Error actually)
}
It is quite possible.
Explaining the rethrowing technique.
1. Catch gets all errors.
2. In the catch(err){…} block we analyze the error object err
3. If we don’t know how to handle it, we do throw err.
We can check the error type using the instanceof operator
Example:-
try {
user = { /*…*/ };
} catch(err) {
if (err instanceof ReferenceError) {
alert(‘ReferenceError’); // “ReferenceError” for accessing an undefined variable
}
}
We can also get the error class name from err.name.
Rethrowing example:-
let json = ‘{ “age”: 30 }’; // incomplete data
try {
let user = JSON.parse(json);
if (!user.name) {
throw new SyntaxError(“Incomplete data: no name”);
}
blabla(); // unexpected error
alert( user.name );
} catch(e) {
if (e instanceof SyntaxError) {
alert( “JSON Error: “ + e.message );
} else {
throw e; // rethrow (*)
}
}
8. Try…catch…finally — —
The try…catch construct may one more code clause which is called finally. The code has two ways of execution. One of them try -> catch -> finally and another one is try -> finally.
Example:-
try {
alert( ‘try’ );
if (confirm(‘Make an error?’)) BAD_CODE();
} catch (e) {
alert( ‘catch’ );
} finally {
alert( ‘finally’ );
}
9. What is Caching? — —
In the online space, many techniques are called as caching due to their ability to copy this functionality. It can store data as commonly accessed in several places, then serve that data to requesters from the common data store. It stop generating new content each time it is requested. By this you can avoid a lot of extra data generation, reduce time to delivery.