Tag: front-end

Getting started with web accessibility in ReactJS

Posted on by girish

React is a widely preferred frontend UI library, used in nearly 50 million projects every month. React, which is supported by Facebook, has dominated the web development market for more than nine years and boasts a number of notable clients (startups to Fortune 500 companies).

Source

Web accessibility is one of the most significant, but least considered, topics by web developers. It is simple to forget accessibility when creating new fancy web applications with React or even to forget the native features that React offers to make the website more accessible. This comes with a price to pay.

In this detailed tutorial on accessibility tools in React, we will walk you through the various methodologies through which you can make your React application accessible to everyone.

So, let’s get started!

What is Web Accessibility

Web accessibility is the practice of designing and building websites and digital tools so that people with different abilities can use them without difficulty.

A new set of accessibility features and problems have emerged as web applications become more complex and dynamic. Numerous semantic elements, such as “main” and “section,” have been added to HTML. Instead of focusing only on presentation, semantic HTML gives the web page important meaning. This makes it easier for web browsers, search engines, screen readers, RSS readers, and ultimately users, to comprehend.

A website that is accessible eliminates obstacles and guarantees that users with and without disabilities have equal access to the website’s functionality. Web accessibility also affects people with temporary disabilities, such as someone who has broken an arm, or situational limitations – such as when a person is unable to hear the audio due to loud background noise. Accessibility support is required for assistive technology to interpret web pages.

How to Make a React Application Accessible

ReactJS fully supports the creation of accessible websites, which usually make use of conventional HTML methods. You can ensure that your web application is as quickly and easily accessible as possible by following a few simple steps:

Using HTML Semantics:  

The distinguishing characteristic of a semantic element is that it makes its meaning clear to both the developer and the browser. These elements clearly define its content. 

Use semantic HTML whenever possible to make your website accessible to screen readers and to make your code more understandable. Semantic HTML tags can be used by search engines and other user devices to assess the significance and context of web pages.

Following the basic Structure

Design the interface with everything interconnected so that the user has a path to follow. In addition to structuring, headings, sections, navbars, etc. must be placed in proper locations. These semantic components serve as logical sections and improve the website’s structure.

    source

Regardless of size or complexity, an accessible semantic structure will enable accessibility on any website. Your website’s accessibility will be worse as it grows if it lacks a strong semantic foundation. Setting the right structure early in the development process helps your website stay navigable as it expands.

Keyboard Focus

When implementing accessible websites, keyboard focus is an important point to keep in mind. If you don’t make sure that keyboard focus is properly managed, users who can’t use other input methods will find it difficult to interact with your website. It is a good idea to create an outline around the input section to let the user know which input element is currently selected.

This implementation is noticeable on the Google Home page.

This can be implemented by using useRef in React so that we can access the input element and focus on it when the user clicks or hovers through the input section. The code for this is illustrated below:

Issues with keyboard accessibility on websites occur when designers or developers use techniques that go against standard keyboard functionality.

Accessible Rich Internet Applications (ARIA)

Web content and web applications can be made more accessible for people with disabilities by implementing a set of attributes called Accessible Rich Internet Applications. ARIA defines semantics for many popular UI controls so that screen readers and other assistive technologies can understand what our DOM nodes stand for.

Let’s understand ARIA with a small example.

You can see that we have provided the aria-label attribute and the screen readers know that it is a button because we used a button tag and the aria-label tells us that this button is to increment something. 

Using React Fragments

Fragments are a common pattern in React for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. In some cases, using <div> elements in React may violate HTML semantics, resulting in difficult-to-understand page structures or invalid HTML.

Let’s look at an example where we need to use fragments:

We know that in React, we should only have one parent JSX element. If we try to wrap the list items in the above example in a <div> ,it will result in having an invalid list. In this situation, it is ideal to use fragments.

Fragments hold HTML valid and understandable, especially for users who may rely on screen reader technologies or other users who may not have access to the page’s visual elements.

