Is this gonna be equivalent of ESLint + Prettier but in one performant package?

Can you explain a bit more about “zooming, different levels of detail” you mention? Maybe break them down to separate issue you are having with the library, what does it do, what do you want that it’s not doing. If there is a way to tweak it then you don’t have to build the component from scratch.

But if you already abandoned the idea of tweaking timeline-js then you can have full control in vue, have to build it yourself though. Start by breaking the functionality of the timeline into separate interaction. From a quick look, timeline-js just make style attribute reactive. Have a box? good. Now put really long div in it with placeholder texture. Can you drag/scroll it? no? grab a suitable function from vueuse and make it scrollable. Follow with markers, zoom, dummy event items, data fetching (the actual width, marker spacing, events placement can be calculated from timestamp in json after this step), lazy loading, styling, animation, so on.

I don’t know how much experience do you have with each things required (html, css, js, vue) so it is a bit difficult to give useful answer.

Events?? TimelineJS3/blob/master/API.md
Not sure what else is available if you want to build the component yourself though.

but note that because TimelineJS’s primary use case is the embedded iframe, some of these methods have not been thoroughly tested.

I think you can replicate most of its function with vue alone, skip all the tedious work with vueuse. Lazy-load with Intersection Observer. Basic events and refs for zoom level.

I would start with putting all entries into a usable format. A CMS will help a lot. Maybe a JSON from your django server containing batch of entries, its timestamp, length, importance, tags, etc. Anything that is required to place entry on the timeline properly in vue.

EDIT:
Have you tried the official tutorial?

For quick overview of frameworks… there is Brad Traversy and Jeff Delaney (Fireship)

Shop around and pick a few to try out then dive down when you finally find a framework you like ¯\_(ツ)_/¯

I mean… if your room have a lot of stuff then it might take a while to find the source, if you aren’t being pranked. But random screws on your desk will never be as horrifying as random maggots on your desk.

Bun is designed as a drop-in replacement for Node.js. It natively implements hundreds of Node.js and Web APIs, including fs, path, Buffer and more.

The goal of Bun is to run most of the world’s server-side JavaScript and provide tools to improve performance, reduce complexity, and multiply developer productivity.

If it can replace node and pnpm at the same time then this sounds quite good actually.

EDIT
https://bun.sh/guides/ecosystem/vite

While Vite currently works with Bun, it has not been heavily optimized, nor has Vite been adapted to use Bun’s bundler, module resolver, or transpiler.

https://bun.sh/guides/ecosystem/nuxt

Bun supports Nuxt out of the box. Initialize a Nuxt app with official nuxi CLI.

I see. I might have done things in similar way without realizing what it is by just focusing on decoupling and reusability.

BEM is are methodology about atomic code design, it gives you a standards and guides how to simplify code maintaining.

Isn’t this also what Tailwind, UNOCSS and the likes about?
Sounds like he have a problem where working in project using BEM, different team use it in different way (which I think as what to expect). And when components are involved, is CSS convention really the focus here?

edit: ok, I think I finally got your point…
How does BEM differ from OOCSS, AMCSS, SMACSS, SUITCSS?
Well… this thing feels like frontend framework with extra step.

Generally you don’t need anything for child element, except in rare case, which you have seen before a fix…
Columns usually try to balance every columns to have same height, and last column have least items.

EDIT: In your case, \ having a margin-top, which got clipped when new column starts. I don’t know if there is a fix for this but I would use padding instead.

CSS is chaotic, dude.

ul {
  /* reset */
  margin: 0;
  padding: 16px;

  columns: 2;
  /* box-sizing: border-box; */
}
  @media screen and (min-width: 640px) {
    ul {
      columns: 3;
    }
  }
  @media screen and (min-width: 960px) {
    ul {
      columns: 4;
    }
  }

  ul li {
    list-style-type: none;
    padding: 2px 16px 2px 4px;
    font-size: 120%;

    display: flex;
    break-inside: avoid;
  }
  ul li a {
    /* display: inline-block; */
    background-color: #35516c;
    color: #d2dade;
    text-decoration: none;
    padding: 2px 8px;
    border: solid 1px #d2dade;

    flex-grow: 0;
  }
    ul li a:first-child {
      flex-grow: 1;
      /* width: 106px; */
      /* margin-right: -3px; */
    }
    ul li a:hover {
      background-color: #1e445d;
      color: #fff;
      border: solid 1px #fff;
    }

This is kinda sad. I was hoping someone will give you working solution eventually but nope.

I saw both of your posts. People really overthink this. It’s not flex, it’s not grid… you need columns.
Straight up columns, not flex column not grid column.

columns - CSS: Cascading Style Sheets | MDN

Sure you can do it with flex or grid, but you need to do some unnecessary trickery on it.
Flex and grid won’t wrap column unless you specified it to somehow, parent element will just grow to accommodate any amount of child elements and keep them in one column.