Amelia Wattenberger 🪷 Profile picture
Jan 12, 2023 10 tweets 4 min read Read on X
so excited to share with you all: a new @GitHubNext addition to Copilot Labs...

✨ Code Brushes ✨

We wondered how we could make editing your code feel as tactile and easy as paint with a brush in Photoshop?

writeup: githubnext.com/projects/code-…

and 🧵 Image
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!

the actual write-up:
githubnext.com/projects/code-…
one similar theme to "empowering" vs "automating" that sticks in my head is the concept of a "tool" vs a "machine" (brought up by @geoffreylitt)

• • •

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

Nov 10, 2022
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?
Read 13 tweets
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!

:(