we can _finally_ talk about an experiment @GitHubNext in the works for a long time: GitHub Blocks!
tldr
✨
There's a lot more to your codebase than just.. code. We want to make it easier to create interactive docs, support your team workflows, and bring your repo to life
✨
🧵
you know how we create a complete, separate site for every lib?
I get it! we want so much more than static text & images - we need code examples. We need interactive sandboxes to test out the API! + fuzzy search!
What if creating rich docs was as easy as writing Markdown?
What if we could have live npm stats at the top of our README?
we've created an experimental ui where you can specify which *block* to view a file with. We've created some basic blocks:
a code viewer
a Markdown viewer
a spreadsheet viewer
...
but you can make your own custom blocks - use them privately or share them for others to use!
here's an example dear to my heart:
raw data isn't very useful on its own
Remember all of the COVID datasets on GitHub that needed someone to build a dashboard / chart on top to view?
what if you could render that data with a chart? live?
what if you could render that chart at any point of history? or compare charts of that data across branches?
what if you could view that data in an interactive spreadsheet?
what if you could _edit_ that data right there when viewing your repo?
what if putting together a portfolio of examples was as easy as.. setting a default block for a folder and sharing the code?
what if conveying the _output_ of a CSS file was as easy as viewing it with a Style Guide block?
what if changes to the code were easier to explore? for every commit, for every branch, within a PR?
what if.. live diagrams embedded in your repo & readme?
I could go on... but I won't!
and blocks aren't just for files - you can create them for folders as well 📂
what if we could focus not just on the code, but on the people writing it? and the amazing amount of effort put into maintaining an open-source library?
(did you see I snuck @sveltejs into the GitHub keynotes?)
that's the starting vision for Blocks - I really can't wait to communicate it better soon ❤️
the waitlist lives here - we would love to have people with great ideas to test & build blocks before we open it up to all!
I ended up using a circle packing diagram, with each file visualized as a circle, colored by type and sized by file size.
The implementation was tricky - I ended up doing a recursive force simulation to conform the layout to a rectangle and make room for folder names.
I love how the visualizations feel like a "fingerprint" of each GitHub repository - once you're familiar with the colors and how it works, it's really helpful to explore how different codebases are laid out and tease out common patterns
I spend a lot of time thinking about climate change. I'm definitely not holier-than-thou about it (I personally want to do more) but I do like to offset my carbon footprint with Wren
my favorite part is how individual triangles build up into tiled shapes.
I would recommend watching the vid that inspired me, it's truly a beautiful craft.
I love taking something really labor intensive and hacking it using robots. The end product is never as nice, but gives me the ability to explore new spaces quickly
I want to add...
+ lots of simple but concrete examples
+ custom hooks that I 💖
+ common gotchas (?)
I'm trying to stay away from an intro post, and focus on taking people who understand React hooks *conceptually* to really understanding how hooks can be most helpful in action.
eg. common patterns, moving away from lifecycle events, etc
re-wrote some bits to get the diffs working in Firefox - I need to look into why the mix-blend-mode worked differently in Chrome vs FF 🤔
took the opportunity to add a very *extra* animation on hover 😄
I'm so excited that the book is finally available! I've been trying to stuff everything I know about building data visualizations into one book, while also packing in fun projects and tips.
one of the cool things about this book is that you'll have made a timeline from scratch by the end of the first chapter.
but a cool-er thing is that I encourage you to grab your own dataset! For example, here is my chart and a beta reader's chart from Nigeria! ☀️
then we:
- walk through a scatter plot to learn about data binding and other goodies
- then a histogram
- then we dive into animations and transitions
- then we look at how to make charts interactive
- then we learn how to build maps & globes (and what projections to use)