YES clicky undo / redo wheel ready for action
feels so good!
00:00
Amelia Wattenberger 🪷
6,316 posts
Amelia Wattenberger 🪷
@Wattenberger
design, AI, web dev, data viz, tools for thought
✨ @shv, previously R&D @GitHubNext, design @AdeptAILabs
- 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. marketplace.visualstudio.com/items?itemName…
GIF - 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: wattenberger.com/blog/css-perce…
GIF - 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 🧵
- want to make custom visualizations, but also use a modern Javascript framework? Same! 🌿🌼🌿 I wrote up a guide for combining React & d3 wattenberger.com/blog/react-and… 🌿🌼🌿 you might not love the takeaways, but it's a strategy that I've come to really enjoy!
GIF - 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 🔭🌟🔭🌟🔭🌟 wattenberger.com/guide/scaling-… I hope this is a useful demo!
GIF - next time I'm bashing my head against a bug? 100% using Brushes in Copilot Labs
00:00
there goes 2 hours of my life - 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
GIF - 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-…
00:00 - 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 ✨ 🧵
- 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!
GIF - 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 (?)
GIF - 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! 🧙♂️ wattenberger.com/blog/gauge 🧙♂️
GIF - 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! 💦🌿🐟🛶🏞🍃 wattenberger.com/blog/css-casca… 🍃🏞🛶🐟🌿💦
GIF
