Skip to content

Instantly share code, notes, and snippets.

@datchley
Last active August 4, 2022 15:41
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save datchley/115a0fec6766a7592d7a66d48e915d3c to your computer and use it in GitHub Desktop.
Technical Screen - Front-end Developer
/**************\
* Algorithms *
\**************/
// Given an array of objects summarizing the number of fish in an aquarium,
// find the percent of fish where the species is unknown (the `species` is
// `undefined`). Return the percentage as a whole number between `0` and `100`.
// Example input:
const fish = [
{ species: 'Swordtail', count: 2 },
{ species: 'Pearl Gourami', count: 1 },
{ species: 'Rummynose Tetra', count: 12 },
{ species: 'Neon Tetra', count: 30 },
{ species: 'Guppy', count: 8 },
{ species: 'Kribensis', count: 1 },
{ species: 'Angelfish', count: 1 },
{ species: undefined, count: 5 },
];
// Example output:
// 8;
// Solution:
const percentUnknown = fish => 'SOLUTION HERE';
/*****************\
* Algorithms II *
\*****************/
// There exists a function that, given an array of categories and an array of
// entries, creates an array of objects with a category name and an entry count.
// Example input (categories):
const categories = [
{ name: 'Cats', id: 10 },
{ name: 'Dogs', id: 20 },
// ...
];
// Example input (entries):
const entries = [
{ categoryId: 10, name: 'Fluffy' },
{ categoryId: 10, name: 'Mittens' },
// ...
];
// Example output:
// [{ name: 'Cats', count: 42 }, { name: 'Dogs', count: 55 }, /* ... */];
// The following example implementation has a performance problem noticeable
// when you have hundreds of categories and tens of thousands of entries.
const categoriesByEntryCount = (categories, entries) =>
categories.map(category => ({
name: category.name,
count: entries.filter(entry => entry.categoryId === category.id).length,
}));
// What is the time complexity (in Big O notation or similarly described) of `categoriesByEntryCount`?
const timeComplexity = 'ANSWER HERE';
// What is the optimum time complexity to do this task with a better algorithm?
const optimumTimeComplexity = 'ANSWER HERE';
// Please re-implement the algorithm to optimize its time complexity.
const countCategoriesOptimized = (categories, entries) => 'SOLUTION HERE';
/***********************\
* Regular Expressions *
\***********************/
// Given an array of 1,000 strings that may or may not contain phone numbers,
// return the index of each string that appears to contain a U.S. phone number.
// U.S. phone numbers are guaranteed to be formatted either as `(877) 843-2900`
// or `877-843-2900`.
// Example input:
const strings = [
'Call today! Reach us at 314-867-5309 any day of the week.',
'Over 3,148,675,309 people trust ACME for all their road runner needs!',
'(877) 843-2900',
// ...
];
// Example output:
// [0, 2, /* ... */];
// Solution:
const phoneNumberIndices = strings => 'SOLUTION HERE';
/*******\
* DOM *
\*******/
// Given an HTML element in the DOM, return the nearest visible
// background color beneath the element's text.
// Example input:
document.getElementById('example');
/* Example HTML:
<div>
<div style="background: rgba(200, 100, 50, 0.95);">
<div style="background: transparent;">
<div style="background: none;">
<div style="background: rgba(0, 0, 0, 0);">
<div>
<div id="example">Text</div>
</div>
</div>
</div>
</div>
</div>
</div>
*/
// Example output:
// 'rgba(200, 100, 50, 0.95)';
// Solution:
const visibleBackgroundColor = element => 'SOLUTION HERE';
/*********************\
* JavaScript Trends *
\*********************/
// Please refactor this promise-based function that uses
// a chain of `then`s into `async`/`await`. Assume the `store` object
// passed in has an asynchronous method named `.findAll(<tablename>)` that returns all rows for
// a particular 'table' over XHR; and an asynchronous method named `.query(<tablename>, <criteria>)` that will
// return all rows matching a set of criteria described by an object for a given table over XHR.
const model = store =>
store
.findAll('categories')
.then(
categories =>
store.query('entries', {
categoryId: categories.find(c => c.isCurrent).id,
}),
err => {
if (err.statusCode === '401') {
return store.findAll('entries');
}
throw err;
}
)
.then(
entries =>
entries.length
? Promise.all([
entries,
store.findAll('users'),
store.findAll('votes'),
])
: [entries, [], []]
)
.then(([entries, users, votes]) => ({ entries, users, votes }));
/*************\
* Debugging *
\*************/
// Please visit this URL:
// https://s.codepen.io/datchley/debug/GYeYbd
// Using the development tools in your favorite browser, please do the
// following tasks. Please also provide a screenshot of how you used the
// development tools for each of the tasks.
// What function is locking the thread for so long?
const nameOfFunctionLockingThread = 'ANSWER HERE';
// Please set a breakpoint on line 1706.
// What is the value of the variable `washingtonAve` at that breakpoint?
const washingtonAve = 'ANSWER HERE';
// Please set a breakpoint on line 2061.
// What is the value of the variable `theLoop` when the variable `cwe` has a
// value of `'central west end'`?
const theLoop = 'ANSWER HERE';
// What is the value of the `X-Best-Restaurant` header on the `POST` to `/opinions`?
const xBestRestaurant = 'ANSWER HERE';
/*******\
* CSS *
\*******/
// Please define the following to the best of your knowledge. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// The CSS Box Model
const cssBoxModel = `
ANSWER HERE
`;
// CSS Grid
const cssGrid = `
ANSWER HERE
`;
// Flexbox
const flexbox = `
ANSWER HERE
`;
// CSS Specificity
const cssSpecificity = `
ANSWER HERE
`;
// Media Queries
const mediaQueries = `
ANSWER HERE
`;
// Transitions, Keyframes (and the difference between the two)
const transitionsAndKeyframes = `
ANSWER HERE
`;
// Please answer the following questions to the best of your knowledge. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// What is a clearfix and when do you need one?
const clearfix = `
ANSWER HERE
`;
// What thought process do you use to decide whether to use floats, flexbox,
// or grid to lay out a page?
const floatsFlexboxOrGrid = `
ANSWER HERE
`;
// Go to the following url, https://codepen.io/datchley/pen/NOJERV?editors=0110
// Follow the instructions and recreate the layout and elements in the example
// image. You can fork this codepen (click on the 'Fork' button at the top) to
// create your answer and post a link to your answer below
const recreationUrl = "LINK TO YOUR ANSWER HERE";
/*******************************\
* Object-Oriented Programming *
\*******************************/
// Please define the following to the best of your ability. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// This should all be based on the latest version of Javascript/EcmaScript.
// Class, Prototype and Object (and the difference between them)
const classPrototypeAndObject = `
ANSWER HERE
`;
// Instantiation: what are the ways we can create object instances
const instantiation = `
ANSWER HERE
`;
// Class Methods, Static Methods (and the difference between the two)
const classAndStaticMethods = `
ANSWER HERE
`;
// Constructors
const constructors = `
ANSWER HERE
`;
// Superclass
const superclass = `
ANSWER HERE
`;
// Inheritance
const inheritance = `
ANSWER HERE
`;
/**************************\
* Functional Programming *
\**************************/
// Please define the following to the best of your ability. If you aren't
// familiar with a topic, just answer "I don't know" and move to the next one.
// This should all be based on the latest version of Javascript/EcmaScript.
// Pure function, Impure function (and the difference between the two)
const pureAndImpureFunction = `
ANSWER HERE
`;
// Callback function
const callbackFunction = `
ANSWER HERE
`;
// Immutability
const immutability = `
ANSWER HERE
`;
// Function Expressions, Function Declarations (and the difference between the two)
const functionExpressionsAndDeclarations = `
ANSWER HERE
`;
// Immediately-Invoked Function Expressions (IIFEs) and when/why to use them
const iife = `
ANSWER HERE
`;
/***************\
* Code Review *
\***************/
// When reviewing the following code, what changes might you suggest?
// Please leave JavaScript comments in this file with the suggestions you'd
// make to the developer who wrote this code. The code below shows multiple
// files using Javascript modules (import/export).
// File: utils/stats.js //
export const voteStats = (votes, existingStats) => {
if (!Array.isArray(votes)) {
throw new Error('You must pass an array of votes to voteStats');
}
const ret = [];
for (const v of votes) {
const hash = {};
hash.count = v.count;
hash.userId = v.user.id;
ret.push(hash);
}
for (const stat of existingStats) {
ret.push(stat);
}
return ret;
};
// File: utils/stats-test.js //
import { voteStats } from './stats';
describe('voteStats', () => {
it('should calculate new stats after being fed existing stats and stats about votes', () => {
expect(
voteStats(
[
{ count: 22, user: { id: 121 } },
{ count: 61, user: { id: 122 } },
{ count: 93, user: { id: 123 } },
],
[
{ count: 11, userId: 118 },
{ count: 42, userId: 119 },
{ count: 78, userId: 120 },
]
)
).toEqual([
{ count: 11, userId: 118 },
{ count: 42, userId: 119 },
{ count: 78, userId: 120 },
{ count: 22, userId: 121 },
{ count: 61, userId: 122 },
{ count: 78, userId: 123 },
]);
});
});
// File: user-actions.js //
import { voteStats } from './utils/stats';
export default class {
constructor(votes = [], stats = []) {
this.stats = voteStats(votes, stats);
}
render() {
return `<ul>
${this.stats.map(
stat => `<li>User ID ${stat.userId} took ${stat.count} actions</li>`
)}
</ul>`;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment