@uzodev

Design Engineer | Frontend Engineering, Interactions & Accessibility

 Abuja, Nigeria
uzookafor.com/
Joined December 2020
  • Tweets2.4K
  • Following962
  • Followers672
While doing QA on my GitHub Time away concept, I opened it on my iPhone and the squares on the contribution graph were squashed. I inspected them and they were 7px wide instead of 10px. It had been working fine in Chrome the whole time, even when I simulated mobile devices.
Two screenshots of a GitHub-style contribution graph in Safari on iPhone. Before the fix, every square is squashed to 7 by 10 pixels. After the fix, they’re square at 10 by 10 pixels.

ALT Two screenshots of a GitHub-style contribution graph in Safari on iPhone. Before the fix, every square is squashed to 7 by 10 pixels. After the fix, they’re square at 10 by 10 pixels.

CSS and HTML for the fix. The table uses table-layout fixed with an exact width of 723px, and a colgroup sets the label column to 28px and each week column to 10px.

ALT CSS and HTML for the fix. The table uses table-layout fixed with an exact width of 723px, and a colgroup sets the label column to 28px and each week column to 10px.

1
1
82
more replies
Testing in Safari also caught a second bug. After you tap a day, Safari fires mouse events after the touch, so focus jumped back to the square instead of staying in the “Mark as away” panel.
1
18
You’d never notice it by looking, but for someone using VoiceOver it means landing outside the panel. The graph already manages its own focus, so I stopped mousedown from moving it. Here’s the concept if you want to try it, on your iPhone too 😄 uzookafor.com/time-away/

Uzo Okafor — Design Engineer

Design engineer building responsive web interfaces, interaction prototypes, and production experiences with React, Next.js, Webflow, and GSAP, with a focus on accessibility, motion, and performance.

uzookafor.com
11
Most gaps in a @github contribution graph have a reason. Parental leave, out sick, touching grass 🤭. So I designed a way to mark them as time away. Select the empty days, say what you were doing, and they’re hatched on your profile.
4
1
14
504
Try it here: uzookafor.com/time-away/

Uzo Okafor — Design Engineer

Design engineer building responsive web interfaces, interaction prototypes, and production experiences with React, Next.js, Webflow, and GSAP, with a focus on accessibility, motion, and performance.

uzookafor.com
1
52
I rebuilt the clock customization from Apple’s new Homeview. My favourite part is the ticks. When you switch to the style that has them, they grow in from the edge and push the numbers toward the middle. Built with React and Motion.
2
1
30
1,069
Finally finished this Google Calendar idea. One button turns a meeting into an email with your agenda already in it, and sending it cancels that week’s meeting.
7
336
Uzo retweeted
Uzo@uzodevOct 12
A closer look at the WhatsApp voice note prototype. Tap a word, and it plays from there. The dotted ones are words the transcript wasn’t sure about, so you can tap and check them. Holland is meant to be Haaland 😅
2
4
301
A closer look at the WhatsApp voice note prototype. Tap a word, and it plays from there. The dotted ones are words the transcript wasn’t sure about, so you can tap and check them. Holland is meant to be Haaland 😅
2
4
301
Tried @WhatsApp's voice note transcripts recently and prototyped how I’d want them to work. Tap a word, it plays from there. Used the Man City saga for the sample note because football’s back tomorrow and I can’t wait.
1
10
519
The mobile version, up close. The album waits in the mini player, since it's on screen when you start a podcast. Its artwork is the button because the card peeking out is too small to tap. When it comes back, it lifts clear first, like pulling a card from a deck.
Uzo@uzodevOct 7
saw this a few days after sharing my spotify "best part" prototype, so I built it (react + motion). the album waits behind the podcast, and one tap takes you back to where you were.
1
12
524
saw this a few days after sharing my spotify "best part" prototype, so I built it (react + motion). the album waits behind the podcast, and one tap takes you back to where you were.
Frank Bach
@zendadddySep 27
I kinda wish Spotify would let me keep two streams active. Just because I want to listen to a podcast doesn’t mean I‘ve given up on the album I had in rotation.
2
4
1
14
1,334
try it here: uzookafor.com/two-streams/

Uzo Okafor — Design Engineer

Design engineer building responsive web interfaces, interaction prototypes, and production experiences with React, Next.js, Webflow, and GSAP, with a focus on accessibility, motion, and performance.

uzookafor.com
67
Uzo retweeted
Uzo@uzodevSep 28
A closer look at the "Best Part" idea I shared last week for Spotify.
2
1
11
1,203
A closer look at the "Best Part" idea I shared last week for Spotify.
2
1
11
1,203
Had this little “Best Part” idea for Spotify, and used it as an excuse to sneak Sirens in there because it’s still my favourite from The Odyssey score 😂 🔊
1
12
1,796
Uzo retweeted
Edo
@edo_lunardiSep 24
A collection of my best work over the years. Audio on. Book your Q4 project now. You're legally required to.
22
14
2
150
14,448
Shared this upload component yesterday, then caught a tiny hitch in the recording. At 0.25x, the row disappeared just before the container resized. Changed it so each row collapses its own height and the container follows. Also shows fail/retry + offline/resume.
3
152
Uzo retweeted
Uzo@uzodevSep 23
Upload files component
1
1
4
150
Load more