ARIA States and Properties
A range of new states and properties were added to ARIA 1.1. These new states and properties have been flagged in the charts below. At this stage, no new states or properties have been added to ARIA 1.2.
wd  wd-accessibility  wd-accessibility--aria 
7 hours ago
Updating a CSS Variable with JavaScript | CSS-Tricks
Here's a CSS variable (formally called a "CSS custom property"):
wd  wd-css  wd-css--variables  wd-js  wd-src--css-tricks 
12 hours ago
CSS Grid — The Beginner’s Guide – freeCodeCamp.org
CSS Grid’s anatomy is composed of the primary container which is just your standard <div> element that has a margin, border and padding. To make a parent CSS grid container out of any element, add display: grid to it. Grid’s items are children nested inside the parent container. They are usually defined as a list of elements that could represent a header, sidebar, footer or similar website layout elements, depending on your application’s design.
wd  wd-css  wd-css--grid  wd-src--medium 
9 days ago
Links List for Print Styles | Adrian Roselli
I have long advocated for making useful print styles and providing users with pages that work on paper without eating their printer ink. My default styles typically have a rule to embed the URL of all links directly after the link text. The problem is that it can eat a lot of ink and not be very usable on paper. Collecting all the links at the end of a page as plain text footnotes mitigates this. Users who want to save paper can choose to not print the final page(s) with the links.
wd  wd-css  wd-js  wd-media  wd-media--print 
9 days ago
WebAIM: Understanding WCAG 2 Contrast and Color Requirements
Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.
wd  wd-accessibility  wd-accessibility--contrast  wd-color  wd-src--webaim 
9 days ago
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some validation for the way I always have built them. The discussion was too interesting to not summarize in an article. The different possible markup approaches as well as useful resources are discussed below.
wd  wd-html  wd-html--semantics  wd-js  wd-interface  wd-interface--accordion 
10 days ago
Mobile Login Methods Help Chinese Users Avoid Password Roadblocks
In China, QR-code scanning and verification codes are popular mobile-login alternatives that circumvent the problem of remembering and typing passwords.
ux  ux--patterns  wd  wd-localisation  wd-src--nn-group 
15 days ago
Inter UI font family
Inter UI is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens. The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
design  design--typography 
15 days ago
Conversational Semantics · An A List Apart Article
As Alexa, Cortana, Siri, and even customer support chat bots become the norm, we have to start carefully considering not only how our content looks but how it could sound. We can—and should—use HTML and ARIA to make our content structured, sensible, and most importantly, meaningful.
wd-accessibility  wd  wd-html  wd-html--semantics  wd-src--a-list-apart 
16 days ago
CSS Grid
12 column grid using display:grid. It includes the necessary prefixes to work in Internet Explorer.
wd  wd-css  wd-css--grid  wd-grid  wd-uses--github 
16 days ago
The importance of text accessibility: how IBM's Content Clarifier shows us what we've forgotten - Hassell Inclusion
Back in 2001, when I first started working in accessibility at the BBC, one of the key things we thought about was the aim to make text as simple as possible. Using Plain Language. Writing designed to ensure the reader understands as quickly, easily and completely as possible. In the Accessibility Guidelines at the time, WCAG 1.0, this was a single-A requirement, recognising it as one of the most important aspects of web accessibility. Accessibility experts and our users agreed that how we used words on our websites was massively important.
ux  ux--content  wd  wd-accessibility 
16 days ago
Create your design system, part 4: Spacing – CodyHouse – Medium
In this article we’ll take a look at how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.
wd  wd-css  wd-css--variables  wd-units  wd-src--medium 
16 days ago
Designing for suicidal users: preventing suicide the modern way
Every month, over half a million people in the US make suicide-related searches on Google. The automated response that is supposed stop them and save lives feels lifeless.
ux  ux--patterns  ux--dark-patterns 
16 days ago
Guidelines to Designing Apps for Mental Health | UX Booth
When you work in UX, you live and die by user research. If a business owner requests a specific feature, the UX designer is typically the one to ask “how would our audience benefit?” and if you build something that users asked for, you’re typically in the clear. But sometimes users don’t know what they want or need. Particularly when it comes to mental health care.
ux 
19 days ago
The Complete CSS Demo for OpenType Features - OpenType Features in CSS
This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0.
wd  wd-css  wd-typography  wd-typography--rendering 
22 days ago
A safer alternative to innerHTML with vanilla JS | Go Make Things
The innerHTML property provides a really simple and convenient way to create HTML templates as strings and inject them into the DOM. But, it can leave you exposed to cross-site scripting attacks.
wd  wd-js  wd-js--vanilla 
23 days ago
Using feature detection to write CSS with cross-browser support | CSS-Tricks
When working with CSS, it seems that one of the top concerns always ends up being inconsistent feature support among browsers. This means that CSS styling might look perfect on my browsers of choice, but might be completely broken on another (perhaps an even more popular) browser.
wd  wd-wd-browser  wd-browser--support  wd-css--selectors  wd-src--css-tricks 
23 days ago
The Annoying Site aka "Power of the Web Platform" V2 - Speaker Deck
It's 2018. The web platform offers dozens of powerful, native-like APIs. What if we used this newfound power for evil? What kind of terrible UX wd-bcould we create if our goal was to build the worst web page in the world?
internet  wd  wd-browser  wd-js 
23 days ago
Is placeholder text a sufficient accessible label for form fields - David MacDonald Web Accessibility Blog, testing, teaching, and discussion
In a mobile first world many websites use placeholder text to save space. Let's test to see if its a good idea. In the form field type in a first name. We will want to consider users who are blind, and users with cognitive disabilities.
wd  wd-accessibility  wd-html  wd-forms  wd-forms--input 
23 days ago
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1) — Smashing Magazine
Do you test your forms on real users and real devices? If not, you should. Let’s take a look at some of the techniques that can help you take your forms to the next level and help users fill them in.
ux  ux--patterns  wd  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-src--smashing 
23 days ago
Prominence-Interpretation Theory
Prominence-interpretation theory helps determine what shapes users’ perceptions of a site’s credibility.
ux  ux--content  ux--patterns  wd  wd-src--nn-group 
23 days ago
Carousels on Mobile Devices
Carousels on touch screens are plagued by low discoverability and sequential access, and not all designs implement swipe as a carousel control.
ux  ux--patterns  wd  wd-interface--carousel  wd-src--nn-group 
23 days ago
Checkbox vs Toggle Switch – UX Planet
Forms provide several controls that make it easier to collect input from users. Using the right control at right place is a challenge while designing forms.
ux  ux--patterns  wd  wd-forms  wd-forms--switches 
23 days ago
Creating Usability Maturity Models for Large-Scale Projects User Experience Magazine
About a year into a very complex, long-term project, we were sitting in a design meeting when our project manager turned to us and asked, “How are we doing with usability? How will we know that we found all the usability issues and we are ready to ship?” If you were in the room with us, you should have seen our reaction! We were surprised to say the least. We had been reporting on the usability testing outcomes on this project all along; how could he not know if we were ready? After we closed our jaws and took a few deep breaths, we teased him a little by saying, “Weren’t you there for our presentations?”
ux 
23 days ago
The Generic Sensor API - mobiForge
Today’s devices pack in a vast array of sensors that gather data about the device and the world around it. For web applications, access to these sensors has grown over time through the addition to the browser of various sensor APIs such as the Geolocation API, and the DeviceOrientation Events API.
wd  wd-js 
23 days ago
Line-height Crop — a simple CSS formula to remove top space from your text
It’s a natural behavior of text elements to include some space on top (and bottom) of the element itself based on its line-height value. In some cases, you may need to remove those spaces as they can create inconsistencies in your page design.
wd  wd-typography  wd-css  wd-src--medium 
23 days ago
Browser painting and considerations for web performance | CSS-Tricks
The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through:
wd  wd-performance  wd-css  wd-src--css-tricks 
23 days ago
Scroll Bouncing On Your Websites — Smashing Magazine
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing.
wd  wd-css  wd-interface--scrolling  wd-src--smashing 
23 days ago
Asking the right questions during user research, interviews and testing
Interviewing users is an art — whether you are running usability testing, focus groups, ethnographic research or whatnot. Here are some good practices for asking users the right questions, and asking the questions the right way.
ux 
23 days ago
Provotypes: how making annoying things can help you design better
Provotypes are an interesting — and extremely fun — way of making designs better by first making the most unusable or provocative versions of them. In this blog post, I explain how and why this technique offers much more than just good laughs.
ux  ux--patterns 
23 days ago
Switch font color for different backgrounds with CSS | CSS-Tricks
Ever get one of those, "I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.
wd  wd-accessibility  wd-accessibility--contrast  wd-css  wd-css--variables  wd-color  wd-src--css-tricks 
23 days ago
Your skip links are broken - Axess Lab
Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
wd  wd-accessibility  wd-accessibility--interactive  wd-html 
4 weeks ago
GRID
A simple visual cheatsheet for CSS Grid Layout
wd  wd-css  wd-css--grid 
5 weeks ago
Designing a complex table for mobile consumption (nom)
Enterprise applications are complex. They often contain large amounts of information from various sources, modules, and users. In order to present this wealth of information, these applications frequently make use of tables. Well-designed data tables allow users to scan, compare, and analyze information to take action. However, creating a mobile-friendly version of a complex web-based table is a challenge. For this particular engagement, I helped a client in the property insurance space consolidate a critical workflow by mobilizing a very large data table for their consultants.
design  design--patterns  ux  ux--patterns  wd  wd-tables  wd-tables--responsive  wd-src--medium 
5 weeks ago
Well-Controlled Scrolling with CSS Scroll Snap  |  Web  |  Google Developers
CSS Scroll Snap feature allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. Paginated articles and image carousels are two commonly used examples of this. CSS Scroll Snap provides an easy to use and consistent API for building these popular UX patterns and Chrome is shipping a high fidelity and fast implementation of it in version 69.
wd  wd-css  wd-interface--scrolling  wd-src--google-developers 
5 weeks ago
Improve your motion – Erick Leopoldo – Medium
If you are a front-end developer you spend a lot of time researching and trying to understand how motion works and questioning yourself what is the best technique to improve your transitions and show the content in the most fluid way to the user.
wd  wd-animation  wd-src--medium 
5 weeks ago
Differences between Designing Native iOS Apps and Native Android Apps
To create the best native app design, you should bear in mind the differences between the iOS and Android platforms. These platforms differ not only in terms of what native applications look like; they also differ in terms of the structure and flow. You need to keep these differences in mind to provide the best user experience through the native application design.
design 
5 weeks ago
Supporting users who change colours on GOV.UK - Accessibility
By default on GOV.UK we try to use the most accessible colours, however there are still times where some users may need to change them. For example, those who are sensitive to light may find a white background too bright, or a user with dyslexia may find certain colours easier to read than others.
wd  wd-accessibility  wd-accessibility--interactive  wd-color 
5 weeks ago
Bulb Audit
This site represents the report for the inclusive design audit, carried out by Heydon Pickering for Bulb. The purpose of this report is to identify and provide advice for fixing and improving accessibility and inclusive design across three key Bulb sites:
wd  wd-accessibility 
5 weeks ago
Eight Things You Need To Know About Design Systems – Tradecraft – Medium
It’s on every job description. You see it all over the freshest design tool release. You might have even heard your family mention it at Thanksgiving. But what are the facts on these “design systems” that has the whole industry talking?
design  design--patterns  wd  wd-src--medium 
6 weeks ago
Speed up alignment in CSS with Flexbox utility classes
Aligning things in CSS has always been a nightmare (yes, I like drama). Then Flexbox came and with it the possibility to align items in a way that makes sense! In this article, I’m going to share a set of CSS utility classes based on Flexbox that can be used to align things in no time! I originally created these classes for our (upcoming) library of web components. They will probably be included as an optional global CSS file (meaning you can delete it, and nothing will change).
wd  wd-css  wd-css--flexbox  wd-src--medium 
6 weeks ago
ebidel/lighthouse-ci: Run Lighthouse in CI using Docker
This repo contains the frontend and backend for the Lighthouse CI server.
wd  wd-accessibility  wd-performance 
6 weeks ago
HTML5 draggable attribute - Maxability
The HTML5 draggable attribute specifies if the element can be picked for dragging. Links and images are draggable by default. Since this is a global attribute HTML5 draggable can be used on any element of the base markup.
wd  wd-html 
6 weeks ago
4.1.3: Status Messages-New SC in the WCAG 2.1 • Suman's Accessibility blog
As you may aware of, people with visually challenged use the screen reader software to browse the website or access the information on the web. While browsing the website, it is natural thing for anyone to perform some actions like submitting the form, adding items to the cart, and so on..) in order to get the information that he/she is looking for. when an action is performed then updates or changes(popping the error messages, success messages after adding the item to the cart, and so on..) may take place then and there without page refresh on the few websites. Those updates are obvious for the visual users but the same updates may not be obvious to the screen reader users. When screen reader users are not aware of these updates/changes then they do not get the same experience like how the sighted person experiences while browsing the information. As a result, screen reader users may not understand what is going on the page and might end up with the confusion/frustration
wd  wd-accessibility  wd-accessibility--aria 
6 weeks ago
FormStorage
A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.
wd  wd-performance  wd-performance--localstore  wd-js  wd-forms  wd-uses--github  wd-uses--npm  wd-uses--yarn 
6 weeks ago
Priority Nav Scroller - Priority+ navigation in a horizontal scrollable container with controls
Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.
wd  wd-interface  wd-interface--menu  wd-uses--github  wd-uses--npm 
6 weeks ago
The Cost Of JavaScript In 2018 – Addy Osmani – Medium
Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.
wd  wd-performance  wd-js  wd-src--medium 
6 weeks ago
WebAIM: WebAIM's WCAG 2 Checklist
The following is NOT the Web Content Accessibility Guidelines (WCAG) 2. It is a checklist that presents our recommendations for implementing accessibility principles and techniques for those seeking WCAG conformance. The language used here significantly simplifies and condenses the official WCAG 2.1 specification and supporting materials to make it easier to implement and verify for web pages.
wd  wd-accessibility  wd-src--webaim 
6 weeks ago
Shortish note on JAWS support for regions | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
The JAWS screen reader has fairly recently changed the way it supports the announcement of ARIA landmark roles and HTML5 elements that map to landmark roles. This has lead to some confusion for people when testing the support for these features.
wd  wd-accessibility  wd-html  wd-html--semantics  wd-src--paciello-group 
6 weeks ago
Tips for balancing web fonts & page load - Frontend News #1
Ellen Lupton wrote in her seminal book, "Thinking with Type", that "Typography is what language looks like." Your font selection affects how a visitor perceives your website. Fonts aren't just letters that look pretty. A font is a tool. For centuries designers have used fonts with purpose. Advertisers used Monster Fonts in the nineteenth century to draw attention on printed banners. Newspapers reached for the prominence of serif fonts. The New York Times crafted their own versions of Imperial and Cheltenham. The Washington Post built Postoni, a type derived from the timeless Bodoni. Tech companies have avoided serifs in favor of the round, friendly, and modern sans-serif fonts. Cereal is a creation of Airbnb. They built it to unify their brand across Web, Android, iOS, and print.
wd  wd-performance  wd-performance--conditional  wd-performance--perceived  wd-typography 
6 weeks ago
Aspect Ratio Boxes | CSS-Tricks
I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.
wd  wd-css  wd-src--css-tricks 
6 weeks ago
How to Use Smart Defaults to Reduce Cognitive Load
If you ask UX designers about the goal of their job, they’ll probably tell you that the goal is to make the user's life simple. When UX designers work on a product, they put maximum effort into creating something that gives users the straightest path to their desired outcome. And while that goal might sound simple, in real life there are a lot of barriers that prevent users from achieving it.
ux  ux--patterns 
6 weeks ago
The trick to viewport units on mobile | CSS-Tricks
Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.
wd  wd-css  wd-units  wd-js  wd-src--css-tricks 
6 weeks ago
malchata/yall.js: A fast, flexible, and small image lazy loader!
yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications.
wd  wd-performance  wd-performance--lazyload  wd-js  wd-uses--github 
7 weeks ago
imbrn/v8n: JavaScript fluent validation library.
The v8n is a validation library which provides you an easy and incredibly fluent way to build and run validations. With this, you can construct validation strategies as easy as you'd do in the English language.
wd  wd-js  wd-forms  wd-forms--validation  wd-uses--github  wd-uses--npm  wd-uses--yarn 
7 weeks ago
Teutonic CSS
A modern CSS framework — versatile, well documented.
wd  wd-framework  wd-framework--css  wd-uses--github 
7 weeks ago
alectro/SCSScale: Typographic modular scale starter based on body's font-size built on SCSS.
Typographic modular scale starter based on body's font-size built on SCSS. Font-size calculated in rem with a fallback integer number in pixels and line-height in number (unitless).
wd  wd-sass  wd-sass--mixin  wd-typography  wd-typography--modular-scale  wd-uses--github 
7 weeks ago
Spacings and CSS Custom properties – Base Voices
Early on when working on the website for Antwerp’s fashion museum MoMu, we decided to follow a more systematic approach to design. It made a lot of sense for the project, as it had to be a scalable system much more than a custom designed set of pages.
wd  wd-css  wd-css--variables  wd-sass  wd-sass--mixin 
7 weeks ago
Easy ARIA tip #8: Use aria-roledescription to selectively enhance the user experience › Marco's Accessibility Blog
In WAI-ARIA 1.1, the aria-roledescription attribute has been added to give web authors the ability to further describe the function of a widget. Here are a few tips for usage.
wd  wd-accessibility  wd-accessibility--aria  wd-html 
7 weeks ago
Pattern Library First: An Approach For Managing CSS — Smashing Magazine
CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.
wd  wd-css  wd-styleguide  wd-src--smashing 
7 weeks ago
Take control of your scroll: customizing pull-to-refresh and overflow effects  |  Web  |  Google Developers
The CSS overscroll-behavior property allows developers to override the browser's default overflow scroll behavior when reaching the top/bottom of content. Use cases include disabling the pull-to-refresh feature on mobile, removing overscroll glow and rubberbanding effects, and preventing page content from scrolling when it's beneath a modal/overlay.
wd  wd-css  wd-interface  wd-interface--scrolling  wd-src--google-developers 
7 weeks ago
Learn these JavaScript fundamentals and become a better developer
JavaScript has primitives, objects and functions. All of them are values. All are treated as objects, even primitives.
wd  wd-js  wd-src--medium 
10 weeks ago
Design for Kids Based on Their Stage of Physical Development
Summary: As kids’ physical development throughout childhood changes, so do their physical abilities, constraints, and device preferences. Touch gestures such as swiping and tapping big targets are easy for all children, but fine mouse or trackpad gestures such as dragging are hard for young kids.
ux  wd  wd-src--nn-group 
10 weeks ago
Docz
It has never been so easy to document your things!
wd  wd-styleguide 
10 weeks ago
CSS Grid in IE: Debunking Common IE Grid Misconceptions | CSS-Tricks
This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this is some far off future that is many years away. If the only thing holding you back from that reality is IE11 (check caniuse.com), then you’re in luck! That day is today! Or at least it will be when you finish reading this series.
wd  wd-css  wd-css--grid  wd-browser  wd-src--css-tricks 
11 weeks ago
Stop Password Masking
Summary: Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures.
ux  ux--patterns  wd  wd-forms  wd-forms--password  wd-src--nn-group 
11 weeks ago
Optimizing CSS: ID Selectors and Other Myths — SitePoint
In today’s typical scenario, where the average website ships 500KB of gzipped JavaScript and 1.5MB of images, running on a midrange Android device via 3G with a 400ms round trip time, CSS selector performance is the least of our problems.
wd  wd-performance  wd-browser  wd-css  wd-src--sitepoint 
11 weeks ago
How and Why We Unit Test Our Sass | Sparkbox | Web Design and Development
At Sparkbox, we’re quite familiar with design systems and are huge fans when they’re done well and are continuously nurtured. Well-established design systems that are adopted and cared for have tremendous value potential.
wd  wd-sass  wd-testing 
11 weeks ago
Short note on progressive ARIA | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
When we talk about Progressive Enhancement (PE), we usually focus on HTML, CSS, and JavaScript, and often forget about ARIA. But when ARIA is hard-coded into HTML it can have unintended consequences if/when the JavaScript fails to deliver the expected functionality.
wd  wd-accessibility  wd-accessibility--aria 
11 weeks ago
My 7 favorite creative exercises – Prototypr
Over time I have been building a collection of exercises I like to use in workshops and creative sessions. That’s besides my enthusiasm for the the 1-week design sprint format of course (more on that here), but spending a full week isn’t always possible or necessary. For shorter workshops I like to have a few others at hand, and in this article I would like to share my 7 favorites with you. They are all tried and tested at the TU Delft or at KLM’s Digital Transformation program of course!
ux  wd  wd-src--medium 
11 weeks ago
Voca: The JavaScript string library
The Voca library offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugify, latinise, sprintf'y, truncate, escape and much more. The modular design allows to load the entire library, or individual functions to minimize the application builds. The library is fully tested, well documented and long-term supported.
wd  wd-js  wd-uses--github  wd-uses--npm 
11 weeks ago
Bit - utils. Javascript components by bit.
Javascript utility functions delivering modularity and performance.
wd  wd-js  wd-uses--yarn  wd-uses--github  wd-uses--npm 
11 weeks ago
Chance
Chance is a minimalist generator of random strings, numbers, etc. to help reduce some monotony particularly while writing automated tests or anywhere else you need anything random.
wd  wd-js  wd-uses--npm  wd-uses--github 
11 weeks ago
CSS for the Next Billion Users
There’s been a lot of talk lately about developing for the “next billion users”, which essentially means targeting users who are coming online for the first time in developing countries. This talk will be about different ways we can write CSS for the “next billion users”. I will talk about my experience developing websites for users in Nigeria and cover areas such as performance, accessibility, and progressive enhancement.
wd  wd-localisation  wd-css  wd-accessibility  wd-performance  wd-src--notist 
12 weeks ago
Web Content Accessibility Guidelines (WCAG) 2.1 | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
This week (5 June 2018) saw the release of the Web Content Accessibility Guidelines (WCAG) 2.1 as a W3C recommendation – meaning that the working group (which, among many others, included members from The Paciello Group) considers the guidelines stable and ready for implementation. WCAG 2.1 builds on top of WCAG 2.0, and it still incorporates all the guidelines and success criteria of 2.0. As such, it is backwards-compatible: a site that adheres to WCAG 2.1 automatically also adheres to WCAG 2.0.
wd  wd-accessibility  wd-src--paciello-group 
june 2018
Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium
Web developers love a good holy war, whether it’s over our favorite JavaScript frameworks or principles like separation of concerns. One that’s always been of interest to me is the battle over CSS units, namely between pixels and relative units like rems and ems.
wd  wd-accessibility  wd-css  wd-units  wd-src--medium 
june 2018
« earlier      
color data design design--inclusive design--logos-and-branding design--objects design--patterns 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--autocomplete 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--toast 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--vanilla 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--notist 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 wd-wd-browser

Copy this bookmark:



description:


tags: