we added a toolbox full of "brushes" to VSCode - I'll talk about a few specific ones.
Sometimes, you run across some code and have to stop to scratch your head. What if you could make code "more readable" with a click?
often, the types I'm using are pretty straightforward - what if those could be auto-generated?
here's a fun one! sometimes I end up banging my head against a bug, to realize that it's as simple as a typo. Could we have a brush that detects those?
I'm often changing code between "debugging" and "clean" states, like peppering log statements everywhere.
Seems like something a computer could do for us, right?
for those "what the heck is going on here?!" moments, we've added a brush that splits the code into steps and explains each chunk.
often, I'll remember that there's _something_ I need to do to make code more robust, but it's hard to remember exactly what. Really looking forward to using this "make more robust" brush
and the last one I'll share is.. anything! We have no idea what all of the use cases are, so we left it up to you to make custom brushes on the fly. For example, "make this form more accessible"
It's important to me that we focus on ✨ empowering ✨ developers instead of automating them, and this is one exploration that came out of that focus. We would love to hear what brushes you find useful!
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?
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)