Kitty Giraudel
@KittyGiraudel
Followers
15,754
Following
546
Media
670
Statuses
15,347
Non-binary trans accessibility & diversity advocate, frontend developer, author. Real life cat. She/her. 🏳️⚧️
Berlin
Joined April 2012
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
#เมเจอร์xหลิงจังจอมแก่น
• 445045 Tweets
LINGLING MAJOR FANDOM
• 427698 Tweets
SAY SOMETHING
• 129764 Tweets
焼肉の日
• 89601 Tweets
#ไม่พูดหน่อยเหรอMV
• 80087 Tweets
東海道新幹線
• 67855 Tweets
AI PORTRAIT X ML
• 58557 Tweets
安全第一
• 42479 Tweets
線状降水帯
• 40695 Tweets
VLOG 11 WITH BUILD
• 33696 Tweets
アニサマ
• 31852 Tweets
Edeka
• 31678 Tweets
#انقاذ_النصر_مطلب_عشاقه
• 30178 Tweets
#素のまんま
• 27881 Tweets
土砂降り
• 23699 Tweets
KND x PHUWIN
• 19707 Tweets
#THE夜会
• 19333 Tweets
コロンブス
• 12813 Tweets
Jabar
• 11530 Tweets
Pinned Tweet
a11y-dialog v8.0.0 is finally out! 🔥🎉
It would never have happened without
@codeability
who did an absolutely outstanding work seeing it through. Huge props to them!
0
5
33
GitHub *finally* moved the + and - symbols from diffs to CSS pseudo-elements, making it possible to copy code directly from a diff without having to clean it up. That is long overdue and fantastic. ✨
65
3K
13K
Sharing a link with someone in 2018:
😀 Open web page
🙂 Close cookie banner
😐 Decline desktop notifications
😕 Dismiss newsletter popup
🙁 Remove UTM parameters from URL
😶 Finally send link
51
1K
3K
I just remembered Slack supports sed-like syntax to edit a message. 🤯
For instance: /s/great/amazing/ would replace the word “great” by “amazing” in the last message. 🔥
27
178
1K
Dear designers of the web, no matter how cool light grey on white looks, you can’t do that.
Thank you,
—Anyone without perfect vision
19
463
1K
I’m just discovering this quite incredible resource to learn about algorithms: .
2
310
997
Given how straight-forward HTML is, it's quite surprising how many front-end developers don't know its fundamentals.
Don't skip on learning HTML if you work on web UIs, folks! It's the core of what we do, it's important. 🌟
31
294
959
I have terrible eyesight, so I use Twitter’s largest font size (from their Display settings) and I can tell you no one is testing the interface with that setting.
37
137
941
In the series “interfaces that are never tested with a zoom above 100%”, may I present GitHub.
Hire people like me: incredibly cute ✨ but with terrible eyesight. I use most sites at 150%+ zoom and I stumble upon things like this daily.
32
89
910
So, it turns out that it’s a feature from GitHub Refined from
@sindresorhus
, not from GitHub itself. My apologies for the short-lived happiness.
That being said, if you didn’t give Refined GitHub a try, now is a good time! 👌
14
135
820
This is why we can’t have nice things, because of dipshit ideas like this. What a dreadful move, contributing to polluting an increasingly unreliable internet. This is something to be fucking ashamed of, not celebrated.
29
92
668
✨ Formally introducing “Selectors Explained” now that it works okay.
🤯 A small utility to demystify CSS selectors, explaining them in plain English.
🔗
14
240
654
Absolutely horrendous idea which would be a significant accessibility drawback. Don’t do that, ever. Downright terrible—it’s not a CSS tip, it’s a CSS mistake.
💚CSS Tip💚
🛠 Now you can not select the text of the website.
👀👇
175
194
1K
31
82
645
a11yphant is such a good resource to learn the basics of HTML accessibility by doing ✨
6
99
525
I’ve turned 30 recently (🤯) so I thought I’d do 30 tweets on things I’ve learnt in 10+ years of being a frontend engineer and can recommend (to become a 30x dev or something 😹). YMMV as they say. ✨🧵
18
120
513
My hot take is that one specific framework did not “solve CSS” and that you just sucked at it to begin with.
16
43
433
Prettier is a seriously underrated piece of software. We set it up 9 months ago at N26 and I still think it’s one of the best technical decisions we ever made.
Code got more consistent.
Reviews got more helpful.
Discussions got more interesting.
Absolutely worth it.
11
94
442
🔥 A small JavaScript tip I like to determine whether an array contains duplicate entries.
It relies on the fact that `indexOf(..)` returns the index of the first occurrence. If it returns a different value than the current index, it means the entry exists earlier in the array.
20
49
426
If there is one thing I have learnt in my job, it’s that simple is always better than clever. Over-engineering is a plague.
19
238
409
Nice trick to filter out falsy values from an array:
array.filter(Boolean)
11
168
380
Chrome 59 now makes it possible to take full-page screenshots from the DevTools! ✨
8
198
362
The amount of allegedly *senior* front-end developers not having the first clue about HTML semantics is too damn high.
17
59
338
Frontend development is an interesting look at how we, as a group, can unlearn things.
We now have a generation of web developers discovering SSR like it's a brand new concept.
We almost forgot what it meant to properly build for the web in just about a decade.
13
77
324
📢 Today, my team launched the new N26 web-app after working on it for 6 months.
✨ I’m extremely proud of the care we put in the product and its accessibility.
💖 I hope y’all enjoy it!
20
26
300
The tech industry is a shitshow of credential checking. No one is asking their plumber to tell them about pipes they've fixed or famous buildings they've worked in. That level of gatekeeping and pedantry is mind-blowing when you think about it.
18
43
291
Reminder, the things to know to do front-end correctly are:
- HTML
- CSS
- JavaScript
Those are the fundamentals. Everything else is extra.
16
160
282
GitHub finally added an automatic way to generate release notes based on all merged pull-requests between two tags. Fab! ⭐️
5
46
282
Something worth putting in a custom user stylesheet:
video[autoplay]:not([muted]) {
display: none;
}
3
171
248
@keithkurson
@FischaelaMeer
I also dislike this so much. This is how I ended up refactoring it back at N26.
11
6
235
Reminder: add a tiny delay (~100ms) to your transitions triggered on hover to avoid killing performance during scroll.
7
100
223
A French TV channel using CSS as an illustration for cyber-terrorism: . CSS is scary. And dangerous. Hide your kids.
39
728
219
Why I despise coding challenges and take home assignments as part of the engineering hiring process: a (rather long) thread. 🧵
6
48
214
What if I told you you can write CSS the way you want without feeling the need to bad-mouth others' ways of doing things.
12
19
219
Unpopular opinion: I like going to the office and the idea of working remotely from my own place all week long is not attractive one bit to me.
29
23
210
My hot take is that you are most likely not “bad at tech interviews.” Our industry just failed you with inadequate processes and unrealistic expectations.
4
20
214
if you asked me
i'd say
the new macbook pro is
top notch
15
27
212
A good reminder of what should be expected from an accessible UI component.
4
102
198
GitHub now has an automated table of contents for README files, and it’s all kinds of great! ✨🔥
3
36
203
The best life hack
@franklyandrea
ever gave me is to use “and” in place of “but” when possible.
- “That’s cool, *and* could we…?”
- “Alright. *And* how about…?”
Often changes the tone of the conversation. It’s building on it, not fighting it.
6
50
198
Something slightly nerdy about the N26 webapp is the error recovery system. 🤓
If we catch a JavaScript error, we immediately reload the page without the bundles, letting the user use the no-JS version.
15
43
200
A thread of questions that can be used to assess the maturity of engineering teams (in no particular order). ✨
As always, your mileage may vary.
2
42
193
No license page will ever get any better than CSS-Tricks’: .
1
63
198
This has to be one of the best Flexbox guides out there, by
@cwrightdesign
:
http://t.co/uDfBLAwozj.
3
69
194
🔥 I am just learning about the `auto` keyword for the `aspect-ratio` property thanks to
@jaffathecake
’s great article!
2
29
185
✨ Reposting this because the URL has changed since last year when I first released it.
🤯 Selectors Explained: A small utility to demystify (most) CSS selectors, explaining them in plain English.
🔗
3
49
187
Dear designers of the web, checkboxes (multiple) are squared, radio buttons (unique) are round.
Thank you,
-Anyone using the web
8
61
188
Stop using variations of the MAGA slogan in tech talks, articles and casual conversations about tech. Stop normalising that highly inappropriate crap. Find a better wordplay than that.
7
32
187
Reminder that $(..) and $$(..) are aliases for document.querySelector(..) and document.querySelectorAll(..) respectively in most developer tools (Chrome, Firefox, Safari…).
7
64
186
I’m only noticing
@SaraSoueidan
’s <hr> being styled as birds on a wire and it‘s so pure I just can’t. 💖😍
5
9
189
Alright, let’s do this! 1 ❤️ = 1 opinion/comment/tip on web accessibility (to a certain extent, I can’t do thousands 😅).
#a11y
5
40
181
A European version of jQuery where we use € everywhere.
8
85
184
✨ Just found back a Git cheatsheet I built a while back: .
3
74
184
Latest version of my “leave me alone, VSC” configuration. Quick thread about each setting to explain what it does (when I even know) and why I don’t use it. As usual, YMMV. ✨
11
26
182
Wanna know my secret for short and reusable functions? Huge font size. My editor barely shows 20 lines.
7
58
180
How not to do open-source. When someone comes with a suggestion, take the time. Even if you think it’s not worth it. Take the time.
20
78
177
⤵️ I’ve been reviewing a lot of resumes recently, so here is a thread of advice I’d like to give to those of you who are currently applying here and there for tech positions.
☝️ Take it with a pinch of salt as some comments might be a little subjective.
5
50
173
Today is
#GAAD
, Global Accessibility Awareness Day!
I thought I would do a short thread on things you can do and check to ensure your components and interfaces are accessible (with additional links). 🧵✨
3
82
169
Biden signing executive orders like:
git reset --hard HEAD@{4 years ago}
3
31
160
What a lovely idea! Empathy Prompts: tiny challenges to consider when building things for the web.
3
98
159
This is your friendly reminder that semantic versioning starts at 0.1.0, not 0.0.1. You can’t start with a bug fix.
16
126
158
SPA were a mistake, we went down the wrong path, burn it all and start over.
13
9
158
💧 Small things you can do to improve
#a11y
:
- Set up aXe in dev (or relevant wrapper, e.g. react-axe).
- Set up eslint-plugin-jsx-a11y (if using JSX).
- Set up pa11y for automated testing.
- Use a11y.css every now and then.
- Share knowledge with your coworkers. ✨
4
45
151
For all of you who feel guilty doing whatever instead of coding in your free time, it's okay. You don't have to code all the time. 🌱
For all of you who feel guilty coding instead of doing whatever in your free time, it's okay. You're allowed to enjoy coding. ✨
3
44
154
Things that are not required to use React:
- server-side rendering
- Redux
- Babel
- ES2015+
- Node.js
- CSS in JS
- any boilerplate
8
67
153
📝 New blog post: “How I Use Git” — .
🌱 A little bit personal, but I hope it gives some of you a different perspective on Git.
2
40
152
One angle we don’t see too much about accessibility is how interesting it also makes frontend development? I only learnt about a11y years into the job (boooo!), and honestly it was a breath of fresh air to design and build accessible UI. It just made work more fulfilling to me.✨
6
20
151
I am reminded of this great illustration by
@henrikkniberg
about communication misalignment between software teams. ✨
3
36
141
Here is a regex to match a regex: /\/((?![*+?])(?:[^\r\n\[/\\]|\\.|\[(?:[^\r\n\]\\]|\\.)*\])+)\/((?:g(?:im?|m)?|i(?:gm?|m)?|m(?:gi?|i)?)?)/
4
96
138
@addyosmani
This property has an impact on screen-readers though as they end up not being able to discover the content until effectively rendered (which might be too late), so it's important not to use that on landmarks or elements containing landmarks.
2
13
137
Chrome DevTools tip: press “H” to quickly hide/show an element.
3
80
135
Definitely the most clever CSS hack I’ve seen in a while: . CSS-only scroll indicator by
@MikeRiethmuller
.
2
63
136
@JUNlPER
evergreen tweet
Oh you're upset about a thing? Well, would you be mad if the situation were different in a way I designed in my head just for this argument?
36
5K
19K
1
0
124
Choosing developer convenience over usability is like making wheels squared because they would be easier to stock.
9
70
126
webpack 3
webpack 3.1
webpack 95
webpack 98
webpack 2000
webpack ME
webpack XP
webpack vista
webpack 7
webpack 8
webpack 8.1
webpack 10
5
17
119
I got tired of trying to find branch names, so I made a thing with the random-word-cli package from
@sindresorhus
:
[aliases]
nb = "!sh -c \"git checkout -b $(random-word)-$(random-word) \" -"
$ git nb
Switched to a new branch 'pantsuit-undraping'
👌🔥
6
23
123
My new favorite JS API has to be Intl.DisplayNames, which helps getting and translating names of languages, regions (countries), currencies and more. Absolute gold, and widely supported. 🔥
3
21
121
“remote work is bad for your career” you know what else is bad for your career? ill-equipped mid-level managers with the emotional capacity of an oyster
3
10
119
This is a highly misguided and toxic way of hiring, in my opinion. Not everybody can or want to contribute to open source. Also technical skills are overrated. Most problems encountered are human or organisational issues, not technical complexity.
5
19
118
Another trash take on what’s needed to be a web developer. 🤷♀️
If you’re coding for the web, you’re a web developer. That’s about it, really.
9
11
117
React tip to avoid crowding your render functions with conditionals and ternaries: a Visibility component. Naming is flexible of course. ⭐️
11
26
116
Spotify not allowing someone to update their username while still showing it on every screen is harmful design. I don’t want to see my dead name every time I’m in the mood to listen to some shit.
5
6
117
🔥 To know which element receives the focus at any time, you can set up a live expression in the devtools to watch for `document.activeElement`.
Not a new trick, but still incredibly useful. ✨
3
13
113
Make underlines skip descenders with the ‘text-decoration-skip’ CSS property (and the specifications mess around it). Lovely way to make underlined links easier to read! ✨
4
9
113
GitHub finally implemented multi-line comments on pull-requests and they’re pretty great. ✨
2
15
108
Kind reminder that your Diversity & Inclusion initiatives are incomplete or skewed if all they intend to do is hiring more white women.
Hire people of color.
Hire disabled and neurodivergent people.
Hire trans and non-binary people.
And set up structures to retain them. 👏
1
30
107
🔥 Quick JS tip: You can empty an array by setting its length to 0.
4
20
108
Deleting local merged
#git
branches:
[alias]
cleanup = branch --merged | grep -v "\*" | xargs -n 1 git branch -d
Hat tip
@stevenharman
!
6
26
108