ABEM. A more useful adaptation of BEM. | CSS-Tricks
I'm personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of high specificity spread all throughout your stylesheet. However, there are a few problems I have with the syntax that can cause issues in production as well as cause confusion for developers. I prefer to use a slightly tweaked version of the syntax instead. I call it ABEM (Atomic Block Element Modifier):
wd  wd-css  wd-approach  wd-src--css-tricks 
13 hours ago
11 Things I Learned Reading the CSS Grid Specification
June 11, 2017, I decided to read the CSS Grid spec. The Spec was a little bit technical, but it was by far the most enjoyed specification I had ever read. If you’re a more advanced developer, bookmark it for future references.
wd  wd-css  wd-css--grid  wd-src--medium 
Getting Hardboiled with CSS Custom Properties ◆ 24 ways
Custom Properties are a fabulous new feature of CSS and have widespread support in contemporary browsers. But how do we handle browsers without support for CSS Custom Properties? Do we wait until those browsers are lying dead in a ditch before we use them? Do we tool up and prop up our CSS using a post-processor? Or do we get tough? Do we get hardboiled?
wd  wd-css  wd-css--variables 
Tweaking Text Level Styles | Adrian Roselli
This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog. In that post, Steve answers a very specific question about the <mark> and making it more accessible for screen readers.
wd  wd-accessibility  wd-css 
Iota | A responsive micro-framework for the grid spec powered by CSS custom properties
A responsive micro-framework for the grid spec powered by CSS custom properties.
wd  wd-css  wd-css--grid  wd-grid  wd-uses--github 
4 days ago
Accessible Language Navigation
On a lot of websites users may choose to read contents in their mother tongue. In order to enable them to do so, they are often provided with some sort of navigation containing links to the translated pages. Look at a random Wikipedia article for example: on the left (desktop design) you'll almost always find a navigation linking to translations of the current article.
wd  wd-accessibility  wd-localisation 
5 days ago
The 8pt Grid: Consistent Spacing in UI Design with Sketch
Spacing is everything in UI design. Forget colour, forget typography. Nail the spacing and you’re half way there. Why?
design  design--sketch  wd-src--medium 
5 days ago
Animating Border | CSS-Tricks
Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised.
wd  wd-css  wd-css--borders  wd-animation  wd-src--css-tricks 
5 days ago
Muuri - Responsive, sortable, filterable and draggable grid layouts
Muuri is a magical JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable.
wd  wd-grid  wd-js  wd-input  wd-input--drag-and-drop  wd-uses--github  wd-uses--bower 
5 days ago
dudeonthehorse/normalize.email.css: Email-ready CSS Reset
CSS resets for HTML emails. It's just a little css library for best default email compatibility. You can use it with your favourite email framework and self-coded templates.
wd  wd-css  wd-email  wd-uses--github 
5 days ago
Server.js - server.js
Powerful server for Node.js that just works so you can focus on your awesome project.
wd  wd-server  wd-js  wd-uses--github  wd-uses--npm 
9 days ago
jgranstrom/sass-extract: Extract structured variables from sass files
Extract structured variables from your sass files with no effort. Have all your style variables defined in style files, while being able to use them in javascript for things that cannot be styled with css such as complex visualisations or other dynamic content.
wd  wd-sass  wd-sass--variables  wd-uses--github  wd-uses--npm 
10 days ago
Accessibility for iOS Apps: Accessibility Inspector
Developers are constantly striving to make their apps more advanced, but are they actually usable by everybody? For most apps, the answer is no. In order to reach the largest audience, let's learn about ways to make our apps more accessible.
mac  mac--apps  wd  wd-accessibility 
10 days ago
CSS Grid Starter Layouts | CSS-Tricks
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.
wd  wd-css  wd-css--grid  wd-src--css-tricks 
12 days ago
Keyboard-Only Focus
One of the things I couldn't man­age to find a so­lu­tion for a long time was a prob­lem of fo­cus styles on in­ter­ac­tive el­e­ments. The prob­lem was: when you have an el­e­ment with some :fo­cus styles, they're ap­plied not only to the fo­cused state it­self but also af­ter you just click on this el­e­ment (and it be­haves dif­fer­ently for dif­fer­ent el­e­ments in dif­fer­ent browsers, of course).
wd  wd-accessibility  wd-accessibility--focus  wd-css 
19 days ago
7 guidelines for writing accessible microcopy – Prototypr
Anyone writing microcopy knows there’s a thin line between providing a good, effective experience and evoking frustration — and the difference can be just one word or a quick hint exactly where it’s needed.
ux  ux--content  wd  wd-accessibility  wd-src--medium 
19 days ago
A Content Slider
Carousels (or 'content sliders') are like men. They are not literally all bad — some are even helpful and considerate. But I don't trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don't have the choice. Hence this article.
wd  wd-accessibility  wd-accessibility--interactive  wd-interface--carousel 
19 days ago
Localisation and Translation on the Web
Coming from the English-speaking world, it can be easy to maintain the bubble that is the English-speaking World Wide Web. But in fact, more than half of web pages are written in languages other than English.
wd  wd-localisation 
19 days ago
Bad Icons: How to Identify and Improve Them
Related links are often chunked as a set, each with an icon. One bad icon hurts user interaction. A set of bad icons is worse because it amplifies confusion, adds clutter, and wastes screen real estate.
ux  wd  wd-images  wd-images--icon  wd-src--nn-group 
24 days ago
Creating a Loading Placeholder with Sass - Lee Robinson
As you walk through the office at work reading the news on your phone, you enter an elevator. You had just attempted to load a new page only to be greeted with a painful loading spinner. No one likes this experience.
wd  wd-sass  wd-animation  wd-performance  wd-performance--perceived 
24 days ago
Vanilla Framework
Vanilla is a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.
wd  wc-css  wd-framework--css 
24 days ago
Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)
wd  wd-css  wd-framework--css  wd-localisation  wd-uses--github 
24 days ago
Happier HTML5 Form Validation - daverupert.com
I recently embarked on improving the client-side form validation for a client. There were about 400 lines of form validation code stuffed inside a 1000 line form_helper.js. I looked for lightweight form validation scripts like hyperform.js (144kb), but after some hemming and hawing, I decided to try my hand again at native HTML5 Form Validation.
wd  wd-css  wd-js  wd-forms  wd-forms--validation 
24 days ago
Aspect Ratios for Grid Items | CSS-Tricks
We've covered Aspect Ratio Boxes before. It involves trickery with padding such that an element's width and height are in proportion to your liking. It's not an ultra-common need, since fixing an element's height is asking for trouble, but it comes up.
wd  wd-css  wd-css--grid  wd-units  wd-src--css-tricks 
24 days ago
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
wd  wd-css  wd-css--grid  wd-src--smashing 
26 days ago
Is text sizing dead? | AlastairC
I’m one of the many people working on WCAG 2.1, and specifically with people from the Low Vision Task Force (LVTF), most of whom are people with low vision (and very knowledgeable on the research for this group). There’s a ton of documentation being prepared, but I thought a little insight into this process would help, and perhaps a click-bait headline to help get it around?
wd  wd-accessibility 
4 weeks ago
Tips for Designing Accessibility in Voice User Interfaces
Technology is relying more and more on voice interfaces that don’t have a screen, display or tactile interface. As we learn to design for this paradigm, we must also figure out how it impacts people with disabilities.
ux  wd  wd-accessibility  wd-accessibility--audio 
4 weeks ago
Right-To-Left Development In Mobile Design – Smashing Magazine
The Middle Eastern market is growing at a rapid pace, and, as a result, demand for various IT products is also booming in the region. What is peculiar, though, is that Middle Eastern countries require design that is not only compatible with their needs and comfortable for their users, but that is also suitable to their language standards, making a serious adaptation process very important. Given that most languages spoken in the Middle East are written and read from right to left (such as Arabic, Hebrew and Urdu), developers often face a range of problems when creating products in those languages.
wd  wd-localisation  wd-src--smashing 
4 weeks ago
Emergence.js | Detect element visibility in the browser
This plugin is designed to allow manipulation on elements depending on their visibility in the browser. It gives the developer the freedom to use their own CSS or JS to determine what happens; whether it's animation or a change in state. It leverages HTML5 data-* attributes instead of classes for ease and developer clarity. Emergence.js is one of the lightest and most compatible plugins of its kind.
wd  wd-js  wd-interface--scrolling  wd-uses--github  wd-uses--bower 
5 weeks ago
A Responsive Accessible Table | Adrian Roselli
After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt to break it down to give you enough information to make your own responsive, accessible table because my example will likely not fit your case precisely (or closely?).
wd  wd-accessibility  wd-tables  wd-tables--responsive 
5 weeks ago
The CSS attr() function got nothin' on custom properties | CSS-Tricks
Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn't know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.
wd  wd-css  wd-css--variables  wd-src--css-tricks 
5 weeks ago
How 3rd Party Scripts can be performant citizens on the web
Harry Roberts recently wrote a piece about how third parties can cripple your performance. In this article, I want to show you how it isn't all doom and gloom: there are a number of strategies can be employed to deliver 3rd party scripts in a manner which limits their negative effects on performance.
wd  wd-performance 
5 weeks ago
What is Tailwind? - Tailwind CSS
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
wd  wd-css  wd-css--functional  wd-framework--css  wd-uses--npm 
5 weeks ago
Managing Font Loading CSS Was Painful—Not Anymore—zachleat.com
One of the most painful pieces of maintaining a web font loading strategy is meticulously managing the CSS that goes with it. You have to carefully manage the CSS to make sure that any use of your web font font-family is protected by a class added by the JS after the fonts have loaded successfully.
wd  wd-typography  wd-postcss 
5 weeks ago
Designing with Kindness | UX Booth
We recently passed Mother’s Day in the United States, a holiday with a complicated past (it was originally conceived to push a global anti-war declaration by the woman who wrote “The Battle Hymn of the Republic”) and even more complicated presence in the present.
design  ux  wd  wd-src--uxbooth 
5 weeks ago
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article
Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader. Then comes along a table with the temptation to get creative, and all thoughts of the reader go out of the window. And yet tables are there to be read, referenced and used, not merely looked at.
wd  wd-tables  wd-src--a-list-apart 
5 weeks ago
Frappe Charts
GitHub-inspired simple and modern charts for the web with zero dependencies.
wd  wd-js  wd-images  wd-images--svg  wd-graphs  wd-uses--github  wd-uses--npm 
5 weeks ago
AccessLint - GitHub Marketplace
AccessLint brings automated web accessibility testing into your development workflow. When a pull request is opened, AccessLint reviews the changes and comments with any new accessibility issues, giving you quick, timely, and targeted feedback, before code goes live.
wd  wd-accessibility  wd-accessibility--tools  wd-uses--github 
6 weeks ago
LookForward.js is a small library that helps you to create smooth transitions between pages with the easiest way. It supports simple page transitions using HistoryAPI.
wd  wd-css  wd-js  wd-interface  wd-interface--pagination  wd-animation  wd-uses--npm  wd-uses--yarn  wd-uses--github 
6 weeks ago
matthewgonzalez/fontplop: Fast, Simple, & Free Open Source Webfont Converter
FontPlop is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff, svg, and eot. It is the simpler, faster, free successor to FontPrep, which is no longer maintained.
design  design--typography  wd  wd-typography 
6 weeks ago
Alt-texts: The Ultimate Guide - Axess Lab
This post contains everything you need to know about alt-texts! When to use them and how to perfectly craft them. By me, Daniel, a web developer with vision impairment who use a screen reader in my day-to-day life.
wd  wd-accessibility  wd-accessibility--images 
6 weeks ago
Inline validation is problematic – Simple = Human – Medium
Inline validation informs users whether what they type is valid as they type. The theory is that it’s easier to fix errors as soon as they occur instead of waiting until submission. The thing is, inline validation causes several problems:
ux  wd  wd-accessibility  wd-forms  wd-forms--validation  wd-src--medium 
6 weeks ago
Collapsible Sections
Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.
wd  wd-accessibility  wd-accessibility--interactive  wd-interface  wd-interface--accordion 
6 weeks ago
HEML is an open source markup language for building responsive email. It gives you the native power of HTML without having to deal with all of the email quirks. HEML makes building emails as easy as building websites.
wd  wd-email 
6 weeks ago
Stop Designing For Only 85% Of Users: Nailing Accessibility In Design – Smashing Magazine
As designers, we like to think we are solution-based. But whereas we wouldn’t hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious to flaws in our user interfaces. Poor visual design, in particular, can be a barrier to a good user experience. Whereas disability advocacy has long focused on ways to help the user adapt to the situation, we have reached a point where users expect products to be optimized for a broad range of needs.
design  wd  wd-accessibility  wd-accessibility--contrast 
6 weeks ago
My approach to using z-index – Hacker Noon
Categorise all uses of z-index as either local or global.
wd  wd-css  wd-src--medium 
6 weeks ago
Unlocking the Benefits of CSS Variables - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
More and more developers are starting to use CSS variables, or as they are more correctly known, custom properties, in production projects. Native CSS custom properties provide several clear benefits over preprocessor variables and provide the power to achieve things like live theming which were previously much more difficult.
wd  wd-css  wd-css--variables 
6 weeks ago
The lightest Lightbox ever made | basicLightbox
A lightbox that works in all modern browsers with images, videos, iframes and any kind of HTML, has support for CommonJS and AMD, a simple API and zero dependencies.
wd  wd-js  wd-interface--lightbox  wd-uses--github  wd-uses--bower  wd-uses--npm 
6 weeks ago
Breaking down CSS Box Shadow vs. Drop Shadow | CSS-Tricks
Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs.
wd  wd-css  wd-src--css-tricks 
7 weeks ago
oncode/handorgel: Accessible W3C conform accordion written in ES6.
Accessible W3C conform accordion written in ES6. Handorgel is the Swiss German name for accordion.
wd  wd-accessibility  wd-interface  wd-interface--accordion  wd-uses--github  wd-uses--npm  wd-uses--yarn 
7 weeks ago
Don't Design Your Emails
I used to dread setting up email automation and email campaigns. Why? Because before a single sales or marketing email could be sent, it needed a design. In my attempt to sidestep this time-consuming process, I learned that plain emails not only save time but work better.
wd  wd-email 
7 weeks ago
Plain Language Is for Everyone, Even Experts
Professionals want clear, concise information devoid of unnecessary jargon or complex terms. Plain language benefits both consumers and organizations.
ux  ux--content  wd  wd-src--nn-group 
8 weeks ago
Intriguing CSS Level 4 Selectors
CSS selectors have progressed massively over the years, giving developers far more power for targeting specific bits on their pages. The examples in this article are part of the CSS Selectors Level 4 specification. Let’s dive in and investigate seven of these intriguing selectors, some of which I guarantee you’ve yet to use in practice!
wd  wd-css  wd-css--selectors 
9 weeks ago
Fundamentals of Responsive Images | Lullabot
As a recovering English major, I’d like to believe words alone are enough to tell a tale on the web. A text-only page is fast: even a long article can load nearly instantly. Add photos, and the web slows down. Yet great images bring emotion, a connection with others and the world around us. They’re often worth the tradeoff in time to load a page.
wd  wd-performance  wd-images  wd-images--responsive 
9 weeks ago
Micromodal.js - Tiny javascript library for creating accessible modal dialogs
Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.
wd  wd-accessibility  wd-css  wd-js  wd-interface  wd-interface--modal  wd-uses--github  wd-uses--npm  wd-uses--yarn 
9 weeks ago
An event for CSS position:sticky  |  Web  |  Google Developers
Here's a secret: You may not need scroll events in your next app. Using an IntersectionObserver, I show how you can fire a custom event when position:sticky elements become fixed or when they stop sticking. All without the use of scroll listeners. There's even an awesome demo to prove it:
wd  wd-css  wd-js  wd-interface--sticky  wd-src--google-developers 
9 weeks ago
Force the screen reader to announce digits | :last-child
There are times when we want the screen reader to announce individual letters in a string. This is sometimes up to the interpretation of the screen reader with an acronym, such as NASA. There are other times when we need to force the digits, for instance in a confirmation code IXbib. This page will test options for making a screen reader announce this confirmation code: IXbib
wd  wd-accessibility  wd-css 
9 weeks ago
UX for Lizard Brains · An A List Apart Article
Technology can make magic happen. In seconds, you can find all the blue sandals in a warehouse of millions of shoes. A million people can read the same article without killing one tree. You can undo, unsend, and even unfriend! But here’s the buzzkill: if unanticipated or unwelcome, the magic of technology is confusing, disorienting, and unintuitive—a UX designer’s worst nightmare.
ux  ux--patterns 
9 weeks ago
Use a Sass Variable for a Selector | CSS-Tricks
Say you need to use a certain selector in multiple places in your code. It's not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier.
wd  wd-sass  wd-sass--variables  wd-src--css-tricks 
9 weeks ago
CSS Grid Layout and Accessibility - CSS | MDN
Those of us who have been doing web development for more years than we care to remember might consider that CSS Grid is a little bit like using “tables for layout”. Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.
wd  wd-accessibility  wd-css  wd-css--grid 
9 weeks ago
Media Player
A tiny, totally cross browser, accessible, fully customizable media player written in plain JavaScript.
wd  wd-accessibility  wd-accessibility--interactive  wd-media  wd-media--video  wd-uses--github  wd-uses--npm 
9 weeks ago
Tabbed Interfaces
When you think about it, most of your basic interactions are showing or hiding something somehow. I've already covered popup menu buttons and the simpler and less assuming tooltips and toggletips. You can add simple disclosure widgets, compound "accordions", and their sister component the tabbed interface to that list. It's also worth noting that routed single-page applications emulate the showing and hiding of entire web pages using JavaScript.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--tabindex  wd-html  wd-html--semantics  wd-css  wd-js  wd-interface  wd-interface--tabs 
9 weeks ago
Why the Email Confirmation Field Must Die - UX Movement
The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.
ux  ux--patterns 
10 weeks ago
Help Your Users `Save-Data` | CSS-Tricks
The breadth and depth of knowledge to absorb in the web performance space is ridiculous. At a minimum, I'm discovering something new nearly every week. Case in point: The Save-Data header, which I discovered via a Google Developers article by Ilya Grigorik.
wd  wd-performance  wd-src--css-tricks 
10 weeks ago
CSS Grid PlayGround | Terminology | Mozilla
Before we dive into CSS Grid concepts, let’s cover some basic terminology.
wd  wd-css  wd-css--grid 
10 weeks ago
SpeedCurve | A retailer's guide to web performance
I’m at Shop.org this week, having really interesting conversations with online retailers. What I love about talking with this crowd is that – like me – they're super focused on user-perceived performance. Not surprisingly, we have a lot to talk about.
wd  wd-performance 
10 weeks ago
The Mega HTML5 Cheatsheet – Level Up! – Medium
Guys, guys, look what I found! The Mega HTML5 Cheatsheet. As for me, I found this one extremely useful. But enough said. Please, enjoy!
wd  wd-html  wd-src--medium 
10 weeks ago
CSS font-display: The Future of Font Rendering on the Web — SitePoint
One of the downsides of using web fonts is that if a font is not available on a user’s device, it must be downloaded. This means that before the font becomes available the browser has to decide how to handle the display of any block of text that uses that font. And it needs to do so in a way that doesn’t significantly impact the user experience and perceived performance.
wd  wd-performance  wd-performance--perceived  wd-css  wd-typography  wd-typography--rendering  wd-src--sitepoint 
10 weeks ago
craigabbott.co.uk - Accessibility is not an edge case
There's a common misconception that people using assistive technologies are an edge case. That they fall into that 1% where people disable Javascript. But, this couldn't be further from the truth.
wd  wd-accessibility 
10 weeks ago
Sensors For The Web!  |  Web  |  Google Developers
Today, sensor data is used in many native applications to enable use cases such as immersive gaming, fitness tracking, and augmented or virtual reality. Wouldn't it be cool to bridge the gap between native and web applications? The Generic Sensor API, For The Web!
wd  wd-js  ux  ux--device 
10 weeks ago
6 Ways To Make A Video Accessible To Everyone - Ai-Media
The world is full of great content, but most isn’t accessible to everyone, which is frustrating for people that are excluded. Here are 6 ways to make your video more accessible for everyone.
wd  wd-accessibility  wd-accessibility--video  wd-media  wd-media--video 
11 weeks ago
A11y Accordion Tabs Component
A small script (less than 1.6 KB compressed and gzipped) with zero dependencies for creating accessible accordion tabs components. Based on the accessible tabs component by @stowball. The component is an accordion on smaller screens and switches to a tab view on larger viewports.
wd  wd-accessibility  wd-interface--tabs  wd-interface--accordion  wd-uses--github  wd-uses--npm 
11 weeks ago
Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins | CSS-Tricks
If you visit caniuse.com, you'll see that CSS Grid is supported in current versions of all major browsers except Opera Mini. So why not start using it? Rachel Andrew wrote extensively on the subject of if it's "safe to use" or not. It is, assuming you're OK with a fallback scenario that doesn't replicate exactly what Grid can do:
wd  wd-css  wd-css--grid  wd-src--css-tricks 
12 weeks ago
shiwaforce/postcss-high-contrast: Create high contrast version of your project with ease.
PostCSS High Contrast is PostCSS plugin that helps automatically convert all colors to high contrast. This Plugin gives you ability to create high contrast version of your project with ease.
wd  wd-accessibility  wd-accessibility--contrast  wd-css  wd-postcss  wd-color  wd-uses--github 
12 weeks ago
What’s New in WCAG 2.1 | Adrian Roselli
I field questions pretty regularly about what is coming in WCAG 2.1. I have offered links to the spec, pointers to W3C mailing list email, references to other posts (most recently David MacDonald’s post that looks at the same version as this post), but have avoided gathering them in one place on my own. Part of the reason is because they have been fluid for some time.
wd  wd-accessibility 
12 weeks ago
On fonts and dyslexia | atrophiedmind
One of the most frequent questions I get asked is around using special fonts for people with dyslexia. There has been a lot of stuff about dyslexia friendly fonts over the years starting with comic sans, read regular and most recently with open dyslexic and dyslexie. There are various claims made as to their efficacy.
wd  wd-accessibility  wd-typography 
12 weeks ago
philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.
wd  wd-css  wd-css--flexbox  wd-uses--github 
12 weeks ago
A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page. Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.
wd  wd-typography  wd-performance  wd-uses--npm 
12 weeks ago
« earlier      
color data design design--logos-and-branding design--objects design--sketch design--terminology design--typography geography geography--china geography--japan git humor internet language law mac mac--apple-tv mac--apps mac--ios maps math psychology sociology technology technology--computer-hardware unicode-and-emoji ux ux--content ux--conversational ux--dark-patterns ux--device ux--haptic ux--ia ux--patterns ux--personas ux--states ux--testing ux--tools wc-css wd wd-accessibility wd-accessibility--aria wd-accessibility--audio wd-accessibility--contrast wd-accessibility--focus wd-accessibility--hiding-content wd-accessibility--images wd-accessibility--interactive wd-accessibility--tabindex wd-accessibility--tools wd-accessibility--video wd-accessibility--wcag wd-animation wd-approach wd-browser wd-browser--battery wd-browser--cookie wd-browser--notification wd-browser--support wd-browser--url wd-buildtools--grunt wd-buildtools--gulp wd-buildtools--npm wd-buildtools--webpack wd-cms wd-cms--kirby wd-cms--koken wd-cms--metalsmith wd-cms--netlify wd-cms--orchard wd-cms--wordpress wd-cms--yellow wd-color wd-css wd-css--background wd-css--borders wd-css--centering wd-css--element-query wd-css--filters wd-css--flexbox wd-css--functional wd-css--gradient wd-css--grid wd-css--layout wd-css--pseudo wd-css--selectors wd-css--variables wd-email wd-formatting wd-forms wd-forms--button wd-forms--input wd-forms--label wd-forms--password wd-forms--progress wd-forms--search wd-forms--select wd-forms--slider wd-forms--switches wd-forms--validation wd-framework wd-framework--css wd-framework--frontend wd-graphs wd-grid wd-hosting wd-html wd-html--amp wd-html--iframe wd-html--microdata wd-html--rel wd-html--semantics wd-html--web-components wd-images wd-images--background wd-images--favicon wd-images--icon wd-images--optimization wd-images--ratios wd-images--responsive wd-images--sprites wd-images--svg wd-input wd-input--drag-and-drop wd-input--keyboard wd-input--pointer wd-input--touch wd-interface wd-interface--accordion wd-interface--breadcrumb wd-interface--carousel wd-interface--coachmark wd-interface--cursor wd-interface--datepicker wd-interface--editor wd-interface--filtering wd-interface--gallery wd-interface--lightbox wd-interface--menu wd-interface--modal wd-interface--pagination wd-interface--progress wd-interface--scrolling wd-interface--slideshow wd-interface--sticky wd-interface--tabs wd-interface--tags wd-interface--thumbnail wd-interface--toc wd-interface--tooltip wd-js wd-js--angular wd-js--d3 wd-js--ember wd-js--jquery wd-js--knockout wd-js--meteor wd-js--moment wd-js--promises wd-js--raphael wd-js--react wd-js--service-workers wd-js--this wd-js--vue wd-js--zepto wd-less wd-linting wd-localisation wd-media wd-media--audio wd-media--bigscreen wd-media--embeds wd-media--print wd-media--vertical wd-media--video wd-performance wd-performance--conditional wd-performance--lazyload wd-performance--localstore wd-performance--offline wd-performance--perceived wd-performance--prefetch wd-polyfill wd-postcss wd-pwa wd-responsive wd-responsive--js wd-sass wd-sass--extend wd-sass--maps wd-sass--media-queries wd-sass--mixin wd-sass--variables wd-server wd-src--a-list-apart wd-src--adactio wd-src--bitsofcode wd-src--cloud-four wd-src--codyhouse wd-src--creative-bloq wd-src--css-tricks wd-src--google-developers wd-src--lullabot wd-src--medium wd-src--nn-group wd-src--paciello-group wd-src--quirksmode wd-src--sitepoint wd-src--sixrevisions wd-src--smashing wd-src--thenewcode wd-src--tympanus wd-src--ux-magazine wd-src--uxbooth wd-src--uxmatters wd-src--webaim wd-styleguide wd-tables wd-tables--responsive wd-tables--sorting wd-testing wd-typography wd-typography--icon-font wd-typography--modular-scale wd-typography--opentype wd-typography--rendering wd-typography--type-locks wd-units wd-uses--bower wd-uses--cdnjs wd-uses--coffeescript wd-uses--component wd-uses--github wd-uses--homebrew wd-uses--npm wd-uses--packagist wd-uses--ruby wd-uses--yarn

Copy this bookmark: