Accessibility Testing with pa11y
Knowing where to start with accessibility testing can be difficult and overwhelming. In my article on Tools for Developing Accessible Websites, I mentioned 5 tools you can use to get started developing more accessible websites. More recently, I have discovered an incredibly powerful tool - pa11y
wd  wd-accessibility  wd-accessibility--tools  wd-src--bitsofcode 
2 days ago
Scotch Egg Navigation - Andy Beaumont
While working on a project with Richard Amos about a year ago we were pondering the static linear nature of breadcrumbs and wondering why they should always be so. The breadcrumb serves two purposes; firstly it gives users a sense of where they are in a site’s structure, helping them to never feel lost or disoriented.
ux  ux--patterns  wd  wd-interface--breadcrumb 
2 days ago
Performant Web Animations and Interactions: Achieving 60 FPS - Milliseconds Matter
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a bit of time to reduce first page loads by even a few milliseconds, but forget to consider the impact of the interactions that follow.
wd  wd-performance  wd-animation 
5 days ago
veltman/flubber: Tools for smoother shape animations.
Some best-guess methods for smoothly interpolating between 2-D shapes.
wd  wd-images  wd-images--svg  wd-animation  wd-uses--github  wd-uses--npm 
8 days ago
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
wd  wd-sass  wd-sass--extend  wd-sass--maps  wd-sass--media-queries  wd-sass--mixin  wd-sass--variables 
8 days ago
You’re Offline | Max Böck - Frontend Web Developer
A truly responsive website should adapt to all kinds of situations. Besides different viewport sizes, there are other factors to consider. A change in connectivity is one of them.
wd  wd-performance  wd-performance--offline 
8 days ago
How to turn your website into a PWA | Max Böck - Frontend Web Developer
A Progressive Web App, or PWA, uses modern web capabilities to deliver an app-like user experience. Any website can be a PWA - here's how to do it.
wd  wd-pwa 
8 days ago
This is a checklist of potential things that might want to be considered when constructing a style guide for a company or project. Currently a work in progress so please feel free to open issues or pull requests.
wd  wd-styleguide 
8 days ago
The Accessibility Cheatsheet
We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG contain some very useful information, and so I decided to condense the very extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.
wd  wd-accessibility 
8 days ago
CSS Custom Properties—Dynamic Changes With Javascript
Have you ever wished you could change the value of a Sass or Less variable after your page has loaded? I have. Unfortunately, it’s not something you can do as the variables cease to be variables once the preprocessed code is compiled into CSS. You don’t have the same limitation with CSS custom properties.
wd  wd-css  wd-css--variables  wd-js 
11 days ago
Performance and Resilience: Stress-Testing Third Parties – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
When building almost any website of any reasonable size, we’re highly likely to need to call on at least some third party resources: analytics, fonts, CDNs, ad providers, to name just a few.
wd  wd-performance 
11 days ago
The Critical Request | CSS-Tricks
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready. Little may you know, a lot is going on under the hood. Have you ever wondered how browser figures out which assets should be requested and in what order? Today we're going to take a look at how we can use resource priorities to improve the speed of delivery.
wd  wd-performance  wd-performance--conditional  wd-performance--prefetch  wd-performance--perceived  wd-html  wd-js  wd-css  wd-images  wd-src--css-tricks 
13 days ago
If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks
The story of FOUT is so fascinating. Browsers used to do it: show a "fallback" font while a custom font loads, then flop out the text once it has. The industry kinda hated it, because it felt jerky and could cause re-layout. So browsers changed and started hiding text until the custom font loaded. The industry hated that even more. Nothing worse than a page with no text at all!
wd  wd-css  wd-typography  wd-typography--rendering  wd-performance  wd-performance--perceived  wd-performance--lazyload  wd-src--css-tricks 
13 days ago
Umbrella JS
It is strongly influenced by jquery with many similar methods so you'll feel at ease developing with Umbrella.
wd  wd-js  wd-performance 
18 days ago
The Code4Lib Journal – A Practical Starter Guide on Developing Accessible Websites
Web accessibility is increasingly important. One reason is legal: in the US the federal government recently updated their regulation on accessibility of digital content, Section 508, incorporating the W3C’s Web Content Accessibility Guidelines 2.0 as well as harmonizing the guidelines with the EU’s information and technology communications rules (United States Access Board, 2017). While Section 508 only explicitly applies to federal departments, based on wording in other sections, such as Section 504, any federally funded program can also be held accountable in following the same guidelines.
wd  wd-accessibility 
18 days ago
Tooltips & Toggletips
Tooltips — affectionately misnomered as "tootlips" by my friend Steve — are a precariously longstanding interface pattern. Literally "tips for tools", they are little bubbles of information that clarify the purpose of otherwise ambiguous controls/tools. A common example is a control that is only represented by a cryptic icon, the meaning of which the user has yet to learn.
wd  wd-accessibility  wd-html  wd-html--semantics  wd-interface  wd-interface--tooltip 
18 days ago
Are Notifications A Dark Pattern? | Designlab
Have you ever had a nightmare where you were literally drowning in little red notification badges? I did once, and it got me thinking: what actually are notifications? And are they just another dark pattern – a form of coercion and online trickery? In this article, I explore the phenomenon of “pseudo-notifications”, and conclude with some thoughts on what the future might hold for notifications as a design pattern.
ux  ux--dark-patterns 
18 days ago
Effective UI Texts: Words to Avoid in Writing | Icons8 Blog
Neat, coherent, and obvious texts make interfaces more intuitive and instill confidence. Below you will find all common words to avoid in writing when you create a text for your UI.
ux  ux--content 
18 days ago
Checklist - 18F Accessibility Guide
This checklist helps developers identify potential accessibility issues affecting their websites or applications. It's broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.
wd  wd-accessibility 
18 days ago
Animating with CSS Variables | Val Head
There are some really impressive and amazing examples of using CSS Variables in animation out there, like this single div accordion or this sunrise/sunset scene. How could you not want to give CSS Variables a spin in your own animation after seeing things like that? Here are 4 ways CSS Variables can be helpful for animation even if you’re not making fancy demos like these.
wd  wd-animation  wd-css  wd-css--variables 
18 days ago
How We Conducted User Research in The Arab Market
When I started working at UX studio as a researcher, I was lucky enough to be a member of an international design team on my very first project. We were working on a new mobile app targeted for the UAE market, which had been quite unknown to us before.
wd  wd-localisation 
20 days ago
CSS done right - Post RTLCSS · trivago techblog
Our first right-to-left platform was released in 2014. We had developed a solution to generate right-to-left CSS with Sass mixins and variables as we have described in a blog article. We used this approach for nearly 3 years but recently migrated the right-to-left generation from pre-processing to post-processing with RTLCSS. With this article I would like to share the reasons for the migration as well as our experiences and lessons learned.
wd  wd-css  wd-localisation 
26 days ago
Disabled buttons suck - Axess Lab
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
wd  wd-accessibility  wd-accessibility--interactive  wd-forms  wd-forms--button 
4 weeks ago
Short note on aria-label, aria-labelledby, and aria-describedby | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
Be careful when you use the aria-label, aria-labelledby, and aria-describedby attributes, because they do not work consistently with all HTML elements. This is a short note on when (and when not) to use those attributes.
wd  wd-accessibility  wd-accessibility--aria  wd-html  wd-html--microdata  wd-src--paciello-group 
4 weeks ago
ableplayer/ableplayer: fully accessible cross-browser HTML5 media player.
Able Player is a fully accessible cross-browser media player. It uses the HTML5 <audio> or <video> element for browsers that support them, and (optionally) the JW Player as a fallback for those that don’t.
wd  wd-accessibility  wd-accessibility--interactive  wd-media  wd-media--video  wd-uses--github 
4 weeks ago
The bloat of AMP
AMP had just been popularised at the time I was considering rebuilding this site. It sounded like as a great idea. Faster websites are right up my alley. And who doesn't want an SEO boost? I mean, I still can't make Get Cryptolocker show up on Google. And no, I don't want to buy your Wordpress theme, even if it is "SEO certified".
wd-html  wd-html--amp  wd-performance 
5 weeks ago
How to create content that works well with screen readers | Accessibility
Screen readers are applications that turn on-screen content into speech or show it on a Braille display. Most screen readers are made up of two things: the screen reader software, and a Text To Speech (TTS) engine, which is what converts the text from the screen reader into speech.
ux  ux--content  wd  wd-accessibility 
5 weeks ago
Performance Analysis Reference  |  Web  |  Google Developers
This page is a comprehensive reference of Chrome DevTools features related to analyzing performance.
wd  wd-performance 
6 weeks ago
Laissez-faire Font Smoothing and Anti-aliasing—
Recently, Twitter made a global anti-aliasing CSS change to their website. Before writing this post, I didn’t know very much about anti-aliasing—so I decided to learn everything I could about it to better understand the reasoning behind a decision like that. Here’s what I learned.
wd  wd-typography  wd-typography--rendering  wd-css 
6 weeks ago
Anchorme: Javascript library to detect links / URLs / Emails in text and convert them to clickable HTML anchor links
Tiny, fast, efficient, feature rich Javascript library to detect links / URLs / Emails in text and convert them to clickable HTML anchor links
wd  wd-js  wd-uses--github  wd-uses--npm 
6 weeks ago
HR.js | Tiny JavaScript plugin for highlighting and replacing text in the DOM
Tiny JavaScript plugin for highlighting and replacing text in the DOM
wd  wd-js  wd-uses--github 
6 weeks ago
Yomguithereal/pandemonium: Typical random-related functions for JavaScript.
Pandemonium is a dead simple JavaScript library providing typical random-related functions such as choice, sample etc.
wd  wd-js  wd-uses--github  wd-uses--npm 
6 weeks ago
KevinPy/KonamiJS: Only 300b !
Embed the Konami Code into your Website for more fun.
wd  wd-js  wd-uses--github 
6 weeks ago
Using CSS variables correctly - Mike Riethmuller
CSS Variables (also known as Custom Properties) are now supported in all modern browsers and people are starting to use them production. This is great but they’re different from variables in preprocessors and I’ve already seen some examples of people using them without considering the advantage they offer.
wd  wd-css  wd-css--variables 
6 weeks ago
Events and disabled form fields -
Turns out, mouse events don't fire when the pointer is over disabled form elements, except in Firefox.
wd  wd-forms  wd-css 
6 weeks ago
The responsive order conflict for keyboard focus | AlastairC
We’re starting to hit a problem with the new CSS methods (Flexbox and Grid), and how people using a keyboard (or equivalent) interact with a page. I’m not the first to say the keyboard order should follow the CSS, but I’d like to highlight some recent examples from work (anonymised).
wd  wd-accessibility  wd-accessibility--tabindex  wd-css  wd-css--flexbox  wd-css--grid 
7 weeks ago
Toolbars, keyboards, and the viewports - QuirksBlog
All mobile browsers have two viewports. The layout viewport constrains your CSS — width: 100% means 100% of the layout viewport — while the visual viewport describes the area of the page the user is currently seeing. This visualisation of the two viewports might be useful as a reminder.
wd  wd-css  wd-src--quirksmode 
8 weeks ago
Home - Documentation
A Javascript string manipulation library.
wd  wd-js  wd-uses--npm  wd-uses--yarn  wd-uses--github 
8 weeks ago
Get a glance at a whole web page with an aerial view
wd  wd-js 
8 weeks ago
Building Production-Ready CSS Grid Layouts Today – Smashing Magazine
Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.
wd  wd-css  wd-css--grid  wd-src--smashing 
9 weeks ago
turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites
Developed for design, turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
wd  wd-css  wd-framework  wd-framework--css 
9 weeks ago
Bojler is an email boilerplate and a guideline for writing HTML code that will render correctly across each of the most popular email clients.
wd  wd-email  wd-uses--github 
9 weeks ago
Accessibility according to actual people with disabilities - Axess Lab
“If you have a disability, what’s the hardest thing about browsing the web?” The answers to Safia Abdalla’s tweet are truly eye-opening and shows us what web accessibility should really be about.
wd  wd-accessibility 
9 weeks ago
How to Make Your Website Accessible to People Who Use a Screen Magnifier
There's a lot of content out there on how to make your website accessible. But I haven't seen much on the subject of accessibility to users of screen magnifiers. I'm one of them, and I frequently run into annoying issues on the web.
wd  wd-accessibility 
9 weeks ago
Sticky Sidebar jQuery
Sticky Sidebar is jQuery plugin for making intelligent and high performance sticky sidebar, works with sidebar if it’s bigger or smaller than viewport, has resize sensor to re-calculate its dimensions automatically when size of sidebar or its container is changed, supports multiply sidebars in once and compatible with Firefox, Chrome, Safari, and IE9+.
wd  wd-js  wd-js--jquery  wd-interface  wd-interface--sticky  wd-uses--bower  wd-uses--npm  wd-uses--github 
9 weeks ago
dirrty: lightweight jquery plugin to detect if the fields of a form had been modified
dirrty is a lightweight jquery plugin you can use to detect if the fields of a form had been modified.
wd  wd-js  wd-js--jquery  wd-forms  wd-uses--github 
9 weeks ago
Accesible Offcanvas Plugin
A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive  wd-js  wd-js--jquery  wd-uses--github  wd-uses--bower  wd-uses--npm  wd-interface  wd-interface--modal 
9 weeks ago
Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli
I keep seeing overly-complex controls with additional elements as style hooks, scripting to make up for non-semantic replacements, images that need to be downloaded, and so on. This is silly. Here are some really simple styles to make radio buttons and checkboxes look unlike native controls (which seems to be the main goal from these over-engineered attempts).
wd  wd-accessibility  wd-forms  wd-forms--input 
10 weeks ago
How the minmax() Function Works
One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
wd  wd-css  wd-css--grid  wd-src--bitsofcode 
10 weeks ago
tScroll Index | Animation Scroll | t-scroll tuds
The most popular HTML, CSS, and JavaScript (Animate Elements On Reveal)
wd  wd-js  wd-interface--scrolling  wd-uses--github  wd-uses--npm 
10 weeks ago
How Many People With Disabilities Use My Website? - Mightybytes
It stands to reason that knowing how many of your website visitors have disabilities might help you make more educated decisions about web content or investments in digital accessibility. Clients often ask us how to find this information through tools like Google Analytics or other means. While intentions were likely good—perhaps they needed help planning for a requested budget to improve their web accessibility for disabled users—this is a slippery, complicated slope for several reasons.
wd  wd-accessibility 
10 weeks ago
CodePen - Sass Color Contrast Tools
A collection of functions to make it easy to test the contrast between colors and tweak them until they pass your specified requirements. Formulas are based on the WCAG 2.0 guidelines.
wd  wd-accessibility  wd-accessibility--contrast  wd-color  wd-sass  wd-sass--mixin 
10 weeks ago
jonathantneal/postcss-normalize: Use the parts of normalize.css you need from your browserlist
PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist.
wd  wd-performance  wd-css  wd-postcss  wd-uses--npm  wd-uses--github 
11 weeks ago
Build a Style Guide Straight from Sass | CSS-Tricks
Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how lacking our project documentation was. If you've ever been a new developer on a team with weak documentation, you know how confusing it can be to try to familiarize yourself with a dozen projects without documentation.
wd  wd-sass  wd-styleguide  wd-src--css-tricks 
11 weeks ago
How Can I Make My Icon System Accessible? | CSS-Tricks
Here's a question I got the other day: Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--images  wd-images  wd-images--icon  wd-src--css-tricks 
11 weeks ago
Anatomy of an Accessible Auto Suggest – UX Mastery
Google launched auto-suggest (a.k.a. Google Suggest) as a Google Labs project in 2004, saying it “…provides you with search suggestions, in real time, while you type”. These days auto-suggest is everywhere, from social media sites like Twitter and Facebook, to shopping sites like eBay and Amazon, and even in occupation validation for credit card applications.
wd  wd-accessibility  wd-accessibility--interactive 
11 weeks ago
Anchors OK? Re-Assessing In-Page Links
In-page links (also referred to as anchor links or jump links) are links that lead users to content on the same web page, rather than to another page of the site. In the past, the user-experience recommendation has been to avoid these types of links. The use of in-page links has increased in the past few years of web design, making a deeper evaluation of the pros and cons of this design element worthwhile.
ux  ux--patterns  wd  wd-html  wd-interface--scrolling  wd-src--nn-group 
11 weeks ago
Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
wd  wd-css  wd-css--grid 
12 weeks ago
Learning CSS Grids
CSS Grid is here! As of March 2017, all major browsers support it. Given this good news I decided to spend some time to better understand how to use it. The learning curve was much steeper than I expected – the module introduces something like 17 new concepts. It was quite overwhelming to take it all in, so I started breaking things down, taking notes and making demos, which I am going to share here. This is by no means an exhaustive guide. It might not even be 100% factually correct. But this should be enough information for you to form a basic mental model of how CSS Grids work and start building layouts with it.
wd  wd-css  wd-css--grid 
12 weeks ago
Slide to unlock | Be Boundless
We live in a touch-screen world. One where tiny computers full of information live in our pockets. Where boarding passes are printed at touch-screen kiosks and groceries are paid for at touch-screen card readers. A world where extending a finger and making contact with a particular point gets us what we want. Well, except for the millions of us across the world who experience motor impairments — the millions of us who are being left behind.
wd  wd-accessibility  wd-accessibility--interactive  wd-input  wd-input--touch 
may 2017
Altering the DOM with JavaScript | Zell Liew
If you’re learning JavaScript, the first thing you should learn (after understanding the basics like variables, functions, etc.) is to alter the DOM. This is one of the things you do daily as a frontend developer. Changing the DOM used to be difficult. We needed jQuery to make things easier. Luckily, there’s no need for jQuery anymore.
wd  wd-js 
may 2017
WebAIM: To ARIA! The Cause of, and Solution to, All Our Accessibility Problems
When WebAIM evaluates a client’s website for accessibility, we often spend more time evaluating and reporting on ARIA use than any other issue. Almost every report we write includes a section cautioning against ARIA abuse and outlining ARIA uses that need to be corrected or, most often, removed. Ironically, this is often followed by a list of issues that can only be addressed with ARIA.
wd  wd-accessibility  wd-accessibility--aria  wd-src--webaim 
may 2017
7 Sass techniques to help you write better code · Devbridge
Sass (syntactically awesome stylesheets) is a powerful tool that helps users write CSS with ease. If you’re reading this, however, you probably already knew that. In this post, I explore the more advanced possibilities of Sass. Following are seven techniques to help developers write more efficient code.
wd  wd-sass  wd-approach 
may 2017
Vital | CSS Framework
A minimally invasive CSS framework for modern web applications
wd  wd-framework  wd-framework--css 
may 2017
mini.css - Minimal, responsive, style-agnostic CSS framework
mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.
wd  wd-framework--css 
may 2017
It's Time To Start Using CSS Custom Properties – Smashing Magazine
Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.
wd  wd-css  wd-css--variables  wd-src--smashing 
may 2017
Winning with CSS Variables | hey it's violet
CSS variables, like variables in any programming language, let us reference the same values over and over. As of April 2017, they are supported by all modern browsers and are an effective way to write tight, clean styles.
wd  wd-css  wd-css--variables 
may 2017
Stickybits is a lightweight (<2KB) alternative to position: sticky polyfills that works perfectly for things like sticky headers.
wd  wd-js  wd-interface  wd-interface--sticky  wd-uses--github  wd-uses--yarn  wd-uses--bower  wd-uses--npm 
may 2017
Handle Mouse And Touch Input With The Pointer Events API | Tutorialzine
With more and more people using their mobile phones and tablets for web browsing, we as developers have to make sure that our web interfaces are fully accessible via touch. Setting up click and hover event listeners sort of works, but it is clearly a leftover solution from the mouse era.
wd  wd-js  wd-input  wd-input--pointer  wd-input--touch 
april 2017
touch-action | Codrops CSS Reference
The touch-action property determines if and how a user can interact with an element on screen via touch input using the browser’s default features. For example, panning or zooming.
wd  wd-css  wd-input  wd-input--touch  wd-src--tympanus 
april 2017
Stop Guessing Languages Based on IP Address – C. McKenzie – Medium
Recently I took a trip to Europe. When I arrived in Berlin, I opened up my laptop and went to Google. Much to my surprise, despite being logged in, my results came back in German. Other large-scale sites I went to suddenly gave me their German counterparts. I got redirected from .com to .de and had to look for a “Switch to English” link or try to run a translator on the site.
language  wd  wd-localisation  ux  ux--content 
april 2017
Loves me, loves me not –
Have you ever broke up with a mobile provider? Or a bank? Or technology? Do you remember what where the words you wanted to throw into their faces? To be totally and brutally honest? To get things off your chest?
ux  ux--personas 
april 2017
Scroll-Triggered Text Animations Delay Users
When misused, animations intended to add aesthetic appeal slow down content consumption and get in the user’s way.
ux  ux--content  wd  wd-animation 
april 2017
Chromium Blog: Scroll anchoring for web developers
One of the strengths of the web is progressive loading, which means that there is no install step and users can start consuming content almost immediately while the site keeps loading. But progressive loading can also result in annoyances, such as an unexpected page jump when offscreen content loads and pushes down what’s currently on the screen. This can be even worse on mobile devices, since smaller screens mean more content is offscreen and page jumps are more likely.
wd  wd-css  wd-interface--scrolling 
april 2017
The invisible parts of CSS · MadebyMike
If you use CSS in your daily work, your primary goal is probably focused around making things ‘look right’. How this is achieved is often far less important than the end result. This means we care less about how CSS works than the correct syntax and visual results.
wd  wd-css 
april 2017
Individualizing CSS Properties with CSS Variables
In “A Trick: Individual CSS Transform Functions”, I discussed how we could use CSS Variables (Custom Properties) to bring us close to independent transform properties. Each day I explore CSS Variables, however, I’m finding they can help us with any property that accepts multiple values at the same time.
wd  wd-css  wd-css--variables 
april 2017
Think you know the top web browsers? – Samsung Internet Developers – Medium
If you attend web developer events in much of Europe and North America, inevitably you will see the same browser logos keep cropping up in the speakers’ slides. Chrome, Firefox, Safari, IE/Edge, Opera… It is a common idea that these are the five “major browsers”. Our familiarity with them is comforting, but it might be a skewed and outdated view. Partly from our Western bubble and partly a hangover from the days of desktop dominance. Let’s take a look at some numbers so we can better represent the reality.
wd  wd-browser  wd-localisation 
april 2017
« earlier      
color data design design--logos-and-branding design--objects 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 wd wd-accessibility wd-accessibility--aria wd-accessibility--audio wd-accessibility--contrast wd-accessibility--hiding-content wd-accessibility--images wd-accessibility--interactive wd-accessibility--tabindex wd-accessibility--tools 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--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: