KO

Learnings

Small lessons captured before they become long-form writing

2026

  4. // First: measure the starting position before changing the layout
const first = el.getBoundingClientRect();

// Last: apply the CSS class that establishes the final position
el.classList.add("세상-끝의-라멘");
const last = el.getBoundingClientRect(); // Measuring immediately after the change may trigger synchronous layout

// Invert: calculate the offset from the final position back to the start
const invert = first.top - last.top;

// Play: make it appear at the starting position with the first keyframe, then remove the offset
// The layout is already final; only transform changes during playback
const player = el.animate(
  [
    { transform: `translateY(${invert}px)` },
    { transform: "translateY(0)" },
  ],
  {
    duration: 300,
    easing: "cubic-bezier(0,0,0.32,1)",
  },
);
    aerotwist.comFLIP Your AnimationsAnimations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP. (opens in a new window)MDN Web DocsWeb Animations API - Web APIs | MDNThe Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e., animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model. (opens in a new window)
    • Principles of the flex design system
    1. Guarantee flexibility
    2. Components are independent of their form
      1. Separate Select from its Trigger so that Select can be combined with other components
    3. Everything is clickable
      1. Separate form and functionality using Headless Components
    jihoonwrks.meflex Design SystemInterface designer based in seoul, south korea (opens in a new window)
    • fxm takes a different direction from fx
    1. Predefined combinations
      1. Provide building blocks that can be used immediately without deliberation, rather than prioritizing autonomy
    2. Token system
      1. Discourage arbitrary customization and encourage using tokens defined in the system as much as possible
    jihoonwrks.meflex Mobile Desgin SystemInterface designer based in seoul, south korea (opens in a new window)
    • DDL: Data Definition Language, SQL for creating, changing, or deleting database structures.
      • CREATE: Creates database objects such as tables and indexes.
      • ALTER: Changes the structure of a database object, such as adding a column to an existing table.
      • DROP: Deletes a database object itself, such as a table. Dropping a table also deletes the data it contains.
      • TRUNCATE: Removes all rows while keeping the table structure. You cannot use WHERE to select specific rows to remove.
    • DML: Data Manipulation Language, SQL for adding, updating, or deleting data in a database.
      • INSERT: Adds new rows to a table.
      • UPDATE: Modifies values in existing rows. You can specify which rows to update with WHERE; omitting it targets all rows.
      • DELETE: Deletes rows from a table. You can specify which rows to delete with WHERE; omitting it targets all rows. The table structure is preserved.
    • DQL: Data Query Language, SQL for querying data. However, SELECT is sometimes included in DML.
      • SELECT: Queries data. It can select the columns you need, filter rows by conditions, join multiple tables, or aggregate data.
    • SQL (Structured Query Language) is a language for working with database structures and data, and DDL, DML, DQL, and other categories classify SQL commands by purpose.