Exercise Options
- Export something you made in VizHub
- Put it in a GitHub repository
- Adopt a build tool (Webpack, Rollup)
- Try a newer tool (Parcel, Snowpack)
thanks for the excellent episode… got to get used to build tools…
Is there a class going on? where can I sign up?
An experiment of mine using rollup.js with a project coming from VizHub
Hey @curran, for me it is not interesting to do it locally. At least yet. I usually do my stuffs with python/django, so… long excuse short: I haven’t made exactly the exercise you asked (export it locally). But I indeed learned a lot. And here is a code that I studied and fixed to run in vizhub:
When will be the next class??
1 Like
Very nice!
The next class will be this Saturday. See you then!
Why not both? You can always use Django, Flask or any other Python-based Web framework as a headless backend to expose APIs consumed by your bundled D3 Vizzes 
PS: Just 3 things about your Gantt: cool, cool, cool!!!
1 Like
Another experiment, this time with Vite (the name comes from the French word for “fast”, pronounced /vit/ [“veet”] ):
With a very minimal configuration you can:
- start a dev server (with browser livereload included)
- bundle your project dealing with HTML/CSS/JS, cache busting, minification, etc…
- serve your bundle for a preview
1 Like
Hey Floating Purr (@floatingpurr aka Andrea) , thank you!! The merit for the gantt actually is not mine (and I can’t say it belongs to the place I’ve ‘snuck’ from (it is in the readme file, first line).) I just read the code and ‘transpose’ using what I’ve learned so far to make it work here. Add few small features on the way. But hey, thank you!!
And how cool is yous? WOW!! 
1 Like
Hey Felipe @maion, I do believe that even “just” tweaking code isn’t a trivial task if someone is not aware of the logics behind the scenes. So, great job!
The mine is just a little variation on the exercise of Episode 5.
Bye!
1 Like
Hi Curran!
Thanks so much for these episodes!! Saturdays are busy for me most of the time, but I still think the live format is lots of fun!
I have no problems running my vizzes out of my editors with some extensions like Live Server for VS code, etc. What are the advantages to using build tools instead?
Git here for reference:
Side bar, I was so close to making this animation work, but I got stuck. Any ideas? I’m so excited to be making things move I can’t even sit still.
1 Like
@Andre Amazing! The main advantage of using build tools is that you can author your code as ES6 modules. That repo has the build tools set up to generate bundle.js from ES6 modules.
I think I’ll use vanilla HTML in today’s session, to illustrate the option of not using any build tools.
Looks like you got the animation to work. Congrats! Very fun.
1 Like
I seeeeee thank you!!!
1 Like
Nice exercise. So I did set the Vizhub project https://vizhub.com/yiorgosbagakis/3697d057d58a40dc8b48b0e388bf46e2?edit=files
locally with Roller and then deployed it on a Github repository: https://github.com/yiorgosbagakis/worm-animation
here it is live on github pages: https://yiorgosbagakis.github.io/worm-animation/
Then I did a setup with Vite: https://github.com/yiorgosbagakis/vite-worm-animation
I used the Vanilla preset of Vite but I had to remove much of the initial files like the logos and the unused css. I kept their convention and renamed the index.js into main.js and imported the css file into it as well. Kept the vite favicon 
Amazing! Thank you for sharing.
Vite is an amazing tool and I’ve been using it for my proprietary work. I love the hot reloading feature most of all.
I’m thinking about modifying the VizHub export to use Vite out of the box, so it would be a great and familiar experience after you “eject” out of VizHub. The VizHub build system and Vite are very similar.