Is Vite Faster Than Turbopack?, by @gill_kyle@x.com:

https://www.kylegill.com/essays/vite-vs-turbopack/

Even though I'm a backend developer I've got to keep abreast of some frontend stuff so that I can lend my general developer brain to designing or advising or fixing things wherever it happens, and it looks like I've now got to get up to speed on #Preact and #TailWind and #WebPack for the next phase of work. That'll keep me busy for a bit.

Way back in September of 2022, @bart finished off the Webpack miniseries by leaving it as an exercise for the student to deploy their web apps to GitHub Pages. Bart closes that circle in this installment while teaching us how to use GitHub Actions.

https://pbs.bartificer.net/pbs176

Meme Roulette Chrome Extension

Crafting a Chrome Extension: TypeScript, Webpack, and Best Practices Cendekia ・ Feb 13 #typescript #chrome #extensions #webpack source

https://devnews.tech/meme-roulette-chrome-extension/?utm_source=mastodon&utm_medium=jetpack_social

I just realised: I've been intentionally postponing getting into the guts of #webpack for so long, that it got "deprecated" and I no longer have to \o/

Webpack vs Vite: Which Bundler is Right for You?

https://www.syncfusion.com/blogs/post/webpack-vs-vite-bundler-comparison?utm_source=alvinashcraft&utm_medium=email&utm_campaign=alvinashcraft_blog_edmdec24
#webdev #vite #javascript #webpack #webdevelopment

Microfronends as a #decentralized alternative to #npm.

While i can smush everything into a #monoRepo, i wanted to explore the idea of using #Microfrontends as a kind-of self managed alternative to #npm.

Microfronends have been around for a while and i've come across many different approaches. I want to share how im using microfrontends in my project.

Im using #Webpack 5 #moduleFederation to create the #microfrontend. there are some interesting features that i dont think are being mentioned elsewhere:

- Dynamic Remotes: Modules can be loaded from various endpoints. We can use a custom function to ping different URLs and determine the fastest one for loading the required module.

- #Selfhosters can manage modules independently, enhancing control over updates and #security on #opensource projects.

- Development Experience: By using dynamic-remotes and running modules locally during development, it can speed up testing and iteration.

- Scalability: The approach allows for #CDN scaling with module deployments on multiple cloud providers. currently, my redundencies are on AWS S3 + github-pages... but i can see how this can be scaled to more cloud providers.

Im aiming for the architecture to look like the following. Let me know your thoughts on my approach and if its something you would consider for your project.

https://positive-intentions.com/blog/decentralised-architecture

https://positive-intentions.com/blog/statics-as-a-chat-app-infrastructure

I wrote a quick article on how to make a live-reload plugin for webpack. It was fun to make this for the very specific scenario I needed it for (where I couldn't use dev server or hot reloading), so I figured I would share how it works.

https://mariusgundersen.net/live-reload/

How to solve "Module parse failed: Bad character escape sequence" https://jsdev.space/howto/bad-character-escape-nextjs/ #javascript #nextjs #webpack

You can send query params to a #javascript module at import time

import "./mymodule.js?hello=world"

and then read them from import.meta.url

const hello = new URL(import.meta.url).searchParams.get('hello');

It does get a little hairy if you’re using a bundler like #webpack, #vite or #parcel

https://esimmler.com/passing-url-params-to-js-modules

#Rspack 1.0 is now production-ready!

A new #JavaScript bundler designed to be fully compatible with #Webpack, supporting 40+ of the top 50 Webpack plugins.

Details on #InfoQ https://bit.ly/3Y5jp5F

How to Create a Custom Webpack Plugin https://jsdev.space/howto/custom-webpack-plugin/ #javascript #nodejs #webpack

Taking upon the challenge of making this #NodeJs project more user friendly that non-tech users can also use the tool.

Gotten to the point that one can run the code locally and receive the POIs. The image shows a preliminary mask of how the website might look like.

The trickiness of the task is that the tool uses the fs package which doesn’t directly have a similar package for the web. One can compress a lot of the code with #webpack while using plugins like #pollyfill and #babel. These resolve all the issues other than I/O of files.

It seems like a possible solution to deal with the fs issue is to use the various database and storage solutions of a browser.

@marquisdegeek

Top 5 Webpack settings in Symfony. #WebPack #symfony

https://medium.com/symfony-mastery/top-5-webpack-settings-in-symfony-afc438539e9f?utm_source=flipboard&utm_medium=activitypub

Posted into SYMFONY FOR THE DEVIL @symfony-for-the-devil-mobileatom

In case you want to try @rspack_dev, do not forget to use `lazyCompilation: isDev,` it brings a lot of speed thanks to @rustlang

#webpack #nodejs getting faster by the help of #rust

https://rspack.dev/config/experiments

Sviluppo di un’interfaccia web con TypeScript, React e Webpack - Lorenzo Savini
hhttps://www.youtube.com/watch?v=J55oIFzXxTA&list=PLPGJdxeQ35eAHgEfkfChN_8gN5CJCF9tw&index=15

Introduciamo #TypeScript, vediamo come si integra in un’applicazione #React e come si generano gli asset finali della nostra interfaccia utilizzando #Webpack.

https://dev.to/wojtekmaj/migrating-your-react-app-from-webpack-to-vite-inp - moving a #React app from #Webpack (or create-react-app) to #Vite. Nice walk-through https://linkedin.com/in/wojtekmaj.

Please don't judge the site itself in terms of design, etc. cos I'm very much a backend engineer and I am still learning and rely on others' designs just so I could get my ideas out there - BUT I've managed to write my first ever site using #Eleventy

It's also my first time working with #NodeJS, #Javascript (not really, but first time meaningfully), #Typescript, and #Sass CSS. I've always wanted a fun way of maintaining a portfolio/resume instead of writing them up using #MicrosoftWord and whatnot, so that's what I've set myself to make with #11ty and I'm pretty happy with the results.

This project supports both JS and TS in modern browsers as well as legacy browsers using #Webpack. As mentioned it also uses Sass which is mindblowing to me how awesome it is, I've always hated how messy and non programmatic CSS is and this thing just solves those issues singlehandedly. In a local development environment, this project also supports all sorts of linting from HTML, CSS, JS, and TS so my perfectionist brain can sleep soundly at night knowing I've not unknowingly used a single quote instead of a double quote.

My project, Portfolio essentially is aimed to produce two personalised views - a Portfolio/Homepage view and a Resume view based on user-supplied data files. The Resume view has a downloadable PDF version automatically generated for it using #Puppeteer - so no proprietary, paid APIs are required for the HTML-PDF conversion. Also, as a #Kubernetes engineer first and foremost - I've #Docker -ised it (based on #Alpine and uses #Apache as the web server) and created a #Helm chart you could use to easily deploy it to your Kubernetes cluster locally or to the internet (with Ingress).

I've made the entire stack public on #GitLab just in case someone would find it useful to refer to for their own (future) projects.

https://gitlab.com/irfanhakim/portfolio

https://gitlab.com/irfanhakim/pepatung

https://gitlab.com/irfanhakim/portfolio-chart

Demo: https://portfolio.moekai.com

I've started an in-depth series on building a production-ready Chrome extension. This is the 2nd installment.
#ChromeExtension #TypeScript #webpack #DevTools #SoftwareDevelopment

https://buff.ly/3ywNcex