Javascript Tools

Collections

Framework

  • Svelte 5: Runes

    reactivity and two way data binding creating a spaghetti mess of changes affecting other changes all over the place unless you're really careful is why React was made in the first place

    Svelte uses signals as an implementation detail, but in a way that prevents the sorts of headaches you're describing.

    • MrJohz's opinion among front-end frameworks

      Svelte is cool, but it has the key flaw that the more Svelte you write, the more compiled code appears - generally, Svelte compiles to a size somewhat larger than the original source file.

      For Svelte as an "island" tool (i.e. for building islands of interactivity in otherwise static pages, like, say, graphs for the New York Times), that's not a problem, because the extra generated code is made up for by the lack of a bulky runtime dependency. But if you scale that up to complicated SPAs - which has been Vue's main stomping ground - you can end up shipping larger files with Svelte than with other small frameworks.

      That said, SFCs in Vue are an ideal source for compile-time compilation, and my understanding is that they're heading more down the route of SolidJS. SolidJS has a similar goal of using a compile step for optimisation, but it leans on its signals library implementation much more heavily, which means the compiled code tends to be much smaller, but you also need to include a runtime. (In practice, there's not much size difference between Svelte and SolidJS at all, but it shows itself at the more extreme ends of very small components and very large apps.)

      Vue already has a runtime that's very similar in some ways to Solid's (read: it's all signals, baby), so adopting the rendering ideas from there is an obvious next step. That should drastically speed up rendering, as well as reducing bundle sizes significantly. They've already demoed this a bit, but I think it's not fully released yet - they gave a name for the new system, but I've forgotten what it's called.

Unpoly is the best thing I've discovered in the frontend world in the last 5 years. It's a breath of fresh air when compared to all the crazyness going on. I use it to replace almost all "api" calls to the backend and for the "turbolinks like" navigation, modals, etc. Then I use Alpinejs for the really interactive/complex parts.

I'm not doing a React/SPA ever again if I have any chance to decide on that.
https://news.ycombinator.com/item?id=33141055

  • TAURI: Build smaller, faster, and more secure desktop applications with a web frontend using WebView
  • neo.mjs - Web Worker enhanced frontend framework.
  • The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers.
  • Comparing Astro and Next for React apps
    • Next.js is best used for highly dynamic and image-heavy websites like dashboards because of its built-in image optimization. In contrast,
    • Astro is best used for static websites like a portfolio or a personal blog.
  • Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Micro front-end

  • single-spa - The router for easy microfrontends
  • Piral - Framework for next generation web apps using micro frontends. πŸš€

CSS

A11y

Prettier

  • Proposals for nested ternary formatting #9561

Test

  • vConsole - A lightweight, extendable front-end developer tool for mobile web page.

Lint

The Vanilla JavaScript Toolkit

A collection of native JavaScript methods, helper functions, libraries, boilerplates, and learning resources.

Monitoring

Security

  • DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

Debugging

Formats

Graphic

  • gpu-io - A GPU-accelerated computing library for physics simulations and other mathematical calculations

Children
  1. A Realworld Comparison of Front End Frameworks 2020
  2. Comparisons between Alpine AJAX and other similar libraries
  3. File Data
  4. Front-end frameworks popularity
  5. Most Used JavaScript Libraries__june 2022
  6. On Starting A Side-Project: Hotwire vs. Angular
  7. Tauri VS Electron - Real world application
  8. Visual tools
  9. Webpack