Labeling

In order to make the forms accessible, labeling is used. Every HTML form control must have an accessible label. A textual label should be provided for each control.

Screen readers can better understand the context of the control they are interacting with when a label is provided. To indicate where it labels in HTML, we use the for attribute; in React, we use the htmlFor attribute. 

We have seen several ways in which we can increase web accessibility. There are some countries that have some regulations that require the website to be accessible to everyone.

Let’s now look at some of the tools that can help us identify accessibility issues in your React application.

Accessibility Tools for React Applications

Thanks to the size and constant growth of the React ecosystem, there are many tools available that can assist developers in creating web applications that are more accessible. 

Although you can detect some common accessibility issues using these tools, they won’t complete your task for you. It is your duty as a developer to make a concerted effort to create more inclusive and accessible digital products from the very beginning of the project.

eslint-plugin-jsx-a11y

To identify accessibility problems in React applications, this plugin performs a static evaluation of the JSX. Use it in combination with @axe-core/react to test the accessibility of the rendered DOM since it only detects errors in static code. Always test your apps using assistive technology, treating these tools as just one step in a larger a11y testing process.

You can make sure you are strictly adhering to some accessibility standards right away with real-time understanding if you are using an editor linting plugin. This plugin has 33 testable rules enabled, including label-has-for and alt-text.

When you use create-react-app to create a React project, it already has this tool configured, but it only has a portion of the configurable accessibility rules enabled by default. You can enable more rules by creating a .eslintrc file.

axe-core-react

The axe-core-react can be used in a React project in development to highlight accessibility issues whenever a component updates in the Chrome DevTools console.

You can run the axe-core-react plugin with the default configuration or you can add additional options.The following code shows how to run axe-core-react in your application.

react-aria-modal

It is a fully accessible and flexible React modal built according to WAI-ARIA Authoring Practices.

The React team advises using this modal library because it complies with web accessibility guidelines. It controls keyboard focus, key mapping, and ARIA roles to make sure that screen readers can access your modal.

Your component will be wrapped in a modal component that makes it simple to use, customizable, and enforces accessibility standards. This tool is extremely helpful because modals are some of the least accessible features of websites.

The axe accessibility linter VS Code extension

You can use the axe accessibility linter extension for Visual Studio Code to check React, HTML, Vue, and Markdown for some common accessibility flaws. It identifies the accessibility issues in Javascript, JSX, typescript, Vue, HTML, and markdown files.

The advantage of this extension is that it doesn’t require configuration. After installation from the VS Code Marketplace, it immediately begins linting compatible files for accessibility faults without requiring any further configuration. Installation can occasionally require a few minutes. Axe accessibility linter will start operating on compatible source files after this step is finished.

Web AIM Color Contrast Checker

According to the Web Content Accessibility Guidelines, the normal text should have a color contrast ratio of 4.5:1 for Level AA. The normal text must have a contrast ratio of 7:1 to reach Level AAA.

The two colors you’ve chosen will be analyzed by this tool, which will also provide the color contrast ratio. When creating a color scheme, you can check to see if it will go against any accessibility standards.

Google LightHouse

You can perform an accessibility audit of your website using Google’s Lighthouse Chrome DevTools. It produces a report that you can use to improve your website’s flaws.

The Google Lighthouse, like the majority of accessibility tools, evaluates web content in reference to the Web Content Accessibility Guidelines (WCAG). WCAG, which is published by the World Wide Web Consortium (W3C), is the accepted digital accessibility standard.

WAVE Evaluation Tool browser extension

You can use this additional Chrome browser extension to find accessibility problems with your website. Before using this extension to audit your web application for accessibility flaws, you must host the app. 

By adding icons and indicators to your page, it gives users a visual indication of how accessible your web content is. WAVE facilitates human evaluation and informs users about accessibility issues, but no automated tool can tell you whether your page is accessible. The browser handles all analysis, enabling secure evaluation of local, password-protected, intranet, and other sensitive web pages.

