You want to build a tiny website with just HTML, CSS, and JavaScript. You don't want to import a ton of libraries or use a framework that performs ...
For further actions, you may consider blocking this person and/or reporting abuse
My main complaint about Parcel is the "regenerate runtime" error that pops up in the browser. Parcel doesn't use a configuration file, but this really means that configuration is scattered around in
babelrcandbrowserslist.But you did realize the solution? Either really install and import
regenerator-runtime; or set browserslist higher.Yes, I changed browserslist - but it's mentioned nowhere in Parcel documentation.
It's a known bug (in GitHub issues), and very common too; but Parcel team seems to be too busy to fix it.
Would be interesting if you could elaborate what's the absolute minimum required CSS for a "working" website, such as CSS resets, typography, color scheme, responsive/grid, viewport settings etc.
I see so many people advocating "don't use a CSS framework, roll your own" but I'd like to see the required minimum CSS for a real world website demoed and explained somewhere.
Rolling your own "css framework" would be feasible if the product is fairly small or you have the required human resources to produce a maintainable, easy to use and well-documented stylesheet.
There is absololutely no harm in using a css framework and I personally don't think its even a remotely good idea to "roll your own" unless the aforementioned conditions have been met.
Maintaining css can be pretty annoying after all.
I agree with Mydrax that there is no reason not to use a good CSS framework nowadays.
For just minimal CSS for an MVP I'd use this bare minimum stylesheet:
github.com/andybrewer/mvp
Nice post! I've used Parcel since 2019 when a friend introduced me, and it's my favorite bundler. This is an awesome tutorial, however I would add two things. 1) Technically, JavaScript does provide a way to import and export code (in recent ES6), it's just not well supported. 2) Vercel is also a great place to host and even build Parcel sites in the cloud. Love your writing style as well! Have a great day 👋
Great addition! Funny enough after I wrote this I took a look at the new ES6 way of importing and exporting code as well as deployed an app with Vercel!
Thanks!
Why on earth would you use a bundler for a project of this size? Better still, just use native import features to pull in dependencies from a CDN like SkyPack (e.g.
import moment from 'https://cdn.skypack.dev/moment'). If everyone loaded dependencies like this, the web could become much faster as many, many libs would be cached in browsersWow thats great. Some days back, I also made this small starter kit for static websites using Parcel. You can read about it here - dev.to/insanenaman/starter-kit-for...
That's great! I really like how your post was put together 👍
Glad you liked it.
Thanks a lot I was struggling with understand what and why a bundler is used in a project ..your post helped clear out some confusions. The project that i'm working on uses Webpack...do you think parcel works good for projects of medium to large codebase?
Pacharapol is spot on.
Parcel is faster and has some configuration (that I have not looked into deeply) but I have not tried it for my larger projects.
Webpack is not going away and is still great to use for any project of medium to large size. Mainly I would stick with anything that is working and try Parcel when you have a chance to experiment without breaking anything.
Parcel is supposedly faster than Webpack, but may sacrifice configurations.
And esbuild is even faster, but much less features.
momentis now "legacy" because it lacks tree shaking. Don't use it.Yep in the new example code I went ahead and used Day.js. Great newer alternative.
I've used parcel in a few side projects and I love the fact it takes little to nothing to get started!
Ahh... Looks pretty nice though. My favorite Static-Site-Generator by using Markdown is 11ty. I would give it a try. Thanks.
Yes! Love Parcel. You can also use
import/exportkeywords within your JavaScript source; Parcel will take care of these and transpile it down into something the browser can work with.Yea! So easy to use and love using the import syntax
What about es6 static and dynamic import?
This is true. I'd say I'm a bit behind on some of the newest features so I should make a post just about importing and exporting in ES6.
Pls is it only the dust file that gets deployed on the web server?