spaceninja + testing   69

How to Fail at Accessibility
So, let’s flip the script, and dive into — “How not to fail at accessibility”
We’re going to cover three main areas:
Testing — how do you know if your website is or is not accessible currently?
Building — once you’ve identified some bugs, how do you code for accessibility?
Process — how can you improve your process to prevent bugs in the first place?
fridayfrontend  accessibility  cssbasics  testing 
7 days ago by spaceninja
Unexpected accessibility tips
8+1 unexpected but practical tips for testing accessibility and inclusive design: Test on the train; Ask people in a hurry; Hold your mobile with straight arms; Test on a projector; Take off your glasses; Wear gloves; Use only the keyboard; Test on a low-spec device; Disable JS, CSS, and images;
fridayfrontend  accessibility  testing 
5 weeks ago by spaceninja
JS Testing Best Practices
Comprehensive and exhaustive JavaScript & Node.js testing best practices
javascript  testing  bestpractices 
5 weeks ago by spaceninja
Writing Tests For CSS Is Possible! Don’t Believe The Rumors, by Gil Tayar
You know that fear. The fear of changing something in your CSS. Deleting a CSS rule is a lesson in getting yourself to calm down, telling yourself that it’s OK, you are absolutely sure that deleting that rule won’t change anything.

And only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked _everything_, and that you missed something. Not to mention that it’s amazingly boring.

Never fear again! Testing your CSS code, testing the visual aspects of your code, is now possible, and I will show how. A slew of new Saas tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS).

So grab that keyboard, refactor your CSS, because writing tests for it is now possible!
fridayfrontend  video  testing  css  regression 
7 weeks ago by spaceninja
An Intro To Screen Reader Testing for Sighted Developers
Besides the design, loading time and performance, accessibility determines the user experience of the web apps that you're building profoundly. This quick guide will give you an introduction to the why and how of testing your website's user experience using screen readers.
fridayfrontend  accessibility  screenreaders  testing 
10 weeks ago by spaceninja
My Web Accessibility Testing Process
It sounded like people were curious about my web accessibility testing approach! So I’m going to walk you through my thought process, what I test for, how early I check, and how I test. It’s like having my web accessibility testing checklist in your back pocket.
fridayfrontend  accessibility  testing  webaim  wave  contrast  tabindex  screenreaders  voiceover 
june 2019 by spaceninja
7 absolute truths I unlearned as junior developer
A few things I strongly believed when I was a junior developer which turned out to be wrong.
fridayfrontend  learning  development  senior  testing  documentation  automation  lint  techdebt  programming 
june 2019 by spaceninja
Building the most inaccessible site possible with a perfect Lighthouse score
Google's built-in testing tool Lighthouse judges the accessibility of our websites with a score between 0 and 100. It’s laudable to try to get a high grading, but a score of 100 doesn’t mean that the site is perfectly accessible. To prove that I carried out a little experiment.
fridayfrontend  accessibility  lighthouse  testing  automation 
june 2019 by spaceninja
Writing Tests for React Applications Using Jest and Enzyme
While it is important to have a well-tested API, solid test coverage is a must for any React application. Tests increase confidence in the code and helps prevent shipping bugs to users.

