Building things for people who build things. Design Engineer @NotionHQ. Previously @GitHubNext. Creator of feathericons.com. Working on @lumen_notes
SF
- Tweets 3,656
- Following 926
- Followers 8,153
- Likes 4,866
First day as a full-time Software Engineer at @github! 🥳
78
49
2,781
📍 start project
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
|
📍 finish project |
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
|
📍 start another project
8
236
1,127
✨ I made a simple macOS app to help me be more intentional and focused when using my computer.
Would anyone else find this useful? Should I publish it?
55
33
679
✅ RIP sharp checkboxes
We rounded to-do checkboxes to match the rest of @NotionHQ's UI. Originally we kept them sharp for visual distinction, but they were starting to feel at odds with our overall design direction.
Before → After
ALT Sharp checkboxes
ALT Rounded checkboxes
32
7
554
103,006
Excited to share that I was promoted to Staff Engineer @GitHub! Five years after joining GitHub, I still love what I do and who I do it with. Very grateful 🥰
47
4
497
25,667
I've been pleasantly surprised by the DX and UX of PWAs on iOS. It's taken a lot of tweaking, but my notes web app is starting to feel pretty good on iOS.
🔑 The key is to set `display: "standalone"` in the web manifest: developer.mozilla.org/en-US/…
15
23
426
84,845
You can now customize the size, stroke width, and color of Feather icons directly from feathericons.com 🚀🎛️
9
57
378
Just implemented this scroll masking CSS animation in @lumen_notes and it feels soo good
Scroll masking with CSS scroll animation as a progressive enhancement ⭐️
.scroller {
animation: mask-up;
animation-timeline: scroll(self);
animation-range: 0 1rem;
mask-composite: exclude;
}
@keyframes mask-up {
to { mask-size: 100% 120px, 100% 100%; }
}
9
12
366
42,645
Been experimenting with ways to visualize a "design graph."
This feels like a compelling way to explore connections between design tokens:
17
27
327
🚀 Second day, first ship at @NotionHQ
Fixed a subtle but satisfying UI bug. Buttons on the right side of the top bar now animate from the correct origin (before/after in the videos below)
Love being part of a team that cares about the details ✨
22
7
335
40,936
I got a very rough prototype of visual programming working with FigJam widgets! 🤯 Excited to experiment with this more.
Heavily inspired by @_paulshen's natto.dev ❤️
8
30
306
👇 Today's @NotionHQ quick win:
Dropdown buttons now stay highlighted when open
It's a tiny detail that's especially helpful when there are multiple dropdown buttons next to each other
Before → After
ALT The "..." menu is open it's unclear which button opened it
ALT The "..." menu is open and the "..." button is highlighted
25
4
298
34,615
Continuing to learn the @NotionHQ codebase by shipping quick wins ⚡
Shipped today: You can now paste image files directly to set custom page icons. Before, you could only paste image *URLs*
What quick win should I tackle next? (screenshots pls)
55
9
292
70,582
Experimenting with GitButler this weekend for juggling multiple branches
Dragging a diff onto a commit to amend it? Pure magic 🤯
Really impressed so far. Great work @gitbutler team!
10
11
283
26,703
Got promoted to Senior Software Engineer at @github today!
Feeling especially grateful to everyone who's helped me reach this milestone in my career: @randie (my mom), @bwaldron, @kwiens, @TGines, @entendu, @ty___ler, @samng96, @broccolini, @emplums, @lesliecdubs, and more ❤️
25
7
268
Decided it was finally time to organize my work tasks in @NotionHQ 😅
While making my custom view, I noticed that status labels looked so dim in dark mode that I thought they were disabled... so I fixed them
Before → After
19
5
271
55,890
Today is my first day at @NotionHQ!
I’m joining @mschoening’s team as a design engineer to explore AI workflows. Excited to share more soon
28
5
281
38,570
💅 Closing out my first week at @NotionHQ by polishing database table cell selection styles
Before → After
21
4
256
35,604
Just accepted my offer to join the @github Design Systems team full time next fall as a Design Systems Engineer! 🎉 I'm really excited to continue working with this amazing team 💖
To complete the circle, after an awesome internship, I'm very happy to share that @colebemis will be joining the @github Design Systems team full time, fall 2020 💓
8
1
230
My live code block FigJam widget is now available to the community! 🚀
Try it out: figma.com/community/widget/1…
I got a very rough prototype of visual programming working with FigJam widgets! 🤯 Excited to experiment with this more.
Heavily inspired by @_paulshen's natto.dev ❤️
11
25
221
🕒 Today's @NotionHQ quick win:
You can now click the "Edited…" timestamp in the top-right of any page to see recent updates
Hat tip to @sbcatania for the idea
7
9
214
29,353
🌈 Checkboxes also now support more colors!
Before, all checked checkboxes were blue.
You can change a to-do's color by clicking its drag handle and selecting Color
24
8
202
41,872
Finally found some time to experiment with the Figma Plugins API over the long weekend 🧩 Made a feathericons.com plugin:
4
19
191
It was a joy working with @figma to build the new GitHub widget! Hope y'all enjoy it 💖
Go from brainstorming and planning to building with fewer steps in between with the new GitHub widget for FigJam!
figma.com/github-for-figjam/…
8
13
174
Having fun designing the voice mode UI for @lumen_notes
The animation timing, easing, and sound effects are tricky to get right, but I feel like I'm getting close...
7
1
179
9,255
Just updated feathericons.com 🚀🎉
Biggest changes were behind the scenes. The new site is powered by React, Gatsby, styled-components and Rebass by @jxnblk.
7
12
149
Day in the life of a designer at @NotionHQ 👉
8
1
161
15,677
👀 You know that little "+X" viewer counter on @NotionHQ pages with lots of people?
It's clickable now! Click to open the analytics sidebar and see everyone who's viewed and edited the page
One less menu to hunt through ✨
11
7
153
30,272
I built a Figma plugin that allows you to copy hosted image URLs for any frame inside Figma 🔗✨
Try it out: figma.com/community/plugin/8…
5
19
138
Personal news: I’m joining the @GitHubNext team 🌟
While it’s bittersweet to leave Primer, I’m excited to start daydreaming about the future of software development with the talented folks at Next.
Here’s the note I shared internally earlier this week:
ALT Internal memo I shared with the Primer team announcing my transfer to the GitHub Next team
17
1
134
18,344
Today’s my first full day in SF 🌁 Excited to start full-time at @github in a couple weeks!
But first, I’ve got lots of unpacking to do 😅
6
126
To celebrate the technical preview of Copilot Workspace, I'd like to share a behind-the-scenes look at its design evolution 🌱
ALT The first UI for Copilot Workspace, then called Extract, Edit, Apply
ALT The current UI for Copilot Workspace
7
19
121
22,460
Contrary to popular belief, I do more than fix paper cuts at @NotionHQ 😉
I’m also working on Custom Agents. Excited to share more soon!
Meet Custom Agents!
Imagine a whole team of Agents, each with their own specialty, that run in the background. Agents that work...while you sleep.
Soon, you’ll be able to build any Custom Agent your team needs.
Early access starting today.
2
4
120
16,632
We designed all-new Octicons to support the launch of GitHub for mobile! 😊✨
It's been amazing working with @_aguillaume, @brian_lovin, @sophshepherd, @broccolini, and the incredibly talented mobile team on this project.
👉 Go sign up for the beta: github.com/mobile
Introducing GitHub for mobile.
Review lines of code, chime in on a design discussion, merge changes, and more. GitHub for mobile gives you the flexibility to keep work moving and stay in touch with your team from wherever you are. github.com/mobile
#GitHubUniverse
4
8
99
🌒 Ever notice how overlays in dark mode sometimes have semi-transparent white borders that let the UI underneath bleed through?
It's the kind of visual bug that once you notice you can't unsee
Yesterday we fixed that across all overlays in @NotionHQ ✨
6
2
97
35,076
Fun easter egg that I just added to Lumen 🐣
If you add an `isbn` to the frontmatter of a note, Lumen will automatically display the book cover 📚
3
4
81
27,076
It's official 🎉 primer.style/team
My first few days at @github have been awesome! The future is so bright ✨ Can't wait for y'all to see what we're working on
7
1
76
Personal update: After six incredible years at GitHub, July 1st was my last day 🥲
Thank you to everyone who made my time at GitHub special ❤️
Excited to share what’s next!
11
1
81
7,106
Primer Components v13.2.0 just shipped with 3 new components ✨ and tons of enhancements 💅github.com/primer/components…
Huge shoutout to @mxstbr and Emily Plummer for their hard work on this release!
2
8
73
Implemented a tricky state persistence pattern for a canvas app I've been tinkering with. Thought I'd share the interesting bits.
Problem: I want to persist the state of the canvas in both the URL query string and localStorage 🧵
2
5
70
I learned a bit about service workers this weekend and got my notes app working offline!
The dream of local-first software is alive and well ✨
4
1
71
I’m super excited to announce that I’ll be interning on the incredibly talented Design Systems team at @github this summer! 🎉 @githubdesign @githubprimer
4
64
I've been fighting the urge to start building an over-engineered personal blog ever since @brian_lovin convinced me to start writing more. So I'm forcing myself to start with @gatsbyjs's default blog theme until I build more momentum. Wish me luck! 😅
5
50
Inspired by @4lpine's work on @blocks_ui, I built an interactive layers panel for JSX using custom Babel plugins 🔥
4
4
56
The Feather Figma plugin is now available! 🚀🎉
Check it out: figma.com/c/plugin/744047966…
Finally found some time to experiment with the Figma Plugins API over the long weekend 🧩 Made a feathericons.com plugin:
1
2
55
Playroom makes it so easy for us to experiment with our design system in the browser. Thank you @markdalgleish and the @seekjobs team for building such an amazing tool! 💖
Here's the link to the Primer Components playroom: primer-components.now.sh/pla…
Found out at @ReactConfAU that GitHub are using Playroom for their design system. The PR where they added it does a really great job of explaining their motivation: github.com/primer/components…
1
5
55
I just got access to the @framer web beta. Really liking it so far. It's excited to see more design tools embracing the web.
One of my favorite parts: Feather icons are built in ❤️
3
1
53
Threw together a prototype for a @figmadesign plugin that changes the fill or stroke of the selected node to the closest @githubprimer color 🎨✨ It's still rough around the edges but I'm excited about the potential here.
2
47
Wow. @HasuraHQ is seriously impressive. I just set up an entire backend (database, GraphQL API, authentication, authorization) in less than an hour without ever touching a terminal! 🤯
Their free tutorials are a great place to get started: learn.hasura.io/
2
9
51
Feeling grateful that I got to meet and spend time with many of my @githubdesign coworkers last week in Nashville 💖
4
45
Shoutout to @Wattenberger for helping me implement a graph view in my notes app ✨
4
45
Thank you for all the responses ❤️ I'm adding your feedback to our internal paper cuts database.
No promises, but I'm aiming to fix a couple paper cuts each week to keep the momentum going, while also making time for bigger projects and long-term bets.
Continuing to learn the @NotionHQ codebase by shipping quick wins ⚡
Shipped today: You can now paste image files directly to set custom page icons. Before, you could only paste image *URLs*
What quick win should I tackle next? (screenshots pls)
6
1
49
5,665
In case you missed it, Feather's edit icons got a facelift in v4.16.0 ✨ github.com/feathericons/feat…
1
1
42
Feather v2 is here ... and FREE! The set now features over 200 icons organized into 8 categories. Enjoy ✨ buff.ly/2rkQ47o
3
19
46
I'm so excited for y'all to try Copilot Workspace and let us know what you think!
We're listening to all your feedback and will continue to iterate
💫 Copilot Workspace is our next step towards AI-native tools for developers.
Go from task to code using the power of natural language. Read more about our vision for the future of developer tools that help you get things done, every step of the way 👇
github.blog/2024-04-29-githu…
2
5
46
6,532
I finally put together a landing page for @lumen_notes 🚀 uselumen.com
In keeping with Lumen's ethos, the landing page is just a markdown file stored in a GitHub repository deployed with GitHub Pages
ALT Screenshot of Lumen's landing page
6
1
44
7,557
The icons look great! I'm happy the community has found a way to move the project forward without me. This is why I love open source ❤️
1
40
Implemented a query language for Lumen last night 🔍📝
Now, not only can you use GitHub-style qualifiers in any search input, you can also embed search queries inside notes—similar to Obsidian Dataview
2
1
42
6,495
Feather is a finalist for @ProductHunt's Golden Kitty Awards this year!! 🎉🎉
Help Feather win "Side Project of the Year" by upvoting ⬆️ producthunt.com/golden-kitty… (Please RT)
1
7
39
🤯🤯🤯 I figured out how to extend markdown syntax with @XState state machines and micromark!
(yes, I'm very far down a markdown parsing rabbit hole 🙈)
ALT A state machine for parsing a tag (e.g., #example)
2
41
🏆 2019 Goals 🏆
📚 Read at least one book a quarter
🚢 Ship at least one side project
🗣️ Speak at a meetup or conference
👨🍳 Meal prep at least once a week
🏋️♂️ Workout 3+ times a week
📵 Turn off devices 30 min before bed
😴 Get 7-9 hrs of sleep a night
2
3
37
What is the most compelling reason for a frontend engineer to learn @rustlang?
22
3
37
Just released Feather v3 🚀, making it simple and easy to use Feather on the web. Adding an icon is now this simple: github.com/colebemis/feather
3
10
35
I’m giving away FREE Feather stickers!! 🎉🎁
Just DM me your shipping address if you’d like one.
6
1
34
Kicking off the new year with my first contribution to @blocks_ui! 🚀🎊
1
2
33
TIL that typing `shift + enter` instead of `enter` in @github comment boxes preserves indentation 🤯
This has already saved me so much time!
1
3
32
What do I have to do to get off the @browsercompany waitlist? 👀 I'm dying to give it a try
9
32
9 hours coding on a plane with no WiFi forced me to slow down and embrace the nostalgia of writing code
Still bullish on AI tools, but what a nice reminder that my brain still works without them
6
33
2,867
