Latest Tutorials

Learn about the latest technologies from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL

    useEffect in React: Best Practices and Common Pitfalls

    In React development, the useEffect hook is a fundamental tool that allows you to manage side effects in function components. Side effects in React include operations like fetching data, subscribing to external data sources, manually modifying the DOM, and even handling timers. However, while useEffect is a powerful and flexible tool, its misuse can lead to inefficient code and hard-to-debug issues. In this post, we'll explore the best practices for using useEffect in React and highlight some of the common pitfalls that developers often encounter when working with it. Whether you're new to React or a seasoned developer, understanding how to effectively utilize useEffect will improve the performance and maintainability of your applications. In React, the useEffect hook is used to perform side effects in function components. A side effect refers to any action that reaches outside the component to interact with something that React is not directly controlling. This can include tasks like:

      Race Conditions in React: What They Are and How to Avoid Them

      If work with asynchronous code in JavaScript, especially in React, you’ve likely cursed once or twice because of race conditions . In this post, we’ll explore what race conditions are, what causes them in React, and the strategies you can adopt to stop them in their tracks. In programming, a race condition occurs when multiple asynchronous processes (such as network requests or state updates) attempt to access shared data or resources at the same time. If these processes are not properly synchronized, the outcome can be unpredictable, as the final result depends on the order in which the processes complete.

      I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

      This has been a really good investment!

      Advance your career with newline Pro.

      Only $40 per month for unlimited access to over 60+ books, guides and courses!

      Learn More

      Building Accessible Web Applications: A Short Guide to WAI-ARIA Standards

      Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) standards introduce additional attributes that can be incorporated into HTML elements to significantly enhance web application accessibility. This short introductory guide will dive into the fundamental principles of WAI-ARIA, and shed light on how they can be efficiently employed in your web applications. We'll be discussing ARIA roles , states and properties , landmarks , live regions , labels , and complex widgets . The article will also feature code examples and visual illustrations to aid in understanding how WAI-ARIA can be instrumental in improving the accessibility of your web applications. ARIA roles serve as defining markers for the type of element and its function within the application. They prove useful in overriding the default role of an element or in attributing roles to elements that don't inherently have a default role.

      The Crucial Role of Color Contrast in User Experience

      In this article, I will explore the important aspect of web accessibility, with a specific focus on the importance of color contrast in web design. I will share insights on how to integrate accessibility principles in web development projects, emphasizing the implementation of the right color contrast to enhance user experience. Web accessibility refers to the practice of designing websites that are usable by the broadest range of users. This includes individuals with visual, auditory, cognitive, or physical disabilities, and elders who may face challenges accessing websites due to declining vision or hearing abilities. By making websites more accessible, we can help individuals stay connected with their loved ones and remain engaged with the world around them. Before I explore the importance of color contrast in web accessibility, let's take a look at some valuable resources that can enlighten you about the principles of web accessibility:
      Thumbnail Image of Tutorial The Crucial Role of Color Contrast in User Experience

      Accessibility in Web Development and Limitations of Automated Tools

      The importance of accessibility can't be overstated. Automated tools like Lighthouse provide a starting point but capture only about 33% of accessibility errors. This article aims to shed light on the limitations of such automated tools, and the benefits of semantic HTML in accessibility. Automated tools, including Lighthouse, are handy to spot some accessibility issues on websites. But, they only scratch the surface, capturing around 33% of potential errors. This number constitutes between 50% and 75% of actual errors on a website. Addressing these issues is a step in the right direction, but it's important to realize that they don't cover all aspects of web accessibility.