Introducing StoryLite, a lightweight alternative to #StoryBook built with #React and #Vitejs

https://blog.itsjavi.com/introducing-storylite-a-lightweight-alternative-to-storybook

Do you still actively minify .css and .js files? Or is that all done by magic, with bundlers like Vite.js or Webpack or delivery services like Cloudflare, and not something you need to think about?

To ask it another way, do you have .min.css files in your codebase?

#css #javascript #vitejs #webpack #Cloudflare

While working on a #javascript module idea, I fell down a rathole of improving my development workflow to build modules. What's it do?

1. The workflow uses #Vitejs for a demo page to make working on the module easier, with the goodies Vite brings, i.e. working with #typescript, HMR, and speed.

2. The workflow publishes that demo page with #GitHubActions as your demo site in your repo to GitHub Pages.

3. GitHub Actions also use Vite to build both a Common JS and ES module version of your module and then publish to NPM when you change the version number.

I’ve posted my repo below. There are some docs, but I hope to continue to improve them.

https://github.com/johnfmorton/vite-module-builder-w-ghpages-npm-template

Running `vite build ` is including *.test.tsx files, which is throwing big errors because of mocks. Tests shouldn't be included in the build. How do I exclude them?

#javascript #react #vitejs #frontend #webdevelopment

I always neglect to set up relative imports with modern JS tooling. It used to be hard, but apparently it's far easier now. At least with ViteJS it is. Here is how to configure an alias of '@' to allow relative imports from anywhere in your codebase #vitejs #javascript

If you use `vite-plugin-favicon` you should update to version 1.1.5 for dramatically improved code-start times for the Vite devserver #vitejs https://github.com/khalwat/vite-plugin-favicon/releases/tag/1.1.5

32s before / 5s after in our test env

📢 Vitest is the neatest! 🎉 Using the @vitest UI you can see a visual representation of the module & test dependency graph!

We just love what Vitest does for testing w/ @vite so fast & interactive! #vitest #vitejs #javascript #typescript #tdd https://vitest.dev

📢 Vitest is the neatest! 🎉 Using the @vitest UI you can see a visual representation of the module & test dependency graph!

We just love what Vitest does for testing w/ @vite so fast & interactive! #vitest #vitejs #javascript #typescript #tdd https://vitest.dev

📢 Vitest is the neatest! 🎉 Using the @vitest UI you can see a visual representation of the module & test dependency graph!

We just love what Vitest does for testing w/ @vite so fast & interactive! #vitest #vitejs #javascript #typescript #tdd https://vitest.dev

For anyone who is interested in a self-contained simple demo of test driven development (TDD) of code & components with Vitest: #vuejs #vitejs #vitest #tdd #typescript https://github.com/nystudio107/charcuterie-vue-vitest

So, is "vite"- the javascript bundler - pronounced "Vite" - like "white" with a V, or "Veet" - like in the French "Allez, vite!"

#vite #vitejs #javascript

Nothing is more satisfying than ending the day with all unit tests passing.

#programming #typescript #vitejs #vitest

Holy cow! Just discovered something really cool about #ViteJS: If you have one Vite server running in "npm run dev", thus taking its default port 5173, and you start up another one... it auto-detects that and steps up to port 5174 automagically! Instead of just giving you a "cannot bind to port" error like CRA or other similar tools. That's super-sweet. Kudos to the https://vitejs.dev/ developers! #WebDevelopment

If you missed the live stream, you can watch our unscheduled Small Is Beautiful episode for the Svelte Nano Donation component release.

We covered:

- using it with SvelteKit
- using it in plain html/css (via Vite)
- accessibility considerations, etc.

https://small-tech.org/events/small-is-beautiful/

#nano #svelte #sveltekit #vitejs #SmallTech #a11y