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!


blocks.githubnext.com

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Amelia Wattenberger 🪷

Amelia Wattenberger 🪷 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Wattenberger

Aug 5, 2021
We just released an exploration I've been wanting to do for a while:

✨✨
Can we visualize a codebase?
✨✨

We always look at our code in a file/folder list - what would a bird's-eye-view look like, and how could that enhance our understanding of code?

octo.github.com/projects/repo-…
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. the create-react-app repository visualized with every file a
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 a visualization of the denoland/deno  repoa visualization of the rtfeldman/elm-spa-example repoa visualization of the FortAwesome/Font-Awesome repoa visualization of the git/git repo
Read 7 tweets
Jul 4, 2021
I'm starting a "things I like a lot" thread. Because there are things that.. I like a lot. And I want to share them with you!
@project_wren

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

wren.co/join/ameliawat…
(affiliate link that protects +10 acres of rainforest)
they have a Carbon footprint calculator, which is a great educational tool to see what lifestyle changes will have the greatest effect.

Plus, you get to pick a project to fund, and get updates about how the project is going. Image
Read 5 tweets
Mar 4, 2021
I saw a super inspiring video about kumiko, a Japanese woodcraft creating panels out of repeated shapes.

I created a generator that turns any image into a pattern - you choose the shapes. It's v fun to play with:

kumiko-generator.netlify.app

would love to see anything you make!
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
Read 5 tweets
Sep 18, 2019
a total work in progress, but I'm curious what you all think of my React Hooks blog post draft:

wattenberger.com/blog/react-hoo…

is it interesting?
does the page flow well?

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 😄

thanks all for flagging that inconsistency!
Read 4 tweets
May 15, 2019
🎉 and we're LIVE! ☀️

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.

I'd be stoked if you checked it out at
fullstack.io/fullstack-d3
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)
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(