React JS Archives - Startxlabs | Web Development | App Development | Digital Solution

Our Blogs

Dive into the latest insights from the IT industry, updates on disruptive technologies, and business aiding products.

react-js

7 Common Cross Browser Issues Every Developer Face

A website you build will be browsed using different types of browsers by different people across the world. Each browser has its different versions. So if you need your website to be successfully browsed by people without any inconvenience, it should be compatible with different versions of the different browsers. What makes the website incompatible? There are so many issues every developer faces while developing a website that makes it incompatible with the browsers. In this article, we will discuss the 7 common cross-browser issues faced by the developers.

HTML or CSS  Code Specific Errors

Cross-browser testing involves the proper validation of HTML and CSS codes. Invalid codes can be a major problem during the testing. Cross-browser testing expects valid codes since different browsers are going to read and handle them. Developers may have a possibility of making very negligible errors as simple as not closing the tags. Some browsers may auto-correct this, but some browsers cannot. Browsers such as Firefox and Chrome can detect such issues and can resolve them, but some other browsers cannot resolve such issues by themselves.

There are certain issues that are not considered errors, but they behave differently with different browsers. That’s why we should be careful while writing our code. Such kind of issues is discussed below.

  • Commenting on code: If we comment on a specific part of a CSS code that is not useful, it will behave differently with different browsers and can cause issues. So, it is always recommended to remove the unnecessary codes instead of commenting on them.
  • Empty Tags: When you have empty HTML tags in your code, the browsers will take space for them which is unnecessary. It is always the best practice to remove the empty tags or you can give the display property as none to avoid incompatibility with different browsers.
  • Input Tags Font: While handling input tags, always make sure to set the fontFamily property to “initial” to display the input, in the font that you have already used for the body of your content. Otherwise, the input will be displayed in its default font Arial.
  • Button Tags: For button tags in HTML, always make sure to remove the outline and border property as it may behave differently with different browsers.
  • Input elements in Safari: When browsing with Safari, you will find an inner shadow on the top, in all the input elements. To remove the shadow, set border-radius to “0”, webkit-appearance to “none” and webkit-border-radius to “0”.
  • Blurred SVG in Safari: Sometimes, the elements of the SVG image don’t break down while zooming into the image, making the image look blur. In that case, we can replace <img /> tag with the <object> tag, with the “data” attribute containing the image URL.  Ex –
<object data="smiley.svg"></object>

Validation of HTML involves ensuring whether all the tags are properly closed, whether the tags are used correctly according to their purpose, whether DOCTYPE is used, and more. CSS Validation is also the same, whether property names and values are properly spelled, whether curly braces are correctly matched, and so on. To resolve this issue, it is always recommended to use HTML and CSS code validating tools such as W3C HTML Validator and Jigsaw CSS Validator.

Unavailable CSS Resets 

Every browser possesses a specific design layout or some basic styles of CSS that is imposed on the website when opened in it, by default. So, if a website wants to use its specific layout, then it has to override the already available, default layout. Otherwise, the website will be rendered in a different way that depends upon the currently used browser. So, to avoid this a CSS reset style sheet can be used on your web page to ensure whether the browser you are using starts its rendering with the same set of basic rules. Some of the commonly used CSS reset style sheets are HTML5Reset, Eric Meyers CSS Reset, and Normalize.css. Twitter Bootstrapped and many other famous front-end frameworks don’t need an external reset as they already have a reset with them.

Read our article on Getting started with React Native Flexbox Layout

Vendor-Specific Styles 

Each browser has its specific CSS style based on the vendor. Whenever the browser tries to introduce a new CSS feature, it will be coded based on the vendor-specific style. It is essential to avoid the issues of cross-browser compatibility. Different prefixes are used for different browsers to enable the browser vendors to apply their version of the CSS feature. Some of the prefixes are,

  • -moz- for Mozilla
  • -webkit- for Chrome/ Safari
  • -o- for Opera
  • -ms- for Microsoft.

Production websites are never supposed to use prefixed features and they can change or remove without giving any warning and thus results in cross-browser issues. Always be careful while using the prefixed features and make sure whether you are using the correct prefix for a particular browser. You can check the specified prefixes for the browsers on websites like caniuse.com. A simple way to solve this issue is by attaching a prefix-free JavaScript Library to your webpage as it will automatically detect the browsers and add the prefixes accordingly. It can also be resolved by adding prefixes automatically in the process of development, by using tools like PostCSS and Autoprefixer.

