Cross Browser Testing and ES6 Explanation

Nazma Khatun Nishe — Fri, 24 Dec 2021 16:06:14 +0000

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: 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. Some devices may have constraints that cause a website to run slowly or display badly. If your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low-end device. And more reasons besides.
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. Accept that some things aren’t going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don’t support the full functionality Accept that your site just isn’t going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it. 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

Every React Developer Should Know The Fundamental Concepts Of React.js

Nazma Khatun Nishe — Fri, 24 Dec 2021 10:59:46 +0000

Optimize performance of the React application:-
React is defined as a JavaScript library for building user interfaces. There are many ways to speed up your react application.

Use the Production Build- If you’re facing performance problems in your React apps, make sure you’re testing with the minified production build. By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. You can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background:

If you visit a site with React in development mode, the icon will have a red background:

useMemo( ) :-
This is a React hook that is used to cache functions in React, CPU-expensive functions.
Now see an example:
function App() {
const [count, setCount] = useState(0)

const expFunc = (count)=> {
waitSync(3000);
return count * 90;
} const resCount = useMemo(()=> {
return expFunc(count)
}, [count]) return (
<>
Count: {resCount}
setCount(e.target.value)} placeholder="Set Count" />
</>
)
}
The expFunc results will be cached against the input when the same input occurs again useMemo will skip calling the expFunc and return the output cached against the input.
This will make the App component highly optimized.
Virtualize long lists:
If you render large lists of data, it is recommended that you render only a small portion of the datasets within the visible viewport of a browser, then the next data are rendered as the lists are scrolled called “windowing”. Awesome React libraries have been built for this, there is the react-window and react-virtualized by Brian Vaughn.
Avoid Reconciliation:
React compares the newly returned elements with the previously rendered ones by comparing a snapshot of a new object with the last updated object. This way React has to update only changed nodes in React DOM
This whole process is how to React updates DOM which is called Reconciliation.
This process is way faster than Real DOM manipulation.
Even though React is clever enough to update only changed nodes. But when props and state change, re-rendering takes place which takes some time.
So we need to avoid unnecessary re-rendering for such cases.
The Power Of Not Mutataing Data:
You should avoid object mutations and instead create a new object. The reason for this design pattern is because React will start by doing a shallow check to see if the snapshots of your state object are the same. Mutable data types like arrays and objects can be updated without creating new copies. As a result, React must traverse these structures comparing all the values to determine if a change has occurred.
The solution to this problem is to follow a more functional approach to setState ( ) updates. Strings and Numbers are non-issues as they are immutable, however, it can be tempting to update an array for example for just pushing a new value onto the end.
The following is the preferred way for updating arrays in React:
// Adding to end of array// Bad
this.state.arr.push('foo');// Good
this.setState({
arr: [...this.state.arr, 'foo']
})// Adding to middle of an array// Bad
this.state.arr[3] = 'foo';//Good
this.setState({
arr: this.state.arr.map((item, index) => index === 3 ? 'foo' : item)
})// Array deletion// Bad
this.state.arr.splice(2,1)// Good
this.setState({
arr: this.state.arr.filter((item, index) => index !== 2 )
})
5 things you need to know about React
If you are in the middle of learning it right now, you might be interested in reading this post.
1) It’s not a framework
Angular and other frameworks where some decisions are already made for you. React is just a library and you need to make all decisions by yourself. It helps you to build user interfaces.
It doesn’t help you with server communication, translations, routing, and so on. Some perceive this as a weakness. React is thin and it’s extremely easy to mix it with other 3rd party libraries.
2) JSX
If you looking at React examples you’ve seen JSX in action already. But React code can be written in plain js too.
const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘red’}},
‘The world is yours’),
React.createElement(‘p’, {},
‘Say hello to my little friend’)
)
ReactDOM.render(rootElement, document.getElementById(‘app’))
The people at Facebook came up with JSX — a “syntactic sugar for the React.createElement(component, props, …children) function”.That’s why we can refactor the above example to this:
const RootElement = (

The world is yours

Say hello to my little friend

)
ReactDOM.render(RootElement, document.getElementById('app'))
During the build process, Babel will transpile the markup to plain JS.
3) It’s declarative
In React you can use declarative style to write your components.

{somearray.map(element =>
{element.text}
)}

In this example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.
4) You separate the concerns
In React you keep HTML, JS, and often CSS together as a component. You also split JS, HTML, and CSS into different files. “If you keep HTML and JS in separate files you can easily replace the HTML and keep the JS intact”. It doesn’t work that way if you think about it. Most changes to the HTML structure require refactoring of JS logic.
5) State
It’s needed to create a stateful component where the state is changing over time.
const InputBox = React.createClass({
getInitialState () {
return {
text: ''
}
},
changeText (event) {
this.setState({text: event.target.value})
},
render () {
return (

placeholder='text' value={this.state.text} />
{this.state.text}

)
}
})
The state update will be scheduled and the component will re-render when it’s done. setState() call needs to be used to inform React about pending state change so it can apply the changes.
Asif Hasan Irfan
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.

Your journey starts here.

Bros., Lecce: We Eat at The Worst Michelin Starred Restaurant, Ever

My 2021 End of Year Lists
Here’s my annual list of favorite books, music, and movies. Art always sustains and nourishes the soul. But for me, music and storytelling…
MONEY

Sorry, but the Mother of All Crashes Is Coming and It Won’t Be Fun
MATH

The Shortest Scientific Papers Ever Published
React
React Performance

DEV Community: Nazma Khatun Nishe

Cross Browser Testing and ES6 Explanation

Every React Developer Should Know The Fundamental Concepts Of React.js

The world is yours