That’s why we’re going to focus on testing in this post, specifically for React applications. By the end, you’ll be up and running with tests using Jest and Enzyme.
react  javascript  testing  enzyme  jest 
may 2019 by spaceninja
Component Testing Plans
Quality stems from and is proven by an implemented testing plan by which components are inspected prior to release. This article describes criteria and tools for testing components and how to order making them at a high level to help teams plan.
testing  components  qa  accessibility  design 
may 2019 by spaceninja
Animation Performance 101: Measuring with Dev Tools
In the last part of this series, we’ll take a look at the most important part of performance: how to measure and diagnose bottlenecks. Performance optimizations are meaningless without data! We’ll go through how to analyze using Chrome DevTools*. First, let’s take a look at two tools mentioned in Part 1.
fridayfrontend  cssbasics  animation  css  testing  devtools 
april 2019 by spaceninja
Make it hard to screw up driven development
We'll always be screwing up code, but we can also always be finding ways not to… There is probably no practical way to make it impossible to write sloppy, bad code, but it is fascinating to consider how tooling has evolved to make it harder. Let's get all Poka-yoke on development.
fridayfrontend  devtools  linting  testing  validation  codereviews  pullrequest  quality 
april 2019 by spaceninja
5 Tools For Automated Accessibility Audits
Some of the quickest accessibility wins can be simple fixes, but if you don’t know what to look for, they can be hard to spot. Identifying these issues is important, which is why there is a whole slew of web accessibility checkers available to help identify these problems. I want to introduce you to a few tools that you might find helpful in identifying accessibility issues. Just remember though, that automated tests can only catch a portion of all issues.
fridayfrontend  cssbasics  accessibility  automation  testing  wave  sortsite  axe  pa11y  tota11y  tools 
march 2019 by spaceninja
A Beginner's Guide to Test Automation
If you’re new to automated testing, you’re probably starting off with a lot of questions: How do I know which tests to automate? Why is automated testing useful for me and my team? How do I choose a tool or framework? This article answers a lot of those questions—and gives you some more to consider!—so you have an excellent foundation for beginning your automation endeavors.
automation  testing 
march 2019 by spaceninja
Laracasts: Testing Vue
How in the world are we supposed to unit test Vue components? Is it even possible? Why, yes. Yes it is! I'll show you the full process, step by step. Not only will you learn the necessary tooling, but we'll also review the ins and outs of testing your client-side code. Have you ever wanted to use TDD for your Vue components? I'll show you how.
javascript  vue  training  tutorials  video  testing  tdd 
february 2019 by spaceninja
Keeping a React Design System Consistent Using Visual Regression Testing
Ensuring visual consistency is one of the biggest challenges of working on a UI component library. Since visual regressions in one component can lead to unwanted changes across an entire application, it becomes vital that we test not only our components functionality, but also their visuals. What follows is the story of how we introduced visual regression testing into our React component library that implements our design system.
fridayfrontend  css  react  designsystem  qa  testing 
january 2019 by spaceninja
On the importance of testing with content blockers
I recommend everyone to browse with content blockers turned on. The goal: protection against tracking. Safari and Firefox have good tracking protection features. With more people using these features, we should test our sites with content blockers turned on.
fridayfrontend  css  cssbasics  testing  contentblockers  adblockers  security  layout 
january 2019 by spaceninja
Node.js & JavaScript Testing Best Practices
As an independent Node.js consultant I’m engaged and review 10+ projects every year and my customers justifiably ask to focus on testing. A few months ago, I started to document here the insights and repeating errors I observe at the field and suddenly it piled-up into 30 testing best practices.
testing  javascript 
january 2019 by spaceninja
Test Level Overview
(Unit) The drawer works fine.
(Integration) Drawer might open, depending on the size of the handles used
(Live) Drawer cannot open with other drawer in place
(E2E) I need to call the installer. I can’t believe I paid for this kind of service.
testing  qa 
december 2018 by spaceninja
Testing iOS on a Mac (for Free!)
Full interactive iOS Mobile Safari browser testing is possible right on your Mac, no additional services necessary. We'll set up Apple's Simulator and configure it for testing Safari on a wide range of iOS versions and devices.
fridayfrontend  css  cssbasics  testing  qa  ios  vm  emulator 
november 2018 by spaceninja
The End of Life of Internet Explorer 11
Stop supporting IE 11. It is as simple as that. As soon as more and more Websites do not work in IE 11 the easier it is for the corporations to see the need to move on to another browser and nobody will be using IE 11 anymore.
ie11  ie  microsoft  browsers  support  qa  testing 
november 2018 by spaceninja
The Big List of Naughty Strings
The Big List of Naughty Strings is an evolving list of strings which have a high probability of causing issues when used as user-input data. This is intended for use in helping both automated and manual QA testing; useful for whenever your QA engineer walks into a bar.
security  xss  testing  qa  lists 
november 2018 by spaceninja
Learn to Integrate Visual Testing with Percy
Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site? That's exactly what Percy does. When you do a pull request, it literally takes screenshots and compares them to the screenshots of what is on master. If anything has changed, it lets you know.
fridayfrontend  css  video  testing  visualtesting  percy  tutorials 
november 2018 by spaceninja
Advanced React & GraphQL — Build Full Stack Applications with React and GraphQL
Build an online store with React and GraphQL. Just as React has transformed the way we build web applications, GraphQL is changing how we build APIs to query and mutate data. With a focus on modern JavaScript and real world application, this course is a start-to-finish way to learn Full Stack Advanced React, GraphQL, Node.js and friends.
react  graphql  node  apollo  javascript  training  nextjs  jest  enzyme  testing  prisma 
october 2018 by spaceninja
"The Magic Tricks of Testing" by Sandi Metz
Earlier this year, Sandi Metz gave a 30-minute talk on how to write good tests at RailsConf in Portland. It was called “The Magic Tricks of Testing.” I’m still struggling to see the full value of testing, but Sandi promises in the first few minutes this presentation that testing doesn’t have to suck. AWESOME, I want some of that. Here’s what I learned (plus one super cool reference to Star Trek).
testing  programming 
october 2018 by spaceninja
Unit Test Your First Vue.js Component
In Build Your First Vue.js Component we made a star rating component. We’ve covered many fundamental concepts to help you create more complex Vue.js components. Yet, there’s one crucial point you need to build bulletproof components you can use in production: unit testing.
vue  javascript  components  testing 
october 2018 by spaceninja
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
tools  regex  programming  reference  testing 
october 2018 by spaceninja
Regex101 - Online regex tester and debugger
Regex101 allows you to create, debug, test and have your expressions explained for PHP, PCRE, Python, Golang and JavaScript. The website also features a community where you can share useful expressions.
regex  programming  testing  tools  reference 
october 2018 by spaceninja
Outline Audit: A script to test the heading outline of a document
This small script analyses the heading outline of the document (or given container), and report possible errors. It can be dropped in the DevTools directly, put into a bookmarklet or integrated to a testing suite for example. It’s pretty much up to you.
bookmarklets  javascript  outline  dom  testing 
october 2018 by spaceninja
The Importance Of Manual Accessibility Testing
Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.
fridayfrontend  accessibility  testing 
september 2018 by spaceninja
Testing for accessibility - Service Manual - GOV.UK
The best way to meet these criteria is to: Think about accessibility from the start; Run your own accessibility tests regularly throughout development; Get a formal accessibility audit before you go into public beta;
accessibility  testing  wcag 
august 2018 by spaceninja
Fostering a Web Performance Culture
Some ideas to create awareness around performance optimization in a team and company.
performance  culture  testing 
august 2018 by spaceninja | Free JSON storage service and JSON hosting service. is a free JSON storage and JSON hosting service. It's ideal for small scale web apps, website and mobile apps or mocking requests.
json  api  storage  hosting  mock  testing 
august 2018 by spaceninja
Short note on getting spaced out with SC 1.4.12 Text Spacing
One of the new success criterion in WCAG 2.1 is 1.4.12 Text Spacing. Conforming to this criteria provides accommodation for people to modify their text styles according to their needs.

