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

I also have a similar side project planned for a revamp. Successfully made a v1 with grease monkey (vanilla JS) + stylish back in maybe 2016. Super dangerous to keep firefox 56 running only for this front-end. Just need to do the v2 then migrate to latest librewolf.

I want to redo the whole thing in Vue, client side routing with build step. The problem is that

• site is not open source
• no API doc (but I already made my own)
• required log-in (no sensitive info)
• some route request must be made from that domain due to CORS

My goal is not to change the UI but wipe the whole page and start over with custom API call instead. V1 do this by visiting a 404 route to stop unnecessary load and use my own URL param for the API call. For bonus cringe I used local storage for database.

Ended up having to use userscript, and now I’m kinda stuck with how to mash Vite build and tamper/violent monkey together :(
Do you have any suggestion or resource I can learn more on this?

If you use QMK you’re in luck.

https://github.com/daniel5151/qmk_firmware/blob/discipline/keyboards/coseyfannitutti/discipline/keymaps/prilik/keymap.c#L145
https://github.com/ridingqwerty/qmk_firmware/blob/cfd632e021f2460c50dd9e283426cc6e28c9a475/users/ridingqwerty/process_records.c#L297

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?

Flac is a low bar for any music player though. I don’t know whether itunes support it yet, don’t care.

I’m sure Rhythmbox works well for you and that is great. But I also need some niche features which might not be in it.

Mostly conversion and forensic thing.
ape tak tta format, bit compare, audio checksum, mass-tag/batch-tag, replaygain, custom playlist columns, statistic driven field. Don’t know what else until I try and find it’s missing.

I’m also sure I can get all those and more in different cli tool if I want but getting them in one software is very convenient.

After a quick look, DeaDBeeF might have most of what I want.

• Sort and group the tracks in any order you wish, using advanced Title Formatting scripting, compatible with Foobar2000

Got the date wrong, last time I tried it was 2018. Lot of new features added since then.

What if I use foobar and will not settle for anything less?
I have not fully moved to linux yet. Last time I tried it through wine back in 2020 it ran like shit. Deadbeef did not have feature parity either. Wonder how good is it now.

There is a trend line of the amount of shit you need to do to get linux to do things you want.
There is a trend line of the amount of shit you need to do to stop windows from doing things you don’t want.

Those two lines have crossed quite a while ago.

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 ¯\_(ツ)_/¯

Bun no good => ☹️
Don’t have to learn another shiny JS thing => 😀

No. Maybe it flagged dynamic IP as spam or whatever. At this point I don’t really care. Got what I want.

I want to have separated accounts for different sets of project…
Signed up a second account… it got suspended instantly (after I log in with my main). According to ToS, I can’t have more than one account.

Nuh uh, You aren’t the only provider. Headed to Gitlab, no more bs.

How many times

This many times
War Thunder §Classified documents leaks

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 try not to mess with my my current windows desktop setup too much if I don’t have to (mission critical). It’s not on VM.
Would love to do it with LUKS/EXT4 if possible but it’s not supported on windows (am I correct?)

If I use VC then I have to install it on both win and linux and also any additional machine I intend to decrypt with, that’s quite unwieldy compare to LUKS. I also have lobotomized my current install to cripple spying and broke it to the point it can not update to support wsl.

Seems like bitlocker is a proper solution for the moment. Or just do two partitions (maybe two drives), encrypt one with LUKS, wipe everything unencrypted when done using it.

I’m still a bit confused with veracrypt… The docs make it sounds like vc use its own format.
Can the drive be prepared with LUKS and then decrypt in windows with veracrypt? If not, I might just use bitlocker until I drop windows.

That, I didn’t think of. Still… I will eventually have to do it the linux way, might as well learn and familiarize with it now.

Forgot to mention that it will be quite a while before I can drop windows completely but for sure I’m not upgrading or doing another windows install.

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?

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, <li> 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;
    }