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

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

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

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

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

How the hell does one generate a #sprite of PNGs from CSS with #webpack these days?

None of the libs I find seem to work and were last updated 5+ years ago…

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

Does anyone know how to disable #Middleman's internal #SCSS/#SASS handling so that #Webpack does it exclusively?

https://forum.middlemanapp.com/t/middleman-still-seems-to-handle-scss-sass-despite-that-webpack-should-be-used/4716

I just released 1.0.3 of Python Webpack Boilerplate

No matter if you are using Django or Flask, this package can bring modern frontend techs to your project, within minutes.

1. Remove `Bootstrap` from the default setup. Now user can pick TailwindCSS, Bootstrap or other solutions as they like
2. Add doc to help switch from Babel to SWC (Speedy Web Compiler), it is really fast
3. Update frontend dependency to the latest version

https://github.com/AccordBox/python-webpack-boilerplate

This may look like it’s just a screenshot of the Mattrbld onboarding screen, but it’s in fact the first time Mattrbld is running completely on #vite instead of #webpack.

There’s still quite a lot to do—but the #FOSS release is getting closer!

I think I stumbled into an issue where a compiler is hallucinating and breaking the types of the source it’s trying to simplify. Has anyone had any experience with this, especially with Webpack? #WebDev #webpack #javascript

<rant>
Yesterday I got really sad about the state of IT and how very rarely we go back and actually fix things and instead we just keep piling more sort-of fixes onto each other.

I was trying to help my partner to add an (background)image to her website.

She managed to find a manual for #tailwind to create a custom class and after a few fixes we got it working, sort of. #Webpack was being, as usual, less than helpful and spew few incomprehensible errors about loader type missing. I know this, I get how to fix this, but the config botch to make it work is ... less than optimal.

Then I noticed that the original design actually used image tag directly to show a placeholder svg. Cool, let's use that. #EmberJS has a cool library ember-responsive-image that will do 90% of the job. Well, in the version the project is using, the image needs to be imported through (already configured) dark magic of webpack imports. Cool, let's do that. Oh no this part of the app is lacking controllers, let's define those. Now I have to explain why this whole whoop of new files and references exists. To show an effing image on an effing webpage.

So we just went old school of defining HTML IMG tag and referencing the non responsive, non optimised image directly from assets. Flip this, Apple landing page literally downloads 100MB to show a scrollbar invoked animation. How bad is it for a private website to show an non optimised image?
</rant>

Now the practical part: More than 20 years ago when I started playing with #HTML and Apache I was researching if it's possible to stream images. So that it's not the developer at the build time to decide the dimensions and quality being displayed, but the webpage at show time saying: "I will need to fill in 2000x1000 pixels for this one image, please keep em coming".

And no, images scaled on the server over query params are not what I'm looking for. That's just a botch that brings more problems than solutions.

I'm talking about an image format where first kB when brutally chopped off would be render-able as a very low res representation of said image. Then next 10kB would give slightly sharper image, then the next 100kB...

And the browser would just keep streaming next part until it would decide it has enough to fill in given space perfectly.
This is the solution to the problem that should've been built in the first place. We could have avoided all the `picture` and `srcset` and build time optimisation and N-times cache invalidation dance. I'm looking for a solution that removes responsibility from the user instead of giving them more work.

Now please tell me that I'm just old and this technology already exists.

If you think react is complicated now, go back to 2015 when you had to configure babel and webpack yourself, you had to do SSR and routing yourself, you had to decide between flow and typescript, you had to learn flux and immutable.js, and you had to choose 1 of 100 boilerplates