The success criterion defines a set of text styles that must be supported. Thinking that this should be pretty simple to test using a bookmarklet I went searching for one that someone may have prepared previously. Not finding any, I whipped one up.
bookmarklets  accessibility  testing  line-height  margins  letter-spacing  word-spacing 
august 2018 by spaceninja
Getting to Know a Legacy Codebase
The kind of codebase that no one person truly understands any more; the kind of codebase that’s had a dozen different contributors over just as many years; the kind of codebase that’s never had a full-scale refactor or overhaul, but that’s grown organically over time and changed with new techniques, styles, and trends.
fridayfrontend  css  code  legacy  testing  refactoring  maintainability  maintenance  regression  programming  html 
july 2018 by spaceninja
Assistive Technologies I Test With
After a recent talk on Accessibility, I was asked during the Q&A about what Assistive Technologies (AT) I test with while I’m developing. Such a good question! I hadn’t ever thought about what I actually test with and as I rambled on I thought it might help to write it down.
fridayfrontend  accessibility  testing  voiceover  screenreaders  narrator  nvda  vox  zoom  contrast 
july 2018 by spaceninja
How and Why We Unit Test Our Sass
When design systems are the source of truth and subscribers have easy access to code, it's important that code is well-tested. Lindsey shares how we unit test our Sass and how you can too.
fridayfrontend  css  sass  testing  tests 
july 2018 by spaceninja
New to email coding? Here’s where to start.
One year ago I entered the wild world of email. I was confident in my HTML/CSS skills and ready to rock it. But then… tables(!) and inline CSS(!!) and Microsoft Word as a rendering engine(!!!)… I quickly realized the intricacies of email coding were way beyond my expectations, and consequently the past year has involved a steep learning curve.
cssbasics  email  html  accessibility  testing  css  frameworks  fridayfrontend 
april 2018 by spaceninja
Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses, by Harry Roberts
A quick, scrappy screencast to demonstrate the power of Chrome DevTools’ Local Overrides, and what exactly it means for performance engineers.
fridayfrontend  video  devtools  localoverrides  performance  testing 
april 2018 by spaceninja
Totally Tooling Tips: Accessibility Testing
In this episode, Addy chats with Rob Dodson, a developer advocate on the Chrome team, about his workflow for accessibility testing. They also discuss some of the important considerations when making edits to the design of your website for improved accessibility.
fridayfrontend  video  accessibility  testing  axe  lighthouse 
february 2018 by spaceninja
Automatic visual diffing with Puppeteer
I did a little song-and-dance that sets up Puppeteer* , takes screenshots of your app (like, all the routes you care about), and then compares them to the “golden” ones. If they match, your test passes!
fridayfrontend  testing  puppeteer  diffs 
february 2018 by spaceninja
Why you can't test a screen reader (yet)!
This idea, testing a screen reader, proved much harder than I thought. It's actually a bit of a holy grail in the accessibility space. Something that many have dreamed of, but few—if any—have achieved.
fridayfrontend  accessibility  screenreaders  testing  automation 
january 2018 by spaceninja
Writing Automated Tests for Accessibility
Marcy Sutton explains how automated tests for accessibility can help free up your team of some manual testing while preventing regressions into production.
fridayfrontend  accessibility  testing  automation 
january 2018 by spaceninja
Quick and easy way to test the readability of your work.
testing  accessibility  readability  writing  tools 
january 2018 by spaceninja
Automated Frontend Testing
An intro to automated frontend testing. This is an enormous field containing many skillsets, but this presentation covers the basics of testing in the context of building websites. It covers functional testing, performance testing, and QA tools for development teams.
testing  presentation  frontend  functional  casper  phantom  pagespeed  performance  css  regression  wraith  jenkins  ci  travis  qa 
january 2018 by spaceninja
A/A Testing: How I increased conversions 300% by doing absolutely nothing
The belief seems to be that if they just keep testing, they will find the answer, and build the business of their dreams. Most of them are wrong. Many of their businesses would be better off if they didn’t run any A/B tests at all.
research  data  statistics  testing  design  a-b-tests 
january 2018 by spaceninja
Accessibility Testing Tools for Desktop and Mobile Websites
This post will demonstrate how to use automated and manual accessibility testing tools on desktop and mobile websites. We’ll cover five accessibility testing tools that can be installed either as browser extensions or JavaScript bookmarklets. I will point out the pros and cons of each testing tool, describe the best features of each tool, and show what accessibility problems each tool is good at identifying.
fridayfrontend  accessibility  testing  qa  automation 
december 2017 by spaceninja
How to build a cloud-hosted accessibility testing Windows computer using Amazon WorkSpaces
Compliance work is all about removing the obstacles that keep people from doing the things they want or need to do. In this post, I’m going to knock down one of the barriers that prevents many developers from doing thorough accessibility testing: not having access to a proper setup.
fridayfrontend  accessibility  testing  qa  aws  amazon  windows  vm 
december 2017 by spaceninja
Automating Your Accessibility Tests
Seren Davies reminds us that unlike Christmas, accessibility testing should not come but once a year with a look at how to apply automated testing. By configuring tests to run against each commit, you can ensure that your site’s accessibility compliance need not be left to chance.
fridayfrontend  accessibility  automation  testing  jenkins  build 
december 2017 by spaceninja
Micah Godbolt's Visual Regression Testing
Getting into component-based design? Rocking out a little Pattern Lab? Do you have the best looking style guides? Take things to the next level with Visual Regression Testing! No more being surprised that your country selector has been broken on mobile devices for the past 4 builds! You can now create a suite of tests to run after every build to ensure your site is looking and functioning exactly as it should!
fridayfrontend  video  visual  regression  testing 
september 2017 by spaceninja
Accessibility Testing with pa11y
pa11y, pronounced pally, is a set of free and open source tools that aims to make designing and developing accessibility easier. They have a number of different projects to help with this, for example a web dashboard interface, but I will be focusing on 2 of their projects: pa11y and pa11y-ci.
fridayfrontend  testing  accessibility  node 
august 2017 by spaceninja
wearehive/project-guidelines: A set of best practices for JavaScript projects
While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects here at hive.
fridayfrontend  javascript  project  bestpractices  programming  git  testing 
august 2017 by spaceninja
Performance and Resilience: Stress-Testing Third Parties
Like it or not, third party providers are a necessary evil in almost all development projects, and if we’re going to entrust parts of our site or product to others, we ought to have a very good idea of what happens when things go wrong. Stress-testing third parties is a standard part of any of the bits of performance work I undertake, because the ramifications can be huge. And again, this isn’t us blaming the providers: it’s finding out how well we handle failures.
fridayfrontend  debugging  testing  performance  devtools 
august 2017 by spaceninja
Emmet Re:view
A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.
responsive  design  testing  tools  extension  browsers  chrome 
june 2017 by spaceninja
A guide to cross-browser testing: installing all the things
If you care to follow along, in a matter of minutes you should have the following browsers ready to use on your local dev machine (all legit and free).
fridayfrontend  browsers  testing  qa  emulator  vms 
february 2017 by spaceninja
Pattern libraries through trial and error
This story sums up Varya's experience in developing modular web solutions and pattern libraries. She is currently doing exactly the same as what she was doing 8 years ago, but in a very different way. In fact, the reasoning of choices for methods and tools to apply goes directly from grasping human nature, no less. Hint: BEM, living style guides and visual regression tests are involved.
fridayfrontend  video  styleguide  patternlibrary  bem  testing 
february 2017 by spaceninja
We've updated the radios and checkboxes on GOV.UK
Great user testing story about why the GDS team increased the size of checkbox and radio controls on the Gov.UK platform.
fridayfrontend  css  accessibility  html  forms  ux  testing 
december 2016 by spaceninja
How to actually run the Chrome web inspector with an emulated Android device | Emily Porta // Developer and Librarian
If you’ve never tried to do this, you’re probably thinking to yourself: “this should be pretty straightforward. Emily should use her time writing about more helpful things” – and you would be mistaken. This is, so far, the most difficult thing I have tried to do as a developer since I started working as one last year. No, I’m not kidding.
fridayfrontend  chrome  devtools  android  emulator  vms  qa  testing 
august 2016 by spaceninja
Windows 10 virtual machines now available on Microsoft Edge Dev | Microsoft Edge Dev Blog
"Windows 10 virtual machines are now available with the latest updates to Microsoft Edge."
fridayfrontend  windows  vms  testing  qa 
august 2016 by spaceninja
A Web Developers New Working Week
"Why spend the week in your comfort zone, working on the same browser under the same conditions you’re used to. Let’s switch it up a bit."
accessibility  testing  performance  fridayfrontend 
april 2016 by spaceninja
High-Impact, Minimal-Effort Cross-Browser Testing
"In the next fifteen minutes, I hope to save you hours of wasted effort by describing a testing strategy which is not only less labour-intensive, but more effective at catching bugs."
testing  browsers  efficiency  qa  fridayfrontend 
february 2016 by spaceninja
WP Test | The Best Tests For WordPress
A fantastically exhaustive set of test data to measure the integrity of your plugins and themes. The foundation of these tests are derived from WordPress’ Theme Unit Test Codex data. It’s paired with lessons learned from over three years of theme and plugin support, and baffling corner cases, to create a potent cocktail of simulated, quirky user content.
wordpress  data  themes  testing 
july 2014 by spaceninja
The dangers of cross-browser testing with IE9′s Browser Modes
IE9 has a feature called Browser Modes that attempts to simplify cross-browser testing by emulating how a site would render in a real copy of IE7 or IE8. It’s available within IE9’s Developer Tools. While it’s a good idea in theory, in practice these emulated Browser Modes create more trouble than benefit because they behave differently than real copies of IE7 and IE8 would.
ie9  browsers  testing  ie 
july 2014 by spaceninja
Test and track your emails. Email previews, analytics and spam filter testing.
html  email  testing  preview  analytics  spam  webapps 
february 2014 by spaceninja wildcard DNS for everyone
" is a magic domain name that provides wildcard DNS for any IP address. Say your LAN IP address is Using, resolves to ...and so on. You can use these domains to access virtual hosts on your development web server from devices on your local network, like iPads, iPhones, and other computers. No configuration required!"
development  lan  ip  dns  testing  qa  37signals  wildcard  local  localhost 
march 2013 by spaceninja
Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. Unfortunately, setting these virtual machines up without Microsoft's VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE6, IE7, IE8 and IE9 running in separate virtual machines.
ie  vms  testing  virtualbox 
february 2012 by spaceninja
What is the longest human name you can expect?
Great names to test your forms with, including Ulrika Örtegren-Kärjenmäki
names  programming  testing  qa 
october 2011 by spaceninja
You should follow me on Twitter
Dustin Curtis change his link from "I'm on Twitter" to "You should follow me on twitter" and increase clickthroughs by 173%.
twitter  dustincurtis  conversion  testing  abtesting  language  followers 
july 2009 by spaceninja