Axe DevTools browser extension

The free Axe DevTools browser extension is a fast, lightweight, yet powerful testing tool driven by the world’s most trusted accessibility testing engine, axe-core, developed by Deque.

The need for manual testing is drastically reduced when accessibility issues are proactively found and fixed using axe DevTools, giving you quick wins without slowing down development. The extension is available for Google Chrome, Mozilla Firefox, and Microsoft Edge. 

Conclusion

Congratulations on reaching this far! We are glad you read the article.

In this detailed blog on accessibility for React applications, we have covered various ways to make websites accessible. We have also discussed various best practices and accessibility tips and tricks.

Now you know how to make your React application accessible.

Happy Reacting!

 

 

3 React traps you should be wary of as a frontend developer

Posted on by venkatesh

React is arguably the most used JavaScript framework for frontend development. It offers opportunities and options to developers that other frontend frameworks fail to deliver. For instance, React provides an easy way to handle DOM API which is usually abstracted beneath interfaces making it difficult to interact with them directly. This JavaScript framework provides developers with a virtual browser that is much more developer-friendly than real browsers. The virtual browser acts as the agent between developers and the actual browser.

React is developer-friendly in many more ways, but this article is on some common language pitfalls that developers should avoid. If you are new to React, we recommend you familiarize yourself with these React traps to avoid them easily.

Let’s see what frontend developers must know about these traps.

1. Empty data will still display 0

As a React developer, you must have written code to pull data from the server and display it as a list on the front end. If the data is empty then ideally, it must not be displayed on the screen:

Example code:

const App = () => {

  const [list, setList] = React.useState([]);

  // fetch data …

  return (

   list.length && (

    <div className=”name-list-container”>

    {list.map((name) => {

      return <div className=”name-list-item”>{name}</div>;

     })}

    </div>

   )

  );

};

However, the output of this code will display 0 when the list is an empty array. It can leave you scratching your head as to why it is doing so.

It is not a bug, but a default behavior in React caused by the operating mechanism of JavaScript itself. According to MDN docs, “in JavaScript logical AND (&&) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true. Otherwise, it will be false.

The AND operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.”

For example:

const a = 0;

const b = “fatfish”;

const c = 1;

const d = “medium”;

Output:

console.log(a && b); // 0

console.log(c && d); // medium

However, there are several ways to overcome this React trap. Here are some examples of how you can solve the problem by turning a into a Boolean using ternary expressions.

  1. Convert list.length to boolean

!!list.length && <Component list={list} />;

  1. Use ternary expressions and null

list.length ? <Component list={list} /> : null;

  1. Controlled by a specific logic

list.length >= 1 && <Component list={list} />;

2. Get tricked by the use of “||” and “&&” 

If you are using both AND “&&” and OR “||” operators in a statement, you have to be careful because most React developers mess up in such scenarios.

Let’s consider this code:

const App = (props) => {

  return (

   props.name || props.name2 && <div className=”user-info”>fatfish</div>

  )

}

ReactDOM.render(<App name=”medium” />, document.getElementById(‘app’))

We want to show “fatfish” when the property name or name2 is passed a value. However, the outcome will be different because the code is not working as expected.

Why?

In JavaScript, the && operator has a higher priority, which is why the above code acts like this:

const App = (props) => {

  return (

   props.name || (props.name2 && <div className=”user-info”>fatfish</div>)

  )

}

ReactDOM.render(<App name=”medium” />, document.getElementById(‘app’))

The right way to display “fatfish” when a value is passed to name or name2 is using the following code:

const App = (props) => {

  return (

   (props.name || props.name2) && <div className=”user-info”>fatfish</div>

  )

}

ReactDOM.render(<App name=”medium” />, document.getElementById(‘app’))

3. Using nested multi-layer ternary expressions

