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():

  let numbers = [1, [2, 3], 4];
  let flatArr = numbers.reduce((acc, num) => acc.concat(num), []);
  console.log(flatArr); // Output: [1, 2, 3, 4]
  

  However, this solution only flattens one level deep and fails for deeper nested arrays like:

  let numbers = [1, [2, 3], 4, [5, [6, 7], 8]];
  

• React Component: The candidate provided an example of a React Star Rating Component.

  import React, { useState } from 'react';
  
  function Star({ selected, onClick }) {
    return (
      <span
        onClick={onClick}
        style={{ cursor: 'pointer', color: selected ? 'gold' : 'gray' }}
      >
        ★
      </span>
    );
  }
  
  function StarRating() {
    const [rating, setRating] = useState(0);
    const [hover, setHover] = useState(0);
  
    const handleClick = index => {
      setRating(index + 1);
    };
  
    const handleMouseEnter = index => {
      setHover(index + 1);
    };
  
    const handleMouseLeave = () => {
      setHover(0);
    };
  
    return (
      <div>
        {[...Array(5)].map((_, index) => {
          return (
            <Star
              key={index}
              selected={hover ? hover > index : rating > index}
              onClick={() => handleClick(index)}
              onMouseEnter={() => handleMouseEnter(index)}
              onMouseLeave={handleMouseLeave}
            />
          );
        })}
        <p>{rating}</p>
      </div>
    );
  }
  
  export default StarRating;
  

Key Takeaways

• A strong foundation in JavaScript fundamentals is crucial for front-end development roles.
• The ability to clearly explain technical concepts is as important as writing functional code.
• Interview preparation should include reviewing core concepts and practicing verbal communication.
• Understanding the limitations of common JavaScript methods is essential for writing robust code.
• Persistence and continuous learning are vital for growth in the field of software development.