related tags

37signals  a-b-tests  abtesting  accessibility  adblockers  amazon  analytics  android  animation  api  apollo  automation  aws  axe  badges  bem  bestpractices  bookmarklets  browsers  build  casper  chrome  ci  code  codereviews  components  contentblockers  contrast  conversion  css  cssbasics  culture  data  debugging  design  designsystem  development  devtools  diffs  dns  documentation  dom  dustincurtis  efficiency  email  emulator  enzyme  extension  followers  forms  frameworks  fridayfrontend  frontend  functional  git  graphql  hosting  html  ie  ie9  ie11  ios  ip  javascript  jenkins  jest  json  lan  language  layout  learning  legacy  letter-spacing  lighthouse  line-height  lint  linting  lists  local  localhost  localoverrides  maintainability  maintenance  margins  microsoft  mock  names  narrator  nextjs  node  npm  nvda  outline  pa11y  pagespeed  patternlibrary  percy  performance  phantom  presentation  preview  prisma  programming  project  pullrequest  puppeteer  qa  quality  react  readability  refactoring  reference  regex  regression  research  responsive  sass  screenreaders  security  senior  sortsite  spam  statistics  storage  styleguide  support  tabindex  tdd  techdebt  testing  tests  themes  tools  tota11y  training  travis  tutorials  twitter  ux  validation  video  virtualbox  visual  visualtesting  vm  vms  voiceover  vox  vue  wave  wcag  webaim  webapps  wildcard  windows  word-spacing  wordpress  wraith  writing  xss  zoom 

Copy this bookmark: