The latest four notes,
without manual sorting

One list, two views

The homepage of Kotka.dev has a small notebook: choose a title and its preview appears on the cream page. The archive needs every entry, but the homepage only needs the four newest. Maintaining two lists by hand would make it easy to forget one of them.

We keep the metadata and all language versions in assets/js/notes-data.js. Each entry has a stable id, a date, a topic and an explicit status. A full article also has a page. The list is the source of truth; the two pages derive their own views from it.

1. Keep the source intact
   Copy the array before sorting. The archive and tests can still rely on the original order.
2. Sort newest first
   Compare the dates, not the translated titles or the display labels.
3. Take at most four
   The homepage takes a slice. The archive keeps the complete sorted list.

A small, runnable example

Run this self-contained JavaScript in a browser console or Node.js. The sample contains five entries, including two with the same date. It deliberately starts out of order.

function latestFour(notes) {
  return [...notes]
    .sort((a, b) => b.date.localeCompare(a.date))
    .slice(0, 4);
}

const notes = [
  { id: "a", date: "2026-08-01" },
  { id: "b", date: "2026-09-26" },
  { id: "c", date: "2026-01-10" },
  { id: "d", date: "2026-09-26" },
  { id: "e", date: "2026-09-22" }
];

const before = JSON.stringify(notes);
const result = latestFour(notes);
console.log(result.map(note => note.id));
// ["b", "d", "e", "a"]

console.assert(result.length === 4);
console.assert(JSON.stringify(notes) === before);
console.assert(latestFour([]).length === 0);
console.assert(latestFour(notes.slice(0, 2)).length === 2);

sort() changes the array it receives, so [...notes] comes first. This is a shallow copy: the entry objects are shared, but this function only reads them. Equal dates retain their input order. MDN: sort()

slice(0, 4) selects indexes 0 through 3 without removing entries from the source. With fewer than four entries it returns only those available; an empty list stays empty. Sort first, slice second — otherwise a newer entry farther down the list never gets considered. MDN: slice()

Dates are part of the data contract

For new entries we use zero-padded YYYY-MM-DD, such as 2026-09-26. With this consistent format, year, month and day can be compared as strings. A display label such as 26 · 09 · 2026 is just presentation; it must not become the sort key.

Short working notes that sum up a month carry only YYYY-MM, because they describe a month rather than a single day. The current string comparator puts a dated entry before the month-only entry in the same month. That is a display convention, not evidence of which was written first. If exact chronology matters, collect an exact date.

Connect it once, then test the rules

In our implementation, sorted and latest are shared helpers in assets/js/notes.js. The archive renders all; the cream preview and selector buttons use latest. Selecting a note changes its ID, not the collection itself.

const all = window.KotkaNotebookData.sorted(
  window.KOTKA_NOTES || []
);
const latest = window.KotkaNotebookData.latest(all);

• Add a newest entry at the end of the input array: it must still lead the homepage.
• Try zero, two and more than four entries. Check that the source array stays unchanged.
• Give two entries the same date. Their order should match the source, including after a language switch.
• Open the fifth entry through the archive. Falling off the homepage must not delete it or break its link.

The runnable example above is also executed by our regression checks. It is compared with the real selector, so the explanation cannot silently drift away from the website.