Incompatible Layouts 

By implementing CSS Resets, it is possible to remove the default browser designs and to apply our designs. However, this can result in compatibility issues because of adding a non-responsive design (doesn’t looking good in mobile browsers) or because of the inability of certain browsers or their versions to support certain layouts. Layout features don’t provide efficient fallbacks because of simple colors, gradients, or shadows. However, ignoring them completely will make your entire design fall down. It is suggested to use tools like CSS grids and Flexbox when you are working with modern layouts for your website. Most of the modern browsers of today’s age extend their support to these tools and are most effective to use by developers.

It is always recommended to use feature detection as it can detect whether a browser can support the layout features you are going to use. You should be careful while selecting the layout features according to the result you are expecting. For implementing feature detection tests, we can use @supports, a newly introduced feature in CSS.

DOCTYPE Error 

As we know, the very first line in every HTML document will be the Doctype-!DOCTYPE HTML. Missing this single line can determine your entire website. This line determines whether your website will be cleanly rendered or strangely rendered. Whenever a browser behaves differently, make sure to check your Doctype, because missing it may result in faulty rendering.

Generally, a browser operates in two ways or modes. They are Strict Mode and Quirks Mode. Strict Mode performs stricter code checks according to the W3C standards and Quirks Mode doesn’t perform such stricter error checks. Whenever an HTML document misses the doctype line, the browser will go into Quirks Mode. For example, Internet Explorer will go into Quirks mode when it fails to encounter the DOCTYPE and it would have its own web standards in a quite different way. This results in making the webpage display incorrectly and makes some of the tags become unresponsive.

These are the five most common cross-browser issues every developer faces. Apart from these issues, always make sure to check whether the browser is outdated.

Cross-browser Testing 

Cross-browser testing is essential to check whether your web apps and websites run efficiently on different browsers. Websites have to undergo cross-browser testing, in order to be browsed without any compatibility issues on different browsers like Google Chrome, Mozilla Firefox, Edge, and Safari and on different OS combinations.

Cross-browser testing enables you to specifically find out the errors and issues on your website and let you debug those errors quickly. There are two ways of performing cross-browser testing. They are manual testing and online testing. Manual testing involves testing the websites manually on all browsers. For that, you need different browsers to be installed on your device. This process consumes a lot of time and sometimes it is inefficient because of different versions of the browsers.

Another yet powerful method is testing through tools available online. This method involves testing the website on an online testing tool that has different browsers along with different versions on their servers. This method saves your time as well your effort and money and makes the testing process simple. There are some tools available online to test your website for cross-browser compatibility. One such tool is the Lambda test.

  •  LambdaTest 

LambdaTest is an online cross-browser compatibility testing tool, that allows your website to be tested across locally or publicly hosted websites and on more than 2000 mobiles and browsers running on a real OS. It also lets you debug codes using the integrated debug tools in real-time. LambdaTest provides a lot of features along with browser testing such as,

  • Selenium Automation Testing
  • Provides automated test screenshots
  • Ensures whether your website runs efficiently on all screen sizes
  • For testing the locally hosted pages, it uses Tunnel
  • Visual Regression Testing
  • Testing for Resolution display
  • Geolocation testing and more.

LambdaTest also allows integration with third-party apps. This tool remains helpful for many to test their websites and to improve the performance of their websites and web applications.

  •  TestingBot 

TestingBot is another online tool that provides testing on more than 2300 browsers and devices in the cloud. This tool allows both manual and automated testing to test your websites and applications. TestingBot provides features such as

  • Record and replay browser tests
  • It allows running Appium and Selenium automated tests
  • Requirements-based Testing
  • Parallel execution support
  • Security testing

Testing on Real Devices 

The last and essential thing to do is to test your website on real machines for compatibility issues. The website should be tested on real devices with real browsers by real users. Your website will be tested using the native features of a device only by testing it on the real devices and also provides a realistic environment for testing.

Features such as screen resolutions, hardware features like Bluetooth, Wifi, GPS, and push notifications can be tested quickly as the testing is performed in real-time using the real devices.

“We transform your idea into reality, reach out to us to discuss it.

Or wanna join our cool team email us at [email protected] or see careers at Startxlabs.”

 

Read More

Getting started with React and TypeScript

What is TypeScript?

TypeScript is a typed superset of JavaScript, that makes the React components more resilient without complex building and coding. It works on all browsers and OS and assists in reducing compile-time errors. All the features of JavaScript are available in TypeScript as TypeScript is a superset of it. Some of the most important features of TyoeScript which aid in efficient development include code refactoring, type checking, navigation features and so on.

