What if I was your interviewer at Freshworks

Interviews are tough. Both for an interviewee and an interviewer. I’ve been on both the sides of the table and I realized that most frontend interviews are generic and not tailor-made for frontend web developers.

As an interviewer, we would want to test the candidate’s skills in Javascript, CSS and HTML. But what do we end up asking?

“Find the longest common subsequence…”

Although questions like these would help in evaluating the problem-solving skills of the candidate, I strongly believe they don’t help us understand how good the candidate is, as a UI developer.

After countless interviews, I came up with a simple question that could be incrementally built upon to assess the candidate effectively.

Difficulty: Intermediate

Duration: 60-90 mins

PHASE I

UI Prototyping: Craft the layout for a simple slider with left and right arrows and navigation indicators at the bottom.

Mock UI

Skills assessed:

HTML & CSS

Good to hear:

1. Semantic HTML markup.

2. Clean CSS styling which could be made responsive.

Red flags:

Cannot even render a partial layout.

PHASE II

Events & Interactions: Implement the slider navigation.

Step 1: Left and right arrow navigation on mouse click.

Step 2: Navigation using dot indicators.

Skill assessed:

Javascript

Good to hear:

1. IIFE, Module pattern

2. Event delegation

PHASE III: [Optional]

UX Improvements: Animated transitions, automatic sliding after specified time etc..

Keyboard centric accessibility

If time permits and if I'm hiring for a Senior/Lead role, I'd have a conversation on how he/she might implement advanced features, to try and understand their thought process and evaluate their expertise.

So there you go. Implementing a simple slider would touch upon the core JS concepts such as closures, JS patterns, event handling, as well as some basic HTML/CSS prototyping skills, thereby making this one of the most effective questions while interviewing a UI developer.

SAMPLE SOLUTION

<div class="slider-container">
  <div class="slide active">
    Slide 1
  </div>
  <div class="slide">
    Slide 2
  </div>
  <div class="slide">
    Slide 3
  </div>
  <div class="slide">
    Slide 4
  </div>
  <span class="left">Prev</span>
  <span class="right">Next</span>
  <div class="indicators"><!-- Render indicators based on count via JS --></div>
</div>

let slider = (function () {
  let el = document.querySelector(".slider-container");
  let slides = el.querySelectorAll(".slide");
  let left = el.querySelector(".left");
  let right = el.querySelector(".right");

  let itemCount = slides.length;
  let currentItem = 0;
  let currentItemDiv = slides[currentItem];

  function navigate(direction, target = null) {
    currentItem =
      direction && !target
        ? (currentItem + itemCount + direction) % itemCount
        : target;
    currentItemDiv.classList.remove("active");
    currentItemDiv = slides[currentItem];
    currentItemDiv.classList.add("active");
  }

  function renderIndicators() {
    let container = document.querySelector(".indicators");

    for (let i = 0; i < itemCount; i++) {
      let indicatorSpan = document.createElement("span");
      indicatorSpan.classList.add("indicator");
      indicatorSpan.id = i;

      container.appendChild(indicatorSpan);
      container.addEventListener("click", (ev) => {
        if (ev.target.tagName !== "SPAN") {
          return;
        }
        let slideNumber = +ev.target.id;
        navigate(null, slideNumber);
      });
    }
  }

  left.addEventListener("click", function (event) {
    navigate(-1);
  });

  right.addEventListener("click", function (event) {
    navigate(1);
  });

  return {
    init: function () {
      renderIndicators();
    },
  };
})();

slider.init();

.slider-container {
  position: relative;
  background: #eee;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;

  .slide {
    width: 100px;
    height: 100px;
    font-size: large;
    display: none;
    margin: auto;
    text-align: center;
    &.active {
      display: block;
    }
  }

  .left,
  .right {
    position: absolute;
    top: 50%;
    cursor: pointer;
  }

  .left {
    left: 10px;
  }

  .right {
    right: 10px;
  }

  .indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    .indicator {
      width: 16px;
      height: 16px;
      background: black;
      border-radius: 50%;
      margin: 5px;
      display: inline-block;
      cursor: pointer;
    }
  }
}

Before I conclude, I still believe that problem-solving skills are essential for a potential candidate. But that alone shouldn’t be the crux of an interview process for someone applying for the position of a Frontend web developer. Good luck!