interview-is-web.md

🎤 kQuery assignment

This is the assignment for the Open Source Software Developer - JavaScript (Front end) role at Algolia.

Goal

What's better than jQuery? 👉 kQuery 👈

The goal of this assignment is to build a simplified jQuery-like capable library, called 🎤 kQuery.

Instead of asking you to design an API, we thought we would ask you to implement one. Designing an API takes time, experience, and we usually do it as a team.

Since this is not a real-life project, here is the context before you start:

Next week, we publish kQuery on GitHub and npm. Let's make sure it's ready for prime time both for end-users and contributors.

Expected time to complete: between 2 and 4 hours depending on experience.

Important: Algolia will never reuse your work. This assignment is for evaluation purposes only.

---

Table of contents

• Usage
• API
• Requirements
• Submit the assignment
• Bonuses
• Evaluation criteria
• Questions

Usage

import kQuery from 'kquery';

kQuery('.item')
  .replaceWith(kQuery('.itemReplacement'))
  .style({
    color: '#000',
  });

This gets all the DOM elements matching the CSS selector .item, replaces them with all the elements matching .itemReplacement, and then changes the CSS color property of the DOM element.

API

The API to implement is very similar to the jQuery API.

kQuery(cssSelectorString)

Select matching elements on the page.

• Reads a CSS selector string
• Returns a kQuery collection (kCollection or collection in this assignment)

Example

index.html

<div class="item">Hello</div>
<div class="item">World!</div>

index.js

const kCollection = kQuery('.item');

Result

kCollection now contains the elements matching the CSS selector .item.

kCollection.replaceWith(kCollection)

• Replaces the current collection with another one
• Returns the new collection

Example

index.html

<div class="item">Some</div>
<div class="item">Item</div>

<span class="itemReplacement">Hello</span>
<span class="itemReplacement">World!</span>

index.js

kQuery('.item').replaceWith(kQuery('.itemReplacement'));

DOM result

<span class="itemReplacement">Hello</span>
<span class="itemReplacement">World!</span>

kCollection.style(Object)

• Updates the style of the current collection
• Returns the current collection

Example

index.html

<div class="item">Hello World!</div>

index.js

kQuery('.item').style({ color: 'red' });

Result

Hello World! is now displayed in red color.

kCollection.remove()

• Removes the current collection from the DOM
• Returns an empty collection to allow the chain of commands to continue

Example

index.html

<div class="item">Some</div>
<div class="item">Item</div>
<div>Hello World!</div>

index.js

kQuery('.item').remove();

DOM result

<div>Hello World!</div>

kCollection.find(cssSelectorString)

• Searches the current collection for matching elements and replaces the current collection
• Returns the new collection

Example

index.html

<div class="item">Hello <span>World!</span></div>
<div class="item">World! <span>Hello</span></div>

index.js

const kCollection = kQuery('.item').find('span');

Result

kCollection contains two spawn elements.

kCollection.get()

• Returns an Array of all DOM elements in the kCollection

After this call, the kQuery chain ends since you get a regular Array and not a kCollection.

Example

index.html

<div class="item">Hello</div>
<div class="item">World!</div>

index.js

const domElements = kQuery('.item').get();

Result:

domElements contains an array of DOM elements with two elements.

Requirements

Your assignment must respect the following rules:

• Do not use any existing npm module for the implementation. You can still use any npm module for testing, tooling, and building.
• Provide a README giving information on how to run tests.
• Write unit tests with the tool of your choice.
• The built library must work in all modern browsers and Internet Explorer ≥ 11.

Submit the assignment

• Fork this private repository (it won't appear on your public GitHub profile, only visible by you)
• Move README.md to assignment.md
• Implement the module
• Add your own README.md
• When you are finished, send an email to the recruiter with the URL of your forked repository

Please do not open a pull request. Otherwise, other candidates will see your code and this won't be fair for you.

Please do not publish this assignment in a public repository. We want to protect the assignment original instructions, to keep getting awesome candidates while protecting your own privacy when applying for jobs.

Bonuses

• You can add any feature, API method and options as long as you respect the requirements.
• You can publish the module on npm as a scoped package.
• You can create live examples.

Evaluation criteria

While reviewing your assignment, we will look at:

• The API implementation (if the API is different, we expect explanations for the changes and the additions in the README)
• The architecture and its complexity
• The build system efficiency and its complexity
• The tests
• The attention to details and handling of edge cases
• The developer and contributor experience
• Any implementation or explanation about features you would have liked to implement
• The instructions and explanations you might want to add in the README

Questions

If something is unclear or you have questions about the module behavior (options, error handling, edge cases, etc.), you can either:

• Email us your questions (send an email to the recruiter and the team see it), or
• Change the behavior based on your own developer preferences.

We do not rank candidates based on the questions they ask!

🍀 Good luck!