Features that TypeScript adds to ReactJs

There are many advanced features added to ReactJs, that enable easy and efficient development in React. Some of the important features added by TypeScript are,

  • Strongly types tuples and arrays
  • Reusable types with generics
  • Type annotations and inference
  • The never and unknown type
  • Union and Intersection types

Why use TypeScript with React?

You may even ask, “why should I use TypeScript in React when JS is available? What are all the benefits I can get?”. Let’s go for the answers to this question now.

  • Imagine typing a long paragraph for your friend on your mobile. If your keyboard keeps on giving you suggestions, will you complete typing much faster right? That’s the same here. TypeScript will provide you options and suggestions while developing code for your application in React, which makes your development process much easier and faster.
  • Imagine the same situation, but now besides providing suggestions, it also highlights your errors and insists that you correct them. You will type much faster and you need not read the whole passage for correcting errors right?  Like that, TypeScript highlights your errors and typos before running them, which enables us to save time we spend on fixing bugs and maintain consistent code. This error-correction feature makes TypeScript the most favorite of all the React developers.
  • Using TypeScript, we can add types to functions, properties, and variables that make the code understandable to us. By using this we can read and understand the code much easier.
  • TypeScript enables refactoring of the code and makes the updation without making any changes to its behaviors. It also improves the features of JS and it is compatible with any browser.

Read our article on – Why is React Native the best for Mobile App Development?

How to get started using TypeScript?

You can start using TypeScript by using the Create React App developed by Facebook by importing the create-react-app npm package. The CRA will provide many built-in features, Webpack, hot reloading development that assist you during the entire development process.

To ensure type-checked tests don’t make a mismatch between the development editor and CRA’s output, another npm script known as “test:tsc”: “tsc -p tsconfig.test.json -w” should be used. After the completion of type-checking tests, you can now successfully start creating your app using React using TypeScript.

  • To use CRA, npx create-react-app my-app –template typescript command should be run.  For this, you need the latest version 5.2 of Node.js and npm, a code editor, and CRA.
  • After that, some extensions such as .tsx, tsconfig.json, react-app-env.d.ts should be used. Here tsx stands for TypeScript JSX.
  • After this, run it in development mode by running the start npm script.
  • To set up ESLint and Prettier, install the dependencies
    • yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react –dev
  • At root, create the .eslintrc.js file
  • Add Prettier dev dependencies
    • yarn add prettier eslint-config-prettier eslint-plugin-prettier –dev
  • At root, create .prettierrc.js file
  • Update the files.
  • Followed by that, update the .vscode/settings.json (allows you to fix your code before running)
  • While creating interfaces, follow the react-typescript-cheatsheet guidelines.
  • While developing an application in React using TypeScript uses descriptive comments
  • TypeScript also involves the usage of hooks. It takes the value given by the useState hook. It also makes use of the useReducer hook to implement discriminated unions.

There are two types using which you can build your application using TypeScript. One is using the Parcel, another is the Webpack. You can use TypeScript with classes, functional components, and also with props.

Functional Component

import * as React from 'react';

const Count: React.FunctionComponent<{
  count: number;
}> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count;

This function is written to define object the structure of the props. It can also be done using the following:

interface Props {
  count: number;
}

const Count: React.FunctionComponent<Props> = (props) => {
  return <h1>{props.count}</h1>;
};

Read our article on – Custom Tab Bar in React Native using SVG, and D3-Shape

Class Component

Class components can be created by using TypeScript like –

import * as React from 'react';

import Count from './Count';

interface Props {}

interface State {
  count: number;
};

export default class Counter extends React.Component<Props, State> {
  state: State = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <Count count={this.state.count} />
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

Default Props

By using default props, we can develop our code in TypeScript like –

import * as React from 'react';

interface Props {
  count?: number;
}

export default class Count extends React.Component<Props> {
  static defaultProps: Props = {
    count: 10
  };

  render () {
    return <h1>{this.props.count}</h1>;
  }
}

render () {
  return (
    <div>
      <Count />
      <button onClick={this.increment}>Increment</button>
      <button onClick={this.decrement}>Decrement</button>
    </div>
  )
}

“We transform your idea into reality, reach out to us to discuss it.

Or wanna join our cool team email us at [email protected] or see careers at Startxlabs.”

 

Read More