Sign in with Twitter

Username:

Building the design system & related tooling @ SEEK β€” focused on scaling & speeding up design. Maintainer of Braid, Playroom & Capsize.

496 Following   1,240 Followers   1,548 Tweets

Joined Twitter 8/12/11


Building an accessible web is just so hard πŸ˜” https://t.co/JpYzjl3ZCS
9/28
2020
@peduarte Hope you didn't get a stitch πŸ˜‰
9/20
2020
@BlueCaret You're farting πŸ˜†. If you `justify-content: center` on the container it behaves the same, until the conte… https://t.co/hCjOJhfPJiHorizontally center items in a flex container until it overflows Pseudo elements fix everything! πŸ˜˜πŸ‘Œ https://t.co/1N6FWiQIXL
9/16
2020
Loving my current dev loop: 1️⃣ Build components in @storybookjs 2️⃣ Put a page together in @seekjobs' Playroom:… https://t.co/bcMkUjlwjc
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨
9/14
2020
Experimented with Playroom today, a code-oriented design environment that allows you to quickly prototype interface… https://t.co/if1EK8TPSU
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @afzalsayed96 I have been staring at them as the last rogue white space in our system! I should have a look shouldn't I πŸ˜ƒ
9/5
2020
@souporserious Have you seen `react-beautiful-dnd`? @alexandereardon put a lot of time and effort into accessibilit… https://t.co/Xl5hXb6muM @phloe_ Good callout! I can't see how a screenreader would care about an empty element. I tested on VoiceOver and n… https://t.co/cMwotuB7LKInteresting change to Capsize might be in the works with the approach to preventing margin collapse. Can anyone th… https://t.co/X4E8bDa54I
9/3
2020
I still can't believe it, but Stitches if officially live πŸš€ The CSS-in-JS library I've always wanted can now be us… https://t.co/jY5W7Vw8vT
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨
9/1
2020
@smfr @argyleink Totally. Why does leading-trim also perform the trailing-trim πŸ˜†
8/27
2020
Capsize: uses font metrics to calculate CSS values that "trim" (negative margins) your content so you can use lead… https://t.co/i5kn98jWax
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @argyleink Glad you like it! The other less spoken about feature that your video highlights is predictable text si… https://t.co/CDGuZQSNXhso great to catch up with the @seekjobs design systems/tooling team today πŸ€œπŸ€›βœ¨ I love these meet and greets. It's s… https://t.co/rQzeDkt5ye
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @lol_russo @seekjobs @markdalgleish @mattcompiles @tweetbradmc @itsmadou @alexandereardon Thanks for reaching out.… https://t.co/faYSyQRnsb
8/26
2020
Our war on white space continues! This time providing a mechanism for our `Badge` component to bleed into its paren… https://t.co/l8n6ToYpl4
8/25
2020
@BeeEmSea Re Playroom, we are using the Capsize in production now, so it will be using pseudos everywhere. Are you… https://t.co/b3ocfBIEwz @BeeEmSea Transform was there from early on when we only pushed text onto baseline. Now that we are cropping to cap… https://t.co/E8XSpQRqeq
8/21
2020
@kieranstartup I'm assuming you've seen Capsize? It's what we built to achieve this in lieu of first class CSS supp… https://t.co/42PN6OIUztThanks to @SashimiEthan and @MicrosoftDesign for writing this article and supporting this proposal πŸ™Œ @okonetchnikov Im not sure Capsize is that mainstream. To be fair, it may not be on the author's radar... yet πŸ˜‰ @micahbrich @theleagueof Nice! Thanks for sharing.
8/19
2020
@micahbrich @theleagueof Oooh "on the podcast" sounds interesting. Got a link? 🎧Microsoft Design is sponsoring the authoring of the leading-trim spec! So much justification for the direction we'… https://t.co/JJ6FHM5nUq @peduarte πŸ‘€
8/18
2020
I wish UX was not such a tainted umbrella term in the industry. The role of UX Developer/Engineer makes so much sen… https://t.co/y4qiFyub6h
8/13
2020
@lol_russo @laurie_jones @jenniesyip Yeah fair play. Thats what i wanted to open up and have a play with πŸ˜† @lol_russo @laurie_jones @jenniesyip Damn! You know what im interested in and BAM! πŸ˜πŸ”’πŸš§https://t.co/UOjEaPJ5k7
8/11
2020
@peduarte @tomus_sherman @siddharthkp Thanks man! But is must be said, 🍬 treat is @mattcompiles baby! The third 'M'
8/10
2020
@shcoding @markdalgleish Unfortunately there is no support for fluid values at this stage. Have wanted to look into… https://t.co/Sp3flcjYfP @mxstbr @markdalgleish Hard to "fathom" hey @markdalgleish?πŸ˜‰ . The O.G. MelbJS days πŸ˜† @mxstbr cc. @markdalgleish @mxstbr Was? πŸ€” https://t.co/AfRFpExDQy
8/9
2020
@jxom_ Love seeing it integrated in other systems now πŸ™ŒLooking πŸ˜˜πŸ‘Œ https://t.co/Iq5HVIJPLj
8/7
2020
Starting to land on a pattern for design system components of "contextual defaults." The idea is to use context to… https://t.co/wnBWmEBq1t
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨
8/6
2020
@jxom_ Nice work mate! Great documentation too πŸ™Œ
8/4
2020
Building a design language that makes sense across role boundaries has been such a great north star 🌟 It literally… https://t.co/4dAYozgeKr @devongovett @markdalgleish Yep! It was well suited to Capsizes use case. I have some questions though. Sent you a dm.
8/3
2020
The team has been trying out Capsize with very positive results. The brand new npm package works perfectly.… https://t.co/3Ore1fmshC
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @AndriyTyurnikov I can't reproduce at this point. Using chrome too, on android and OSX with retina. If the only is… https://t.co/tLgEsddHHj
8/2
2020
@AndriyTyurnikov Might need more details, looking at Lato metrics and the preview on the site it's looking on point… https://t.co/d2QhtgsaTN @AndriyTyurnikov Capsize uses font metadata from inside the font. This can be wrong, but based on research its high… https://t.co/1jS7jShGe4
8/1
2020
At some point we flattened design discussions into pixels & hex. This is a lossy translation to cross a discipline… https://t.co/doC8LAjquG
7/31
2020
TIL: Webkit & Mozilla layout units support down to 1/64th and 1/60th of a pixel respectively πŸ•΅οΈβ€β™‚οΈ Excuse me while… https://t.co/UfplryCBju
7/30
2020
@phil_lgr @markdalgleish This evolves what we had in Braid considerably. No more magic numbers to guess now, entire… https://t.co/AvVidPKMLN @jantimon FYI, just added this conversation into the FAQs on the site. https://t.co/FRIIPL7GX6Seen πŸ›Ά Capsize? Got questions? We just added a FAQ section to the site, aimed at answering the most common questi… https://t.co/3P90cyTZ8H
7/29
2020
@calebwilliams12 I told you something was coming πŸ˜‰ https://t.co/eDVzkcegCo @jantimon Yep, maybe Capsize could help raise the profile of those specs (too optimistic?) Was planing to cross li… https://t.co/jBhsq5wKjk @jantimon But no support yet right? @jantimon Both specs supported would turn the output CSS into something like: font-size: 24cap; line-height: 2cap;… https://t.co/Y5DzaWBO3N @jantimon Yeah I've been following this with interest. Importantly one you have performed the trim, Capsize also al… https://t.co/3ijZLQxl2a @itsmadou Yeah so for such a varied stack i'd be getting the metrics for one and applying that across all and seein… https://t.co/SvnIlpfFXY @itsmadou You wouldnt happen to know how to get at the font file for a system font would you? Im having to manually find and download them 😩 @jxom_ @markdalgleish Yeah i have seen run time solutions to identifying fonts. We havent gone down that path. I wo… https://t.co/bY8UvhEgAF @jxom_ @markdalgleish No "special trick", and hoping to add a "System Fonts" option to Step 1 on the site. For now… https://t.co/CIc3rXHPNb
7/28
2020
@michaeltaranto @chrisbiscardi This is incredibly awesome 😻 https://t.co/PB06OJZ2pM
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨πŸ“°πŸš€ Capsize v1 Release πŸš€πŸ“° Finally published Capsize v1 to npm πŸ“ Control the size of text by the height of the capi… https://t.co/LzSAifMnuP @JessTelford @mxstbr @jamonholmgren @mitchellhamiltn Happy to accept the rounding. I'll flick you my bank details πŸ˜‰πŸ€‘ @sebastienlorber Interesting read! I would be interested to have a play for my own curiosity, but likely won't have… https://t.co/9LpFJSypHI @sebastienlorber It's been asked about. The strategy is based heavily on how line boxes are rendered in CSS. Not su… https://t.co/W4M0tHtZed @ollicle @jarodpeachey Yeah I have been warned of this, but haven't found it a problem in practice yet. But capsize is still young πŸ˜„ @ollicle @jarodpeachey Nope. All driven off the metadata inside the font file itself. While a font author could pro… https://t.co/0S8XkMJaSA @jarodpeachey I built πŸ›Ά Capsize. Leverages font metadata to size text according to the height of its capital letter… https://t.co/bCZ00Xujq8 @souporserious Makes me very happy to see this theory playing out in other peoples products! 😍 Thanks for sharing πŸ™ŒAdded Capsize to JSXUI and it's already made a huge difference in how easy it is to line up spacing 🀯 absolutely gr… https://t.co/P9e7VKY6ss
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @itsmadou @markdalgleish 😲🎧 Should definitely be renamed to Playroom though πŸ˜‰
7/27
2020
😭 Why is it quicker for me to make gradient text in code than it is in design tools....
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨
7/24
2020
With 7% of Google Fonts having no or incorrect cap height metadata, the Capsize site now lets you easily refine the… https://t.co/FSnMSu7TlT @sarah_federman @laurie_jones @SEEK_Geek @markdalgleish Yeah cool, like @laurie_jones it might might work for your… https://t.co/H7ODpIi3K9 @sarah_federman @laurie_jones @SEEK_Geek @markdalgleish I guess the issue is you could have a partial system in ske… https://t.co/iAUurlcmXx @sarah_federman @laurie_jones @SEEK_Geek @markdalgleish We have some auto colour contrast features via context, als… https://t.co/mBXh7PBwgS @adamwathan @simonswiss @tailwindlabs Congrats @simonswiss! Huge news πŸ‘πŸŽ‰ @sarah_federman @laurie_jones @SEEK_Geek @markdalgleish We used it in seek-style-guide, but it's not feasible in mo… https://t.co/kO94zriXtz @itsmadou Free play mat? I'll take it
7/23
2020
@itsmadou @jantimon @fantasai Thanks @itsmadou. I'm across this and have included it in the write up I'm working on… https://t.co/XxenCIXtDL @newsy789 @cvanw @markdalgleish @fantasai Capsize also allows you to size your text by it's cap height as well as p… https://t.co/yHXL4U4vNPUntil this comes we’ll have to use Capsize by @michaeltaranto and Seek https://t.co/JvMLOo16Wj https://t.co/K5Xp9AYqy8
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨
7/22
2020
@danielcroe @markdalgleish Following.I know I'm biased here, but Capsize really is a revelation for web typography and layout. When using font-size, I… https://t.co/HBGpd0RRTH
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @bfgeek @GoogleChromeDev @webkit Done, thanks! Issue: https://t.co/RmpMfYtXpa Codepen: https://t.co/Jh9WFFwg1A
7/21
2020
@iamvdo Nonsense! I'm just sorry it took me so long to put it to use. I've had your post bookmarked since you wrote… https://t.co/aegegVmfXyA massive thank you to @iamvdo for sharing the his work de-constructing how a browser renders its line box. Capsize… https://t.co/BhN5pPywxH
7/20
2020
@jamesadams0 @GoogleChromeDev @webkit πŸ•΅οΈβ€β™‚οΈ Its a simple eye test πŸ‘€πŸ”¬ And difference in the font weight too.Discovered that `linear-gradient` in @GoogleChromeDev & @webkit does not support sub pixel step values. This cost m… https://t.co/7QV1ooBPr4Love how BRAID walks you through the steps of composing their components together to create a finished piece of UI… https://t.co/qEn7sf7769
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @philnash @dependabot Turn it off and switch to @renovatebot @CaseyLeask 😯 😷 > πŸ§”
7/19
2020
@markdalgleish πŸ™πŸ›Ά Capsize updates πŸš€ Just deployed some major fixes: 1. Better fallbacks for internal font family names. 2. Improve… https://t.co/CRGUaor3Bk @dejanvasic85 Hahah never understood the fascination. Cant stand the noise personally πŸ™‰πŸ€·β€β™‚οΈ.
7/16
2020
Here's a sentence describing what Google's home page should look and here's GPT-3 generating the code for it nearly… https://t.co/CClwX62BKQ
Retweeted by 𝐌𝐒𝐜𝐑𝐚𝐞π₯ π“πšπ«πšπ§π­π¨ @kamal If a font is missing certain data this happens. Planning to improve validation to handle this better. @Kane_rogers I have a very shallow desk at 600, which made it hard to get a lamp to light front on. Had the idea of… https://t.co/gxEtxWc1VvJust fixed a silly bug in the capsize site. If you selected a ttf or otf from a url or file, the metrics would load… https://t.co/eszM7AwwcM @rem @JonasKuske Thanks for that, found a bug in how i was handling webfont formats. Fix is live now. Slight quirk… https://t.co/Yqj2upGuKW @ksav95991968 @AtilaFassina https://t.co/96nnuTMCOd @sunpazed Sitting next to the window behind my shoulder cast me into the shadows. Hopefully this setup brings out my eyes πŸ’‘ πŸ‘€πŸ’‘πŸ˜‚
7/15
2020

0