Sara Soueidan
@SaraSoueidan
Followers
119K
Following
40K
Media
2K
Statuses
73K
Web user interface engineer & educator โข creator of the Practical Accessibility course: https://t.co/P1LXpp7Uak โข '@sarasoueidan.com' on Bluesky ๐ฆ
Lebanon โ ูุจูุงู ๐ฑ๐ง
Joined July 2012
๐งต (Re)introducing the Practical Accessibility course:. โจ A comprehensive, self-paced, get-right-down-to-it video course designed to demystify web accessibility and equip you with the knowledge you need to create more accessible websites & apps today. โคต๏ธ
11
63
255
Dear men,. This is how you greet a veiled Muslim woman (a Hijabi). Hand on your chest, not offering to shake hers.๐๐ผ
893
19K
21K
84
1K
10K
How it started vs. How it's going :: Home office edition. 2011 vs. 2021. ๐พ First steps into Web dev vs. ๐ Award-winning engineer & speaker. Always remember how you started. โค๏ธ Looking at these, Iโm feeling a little too emotional & blessed/grateful right now. ๐๐๐ป
129
401
5K
FRIENDS!โจ I'm excited to announce I'm working on an #a11y video course!๐ฅณ. ๐ Practical Accessibility: a get-right-down-to-it course for designers & developers who want to start creating more accessible digital products today. ๐ Sign Up for updates ๐
221
884
5K
If someone says front-end development is easy then I will 100% assume that they don't know/do front-end development well.
103
440
4K
Itโs been almost 5 years since I gave my first talk (at @CSSConf ๐) in 2014. 40 conferences over 5 years. Iโm eternally grateful for each and every one of them. ุงูุญู
ุฏ ููู ๐๐ป๐ (and yes I do collect the badges; and theyโve gotten quite heavy โบ๏ธ)
92
135
3K
CSS is beautiful. CSS is powerful. Just the way it is. Put the time and effort in and you may "get" CSS _at least enough_ to not hate on it. Sincerely, .A front-of-the-front-end developer.
98
276
3K
Hey @Twitter @TwitterDev please add basic markdown support to tweets?. _word_ .*word*.`code` . would make for a great start and can save us a few characters in a tweet. Plus tweets would look nicer formatted like that. Thanks!.
49
388
2K
I literally *never* use carousels on Web sites I visit. Never. Ever. And when Iโm working on a project that requires building one, I feel sorry for the amount of time I need to dedicate for it.
118
280
2K
I *love* working on the #UI side of the Web. I love that itโs the perfect sweet spot between design and engineering. I love that this sweet spot keeps both parts of my brain stimulated and inspired. I love that itโs what connects my work to the real ppl who will use it. I ๐ UI.
30
288
2K
I'm old-fashioned. I like my CSS seperated from my HTML; my HTML seperated from my JS; my JS separated from my CSS. I like my JS layer only added when I need it, usually progressively. CSS added progressively on top of semantic markup. I don't fight the C in CSS, I embrace it.
82
255
2K
I've been working with CSS for 7 years, authored a CSS reference, wrote countless articles on CSS. and I just googled the CSS `box-shadow` property syntax because I forgot which comes first: blur or spread.
76
211
2K
"Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.". โ.These avatars are anything but boring! ๐
18
284
2K
Fun Fact: it's been almost six years since I started working on the Web and I still suck at git. I get by, but deep down I am secretly hiding the feelings of incompetence and terror I have whenever I use it. ๐
. And I "secretly" hope I'm not alone! ๐.
182
109
2K
Flexbox is not โThe old layout techniqueโ that is now โreplaced by Gridโ & used only as Grid fallback. Components ๐๐ป Flexbox.Pages ๐๐ป Grid.
37
635
2K
This incredibly talented 7.5-year-old girl created a single-div CSS-only Panda and is sharing how she did it with the rest of the world ๐. My timeline's going to get even brighter from today on ๐.
Day #79-82 #100DaysOfCode. WOW. I made a Panda in CSS using #singlediv ๐๐. I had to divide the video in 2 parts cause it was too long for twitter. I upload part 2 in another tweet. tnx 4๐.Pen Link๐. #CodeNewbie #codeNewbies #GirslWhoCode #KidsCanCode
27
297
2K
Repeat after me:. I do not need to be an expert to speak at conferences. I do not need to be an expert to speak at conferences. I do not nee.
37
370
1K
This is a whole other level of Twitter. I am literally speechless.
173
125
1K
@TwitterBusiness This is almost what over-engineering looks like. Or. over-designing? Over-thinking? Over-complicating? . Whatever. You get the idea.
31
11
1K
Create a blog and write for youself, not for fame or popularity. Good, relevant content gets noticed and shared eventually (and btw thereโs no shame in promoting ur work whenever u can), but plz donโt refrain from blogging just cz u think ur content wonโt become famous overnight.
41
299
1K
@pjozefak I've worked remote for years before I could even afford a good setup. That's not a pro tip that's just an unpopular personal opinion. And a privileged one, might I say.
5
19
1K
Itโs rare to find great UX in visa application forms, but @govukโs forms are really nice. My favorite pattern is the one where, instead of asking you to retype your email, they display text telling you that an email will be sent to the address you just entered to recheck it.
31
197
1K
The more I build accessible UI elements the more I witness how friggin powerful semantic HTML is. Sure, I already knew how important it is but seriously accessibility is one of those things that make it SHINE!. Writing proper HTML+CSS certainly is a very powerful job of its own.
21
217
1K
CSS-only interactive widgets are, most of the times, inaccessible hacks. JavaScript is *required* to build certain components accessibly. Please donโt advocate CSS-only alternatives when JS is needed for accessible state/functionality. The Web has enough inaccessible UIs as is.
15
246
1K
Writing "plain #CSS" instead of using some framework is not "idealist". It's a natural & practical approach to building Web sites *that just works* for many. If *you* NEED to use a framework knock urself out but don't patronize those who can do their work without one. OkThnxBye.
35
141
1K
Whaaat! Today I learned that the <form> method attribute can take a "dialog" value which closes a <dialog> when the submit button is clicked:. <dialog open>. <form method="dialog">. <button>Confirm</button>. </form>.</dialog> . #HTML5.
22
239
1K
I hate programming.I hate programming.I hate programming.It works!.I love programming!. Sticker acquired. ๐โจ
23
338
1K
Idea: reality show titled "Keeping up with the JavaScripts". Featuring lots of developers having identity crisis, flipping tables, etc.
29
310
1K
Thereโs a special place in hell for services that require log in to unsubscribe from their newsletter.
35
291
1K
Dear designers,. Please STOP. HIJACKING. MY. SCROLL!. Thank you.
36
103
1K
If you have a blog: please provide an RSS feed if you can. If you provide an RSS feed: please provide the whole post to read (in the RSS reader) not just a short excerpt. If you write but donโt have a blog: please start one, provide an RSS feed, and keep sharing what you love!.
30
259
1K
๐โโ๏ธ Quick #CSS tip: . The `outline-offset` property accepts negative values, which can be useful for when you want to show an outline & avoid it cutting off or overlapping adjacent elements, such as focusable table (or grid) cells and rows.
21
137
1K
How many โexperiencedโ devs out there find themselves learning the absolute basics every now & then that everyone else seems to know abt?. ๐.
119
172
970
โProgrammers imagine the most ridiculous ways to enter a phone number into a formโ. One of the best things Iโve seen in a while ๐ some of these ideas are amazing ๐. โ.
28
380
984
Iโm going to actively start using @firefox a lot more in my work from now on. The devtools alone are worth it, let alone the bigger cause.
59
114
981
Grid & Flexbox are a great duo. I reach for Flexbox when I need more controlled *space distribution*. I find myself reaching for Grid for 98% of my layouts โ page layouts, component layouts, two-dimensional layouts, one-dimensional layouts. No rigid rules. Use what works. ๐ฏ.
27
76
988
100% This. This is why I donโt charge hourly.
If I do a job in 30 minutes itโs because I spent 10 years learning how to do that in 30 minutes. You owe me for the years, not the minutes.
15
112
937
So, people are arguing again about whether or not writing CSS and HTML is โprogrammingโ, instead of spending this precious time actually learning how to write these two languages properly and accessibly?. Right. I really donโt miss Twitter at all.
20
107
911
When you have too many great design ideas and you canโt just choose one of them @lynnandtonic โs Web site is goals and I am both jealous and super inspired right now ๐๐ #RWD
21
230
915
This is why I never wanna have to โupgradeโ to the newer Macbook model. I also get to use the HDMI port for presenting without any needed adapters. Why would Apple take this convenience away from their pro users for aesthetic reasons? #UX
105
67
915
Using #SVG as image placeholders โ more image loading techniques:. I LOVE this! Iโve been mentioning this kinda stuff in my talks lately but this article is taking it to the next level with all these techniques. Lovely examples, too!๐.
4
270
873
Unpopular <opinion>: I prefer the JS syntax prior to ES6. Fat arrows? Not a fan. I still write `function()` and think it is way more. Minimal syntax does not automatically lead to more readable code. But hey this is just my </opinion> . *ducks*.
131
64
894
It's sad how we've come to a time when loads of unnecessary frameworks has become "cool" and is normal yet the mere mention of jQuery almost causes shame. I saw a video of someone apologizing for saying jQuery is nice! How did we come to this?.
74
81
877
Iโve been wanting to add a bird-y touch to my Website for a long time. So, my <hr> elements donโt look like your typical horizontal rules anymore ๐ฆ . (still WIP, will go live this week)
43
29
859
This sticker! ๐ Does anybody know where I could get one from? ๐
12
315
830
Stop re-inventing the wheel and just use <button> to create a button. If you're worried about default button styles, use `all: unset`. This one line of #CSS will strip all default browser styles so you can apply your own.
Last night I was watching a conference talk called how to make accessible react components and the first piece of advice was to use aria roles like this <div role=button>click</div> . ๐ญ. Please donโt do this.
22
181
833
I think designers underestimate just how good, usable, inclusive, & sometimes even refreshingly delightful "boring" design is. - Visible labels & instructions. - Link underlines!.- Good text contrast. - Lists!.- Links! (to separate pages vs. modal dialogs). Usable > aesthetic.
29
178
803
A good collection of native HTML and CSS replacements to otherwise common JavaScript-implemented features/behavior:
12
166
832
- understand the box model.- the cascade is your friend!.- nest as little as possible.- use one of the available methodologies (ITCSS, BEM, etc); ur future self will thank you.- document hacks.- donโt be afraid to use shiny new features as enhancement! Don't waitfor cross-browser.
OK, let's start with a simple one. Please tell me your favourite tip or trick that you give to beginning CSS programmers.
19
154
828
I just installed Fig, and I like it: . It โadds VSCode-style autocomplete to your existing Terminal.โ It can do a lot, and thereโs more exciting stuff on the roadmap. I think itโs going to become an indispensable tool in my workflow.
18
117
844
I canโt count the number of times Iโve ditched an idea for a side project because I thought it wasnโt worthy, only to see someone else do it after a few months and find out what a great idea it is/was. One of my personal goals is to stop underestimating ideas & creating more.
20
87
817
Never used any frameworks, never will. Writing CSS from scratch is one of the best pleasures of building front-ends in my opinion. โจ
Do you use any framework when writing CSS/JS today? If yes, which one? Bootstrap, Foundation, or another one?.
86
150
821
If you write technical articles, please add a publish date to the article. Too many articles contain outdated information & I see people being misinformed because of that. If you write technicla articles, PLEASE INCLUDE A PUBLISH DATE. Thank you!.
30
185
801
Hereโs a recording of how VoiceOver on Firefox announces the credit card number field in the Paddle checkout form (audio on to listen) =)
@kilianvalkhof @PaddleHQ Using placeholder without a label on the credit card field for example has the screen reader say "kisses kisses kisses kisses" (cz the placeholder is xxxx-xxxx-xxxx-xxxx) instead of "credit card number" ๐
.
32
191
778
Iโm in love with everything about the Inter typeface including the gorgeous minimal web site, the detailed documentation, available font styles, font file options (variable font included), and everything in between. ๐๐ป๐๐ป @rsms.
19
117
804
The South African government actually created its own browser just so that their Flash web forms would work again, instead of converting those forms to simple web-based HTML forms. ๐คฏ.
77
258
792
While `aria-label` might be the most popular way to add an accessible label to buttons, it is certainly not the only way. โ On the blog, I wrote about the different ways you can make your icon-only buttons accessible:. โจ Accessible Icon Buttons โจ#a11y.
20
223
783
#TIL that removing list bullets with `list-style: none` removes <ul/ol> semantics in VoiceOver. Adding zero-width space fixes this; so this is yet another thing to add to our base #CSS files. #a11y . via @scottohara @rogerjohansson.
26
236
760
Mind blown: Using viewport units to create a #CSS-only scroll indicator! ๐ฑ. by @MikeRiethmuller. This is BRILLIANT!๐ฅ.
13
304
756
[Thread] I don't normally quote-tweet like this but I am so unbelievable sick and tired of people devaluing front-end development and treating it like it's a premature thing that anyone can do if they are "advanced". 1/n.
@beaulne 100% there should be no such thing as a front end developer outside of super junior contexts. All developers need to think across all the layers that they build on to be effective.
30
129
750
It's been years since the last time I used jQuery. I'm currently using it to quickly prototype ideas for an MVP. Seriously, it is still easily one of the best tools ever made for the Web. I miss its convenience! ๐.
56
38
734
Monday trivia:. In Arabic, you don't just say "Goodnight". ๐. You say "ุชุตุจุญูู ุนูู ุฎูุฑ" which translates to: "May you wake up to good news". ๐.
10
50
712
Accurate ๐.
11
126
719
Grateful for each and every one of you who's checked in on me and my family and sent good thoughts, prayers, and well wishes. ๐๐ป I feel lucky to be a part of this community. Thank you. ๐ค.
41
10
698
This is so accurate it almost hurts just looking at it ๐
.
8
102
688
While we're at it: if you don't have a Web site of your own and you've been blogging and creating content on third-party platforms, now might be a good time to reconsider creating one and owning your own little corner of the internet. ๐.
14
166
665
Iโm working on a Web site that has an RTL version. This is where #CSS logical properties truly shine as they make styling both LTR & RTL possible using the same declarations. Fewer overrides & overall less code.๐๐ป. Demo: More info:
21
118
711
โGoogle Fonts resources will be redownloaded for every website, regardless it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore.โ. ๐๐ป Learned this a long time ago from @zachleat โs work.
12
175
701
"Compared to other web development areas, front end is easy". me:
29
117
693
*wishes not all tools were React-dependent*. Some dude who apparently relates to React on a very personal level: NO YOUโRE WRONG STOP TRYING TO BE A VICTIM AND EMBRACE THE NEW WEB ORDER REACT IS THE ONLY GOOD THING ON THE WEB ACCEPT IT OR GO HOME.
58
52
676
Did u know that some browsers make โan educated guessโ to determine if a <table> is a data table or a layout table? That affects whether or not it is exposed to #a11y APIs. โBrowsers look at the number of rows, columns & if the rows alternate in colorโ!!.
23
221
670
That feeling when you visit a Web site and it looks just a little too similar to yours. You inspect the code and oh to your surprise you find your exact HTML (including class names) copy-pasted. I should be flattered, right? ๐
.
58
12
667
How often do we get to describe a UI/UX as being cute?! Not often enough. ๐ . Delightful ๐.
7
95
668
If you're asked to speak at a conference, the organizers *must* cover *at least* your travel, accommodation & transportation costs. Period.
35
137
638
@TwitterSupport How about you hear us when we say we don't want our default timelime to be the "For You" timeline? We'd appreciate that much more than moving some numbers from to right.
9
27
632
If you're overthinking, write. If you're underthinking, read.
19
104
629
Did u know that #SVG comes with a conditional element allowing u to set a fallback for non-supporting browsers? โฌ๏ธ from SVG workshop slides.
21
245
617
My bird died. Please don't ask anything about it. I hate this year.
174
4
606