See No Evil: Hidden Content and Accessibility - Cloud FourWhen I first started learning web development I thought hiding content was simple: slap display: none; onto your hidden element and call it a day. Since then I’ve learned about screen readers, ARIA attributes, the HTML5 hidden attribute, and more!It’s important to ensure our websites are accessible to everyone, regardless of whether or not they use a screen reader, but with this myriad of options, how do we know when to use what?There are four main scenarios where you may wish to hide content:1. Hiding content for everyone, regardless of whether they use a screen reader2. Hiding content for screen readers while showing it to other users3. Showing additional content for screen readers while hiding it from other users4. Hiding content at specific screen sizesLet’s dive deeper into each of those scenarios to learn how to handle them.tagged: cssaccessibilityhiding07-03-2019
(4) This is Jamboard - YouTubeJamboard, our cloud-based collaborative, digital whiteboard, is generally available for purchase in the United States.tagged: jamcollaborationtouch07-03-2019
Did you know that CSS Custom Properties can handle images too? | CSS-TricksSo you might be aware of CSS Custom Properties that let you set a variable, such as a theme color, and then apply it to multiple classes like this:tagged: cssvariable-fonts06-03-2019
Having an open dialog | scottohara.metldr; I’m just going to say right now that the dialog element and its polyfill are not suitable for use in production. And it’s been that way since the dialog’s earliest implementation in Chrome, six-ish years ago.tagged: htmldialog05-03-2019
Feature Flag and Toggle Management For Continuous Delivery - LaunchDarklyEliminate risk and deliver value using feature management in your development cycles. Deploy code when you want. Release features when you're ready. Control your users' experience.tagged: flagstestingcontinuousdelivery05-03-2019
User interfaces: hiding stuff should be a last resort by Adam Silver, designer based in London, UK.Many of the components we design for the web are made to save space. It’s interesting that we work so hard to save space on a medium where we have infinite space to work with.tagged: simpleheadlessdom05-03-2019
Building Web Components with lit-htmlIn our previous post A introduction to Web Components we learned the basics of the APIs that when used together can create a compelling and reusable way to make UI components. We learned Web Components communicate primarily via properties and events. Web Components can also use the Shadow DOM API to create template and CSS encapsulation. In this post we are going to look into a project ran by Polymer called lit-html.tagged: componentshtmlframeworks04-03-2019
Are People Chucking London's Dockless Bikes Into The Water? | LondonistScrolling around London on Citymapper the other day, we noticed something amiss. The app directed us towards a form of transport located on a blue part of the map. As everyone knows, maps + blue = water, so what is this new form of floating transportation and why has it gone unnoticed?tagged: londoncityairportbikesrubbish04-03-2019
How Are Function Components Different from Classes? — OverreactedHow do React function components differ from React classes?For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.tagged: reactcomponentspseudo-classesfunctional04-03-2019
The CSS mental model - QuirksBlogToday we will attempt to describe the different mental models for CSS and JavaScript. Everybody agrees there is a difference, but nobody’s able to define exactly what that difference is. So let’s try.tagged: cssstate26-02-2019
CSS Houdini: JS-in-CSS - @iamvdoGeneric worklet to be authored right from CSStagged: cssjs2d22-02-2019
Pattern Lab | Build Atomic Design SystemsCreate atomic design systems with Pattern Lab.tagged: atomicdesignpatternlabscss22-02-2019
kss-node/kss-node: The Node.js implementation of KSS: a methodology for documenting CSS and generating style guidesThe Node.js implementation of KSS: a methodology for documenting CSS and generating style guides http://kss-node.github.io/kss-node/tagged: documentationcssstyleguide22-02-2019
AddyOsmani.com - Disallow large imports from JavaScript projectsAre there known large JavaScript dependencies your team wish they could disallow from a project? Good news! ESLint supports disallowing specific imports from projects using the no-restricted-imports rule.tagged: eslintdangling-containersdisallowsizeslarge21-02-2019
AddyOsmani.com - JavaScript Loading Priorities in ChromeHow browsers schedule and execute scripts can impact the performance of web pages. While techniques liketagged: loadingperfperformance20-02-2019