React might be robust but be careful if you use multiple ternary expressions nested in your React app. It might very well be a nightmare for you and any other developer. Such nested code is hard to read and debug.

For instance, here’s nested multi-layer ternary React code:

{

  isUserA ? (

   <ComponentA />

  ) : isUserB ? (

   <ComponentB />

  ) : (

   isUserC ? <ComponentC /> : null

  );

}

If you write React code like this, you need to change your style right now.

You can simplify the code with the use of an if-else.

Here’s the above code without nesting:

const renderCompnent = () => {

  let component = null

  if (isUserA) {

   component = <ComponentA />

  } else if (isUserB) {

   component = <ComponentB />

  } else if (isUserC) {

   component = <ComponentC />

  }

  return component

}

As you can see, with nested ternary, React code becomes easy to read. It is a skill that will serve you well in your career as your code will be easy to maintain and debug.

Conclusion 

React is here to stay, and so is JavaScript. You can stand out by mastering the nuisances of React framework that give other developers nightmares. We hope these three commonly faced React traps won’t bother you anymore.

Talent500 is the remote team-building platform Fortune 500 companies use to hire engineering talent. Join our elite pool of talent, and sign up here.

 

C# developer toolkit: In-demand skills, learning resources, online courses, interview prep, books & more

Posted on by venkatesh

C# is one of the most versatile programming languages. It has its roots in the C family of programming languages and incorporates the ease of programming that languages like Java offer. It is a language that beginners can pick for general programming yet robust enough to build enterprise applications and web apps. As a C# developer, you can expect to work on frontend development projects deployed on .Net runtime.

To help you accelerate the learning process and be on the right upskill path, we have curated some of the best C# resources and created this ultimate C# toolkit.

  1. Proficiency in several coding languages: While proficiency in C# is a must to get hired as a C# developer, there are several concepts that one should master. Understanding LINQ, Object-Oriented Programming (OOPS) concepts, and async features are essential to learning. In OOPS, C# developers must know inheritance overload, abstraction, override, and encapsulation. Apart from C#, a programmer should also be familiar with F#, VB.NET, and database languages such as NoSQL, SQL Server, and Oracle.
  2. Expertise in .NET framework: Just mastering C# alone won’t be enough for a developer to land a job. Knowledge of the .NET framework is essential for developing applications. From websites to mobile applications, a lot can be achieved by exploiting the features of the .NET framework, such as the .NET Framework Runtime and the .NET Framework Class Library. Concepts of the .NET framework are updated frequently as the new standards of web development evolve; this is why a C# developer must keep up with the latest features of the .NET framework.
  3. Knowledge of MVC, .NET Core: For web development, C# developers are dependent on ASP.NET MVC. It is one of the most popular open-source web development frameworks. With MVC, you can create complex and aesthetically unique web applications with relative ease. Knowledge of ASP.NET MVC and .NET Core enables C# developers to take advantage of modern client-side web development technologies. With .NET Core, developers can build applications that run on multiple platforms and support several architectures like ARM and x86. It is excellent for building desktop applications that can run on Windows, iOS, and Linux without compatibility issues.
  4. Client-side technologies: For frontend development, C# developers will have to work with other client-side technologies, especially HTML, CSS, and JavaScript. It is essential to learn these client-side technologies to diversify skills and increase employability. To develop innovative and pleasing web application interfaces with C#, knowledge of frameworks like Bootstrap will also come in handy.

Overall, your ability as a C# developer lies in evolving with the latest developments in .NET technology.

15 Essential C# Interview Questions

How to Adequately Prepare for a C# Interview

50 C# Interview Questions and Answers for 2022

Nail Your C# Developer Interview Class

10 C# Interview Questions (With Example Answers)

11 most in-demand front end developer skills you should develop

Understanding the front end developer job landscape

Front-end developer interview preparation resources

Official resources

Official Website

C# Learning Center 

C# Official Documentation

Microsoft .Net Blog

.NET Developer Community

Online courses & tutorials

