Amelia Wattenberger 🪷
@Wattenberger
Followers
33K
Following
13K
Media
866
Statuses
6K
☁️☀️ please come visit on the other app ☀️☁️ design, LLMs, web dev, data viz, tools for thought ✨ R&D @GitHubNext, previously design @AdeptAILabs
Joined January 2013
😱 I just realized I never shared the svg tool I spent so much time on!. I wanted to create a playground to help learn and discover how to write SVG code, which can be so funky! . Remember when we learned physics in the sandbox? Yeah, like that.
28
80
890
YES clicky undo / redo wheel ready for action. feels so good!
74
389
4K
new vscode extension!. 🦶👣 Footsteps 🐾🦶. I'm always jumping between a few sections of code, and wanted to make that navigation seamless - Footsteps tracks your recently edits and highlights them. Those fade as you edit other lines, like prints in sand.
93
660
4K
I'm always using percents in CSS, but often have to stop and ask: "% of what?". hint: it's probably not what you think. hopefully this guide helps clear things up - there's a fun exercise at the bottom, too:.
45
714
3K
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: and 🧵
78
426
3K
want to make custom visualizations, but also use a modern Javascript framework? Same!. 🌿🌼🌿. I wrote up a guide for combining React & d3. 🌿🌼🌿. you might not love the takeaways, but it's a strategy that I've come to really enjoy!
53
430
3K
I put together a little guide on how to scale SVG elements, and what the viewBox property does. Essentially. 🔭🌟🔭🌟🔭🌟. SVG elements are a telescope into another dimension. 🔭🌟🔭🌟🔭🌟. I hope this is a useful demo!
30
589
2K
next time I'm bashing my head against a bug? 100% using Brushes in Copilot Labs
32
233
2K
working on a little platform to teach SVG!. I want to explore ways to make learning ambient & enjoyable. but also, I want everyone to know the basics of SVGs
42
164
2K
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?.
43
341
2K
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.✨. 🧵
36
209
1K
polishing up a vscode extension I've wanted for a while now for jumping between the code chunks you're working on. it highlights your recent changes, with the highlights fading as you edit more places + keybindings to jump between changes. super excited to try it out myself!
58
125
1K
a total work in progress, but I'm curious what you all think of my React Hooks blog post draft:. is it interesting?.does the page flow well?. I want to add. lots of simple but concrete examples. custom hooks that I 💖. common gotchas (?)
51
268
1K
Ever wondered how to make complex SVG components in React?.I put together a walkthrough of how I would create a simple gauge component. Come along for the journey, and I hope you feel like a wizard by the time we get back!. 🧙♂️. 🧙♂️
27
244
1K
Hast thou been tempted to use !important to make your CSS "work"? Or wondered why your styles weren't working?. Here's a quick write-up of how the CSS Cascade works, so we can all learn it once and for all!. 💦🌿🐟🛶🏞🍃.🍃🏞🛶🐟🌿💦
33
304
1K
🎉 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.❤
46
146
938
Want a birds-eye-view of D3.js?. I finally finished my MONGO "blog post" on the different parts of d3, grouped by similar functionality. I learned a ton of new methods. I hope you find it useful - I bet you'll learn something new even with a quick scan.
21
236
937
I left prototype land to help implement this ✨ adorable ✨ SVG animation to celebrate 100M developers using @github 😍. check it out on your profile page!
18
61
933
😅 is anyone else getting sick of chatbots?. I wrote down a few thoughts on why chatbots are not the future of interfaces and how we can be more thoughtful:.
57
138
876
really liking this change in layout for my "writing flow" tool. it uses GPT-3 to summarize paragraphs as you're writing - giving you an abbreviated version on the right which is easily skimmable & re-orderable
30
67
843
today is my first day at Github!. 🌟😀🌟. you're looking at the newest Staff Engineer doing R&D of developer experience on the @githubOCTO team. 🌟🤙🌟. I'm _so_ excited to explore crazy ideas for making your workflow better - first agenda item: VR pull requests (jk, probably).
45
10
780
wrap it up, folks! I just proved that hot dogs are, unequivocally, sandwiches 🌭. embeddings for different foods from the @OpenAI API, reduced dimensionality with UMAP, plotted here colored by "category". Hot dogs are solidly in the sandwich cluster, along with tacos and burritos
43
73
737
Started a blog post I've been itching to write:. ✨How to combine React + D3.js✨. Let me know if there's anything in particular that you struggle with, whether it's "how do I draw axes?" or "how the heck do I animate elements?!"
23
83
703
Introducing. 🥖👩🍳🥓. 🥗👩🍳🍝. I noticed that I was curating "recipes" for @sveltejs apps, and cooked up a home for them to live. Just a few so far, but I have lot that I want to add.
12
130
691
it's really interesting how an interface shapes the act of creation! here's a quick Sunday noodle on a ui for Stable Diffusion. I'm betting that uis will replace the bulk of prompt crafting - why should everyone learn how the model thinks when we can bake it in?
32
81
647
If you noticed that it’s been quiet over here…. I was making a new human. And it’s actually been quite loud. I’m back to my ui shenanigans, now with help!.
Getting all of my thoughts down and organized is always the hardest part when writing something. At least for me. I'm playing with an interface that you can speak to. It will jot down index cards as you're rambling and organize them into main topics.
57
1
602
wrote up some thoughts on how our interfaces are getting flatter, and how we might design with 💃 our bodies 🤸 in mind
31
59
622
I had the absolute pleasure of digging into the State of JS data and creating this visualization of how opinions & usage of JS tools have changed over the past few years. Still amazed at how quickly @SachaGreif and @benitteraphael put this site together!
19
109
586
is it possible to have too much fun making a blog post? 🤔
21
30
600
I want visitors to be able to learn from existing SVGs, so I built in the ability to import a raw SVG string (huge, fun dropdown to import existing svgs incoming!). I'm also re-building the "selected element" controls so they work even for hugely magnified viewports.
20
45
544
🗃️ I've always wanted my emails to be organized into stacks. Playing with different layouts, based on image dimensions feels almost good, too.
19
12
556
honestly? I love the serpent chart! 🐍. depicting time as a spiral is one of my favorite ways to show change over time _and_ seasonal patterns. I played with reinforcing the value using a color scale as well, which is easier to compare across years
16
52
503
what if. live diagrams embedded in your repo & readme?. I could go on. but I won't!
7
54
526
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:. would love to see anything you make!
19
92
503
📊 maybe little bars can help guide you while "scroll-pan-ing" over the stacks
19
26
505
starting something I've been wanting to do for a loong time. email the way I want email to work!. to come: I have lots of ideas for using LLMs that aren't just write-email-for-me
25
13
460
🎉 some progress on SVG path editing 🎉. SVG paths are the way to go if you want fancy shapes on the web, but their "d" attribute can be really opaque. this ui gets at the core of what I want to make:. a playground that makes learning fun & gives you an implicit understanding
24
42
426
lil bit o' progress on my SVG playground. (I'm hoping to turn it into a teaching platform). ✨ we've got rotation! and drag-n-drop re-ordering! ✨
22
30
400
Getting all of my thoughts down and organized is always the hardest part when writing something. At least for me. I'm playing with an interface that you can speak to. It will jot down index cards as you're rambling and organize them into main topics.
22
40
405
making some progress on my "how to learn d3" blog post. I plan on highlighting some of my favorite d3 modules, and showing some groups of similar functionality. Hopefully this will be a good jumping-off point. 🦘. What are your biggest questions or blockers with learning d3.js?
8
72
386
here's a quick write-up of a way I'm using @OpenAI's embeddings that I haven't seen before. For my writing app, I want to highlight each sentence on any scale:.✨ happy — sad.✨ concrete — abstract.✨ + anything!. but had to get creative to do this cheaply, quickly, & robustly
33
46
387
Infinite canvases! we love them! 🤩. but can we make them even better? Here's a little exploration of how we might make them easier to use by .🍃 adding physical forces, or.🌱 exporting the data into other formats.
23
37
384
finally finished my walkthrough of d3-force, part of the d3 API that helps with everything from making network diagrams to a light physics engine to move particles. use it as a playground to learn the different forces and how to combine them. 🌌☄. ☄🌌
11
57
372
🎊🎊. the D3 & Data Visualization video course is finally open!. 🎉🎉. it was a ton of work, but the video course is finally ready for you! Get access to the wonderful newline platform, with inline, editable code that makes it easy to jump in right away!.
10
57
366
I made a little app to help you find your Tweeple on Mastodon 🦣. ✨.✨. I was hoping to do some fun data vis, but will save that for another day!
14
70
344
🐟 some musings on how we might use LLMs.🐠 to interact with text at multiple levels of abstraction.🐡 inspired by the fish-eye lens
23
38
366
bittersweet update from me:. Yesterday was my last on the amazing @GitHubNext team. It’s been a wonderful, whirlwind ride with the kindest, most talented humans ❤️. Off on a new adventure very soon!.
39
5
360
little personal update:. 🥳 I'm back at my schenanigans at @GitHubNext 🥳. Super happy to get back to imagining and exploring what the future of being a developer might look like - there is so much room to innovate and make development more fun, easier, & more powerful!.
34
3
360
it's been an absolute joy spinning up Copilot for Docs this past month, to explore the question:. "What would it feel like to have an expert on hand?".
12
49
355
🎉 finally wrapped up my React Hooks blog post. 🙌. I revised a bit, finished, and added custom hooks I 💖 + resources for your exploration. Feel free to send feedback, thoughts, opinions my way! Are there any custom hooks that you think should be on here? Send those my way too!
17
102
347
Just realized I never announced that. We have Fullstack D3 and Data Visualization for sale as a hardcover! 🎇🎉✨. Honestly, it's the best looking book on my bookshelf. I hadn't realized how much content was in here!. book info:
13
51
340
is it possible to make email a peaceful place?
13
10
343
on a personal note:. 🥄🎉🥄. Today is my first day at The Pudding!. 🎉🥄🎉. My site is updated, and I could not be more excited to dig in!.If you somehow haven't heard of their work, check out some of the amazing @puddingviz articles
33
11
328
I'm always looking for fun datasets, and the Data is Plural archive is 🌟amazing🌟, but it can be hard to browse. I put together an easier way to dig around and find fun datasets - including search and topics!. but what I REALLY want to share with you.
9
55
316
starting to lay out an interactive bit of my infinite canvas write-up, centered around. 🍏What if the data embedded in canvases can be exported into different forms?. 🍏How does it feel to transition between [ canvas | spreadsheet | text | slideshow | . ] while preserving data?
20
33
322
come join my✨ Data Visualization workshop ✨ with @smashingmag, starting this Thursday!. You'll leave with a really solid foundation to build the amazing, custom, interactive visualizations you see in places like the @nytimes, using d3 + SVG + @sveltejs.
9
44
308
🙎♀️: console. vscode: uh huh. 🙎♀️: console.l.vscode: yep, keep going. 🙆♀️: console.log(.vscode: console.loop_guard! nailed it!
12
7
302
I got to spend the day learning!. 🎁 watching @bruno_simon's 🔥 threejs course to formalize concepts I've always hacked together. 🎁 finally playing with @Rich_Harris's svelte-cubed (amazing, as expected! declarative threejs code in Svelte). alt: a snowman + gifts in a snowglobe
7
11
303
tfw you're designing a landing page and you have no chill
16
2
311
I want this SVG learning tool/sandbox to make it easy to learn how path commands work - dragging points won't act similar to in a typical design tool!. to make it also useful as an editing tool, I added a way to convert the commands to absolute ones, which are a bit more familiar
14
23
302
d3-force is one of my favorite d3 modules to use, but it can be tough to wrap your head around. Hopefully I can help with this d3-force article I'm working on (Star Wars themed, of course). ❓ if you've played with d3-force, what are the biggest gotchas you've run into?
8
30
295
I've always wanted an email client that ✨ keeps my scroll position ✨. seems so simple but it'll be a game changer for me for reading newsletters
5
9
300
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?
6
14
296
What might our concept map look like at different zoom levels?. really, this is just an excuse to get those index cards back in here 😍
17
24
287
✨ how might we combine our familiar, deterministic interfaces with the new, fluid capabilities of LLMs?. Some musings that have been rattling around my brain for a while. Taking inspiration from how nature transitions between hard & soft materials.
16
35
293
Messing around with Three.js for generative art ❤. Loving @mattdesl 's canvas-sketch for setting up an environment where the tedious parts are automated & you get to dig in right away!
3
20
262
✨ what if events were pulled from emails and displayed in your calendar?. (my actual events are obfuscated). it's so helpful to have shipping estimates, open houses, and fun events I might have missed in my calendar. also, gotta love built-in @sveltejs transitions 😍
10
8
274
My new book isn't coming out until Wednesday (in 3 days! 😮), but I'm so excited about the amazing cover that I've been showing everyone I see!
10
27
247
✨.so excited to be part of this launch.✨. psst there's a fun Easter egg on if you look hard enough 🥚🤫.
18
13
245
😺 made some good progress this weekend!. - a default grid pattern to teach intuitively how SVG patterns work.- a "hint" bar for key shortcuts.- a new "selection" ui.- duplicate, rotate, resize around center!.- a 🔥 color picker from - shape previews.
5
24
239
this has now crossed the all-important "I love using this myself" threshold!. ✨ summaries,.✨key information,.✨ possible action items, along with.✨ a key image. mean I can triage almost all of the emails in my inbox in under a minute 😍
12
10
256
🌈 Playing with interaction effects for the Complex Charts chapter of my book. I don't think we use legend interactions enough!
6
47
229
🖌️📚 putting together a SVG reference for q's like:. - what shapes can I make?.- what attributes to they need?.- how do I implement border-radius?. ❓What questions do you always run into when drawing with SVG?. I always forget how to write polygon `points`.
2
51
231
I love the instant feedback loop in my WIP tool for learning how gradients work, and exploring their different attributes 🦉👀
8
27
246
✨ what if we could organize our emails on a canvas?. actually going to do this for my Todos category to help it be less overwhelming!
20
17
242
obsessed with the amount of thought put into this one diagram on @ReutersGraphics - always finding the balance between crowding and providing info 😍.
4
30
229
new books! honestly they're both a tiny bit intimidating but I come armed with coffee ☕
6
6
236
🥰 just noticed @JoshWComeau's shoutout in the State of CSS results - totally made my day! Josh is such a star and we're so lucky to have him in the web dev community!
4
8
228
🙋♀️me: I really need to finish up this article. 💁♀️also me:. right, but what if each example was visible behind a realistic-looking window. and those windows live ✨ behind the content ✨. and the descriptions for those windows show up in sticky notes.
12
11
233
I woke up this morning to my first bad review 🎉. I'm almost proud, but think 2/5 stars is a pretty harsh for their issues (detailed below). If you enjoyed Fullstack D3, I would be really thankful if you left a quick review, even without text! ♥.
41
16
221
🙌 we've got a waitlist up and running!. I'll let you sign up early if you can guess the url 🙆♀️
29
7
231
🙋♀️some personal news!. Today is my last day at The Pudding. SO grateful to have spent the last year with the kindest, most talented team - I've loved working on tons of exciting & invigorating projects!. Looking forward to a month off (!) before I start my next adventure 🏔️🌄🐙🙆♀️.
14
1
220
started a blog post on something that has tripped me up many times in the past:. ♒the CSS Cascade♒.or, How the browser chooses which style wins. I'm only half sold on the hand-drawn elements here, but my goal is to run through the different "levels" and "tiers" of the waterfall
6
20
222
*while working on another project*. ↪ why don't I finish up my React Gauge walkthrough instead?. ↪ why don't I treat our walkthrough as a journey?. ↪ why don't I create a generative SVG landscape to represent that journey?. 🤔 why don't I ever get anything done?
8
16
219
I'm so excited to share what's up next for me. I'll be designing a digital AI teammate with the super talented people at @AdeptAILabs!. I'm just a week in and couldn't be more excited about the both wildly creative and technically rigorous team. Definitely watch this space 🤩✨.
24
2
224
Can merging concepts be as easy as dragging them together?. ✨ this one was tricky! It feels too abrupt to merge cards right away, so I used a @sveltejs tweened to add an animation and wait almost a second before to make sure the user really wants the cards merged
10
11
222
I re-built my sentence length mini-site. It shows the length of sentences for classic works - it's super interesting how authors have different "rhythms". I also added a section to paste in your own text! I'll be using this to compare my rhythm to Poe's.
6
30
204
🥓🥞 new Svelte recipe 🥞🥓. Here's the Svelte code I use to start a world map - each country has a bubble whose size & color can be hooked up to a data variable. but I mostly wanted to share my fav way to handle maps on mobile: with two stacked spheres!.
8
22
212
curious about the React repo, I plotted the file structure in a radial tree 🌳. Larger circles are larger files, and file types are visualized as different colors - look at all those yellow javascript files. Poke around yourself at.
7
35
214
we can do this in the browser!.
A Figma tutorial on how I design shiny, glowing shapes. Step by step guide. Open it up: 🧵
6
14
218
some more work on my "Creating a Gauge in React" writeup. 🔭 I might've gotten carried away with my "viewBox is a telescope into the SVG world" metaphor. WIP up at as always, feedback is much appreciated!
4
24
215
we can do this in the browser, too!. playground for anyone curious how it works:.
Why am I only now finding out about this neat trick in Illustrator
5
14
208
some of you might find use from this:. I built a collection of 🌶️ recipes 🥬 for common components & functions I use for projects:. 🌶️.🥬. I like using recipes, instead of modules, where you can tweak as much as you want, but aren't starting from scratch!
3
13
196
✨ what if we could auto-generate workspaces for handling emails?
14
10
197
come join my✨ Data Visualization workshop 📷 with @smashingmag, starting next Thursday!. You'll leave with a really solid foundation to build the amazing, custom, interactive visualizations you see in places like the @nytimes with d3 + SVG + @sveltejs 😍.
3
34
198
I was excited to be super productive during this plane ride but here we are 😅. fixed the code highlights so they only scroll on click, and. mimicked the Aurora Borealis in the header.
6
25
199
I'm proposing an update to Maslow's Hierarchy of Needs after my trip to Stockholm
19
11
196
✨ new project ✨. it was super fun to dig around and make some visualizations of data on the current API ecosystem. The real win here was working with @tailwindcss (easy light/dark mode + responsive styles) and @framer motion (easy spring physics)!.
9
21
193