Are you over 18 and want to see adult content?
More Annotations
![A complete backup of manojitaliya.com](https://www.archivebay.com/archive/e881d872-b2f2-4ccc-a5b2-0b2b3bb55576.png)
A complete backup of manojitaliya.com
Are you over 18 and want to see adult content?
![A complete backup of provinciaseguros.com.ar](https://www.archivebay.com/archive/e487d1f4-f80d-4e9f-9c0b-a1a878e02f3a.png)
A complete backup of provinciaseguros.com.ar
Are you over 18 and want to see adult content?
![A complete backup of theliterarynet.com](https://www.archivebay.com/archive/48b6e02b-19ac-4023-bfae-654a88a9b481.png)
A complete backup of theliterarynet.com
Are you over 18 and want to see adult content?
![A complete backup of eventcinemas.co.nz](https://www.archivebay.com/archive/7c35914e-b0b4-41d4-a8a1-2d81fc6a2596.png)
A complete backup of eventcinemas.co.nz
Are you over 18 and want to see adult content?
![A complete backup of democratieparticipative.biz](https://www.archivebay.com/archive/600d192b-c2ed-4768-ab08-b63fb341e3b1.png)
A complete backup of democratieparticipative.biz
Are you over 18 and want to see adult content?
![A complete backup of rboconcursos.com.br](https://www.archivebay.com/archive/49db4e87-abc7-4bc1-9328-f89fa3cef329.png)
A complete backup of rboconcursos.com.br
Are you over 18 and want to see adult content?
![A complete backup of forexstrategico.com](https://www.archivebay.com/archive/9355ca68-30a7-4a4f-9d5f-ee986fa1d6d3.png)
A complete backup of forexstrategico.com
Are you over 18 and want to see adult content?
Favourite Annotations
![A complete backup of sleephappens.com](https://www.archivebay.com/archive2/3d282352-4d17-4620-aa46-78419947f502.png)
A complete backup of sleephappens.com
Are you over 18 and want to see adult content?
![A complete backup of headstogether.org.uk](https://www.archivebay.com/archive2/96b95b49-fdc0-4256-927c-ab8c4bb1c70c.png)
A complete backup of headstogether.org.uk
Are you over 18 and want to see adult content?
![A complete backup of islandpropertiesre.com](https://www.archivebay.com/archive2/7e1d1438-c272-413c-aba5-f8fda71687c9.png)
A complete backup of islandpropertiesre.com
Are you over 18 and want to see adult content?
![A complete backup of football-match24.com](https://www.archivebay.com/archive2/6dd1656e-f808-4d1b-aeed-bb758b2f1430.png)
A complete backup of football-match24.com
Are you over 18 and want to see adult content?
Text
KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLEKITTY GIRAUDEL
Kitty Giraudel. kitty.giraudel@gmail.com · /in/KittyGiraudel. I am a non-binary frontend developer with about a decade of experience and a strong focus on web accessibility and workplace safety. Over the last few years, I have also learnt a lot about web security as well as building a healthy and productive team. SASS GUIDELINES IMPROVEMENTS CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLEKITTY GIRAUDEL
Kitty Giraudel. kitty.giraudel@gmail.com · /in/KittyGiraudel. I am a non-binary frontend developer with about a decade of experience and a strong focus on web accessibility and workplace safety. Over the last few years, I have also learnt a lot about web security as well as building a healthy and productive team. SASS GUIDELINES IMPROVEMENTS CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
KITTY GIRAUDEL
Kitty Giraudel. kitty.giraudel@gmail.com · /in/KittyGiraudel. I am a non-binary frontend developer with about a decade of experience and a strong focus on web accessibility and workplace safety. Over the last few years, I have also learnt a lot about web security as well as building a healthy and productive team.SPEAKING EVENTS
Over the last few years I’ve had the amazing opportunity to be a speaker at some great events. If you would like me to speak at your conference, be sure to get in touch! October 4th, 2018 — Paris, France Paris Web. Video. Slides. May 17th, 2018 — Berlin, Germany A11y Meetup Berlin. Video. Slides. October 26th, 2017 — Split,Croatia
SASS GUIDELINES IMPROVEMENTS Sass Guidelines improvements. April 6th, 2021 · ~5 minutes. I authored the very first version of Sass Guidelines in the first week of 2015, inspired by Harry Robert’s CSS guidelines. It went through 3 additional iterations: version 1.1 in April 2015, version 1.2 barely 6 months later in September 2015 and finally version 1.3 in Janvier2017.
CSS PIE TIMER REVISITED CSS. Here is how I thought about making it work: we use 2 pseudo-elements. One will serve as a mask, and the other will be the rotating one. Start by laying both pseudo-elements on the left side of the container on top of each other, so that the one on top has the color of the background (e.g. white), and the colorful one lies hiddenunderneath.
ACCESSIBLE ICON LINKS Accessible icon links. December 10th, 2020 · ~3 minutes. In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and wellknown.
AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful. CLOSING ON OUTSIDE CLICK Closing on outside click. March 18th, 2021 · ~2 minutes. As part of the navigation on the Gorillas website, we needed a way to close the menu when clicking outside of it or tabbing out of it. I briefly touched on how we do it in the aforementioned article, but we’ve since revisited it and I wanted to write a short note about it. MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. ACCESSIBLE EMOJIS WITH 11TY Fortunately, 11ty allows us to post-process HTML with transforms. They are very handy to, well, transform a template’s output, such as minifying the resulting HTML for instance. Here, we want a transform that will: Find emojis in the HTML, Find the associated English name for these emojis, Wrap them in a span with the proper attributes.KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLE ACCESSIBLE ICON LINKS Accessible icon links. December 10th, 2020 · ~3 minutes. In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and wellknown.
CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.NETFLIX LOGO IN CSS
KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLE ACCESSIBLE ICON LINKS Accessible icon links. December 10th, 2020 · ~3 minutes. In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and wellknown.
CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.NETFLIX LOGO IN CSS
ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
YEARS OF WRITING
Years of writing. Over the last few years, I have spent a lot of time writing. Mostly about tech, but also about some other topics from time to time. If you are looking for something specific, use the search. I also had the great opportunity of having great people writing here, so be sure to check all guest posts. SASS GUIDELINES IMPROVEMENTS Sass Guidelines improvements. April 6th, 2021 · ~5 minutes. I authored the very first version of Sass Guidelines in the first week of 2015, inspired by Harry Robert’s CSS guidelines. It went through 3 additional iterations: version 1.1 in April 2015, version 1.2 barely 6 months later in September 2015 and finally version 1.3 in Janvier2017.
CLOSING ON OUTSIDE CLICK Closing on outside click. March 18th, 2021 · ~2 minutes. As part of the navigation on the Gorillas website, we needed a way to close the menu when clicking outside of it or tabbing out of it. I briefly touched on how we do it in the aforementioned article, but we’ve since revisited it and I wanted to write a short note about it. ACCESSIBLE LINKS AND BUTTONS WITH REACT Accessible links and buttons with React. January 17th, 2020 · ~4 minutes. An age old problem of the web platform when it comes to accessibility has been to confuse links and buttons. A link ( ) leads to somewhere. A button ( ) performs an action. ERROR RECOVERY WITH NEXT March 15th, 2021 · ~4 minutes. Edit March 16th, 2021: Thanks to Maximilian Fellner’s proof of concept, I came up with a way cleaner solution than this original hack. See the added section for the clean solution. Almost 3 years ago, I wrote about recovering from runtime JavaScript errors thanks to a carefully crafted server-side rendering AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful..SR-ONLY {}
The .sr-only class is a utility class aiming at visually hiding the element while keeping it accessible to assistive technologies such as screen-readers. It relies on a carefully designed combination of declarations for maximum support, and !important bangs to make sure to override any more specific CSS. .sr-only {. border: 0 !important; STYLING REACT COMPONENTS IN SASS React components can be styled in Sass in an efficient, flexible, and maintainable way by using a proper organizational structure, such as SMACSS and the 7-1 pattern. If you know Sass, there’s no new libraries to learn, and no extra dependencies besides React and Sass. UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic.KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLE ACCESSIBLE ICON LINKS Accessible icon links. December 10th, 2020 · ~3 minutes. In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and wellknown.
CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.NETFLIX LOGO IN CSS
KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. AN ACCESSIBLE TOGGLE ACCESSIBLE ICON LINKS Accessible icon links. December 10th, 2020 · ~3 minutes. In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and wellknown.
CSS PIE TIMER REVISITED CSS Pie Timer Revisited. April 11th, 2021 · ~3 minutes. Almost 9 years ago, I wrote about making a pure CSS pie timer on CSS-Tricks. It’s something I struggled with and was very proud of solving at the time and I’m glad Chris let me write about it on his site. HIDING CONTENT RESPONSIBLY I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers.I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries.. In this article, I want to discuss all the ways to hide something, be it through ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.NETFLIX LOGO IN CSS
ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
YEARS OF WRITING
Years of writing. Over the last few years, I have spent a lot of time writing. Mostly about tech, but also about some other topics from time to time. If you are looking for something specific, use the search. I also had the great opportunity of having great people writing here, so be sure to check all guest posts. SASS GUIDELINES IMPROVEMENTS Sass Guidelines improvements. April 6th, 2021 · ~5 minutes. I authored the very first version of Sass Guidelines in the first week of 2015, inspired by Harry Robert’s CSS guidelines. It went through 3 additional iterations: version 1.1 in April 2015, version 1.2 barely 6 months later in September 2015 and finally version 1.3 in Janvier2017.
CLOSING ON OUTSIDE CLICK Closing on outside click. March 18th, 2021 · ~2 minutes. As part of the navigation on the Gorillas website, we needed a way to close the menu when clicking outside of it or tabbing out of it. I briefly touched on how we do it in the aforementioned article, but we’ve since revisited it and I wanted to write a short note about it. ACCESSIBLE LINKS AND BUTTONS WITH REACT Accessible links and buttons with React. January 17th, 2020 · ~4 minutes. An age old problem of the web platform when it comes to accessibility has been to confuse links and buttons. A link ( ) leads to somewhere. A button ( ) performs an action. ERROR RECOVERY WITH NEXT March 15th, 2021 · ~4 minutes. Edit March 16th, 2021: Thanks to Maximilian Fellner’s proof of concept, I came up with a way cleaner solution than this original hack. See the added section for the clean solution. Almost 3 years ago, I wrote about recovering from runtime JavaScript errors thanks to a carefully crafted server-side rendering AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful..SR-ONLY {}
The .sr-only class is a utility class aiming at visually hiding the element while keeping it accessible to assistive technologies such as screen-readers. It relies on a carefully designed combination of declarations for maximum support, and !important bangs to make sure to override any more specific CSS. .sr-only {. border: 0 !important; STYLING REACT COMPONENTS IN SASS React components can be styled in Sass in an efficient, flexible, and maintainable way by using a proper organizational structure, such as SMACSS and the 7-1 pattern. If you know Sass, there’s no new libraries to learn, and no extra dependencies besides React and Sass. UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic.KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. OPEN-SOURCE PROJECTS AN ACCESSIBLE TOGGLE ACCESSIBLE LINKS AND BUTTONS WITH REACT Accessible links and buttons with React. January 17th, 2020 · ~4 minutes. An age old problem of the web platform when it comes to accessibility has been to confuse links and buttons. A link ( ) leads to somewhere. A button ( ) performs an action. ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. OPEN-SOURCE PROJECTS AN ACCESSIBLE TOGGLE ACCESSIBLE LINKS AND BUTTONS WITH REACT Accessible links and buttons with React. January 17th, 2020 · ~4 minutes. An age old problem of the web platform when it comes to accessibility has been to confuse links and buttons. A link ( ) leads to somewhere. A button ( ) performs an action. ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful. ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
OPEN-SOURCE PROJECTS Open-source projects. I used to be an active member of the open-source community. I contributed to many projects, and started a few of my own. Below you can find a list of all projects I’ve taken part in over the years. Fair warning: many of them are no longer maintained.YEARS OF WRITING
Years of writing. Over the last few years, I have spent a lot of time writing. Mostly about tech, but also about some other topics from time to time. If you are looking for something specific, use the search. I also had the great opportunity of having great people writing here, so be sure to check all guest posts. CSS PIE TIMER REVISITED CSS. Here is how I thought about making it work: we use 2 pseudo-elements. One will serve as a mask, and the other will be the rotating one. Start by laying both pseudo-elements on the left side of the container on top of each other, so that the one on top has the color of the background (e.g. white), and the colorful one lies hiddenunderneath.
A TALE OF LANGUAGES
A tale of languages. March 22th, 2021 · ~3 minutes. Edit March 25th, 2021: Adrian Roselli pointed out on Twitter that many things can impact how a screen-reader switches languages, some of them being quite weird. As a result, it might be preferable not to trying gaming screen-readers’ language heuristics and leave it at that. ACCESSIBLE LINKS AND BUTTONS WITH REACT Accessible links and buttons with React. January 17th, 2020 · ~4 minutes. An age old problem of the web platform when it comes to accessibility has been to confuse links and buttons. A link ( ) leads to somewhere. A button ( ) performs an action. IMAGINING NATIVE SKIP LINKS Imagining native skip links. March 7th, 2021 · ~3 minutes. We recently talked about skip links in our A11y Advent calendar. In case you are not familiar with the concept, I quote: he page is reloaded when following a link and the focus is restored to the top of the page. When navigating with , that meanshaving
ERROR RECOVERY WITH NEXT March 15th, 2021 · ~4 minutes. Edit March 16th, 2021: Thanks to Maximilian Fellner’s proof of concept, I came up with a way cleaner solution than this original hack. See the added section for the clean solution. Almost 3 years ago, I wrote about recovering from runtime JavaScript errors thanks to a carefully crafted server-side rendering CLOSING ON OUTSIDE CLICK Closing on outside click. March 18th, 2021 · ~2 minutes. As part of the navigation on the Gorillas website, we needed a way to close the menu when clicking outside of it or tabbing out of it. I briefly touched on how we do it in the aforementioned article, but we’ve since revisited it and I wanted to write a short note about it. ADVANCED SASS LIST FUNCTIONS A couple of weeks ago, I wrote a small guide to understand Sass lists.I hope you’ve read it and learnt things from it! Anyway, a couple of days ago I stumbled upon a comment in a Sass issue listing a couple of advanced Sass functions to deal with lists. I found the idea quite appealing so I made my own function library for for this.KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
OPEN-SOURCE PROJECTS AN ACCESSIBLE TOGGLE ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
KITTY SAYS HI.
Kitty says hi. I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas. Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me. ABOUT ME | KITTY GIRAUDEL I originally come from the French Alps where I worked for a few years before having the opportunity to move to Berlin in 2015 to join Edenspiekermann. At the end of the 2016, I joined N26 as a web tech lead to hire a team and rebuild the N26 web platform from scratch. During my time there, I focused on accessibility and workplace safety.For a
OPEN-SOURCE PROJECTS AN ACCESSIBLE TOGGLE ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION Overview. We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of: A top-level component rendering a navigation and the router. Three different pages served under different paths. A “page title announcer”, the core topic of our article. The main idea is that every page will define its IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN Markdown as a design. May 30th, 2016 · ~3 minutes. A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a fancy layout is not really my strong suit. UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
OPEN-SOURCE PROJECTS Open-source projects. I used to be an active member of the open-source community. I contributed to many projects, and started a few of my own. Below you can find a list of all projects I’ve taken part in over the years. Fair warning: many of them are no longer maintained.YEARS OF WRITING
Years of writing. Over the last few years, I have spent a lot of time writing. Mostly about tech, but also about some other topics from time to time. If you are looking for something specific, use the search. I also had the great opportunity of having great people writing here, so be sure to check all guest posts.SPEAKING EVENTS
Over the last few years I’ve had the amazing opportunity to be a speaker at some great events. If you would like me to speak at your conference, be sure to get in touch! October 4th, 2018 — Paris, France Paris Web. Video. Slides. May 17th, 2018 — Berlin, Germany A11y Meetup Berlin. Video. Slides. October 26th, 2017 — Split,Croatia
CODE SNIPPETS
Code snippets. These are small code snippets usually extracted from more in-depth articles so they can be easily retrieved and referenced. It should be possible to copy and paste them with minor effort. Bash November 18th, 2020 groom_dead_code () Bash · November 19th, 2020 groom_dependencies () IMAGINING NATIVE SKIP LINKS Imagining native skip links. March 7th, 2021 · ~3 minutes. We recently talked about skip links in our A11y Advent calendar. In case you are not familiar with the concept, I quote: he page is reloaded when following a link and the focus is restored to the top of the page. When navigating with , that meanshaving
CSS PIE TIMER REVISITED CSS. Here is how I thought about making it work: we use 2 pseudo-elements. One will serve as a mask, and the other will be the rotating one. Start by laying both pseudo-elements on the left side of the container on top of each other, so that the one on top has the color of the background (e.g. white), and the colorful one lies hiddenunderneath.
CLOSING ON OUTSIDE CLICK Closing on outside click. March 18th, 2021 · ~2 minutes. As part of the navigation on the Gorillas website, we needed a way to close the menu when clicking outside of it or tabbing out of it. I briefly touched on how we do it in the aforementioned article, but we’ve since revisited it and I wanted to write a short note about it..SR-ONLY {}
The .sr-only class is a utility class aiming at visually hiding the element while keeping it accessible to assistive technologies such as screen-readers. It relies on a carefully designed combination of declarations for maximum support, and !important bangs to make sure to override any more specific CSS. .sr-only {. border: 0 !important; ADVANCED SASS LIST FUNCTIONS A couple of weeks ago, I wrote a small guide to understand Sass lists.I hope you’ve read it and learnt things from it! Anyway, a couple of days ago I stumbled upon a comment in a Sass issue listing a couple of advanced Sass functions to deal with lists. I found the idea quite appealing so I made my own function library for for this. AUTOMATING CSS ANIMATIONS WITH SASS Automating CSS animations with Sass. July 16th, 2014 · ~6 minutes. The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful.KITTY SAYS HI.
I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. OPEN-SOURCE PROJECTS ABOUT ME | KITTY GIRAUDEL If you would like to mention me in an article or a talk, please use Kitty. Hugo is also kind of fine for old articles and references. My pronouns are they/them, kindly respect them. AN ACCESSIBLE TOGGLE ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
KITTY SAYS HI.
I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. OPEN-SOURCE PROJECTS ABOUT ME | KITTY GIRAUDEL If you would like to mention me in an article or a talk, please use Kitty. Hugo is also kind of fine for old articles and references. My pronouns are they/them, kindly respect them. AN ACCESSIBLE TOGGLE ACCESSIBLE PAGE TITLE IN A SINGLE-PAGE REACT APPLICATION I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. IMAGINING NATIVE SKIP LINKS MARKDOWN AS A DESIGN A short post to talk about the recent redesign of this site. I’ve never been quite happy with the design of this blog. Let’s face it: I am no designer, and coming up with a UNDERSTANDING SASS LISTS Edit May 28th, 2015: After realising this article ranks up incredibly high on Sass Google searches, I come back to it to clear a few things up. Deletions are lined-through, additions are in italic. STYLING REACT COMPONENTS IN SASSNETFLIX LOGO IN CSS
OPEN-SOURCE PROJECTS Showcased projects. I used to be an active member of the open-source community. I contributed to many projects, and started a few of my own. Below you can find aYEARS OF WRITING
All articles from me, published on this site as well as at other places such as SitePoint, Tuts+, Codrops and CSS-Tricks. Also containssome guest posts.
SPEAKING EVENTS
An overview of all my talks, past and to come, including slides andvideos.
CSS PIE TIMER REVISITED CSS. Here is how I thought about making it work: we use 2 pseudo-elements. One will serve as a mask, and the other will be the rotating one. Start by laying both pseudo-elements on the left side of the container on top of each other, so that the one on top has the color of the background (e.g. white), and the colorful one lies hiddenunderneath.
IMAGINING NATIVE SKIP LINKS We recently talked about skip links in our A11y Advent calendar.In case you are not familiar with the concept, I quote: he page is reloaded when following aCODE SNIPPETS
These are small code snippets usually extracted from more in-depth articles so they can be easily retrieved and referenced. It should be possible to copy and paste them with minor effort. CLOSING ON OUTSIDE CLICK We originally used Event.composedPath, which provides the DOM path from the root of the document to the event target.Unfortunately, we noticed it wasn’t supported in many cases, so we had to revisit theimplementation.
ADVANCED SASS LIST FUNCTIONS A couple of weeks ago, I wrote a small guide to understand Sass lists.I hope you’ve read it and learnt things from it! Anyway, a couple of days ago I stumbled upon a comment in a Sass issue listing a couple of advanced Sass functions to deal with lists. I found the idea quite appealing so I made my own function library for for this..SR-ONLY {}
I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. AUTOMATING CSS ANIMATIONS WITH SASS I’m Kitty Giraudel, a non-binary web developer based in Berlin, focused on accessibility and inclusivity. Skip to main contentKITTY SAYS HI.
* Blog
* Projects
* Snippets
* Talks
* About
Fast,
collaborative project management that's super easy to use. What aconcept.
ads
via Carbon
I’m Kitty. I’m a non-binary web developer in Berlin, currently leading frontend engineering at Gorillas . Before that, I have led the web team at N26 for over 4 years. I specialise in accessibility and inclusion. For a longer version, read more about me .LATEST ARTICLES
I love writing, and have been sharing my thoughts—mainly about web development—on this blog for years. If you are looking for something specific, try the search . I also had the pleasure of hosting guest authors and would recommend you read theirposts!
Resolving Webpack aliases in NodeJune 4th, 2021
Read article Resolving Webpack aliases in NodeSlack Guidelines
April 24th, 2021
Read article Slack Guidelines CSS Pie Timer RevisitedApril 11th, 2021
Read article CSS Pie Timer RevisitedRead more articles
MAIN PROJECTS
I used to be quite involved in open-source development. I have initiated and contributed to many projects, most of which about Sass or digital accessibility.A11y-dialog
Accessibility · 1,600 ⭐️ Look at project A11y-dialog Simplified JavaScript Jargon JavaScript · 2,200 ⭐️ Look at project Simplified JavaScript JargonSass Guidelines
Sass · 700 ⭐️
Look at project Sass Guidelines Browse moreprojects
LAST EVENTS
I enjoy talking at conferences when I find time. If you would like me to attend one of your events, feel free to get in touch! In the mean time, feel free to have a look at my past talks.Paris Web
October 4th, 2018 · Paris Check event Paris WebA11y Meetup Berlin
May 17th, 2018 · Berlin Check event A11y Meetup BerlinTinel Meetup
October 26th, 2017 · Split Check event Tinel MeetupCheck more
events
I’m Kitty, a non-binary frontend developer focused on accessibility and workplace safety, currently leading the frontend team at Gorillasin Berlin. AMA
.
2012–2021 Kitty Giraudel. This website is made with 11ty, hosted on Netlify and open-sourced on GitHub.* RSS
* GitHub
* Resume
Details
Copyright © 2024 ArchiveBay.com. All rights reserved. Terms of Use | Privacy Policy | DMCA | 2021 | Feedback | Advertising | RSS 2.0