How to write code standard way, error handle, and cross-browser compatibility
#Error handling, “try…catch”
Working with the program, we faced errors. No matter how good our programs are, our code scripts have some errors. It may come from our code or invalid input from clients or our network and server request issues. We have to handle it. Try and catch comes to solve this.
Example
try{
// code
} catch(err){
// error code
}
Try and catch has constructed two blocks. 1st try{} is executed. If the code has no error then it will go on to execute try{} code and skip catch(err){}. If try{} code has face error, it will stop to execute try{} code and and execute catch(err){} to show the error code.
#Line Length
Everybody wants to read sentences easily. No one likes to read a long horizontal line of code. It’s best practice to split them. In a normal string, we can not split lines easily. After ES6 we can do this using template string/ backtick (``)
Example
const str = “My name is Mofasser Hossian. \n I am a Web Developer”;
// before es6 we use special \n for new line
const str = `My name is Mofasser Hossian.
I am a Web Developer`
// after es6, we can use normal way to create a new line
#Nesting Code
When you code, try to avoid using too many nesting lines. In the loop, it’s sometimes a good idea to use the continue directive to avoid extra nesting.
Example
for (let i = 0; i < 10; i++) {
if (cond) {
… // <- one more nesting level
}
}
Try to avoid using nesting conditions like this. Use continue instead of this
Example
for (let i = 0; i < 10; i++) {
if (cond) continue;
}
#Function Placement
If you write too many functions in your code, there are three ways to organize the functions.
- Code function structure first. Then call function.
Example
// code structure
function name(){
// code
}
function name2(arg){
// code
}
// call Function
let call = name();
name2();
2. Call function first then code last.
Example
// call first
let call = name();
name2();
// code structure
function name(){
// code
}
function name2(arg){
// code
}
3. Mixed type calling functions and create function structure.
#Style Guide
Style guide rules generate the way of coding style. A team must follow their coding style. When they code they create their own coding style. When all members of a team use the same style guide, the code looks uniform, regardless of which team member wrote it. Although there are many existing ways of style guild.
Some popular Guideline
- Google JavaScript Style Guideline
- Airbnb Style GuideLine.
#Automated Linter.
Linter tools automatically check the style of your code and give suggestions to make better code. The best advantage of using linter is that it shows your code error, it forces you to organize your code on the right track and make your code cleaner.
Most popular linter :
- ESLint
- JSlint.
#Primitive Value
The primitive values are like numbers, strings, booleans, null, undefined, and symbols. They are not changeable. Our code does affect them. To run those primitive value, simply open the browser console and print conole.log(enter primitive value)
console.log(“sting”); // type string
console.log(132); // type number
console.log(true); // type boolean
#Cross browser compatibility
There are many browsers we have used in our life. They use different patterns of workflow and code. Cross-browser means our code is able to run all / some major web browsers. There is some CSS Style property , and some modern programming like js features which might not support all of the browser. There are different types of users in our world. Some use Apple echo System, Some use Android. Some use chrome browser, some use Mozilla firefox, and some Internet Explorer. Some users may not upgrade their browsers. They use an old browser on their device. As a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using. You think about
1 . Different users use different browsers, All browsers doest support some CSS property and modern javascript.
2. Different users use different devices, some use laptops. Some use tablets, and some use mobile. Your application should fill in device width.
#Commnet
Comment in the program is good practice. There are two types of comments used in programming languages. One single line( // code) another multiline ( /* code */ ) new programmers use comments in the wrong way. They are trying to explain their code in the comments. This is not a good way. New programmers use comments like
// this code is doing that (….). This code is written this way.
A good to write a comment is to write the architectural view, how code interacts, and how they run.
/**
* Returns x raised to the n-th power.
* n is the power of x. it should be the natural number.
* it returns the value which can be found by multiplying x by x
*/
function pow(x, n) {
…
}
#What is Caching
Caching is a general computer concept that provides efficiency through data availability. It stores data in different ways. In our web browser, users use different things, They input something, they request something, even they do the same thing several times. If browsers reload user data every time they interact that will be more time-consuming and not user-friendly. That’s why browsers store users interact which they did on a website or other place in the browser. So that user experience will increase.
