1
2
3
4
5
6
7
8
9
10
11
12

# Chidinma Okafor

Frontend developer in Lagos. I build things with vanilla JavaScript and I am
learning React.

**Recent work**
- [Job Tracker](https://chidinma.github.io/job-tracker): flags applications that
  have gone quiet. Vanilla JS, localStorage, Lighthouse accessibility 100.
- [Resource Finder](https://github.com/pod-3/resource-finder): team of five;
  I built the API layer and the search.

Reach me: [email protected]

1
2
3
4
5
6
7
8
9
10
11
12

git init -q tracker && cd tracker
# A small helper: add a line to notes.txt and commit it with that message
commit() { echo "$1" >> notes.txt; git add notes.txt; git commit -qm "$1"; }

commit "Add application form and list"
commit "Save applications to localStorage"
commit "Flag applications with no reply after 14 days"
commit "Fix stale badge on exactly 14 days"
commit "Add keyboard focus to the status filter"

# Oldest first, one commit per line
git log --oneline --reverse

1
2
3
4
5
6
7
8
9
10
11
12
13

The bug that taught me how JavaScript actually schedules work

My search box was showing results for the wrong query. Typing "lagos" gave
results for "lago". I assumed my filter was broken and spent an hour there.

It was not the filter. Every keystroke fired a request, they came back out of
order, and the last one to arrive won, which was often not the last one sent.

Two fixes. Debouncing, so one search runs per pause instead of one per letter.
And ignoring any response that is not for the current query.

What I actually learned: "it works when I test it slowly" is not the same as
"it works". I had only ever typed one letter at a time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Stand-in for the network: settle after ms milliseconds
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// A fake search server: the "lago" request happens to be slow
async function search(query) {
  let delay = 50;
  if (query === 'lago') delay = 300;
  await wait(delay);
  return `results for "${query}"`;
}

// Whatever answer arrives last is shown
let shown = '';
async function onType(query) {
  const results = await search(query);
  shown = results;
  console.log('arrived:', results);
}

// The user types "lago" then "lagos" quickly
onType('lago');
onType('lagos');

setTimeout(() => console.log('on screen:', shown), 400);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function search(query) {
  let delay = 50;
  if (query === 'lago') delay = 300;
  await wait(delay);
  return `results for "${query}"`;
}

let shown = '';
let latestQuery = '';

async function onType(query) {
  latestQuery = query;
  const results = await search(query);

  // Stale: the user has typed something newer since this was sent
  if (query !== latestQuery) {
    console.log('ignored stale answer:', results);
    return;
  }
  shown = results;
  console.log('arrived:', results);
}

onType('lago');
onType('lagos');

setTimeout(() => console.log('on screen:', shown), 400);

1
2
3
4
5
6
7
8

const student = { name: 'Musa', score: 54 };

// Changing a property inside the object is allowed
student.score = 61;
console.log('after changing a property:', student);

// Pointing the name at a different value is not
student = { name: 'Zainab' };

1
2
3
4
5
6
7
8
9
10
11
12
13

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// An async function always hands back a Promise
async function loadName() {
  await wait(50);
  return 'Chidinma';
}

const promise = loadName();
console.log('straight away:', promise);

// Later, once it has settled
setTimeout(() => console.log('100ms later: ', promise), 100);

1

<p id="out"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13

async function load() {
  try {
    const response = await fetch('https://api.webbo3.test/courses/99');
    // No error was thrown: we get here even for a 404
    console.log('resolved, status', response.status, 'ok is', response.ok);
    document.querySelector('#out').textContent = `Resolved with status ${response.status}`;
  } catch (error) {
    console.log('rejected:', error.message);
    document.querySelector('#out').textContent = 'Rejected';
  }
}

load();

1
2
3
4
5
6
7
8
9
10

const scores = [54, 88, 71];

// map: builds and returns a new array
const fromMap = scores.map((score) => score + 5);

// forEach: runs for each item and returns nothing
const fromForEach = scores.forEach((score) => score + 5);

console.log('map returned:    ', fromMap);
console.log('forEach returned:', fromForEach);

1
2
3
4

<ul id="list">
  <li>Ade <button class="remove">Remove</button></li>
</ul>
<button id="add">Add Bola</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const list = document.querySelector('#list');

// One listener on the parent, set up before Bola's row exists
list.addEventListener('click', (event) => {
  const button = event.target.closest('.remove');
  if (!button) return;
  console.log('removing', button.closest('li').firstChild.textContent.trim());
  button.closest('li').remove();
});

// Added later: no listener of its own
document.querySelector('#add').addEventListener('click', () => {
  list.insertAdjacentHTML('beforeend', '<li>Bola <button class="remove">Remove</button></li>');
});