Random Web Development Tips
Try…Catch
Generally, people use try…catch to catch a problem that’s what I understand by a little research reading some articles. What try…catch do? actually the construction of try… catch is try{…//code} catch(err){…//if error happens}. So, by the construction of try…catch it is clear that if you wanna test your code if it is working or not you can use try…catch. In this catch function, you’ll get details about the error if something bad happens. But sometimes you’ll be fooled by not getting any errors in the catch function though there are some errors. Why does this happen? because your code may be clean and technically they are okay. That’s why catch didn’t find any errors. Still, you can fix this by creating your own errors. Why do you need to create the troublemaker errors? Because there is something not working I mean you did wrong but technically right and you need to find it out. How will you do so? There is an example:
let someJSON= {“name”: “musa”, “age”:10}
try{
const user= JSON.parse(someJSON);
if(!user.job){throw new Error(“no job found”)}
const usersJob = user.job;
}
catch(err){console.log(err)//no job found}
That’s how this works…
JavaScript/EcmaScript Data Types
In javascript, we write code we make functions and so many other things. If we write typeof(something) we can get the type. For example:
console.log(tyepof(‘hello world’) // string;
console.log(typeof(99) // number;
Those are data types in javascript as every programming language has it. Those are not only data types that javascript has. There are some other data types. But string and number are called primitive data types as they are unique. The rest data types other than primitive is called objects though they have their own names. For example, boolean, function, object, undefined, etc.
Cross-Browser Compatibility
What do cross-browser means? It means a website that is compatible with many browsers. When you as a developer working on a website you're testing it on your pc and on your specific browser but a user not gonna use your pc and your browser. So, you have to keep it in your mind and have to work on it. Why you should test cross-browser compatibility? Because each browser has its own functionality and features. For example, chrome may use a highly efficient system where others may don’t have this feature. As a result of it, some users who use those browsers may face difficulties and sometimes your site may crash on their browsers. How can I test cross-browser compatibility? Actually, there are no compulsory rules to test it but you can use any standards to testify. First, you’ll discuss this matter with your clients. This is the primary process. Then, you will start working and develop the site while working you will test regularly. Thirdly, you’ll test deploy your site. Finally, download some browsers and test them manually. You have tested them on mobile too(i.e. iPad, iPhone, Android phone, tablets, etc).
Spread Operator
A spread operator is an interesting thing in javascript. What does it do? Its main duty is to spread the values of an array. Sometimes it is necessary to use each item of an array. But it’s too difficult to type them again manually. And then spread operator shows it’s magic. If you use spread operator you don’t need to write whole things of an array. I think to make this idea crystal clear you need an example. Let me show you an example:
const array=[1,2,3,4];
function sum(a,b,c,d){
console.log(a+b+c+d)
}
sum(1,2,3,4) // 10 **bad practice
sum(…array) // 10 **best practice
Hope you get this.
Arrow Function
What is an arrow function? is it made for the shooting arrow? is it uses a bow to shoot? Just kidding, in javascripts arrow function there is nothing like that. Arrow function is a newer version of the function. Arrow functions make it easier to use function. How? nice question. Let me cite an example to clarify:
//Old version
function sum(x, y) {
return x+y;
}
//ES6 version
const sum = (x, y) => return x+y;
Did you noticed how easily the arrow function is written! You can do same without parameter.
const func = () = > return ‘something’
See, How easy it is!
Functions default parameters
You know functions very well as you are a javascript developer and came here to read my articles. We, developers, write functions to make something easier. When we write functions sometimes we need to pass parameters. Like so,
const square= (a)=> return a*a;
While calling this function we need to pass a parameter inside this function.
const sqFive = square(5) // 25;
what if we don't pass any parameter? It’ll show us an error … Like this,
const sqNone = square()// undefined;
If you don't wanna get any error you have to set default parameter. How? let me show you how:
const multiply = ( a=1, b=1) => return a*b;
const multiply5and6 = multiply(5,6) // 30;
const multiply5 = multiply(5) // 5 **instead of error it’s showing results**
const multiplyNone = multiply() // 1 ** see! no error**
Code Style
Code style! huh! sounds interesting. Is it necessary to style codes? no, absolutely not. But if you write code randomly than other developers, sometimes code readers cannot find out what you have written. It’ll be hard to debug and to make other changes. There are some best practices and some worst practice of writing codes. I’m not gonna explain deeply here because I’m not an expert on code styling. But I can say that you should follow any code style guide. Though it is not compulsory, it’s important.
Commenting
Commenting, sometimes, is a necessary thing while writing code to explain something, I mean, the functionality of your codes. For example, you have typed a function of a sum. But to make it clear to other developers you can use comments. There are some best practices and worst practices of commenting. For example, some developers, mostly beginners use comments on every line or in every function, though it is needless. And it is a bad practice of coding. But what is good practice? you can use a meaningful name for your variables and functions. You can also comment first explaining what have you done in your code. That’s it.
How does javascript work?
JavaScripts is what is called a client-side scripting language. That means that it is a computer programming language that runs inside an Internet browser (a browser is also known as a Web client because it connects to a Web server to download pages). The way JavaScript works is interesting. Inside a normal Web page, you place some JavaScript code (See How Web Pages Work for details on Web pages). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds on the page and runs it.
Javascripts Hosting
example:1
random(‘musa’) // ‘my name is musa’
const random = (name) => console.log(`my name is ${name}`)
example:2
const random = (name) => console.log(`my name is ${name}`)
random(‘musa’) // ‘my name is musa’
What is a hoist? Hoist means lifting up something(google translate 😐) In javascript if you call a function before initialization and then initialize it’ll still work fine. This is called hoisting in javascript. So, it lifts the function to the top and then run it. That’s how it works…