Staff Research Engineer at @GitHubNext. But actually a designer. Writes about design, dev, & anthropology. Also on Bluesky 🦋 @maggieappleton.com
London, England
- Tweets 5,015
- Following 1,371
- Followers 40,817
- Likes 8,746
New creation in the works. Should be fully baked by March.
Most impressive thing I’ve ever done without having any clue what I’m doing.
163
12
2,435
93,921
Nerding hard on digital gardens, personal wikis, and experimental knowledge systems with @_jonesian today.
We have an epic collection going, check these out...
1. @tomcritchlow's Wikifolders: tomcritchlow.com/wiki/
53
296
1,927
A spectrum of digital gardening.
I like to think of it as the happy middle between chaos streams and full-scale cultivated performance.
31
212
1,400
A small but beautiful project by @raunofreiberg: uiplaybook.dev/
Pattern library of common UI components. With a detailed breakdown of expected functionality, best practices, accessibility concerns, and implementation tips for each.
Great example of 💯 design docs
17
151
1,278
183,431
We launched the first real version of Just JavaScript! 👉 justjavascript.com
An interactive course written by @dan_abramov on mental models for JavaScript. I made all the visual explanations & animations.
We’ve been working on the beta for ages. Feels good to have it live
35
212
1,060
Okay, hear me out: no longterm career goals.
Max 6 month goals. Fog of war is too thick beyond that.
Future me is totally unknowable to current me. She’s obsessed with things I don’t know exist. Current me predictive goals sound naïve/boring to her.
If I do things well on a day-to-day basis and focus on the adjacent possible, future goodness takes care of itself.
YMMV I’m trying to have a weird career over here.
41
61
1,050
94,733
With all the React Suspense buzz going around, some of you might be wondering WTF it is / why it matters
I made a handy one-page guide to help explain
A good companion to @eggheadio's new courses by @kentcdodds 👉 bit.ly/uisusp and @chantastic 👉bit.ly/appsusp
12
285
1,017
The hardest thing about JavaScript is not knowing JavaScript.
So far I've stumbled along without 100% grokking `this` or prototypical inheritance – filled in quite a few holes sketchnoting @iamtylerwclark's new @eggheadio course 👉Advanced JS Fundamentals: bit.ly/advanjs
13
247
938
I have a bunch of sketchy interface ideas for using language models as epistemic rubber ducks, aka. reflective thinking partners🐥
They've been sitting in Figma for 8 months gathering dust! They all felt too obvious to me to be worth sharing...
maggieappleton.com/lm-sketch…
38
118
928
255,935
Just finished up an intense but wonderful few days at @localfirstconf.
Did a new talk on why language models making software development faster, easier, and cheaper will create a golden age of home-cooked software & barefoot developers.
Slides and transcript below👇
35
97
896
106,584
I've been obsessed with this GIF for a while. Feels like such a concise, apt representation of good design. But I couldn't find the source!
Finally found the creator today – @ralphammer
OG article: ralphammer.com/make-me-think…
Ralph's site is full of these beautifully animated gems
20
132
838
76,676
Profoundly misunderstanding what “design” is in a nutshell
Call me when midjourney can research & define the problem space, negotiate with stakeholders, do information architecture, develop a coherent conceptual model for users, build prototypes, run user interviews, and ship it
🤖 AI Designs are here *hot take*
Designers dismissing AI could soon be out of jobs
It's a good moment to embrace and learn how to bend AI to your advantage instead of missing out on a paradigm shift in what tools we use to work
📝 Prompts used are found in the image alt texts
ALT App UI design, health and science, cute color palette, Behance, Pinterest, dribbble::3 --v 4 --q 2 Midjourney
17
81
761
145,221
In a true meta-note-nerd move, I illustrated summary notes on @andy_matuschak 's Evergreen notes concept.
maggieappleton.com/evergreen…
They're similar to the concept of Zettles, but Andy's horticultural metaphor made it click for me
As usual, I'm just here for the metaphors 🌱
14
124
765
I'm such a sucker for finely-crafted diagrams and visual explanations woven into thoughtful essays.
This piece on multi-layered calendars by @julianlehr is beautifully done: julian.digital/2023/07/06/mu…
7
70
712
70,677
Redesigned and rebuilt the digital garden over the last 2 months. Spruced up some styles and swapped to Next.js (@vercel)
Everything has been replanted in the right order. Still working on nice-to-haves like search / filtering, but it's getting there.
🌿 maggieappleton.com
ALT A screenshot of my new homepage design
ALT A screenshot of the digital garden section of my site
ALT The layout of an individual post on my new website, with an "assumed audience" box up top
ALT A "Coming Soon" box at the end of a post on the new website.
37
26
687
An enormous thank you to the whole #WomenofReact2020 organiser team for yesterdays' event!
And to all the lovely React community members who came to hang out.
Thrilling to find so many other potato & metaphor lovers out in the React community.
23
116
671
1/ We've been working a new protocol at @hashai
It's called the block protocol (but NOT about blockchain or NFTs!)
It allows you to build reusable blocks (aka. components) that are interchangeable across website/apps
It takes a minute to explain, but I’ve drawn pictures…
ALT Diagram of a set of individual blocks mapping onto the block protocol, and being inserted into multiple web apps like documents and website builders.
25
93
675
Ever wondered how I make the egghead course illustrations?
Here's Part 1 in a lengthy series of posts where I'll show exactly how I make them - illustrated.dev/drawinginvis…
This one is about learning to think in visual metaphors.
And it even comes with cake 🍰
21
122
668
I imagine the least interesting use of GPT-4o is emulating an uncomfortably flirtatious, mildly condescending woman who you have to actively interrupt if you want to get a word in edgeways.
Say hello to GPT-4o, our new flagship model which can reason across audio, vision, and text in real time: openai.com/index/hello-gpt-4…
Text and image input rolling out today in API and ChatGPT with voice and video in the coming weeks.
38
43
658
95,327
Rust @rustlang keeps winning the middle-school-popularity contest of "most loved" on Stack Overflow
If you're still thinking 'WTF is Rust?'... I made some notes for you
Once you're caught up, check out @PascalPrecht's new Rust course on @eggheadio - egghead.io/courses/write-you…
12
177
638
Two vibes right now:
Drop everything to learn ML and keep up with breakneck-speed AI gossip
Drop everything to focus on embodied, in-person, deeply social skills and roles
27
33
632
90,898
Been digging through old illustrated notes and adding them to the new digital garden
Here's a set on @chrisachard 's Fixing Common Git Mistakes @eggheadio course
maggieappleton.com/git-mista…
Detached heads were such a mystery to me before this...
10
144
605
The journey to the centre of the Vue-niverse all starts with routing 🚂🚂🚂🌌
New sketchnotes on @laurieontech's 'Journey with Vue-Router' @eggheadio course – learn to go all the places in @vuejs 👉bit.ly/vuerou
13
126
587
Wrote up a guide on how I've gone to town painting my @RoamResearch setup with custom CSS.
maggieappleton.com/paintingr…
Includes a walkthrough video and theme source code.
Personalised data tags FTW
#roamcult
37
48
581
Got nerd sniped by this discussion.
Ended up collecting all the design engineers I follow and respect into a list. Trying to figure out what we think a design engineer is by example.
Link in the next tweet 👇
Having a strong "should I just become a full-blown design engineer?" day
Not even sure what that means. But I just want to touch lots of code and solve tangible problems on screens. And, like, make beautifully animated shit.
37
51
588
102,225
Been exploring how to create more “ambient co-presence” on the web.
That sense you get in cafes, trains, and public spaces of being around people without taking up your full attention. The calm, background presence of others working/playing beside you.
maggieappleton.com/ambient-c…
27
73
546
56,311
Being able to run tiny programmatic scripts within my notes has changed the way I write and think far more than any other interface features.
Noticed we're seeing more platforms that make 'programmable notes' possible. Wrote a short essay on the pattern: maggieappleton.com/programma…
25
74
526
Watching language models become content-producing machines. Wondering how the web will feel after we flood it with GPT-X articles, tweets, toots, and tiktoks
Feels like we're heading into an ever darker forest. Wrote some tips for signalling you're human
maggieappleton.com/ai-dark-f…
38
108
527
130,224
Started my new role as a lead design engineer at Normally @normallystudio this week 🎉
They're a small London studio focused on mindful, applied AI. Lots of internal R&D. The whole team is some kind of hybrid, so I fit right in. Excited to build here.
normally.com/
35
6
557
21,703
Never underestimate the power of a dense network of fucking legit friends.
Prioritising this over everything else was the best decision I’ve ever made (and didn’t learn it soon enough)
18
34
532
109,587
Making it through winter by making a tiny app that just shows me the sunrise and sunset times slowly increasing
codepen.io/Mappleton/full/oN…
22
19
531
37,401
📣 Request for examples 📣
Mini apps and bits of software you’ve built just for yourself and/or friends and family.
Things that don’t scale, aren’t meant for others to use, & valuable just for your specific, snowflake use case.
Ideally custom built, but could be jerry-rigged
I'd really love a thread of more people who build these kinds of apps, it's always such an amazing source of inspiration
152
79
517
Some bittersweet news. I've moved on from Elicit.
I still love the team and product, and hope they do fantastically.
But living a split life in between London and San Francisco wasn't working for me. Solo, remote designer is a tough job.
maggieappleton.com/leaving-e…
38
2
528
54,511
I keep seeing little "command k bars" pop up everywhere. And weirdly couldn't find any writing or research on the pattern. Had to do it myself ¯\_(ツ)_/¯
maggieappleton.com/command-b…
32
35
504
Dear prototyping folks,
Figma can't do the prototyping fidelity I need (text inputs, if-this-then-that logic, storing variables)
Give me your highly opinionated takes:
Origami? Protopie? Framer?
I know I could just React... but I still want the thing between Figma / React
136
29
492
Having a strong "should I just become a full-blown design engineer?" day
Not even sure what that means. But I just want to touch lots of code and solve tangible problems on screens. And, like, make beautifully animated shit.
49
18
462
142,273
So many good #CozyWeb and #DigitalGardening theories and chats floating around lately
I illustrated myself a map of the current web landscape based off @vgr's original thesis - breakingsmart.substack.com/p…
Combined with @ystrickler's "Dark Forest" - onezero.medium.com/the-dark-…
15
112
479
Ever lost your HEAD? Accidentally missed a --soft landing with --hard reset?
It's tough to Git it sometimes.
Luckily @chrisachard's 'Fix Common Git Mistakes' course on @eggheadio can make a big diff to your Git skills.
Just finished sketchnoting it 👉 bit.ly/gitfix
6
149
491
Wonderful exploration of a semi-graphical notation for JavaScript by @notsolonecoder
Removes the potential for syntax errors and visually displays tree structures
Original talk: piped.video/watch?v=UH0A2iuj…
Project is called “Splootcode”: github.com/katharosada/sploo…
9
88
481
Wrote up a new piece on a pattern I've called "programming portals" – small, scoped windows in graphical interfaces that let you drop into programmatic syntax.
Common in apps for end-user programming. Blurs the boundary between dynamic visuals + syntax
maggieappleton.com/programmi…
18
67
432
The floor for new “note-taking apps” now includes bi-directional links, local data/self-hosted, complex block types, transclusions, advanced queries, graph viz, spaced repetition systems, multiplayer, and a slice of cake.
Some think we’re in hell. Seems pretty great to me 😎
25
29
417
If I was giving out barefoot developer awards, @supabase’s postgres.new would be getting one 🏆
Prompt your way to a database, see all the SQL commands it ran, plus visual diagram. And all stored locally in the browser with IndexedDB.
4
30
416
34,168
I've been running wrong for a decade 🤦♀️
It turns out if you run slower. Like, *much* slower. You enjoy it more, run for longer, and improve all the good health shit and mental joy that running is for
Used to aim for 5m/km average. Now I just try to keep HR around 150 BPM...
23
10
400
86,993
I personally hit the "Speakularity" ~4 months ago – when voice transcription becomes fast, cheap, and good enough to use all the time.
snarkmarket.com/2010/6498/
Roughly half my text input is voice (when I'm alone in a room). Using OpenAI's Whisper hooked up to a keyboard shortcut and paste the transcription inline.
Quality is the big difference – Whisper never makes a mistake. Unlike Apple's native TTS which transcribes lines from absurdist fiction novellas when I'm just listing grocery items.
Took some adjustment. I had to learn to speak in a "writing voice" without ums, ahs, and repetition. Could probably fix this with a prompt layer though.
But it makes writing much lower friction and faster. I've "written" way more because of it.
Anyone else notice the step change and start exploring voice input more?
38
14
415
122,985
2:05pm Copilot is incredible!
2:08pm Copilot is trash!
2:16pm Copilot just saved me hours!
2:22pm Copilot is suggesting garbage that takes me twice as long to fix as writing the thing myself!
2:37pm Copilot just built the whole thing for me!
Genuine emotional rollercoaster
19
20
393
54,869
Turned 32 yesterday.
Still young and just getting started. But in an industry full of twenty-something guys, I feel absurdly old & strange.
Can't help but look around me at the gaping holes that should be filled by experienced, mature women running things and guiding the way.
24
13
367
27,089
Every time a dev or pseudo-dev builds a home-grown app for exactly what they need and no more (sans data tracking, external ownership, lack of control), the end-user programming spirits glow brighter ✨
See also, Robin Sloan’s home cooked app: robinsloan.com/notes/home-co…
6
38
348
Finally fluent in speaking to GraphQL APIs after working through @eveporcello's new @eggheadio course on the query language
Took sketchnotes alongside it, which are all up on illustrated.dev/sketches/gra…
Here's the original course 👉egghead.io/courses/graphql-q…
9
102
364
Calendars have always felt like a slightly underdeveloped software space. Many unsolved problems left.
But the one that annoys me most is that events are too definite. I want possible/speculative event types.
maggieappleton.com/speculati…
32
27
353
38,673
Finally turned my extensive notes on writing compelling openings for essays & conference talks into a coherent whole.
An old professor made me obsessed with this. Openings that clearly state your problems or paradoxes solve most of the writing structure for you.
Link below 👇
19
34
351
50,463
Design courses all be like...
Advanced [specific, fleeting tool]
How to become a design influencer
Nail the design interview
Develop your personal brand
None like...
Advanced information architecture
Turn abstract concepts into tangible interface elements
Clear UX copywriting
20
20
327
30,112
Digging through the dusty corners of Dropbox and stumbled onto my very first illustration attempts
I was 21, had no drawing ability, and was making little "illustrated charts." Most based off quotes I liked.
Drawn on scraps of coloured paper with tiny micron pens
Such throwback
10
14
329
Want to be the Head of State (management)? 👑
State machine tools like xState make it much easier
Here's a handy illustrated guide to 'WTF is xState?'
Best paired with @eggheadio's new courses by @kyleshevlin 👉bit.ly/ixstate and @MannIsaac 👉bit.ly/ui-xstate
3
73
333
New design pattern write up on ways to show historical trails for complex, exploratory journeys like web browsing.
maggieappleton.com/historica…
21
39
333
39,881
More nonsense from me railing against chatbots. Just another Tuesday.
Caveat: sure, we can have *some* useful, open-ended chat-ish interfaces.
But most complex, interesting, genuinely important human tasks do not take the shape of asking text boxes to fuzzy search the web
Why @Mappletons thinks the current state of AI interfaces is a “temporary historical blip"
Here's what she's excited about instead 👇
15
25
318
35,568
I’ve been tended a long post on the history of “Digital Gardening” over the last year. From @holden's original essay to the recent explosion of community experiments.
🌿 maggieappleton.com/garden-hi…
Included six design patterns I see as unifying qualities across gardens:
19
68
302
Every time I escape Figma and go back to designing entirely in code it feels like being violently introduced to reality again.
No wonder my designs were inadequate. I couldn’t see the real system.
No wonder the interface felt inert. I couldn’t think in the interactive medium.
13
39
308
44,359
Crowd favourite @MathigonOrg by @PhilippLegner
The shock and awe just kept building and building...
5
32
303
94,096
After 5 years with @eggheadio I'm moving onto a new role and some new challenges.
I was privileged to work with world-class folks there and excited to see them keep growing.
Special thanks to @joelhooks for mentoring me and supporting me over the years 🙌
19
5
293
To be clear, I would murder someone for everyone's open-source, non-proprietary, default web development tooling experience to feel like this.
Closed, subscription-based, WYSIWYG platforms that inevitably limit the range of what you can do are not it.
3
8
271
10,695
Making some #rxjs themed organ pipes for an @eggheadio course today. Gotta love the magical mirroring tools in Illustrator for this type of work ✨ #egghead
14
27
270
New @tana_inc folks seem hungry for in-depth books on ontologies & schemas.
Initial reaction was... books are overkill? There's not much to know? Just google it? But then tried googling. And it is *noisy* and poorly curated out there.
A few recommendations:
22
27
276
Dug through an old external drive last week and found a long lost gem!
In high school I went through a phase of elaborately redesigning my desktop and keeping a screenshot record each time.
Much skeuomorphism. Many novelty icons. I miss this time.
maggieappleton.com/teenage-d…
19
6
275
42,353
9am me: Time to sit down and work through that 2 hour vector DB tutorial
5 mins later me: Wow my terminal just isn’t aesthetically pleasing enough for this. Must spend the next hour installing Hyper, Oh My Zsh, Spaceship, picking themes, browsing fonts, and installing plugins…
10
2
271
16,055
Bought a little £30 laser printer to print off all the research papers I’ve “read” but can’t fully remember because The Screen is one big smoosh of collapsed context. Already feels different to have physical artefacts hanging around.
Bullish on tactile objects you can touch.
22
13
267
This is why I love metaphor search (search.metaphor.systems/)
And semantic, language-model-powered search generally. Search that can respond appropriately to our fuzzy, associative memories.
ALT Screenshot of metaphor search. I've entered in a search query for "an article by a major outlet like nyt or the new yorker by a programmer sad about how gen AI is going to make coding obselete". Metaphor returns the article I was looking for as the top result.
10
19
268
29,575
Not enough primitive types. Not everything should be an “event”. Some things should be blocked time, potential events, tasks, records of things that happened, etc.
9
5
267
7,166
More sketchnotes, this time on Gatsby themes!
They're a shiny new feature in @gatsbyjs – little building blocks of site functionality you can mix n' match n' share on NPM.
From @chrisbicardi's new 'Composable Gatsby Themes' course on @eggheadio 👉bit.ly/gatsbyt
8
52
265
Debating which note-taking app to use is a tragedy when it’s still trapped inside a tiny glass box that doesn’t take embodied cognition seriously.
I want a physical, tactile computer integrated into the room, not a 1% improvement on text screens
15
13
255
A quick visual guide to using the ReactDOM.render() function ⚛
Part of the #whatthefork series for @eggheadio
8
65
254
Ended up in quite the research rabbit hole exploring the historical origins of Bi-directional links this week.
Involves Project Xanadu, early internet spats, and Memex machines.
Sketched out some of the basic concepts and wrote up a little garden note: maggieappleton.com/bidirecti…
17
29
252
I‘ve been doing low heart rate / zone 2 / mafftone training for 6mo and found running much more enjoyable!
But all the standard apps only focus on distance and pace. Really want one that focuses on keeping your heart rate in zone 2. Primarily with audio cues that tell you when you’ve gone over/under.
Started plays with mocks. This is the kind of app I just want to build for myself. Might try to GPT-4 prompt my way to some prototype - I know nothing about swift / building iOS apps!
But I love that language models have made me believe building this kind of tiny idea is now possible / within my skill set. GPT-induced-ambition.
25
10
255
83,082
Sudden need to relearn the fundamentals of vanilla JavaScript so I can debug and call bullshit on all the cruft Copilot generates.
Genuinely spending hours every weekend doing this. Code generation is only useful if you know the lang so well you can spot when it fails and why.
17
14
241
27,563
For anyone looks for a super simple and easy to use diagramming tool just to map out basic programming concepts, check out miro.com
Free, won't overwhelm you with features, and does the trick.
It's 101 functionality, but a good starting point to build off later
6
44
253
My dream bf
- under 1 MB
- $5-10k total cost
- a11y accessible
- designed to last 10+ yrs
- pleasing colour scheme
- loves progressive disclosure
- rlly clear conceptual design but a bit weird
- rlly good info architecture & has a system
- not a FAANG spinoff (self made)
- good loading times
- good UX
- loves usability heuristics
- loves solving my problems a LOT
9
5
239
35,349
Dear people who have tried to build their own digital gardens and failed (or are still trying but haven't succeeded yet)...
What was your main blocker / what did you get stuck on?
What was frustrating about the experience?
What tools / platforms / things were you trying to use?
63
10
242
65,396
People seemed to like watching my pedantic illustration process. So I did another screen capture while working on an @eggheadio course about @storybookjs.
This one is a bit further along in the pipeline. Almost at the stage where I can let the OCD spread its wings and fly free.
10
25
236
Probs the cheesiest thing I've ever done. But @kaseyklimes sold me on it.
Makes me continuously survey the day for my One Good Thing. And then I *do* things if it looks like I won't have one. Cringe, but it works.
Feels dumb to have so much resistance and skepticism toward simple practices that make you pay attention to positive actions and reinforce them. Cynical brain needs to calm down a bit.
Switching to a physical wall version soon, but Tana does the trick for now.
13
13
241
22,879
Video of the talk I did on home-cooked software and barefoot developers at @localfirstconf is up!
piped.video/watch?v=qo5m92-9…
9
22
240
31,245
Today's @eggheadio illustrated explainer is on #JavaScript's spread operator, and comes with organic foliage for ambiance 🌲🌳🌴
I always found ...spread terribly confusing for some reason. Made a lot more sense once I began thinking of it as a "copy & dump" system.
8
86
228
Just published the new illustrated explainer all about what API's are and how they work. (And mostly about all the ways they're like tiny robo-waiters)
It's up now on illustrated.dev/api – If you've ever felt a bit fuzzy about your API expertise, worth giving it a read.
11
77
230
The fact I can’t be listening to an outstanding podcast episode, tap 2 buttons, and instantly publish it to a feed of favourites on the public web that all of you can all browse is an outrage.
We botched this. Podcasting infrastructure is profoundly unsocial.
30
13
235
35,648
Keen on publishing your own @reactjs hooks?
Made sketchnotes on Joe Previte @jsjoeio' new 'Shareable Custom Hooks' course on @eggheadio
My notes are more of a hooks primer, but Joe does a good deep dive on the logistics of publishing in the course: buff.ly/32ZxTGF
5
54
229
Finally splurged on physical copies.
Scheduling some quality time with these lovelies this weekend.
19
5
225
21,245
Had a Gatsby-tastic @gatsbyjs day at #GatsbyDaysLondon this week.
Sketchnoted a handful of the talks:
@kylemathews on 'What is Gatsby?' (answer: it's complicated 😅)
@SchauDustin on using Gatsby for sophisticated web apps
@marcysutton on not building dumpster fire components
14
59
222
Today's @eggheadio explainer is a nice, lengthy guide to React's Virtual DOM.
Turns out, a far more complex topic than I initially anticipated. 😅 Possibly still not 100% accurate by true-DOM-engineering-enthusiast standards. Specific suggestions for edits welcome 👍
14
64
221
A few months ago I started writing a short note about my experience of pregnancy so far… somehow turned into 6000+ words
I had a lot of thoughts on fruit babies, naturalness narratives, wild bananas, and the existential quality of growing someone new
maggieappleton.com/growing-a…
7
4
227
9,467
Hosted the latest edition of Future of Code here in London on Thursday. So many bangers.
Delayed thread with snaps and demo videos!
5
14
210
62,187
NotebookLM's generated podcast is pretty good! But the generically American, over-scripted voices are grating to listen to. It's NPR-ish acting/phrasing is cringe.
We need snarky British mode. When we getting David Attenborough chatting to Maggie Smith as the default?
My detailed notes on NotebookLM's new Audio Overview feature (aka surprisingly convincing automated two-person podcast conversation)
simonwillison.net/2024/Sep/2…
23
5
221
66,950
Really loving the direct manipulation and visual interface available in #theatrejs by @ariaminaei
After-effects-like timeline and easing curves available in the browser, hooked up to plain JS object properties.
Worth a look: theatrejs.com
8
19
214