9 most important terms every web developer should know

  1. 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.
  2. 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.
  3. 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.
  4. 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.

--

--

--

Hello, This is Md Rokybul Hasan. I am a MERN STACK web developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Microservices Architecture

Generating Access Tokens Using WSO2 Identity Server

Camunda: Authorizations by Group via REST

Builder Pattern chaining with Inheritance

Unity: adding Twitch integration to your game

Dive in a quick dip

The secret of making a startup landing page for free in 2 hours (for Santander Summer Accelerator)

C# Lesson 4 — Main() Method Input Arguments

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mdrokybulhasan

Mdrokybulhasan

Hello, This is Md Rokybul Hasan. I am a MERN STACK web developer.

More from Medium

Top Lesser-Known Tools for Web Freelancers in 2022

A website is being shown in a visual editor. The website is for real-estate and is called “Anderson Properties”

Front-End Resources

Developing web page for the first time?

Clone of Discord website