My Interview Experience — (Senior) Front-end Developer

Overview

This document details a senior front-end developer interview experience, focusing on the questions asked and the lessons learned. The interview emphasized JavaScript fundamentals, accessible web development practices, and semantic HTML/CSS. The candidate shares insights into areas of strength and areas needing improvement.

Interview Rounds

The interview covered the following topics:

• Accessibility: The candidate was asked to explain the use cases for aria-label, aria-labelledby, and aria-live attributes.

  • aria-label: Used to provide an accessible name for interactive elements that lack visible text labels.

    <button aria-label="Search"><img src="search-icon.svg" alt=""></button>
    

  • aria-labelledby: Used to associate an element with another element containing label text.

    <div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
        <h2 id="dialog1_label">Add Delivery Address</h2>
    </div>
    

• Semantic HTML: The interviewer inquired about the difference between the <header> tag and <h1> to <h6> tags.

• Semantic Class Naming: The candidate was asked about semantic class naming in HTML and CSS. Semantic class names should describe the element's purpose rather than its appearance. For example, login-action is preferred over red-button.

  <input type="submit" class="login-action" value="Check In">
  

  Instead of:

  <input type="submit" class="red-button" value="Check In">
  

  A more complete example:

  <form class="customer-login">
  	<button>Check In</button>
  </form>
  

• Array Flattening: The candidate was tasked with flattening a nested array without using the array.flat() method. The interviewer was evaluating the candidate's understanding of recursion, iteration, and data structures.

  The candidate initially proposed a solution using reduce() and concat():