C# Basics for Beginners: Learn C# Fundamentals by Coding: Best course for beginners to get started with C# development faster.

C# Fundamentals for Absolute Beginners: A free video course from Microsoft to enable beginners to learn the fundamentals of C# and .NET framework.

C# Programming for Unity Game Development Specialization: Best online course for learning game development with C#.

C# Intermediate: Classes, Interfaces and OOP: An in-depth Udemy course to learn the intermediate level concepts of C#, including classes, interfaces, and object-oriented programming (OOP).

C# Advanced Topics: Prepare for Technical Interviews: For advanced C# developers to prepare for C# constructs: Events, Delegates, Lambda Expressions, LINQ, and Async/Await.

 

Books for C# developers 

C# 8.0 and .NET Core 3.0 – Modern cross-platform development: Build applications with C#

Programming C# 8.0 (O’Reilly)

The C# Player’s Guide (3rd Edition) 3rd Edition

Microsoft Visual C# Step by Step (Developer Reference) 8th Edition

Pro C# 7: With .NET and .NET Core 8th ed. Edition

 

Online communities for C# developers 

Reddit community for C#

Stack Overflow C# community

C# Forums

CodeProject C# Community  

Podcasts for C# Developers

.NET Rocks

Hanselminutes

MS Dev Show

Merge Conflict

No dogma podcast

Communication: Software developers need to have strong communication skills to share ideas and discuss problems with clients, teammates, and other stakeholders. Technical skills might get you the job, but communication skills will help you progress in your career. A proficient communicator can mentor new team members, convince clients, facilitate collaboration among team members, and present their ideas.

Budget design: Knowledge of budget and finance management enables a developer to use the most cost-effective web and application development measures. When working on a new project, C# developers will be required to create budgets to determine the resources they need and the extent of the project. Whether you are charging hourly or one-time, you need to manage funds to deliver the best ROI to clients. 

Time management: Time is of the essence for developers, so time management is a crucial skill for delivering projects on deadline. You must be self-motivated to organize tasks and complete them on time. At times you might have to juggle between multiple projects, and it will require you to reserve time for each project.

Problem-solving: C# developers will need problem-solving skills to identify and resolve issues early in project development. You will be working on projects of all sizes; it will be a complex task to identify, isolate and fix errors. It will be difficult for you to test and debug code without investing too much time without demonstrable problem-solving skills.

Collaboration: As a C# developer, you will often be part of a team with several developers, designers, and testers working on the same project. To collaborate with other IT professionals, delegate tasks to each member, and help other teammates troubleshoot the program, you need collaboration skills.

Here’s a list of resources that you can refer in-depth overview of essential soft skills for C# developers:

7 Most valuable soft skills of exceptional software engineers

Essential skills to be a QA engineer

How soft skills transitioned to become the new power skills

In-demand skills for a backend developer

Conclusion

C# will be a valuable tool in your developer kitty as a universal programming language. Remember to focus on skills discussed in this C# toolkit as companies look for candidates with these skills. A strong foundation in C# and .Net is mandatory, but familiarity with other programming languages and client-side technologies makes you more employable. In the end, it’s not just how skilled of a C# developer you are but also what soft skills you possess and how motivated as a self-learner you are.

Join the elite pool of C# developers on Talent500 and be ready to start a career with some of the biggest companies globally. We are a remote team-building platform that fast-growing startups and Fortune 500 companies trust to hire the best Indian IT talent. Sign up here!

Talent500 helps the world’s fastest growing businesses build their global workforce.

We help companies hire, build and manage global teams. We are trusted by industry leaders across the globe – from Fortune 500s and larger enterprises, to some of the world’s fastest-growing startups. We are backed by Accel Partners & ANSR, a global leader and enterprise transformation platform.

Facebook Linkedin Instagram

Home

Discover Jobs

Enterprise blog

Professionals blog

About us

Terms of use

Privacy policy

Contact us