Well Hello Fall*

Welcome to issue #6 of Front-end Testing Weekly.

*Spring for you folks in the Southern hemisphere.

Front-end Testing is a no-brainer right? While that may be true for you, it's not always true for others.

Recently I made an update to the frontendtesting.com website based on some research I had recently completely on the benefits of various parts of the discipline. Here are some numbers I found:

92% of developers believed that TDD yields higher quality code, 79% thought that TDD promotes simpler design and 71% thought the approach was noticeably effective.

80% of the professional developers held that TDD was an effective approach and 78% believed the approach improves programmers' productivity

Source: An Initial Investigation of Test Driven Development in Industry

71% of people with disabilities in the UK use the Web to find information on goods and services.

After CNET started providing transcripts, they noticed a 30% increase in traffic from Google

They doubled their visitor numbers, cut maintenance costs by two thirds, and increased natural search traffic by 50%.

Source: W3C Case Studies of Accessibility Improvements

Conversions were 27% higher for visitors who enjoyed a load time that was one second faster.

A 1-second improvement correlated to a 27% increase in conversion rate.

Pages that loaded in 2.4 seconds experienced a 12.8% bounce rate, while those that loaded in 3.3 seconds had a bounce rate of 20%.

Source: SOASTA Case Study

These are all real numbers from real studies.

Next time you need to convince someone *cough* your boss *cough* that spending time on accessibility or performance or unit testing, send these numbers over and see how they respond.

The Question of the Week

It happened, I got a question!

A reader asks: What is the Shadow DOM?

Well, that's a doozy. I'm going to try my best to answer without just repeating what I searched on Google.

To put it simply, the Shadow DOM is really just a section of a webpage without the rendering. If you're familiar with PhantomJS, it's kind of like that. A "headless" representation of the structure of HTML. It allows you to do programatic things, like traverse through elements and find HTML and such, without having to show (or hide) it to the user.

The Shadow DOM is really helpful when you need to do some computation on the structure of a part of a webpage, without actually showing it to the user. React uses it to compare the current state of the webpage with a state containing updated data. It then replaces only the changed items in the end-user view.

Hopefully that short explanation helps. For more info, read through W hat the Heck is the Shadow DOM?

If you or a loved one has a question about Frontend Testing, send it in to questions@frontendtesting.com (or just reply to this email).

Recent Twitter Links

Have you seen something worth sharing? Send it my way by hitting the reply button or sharing it on the Slack channel.

It's Happening! The Slack Channel is Happening!

More folks are sharing articles and tips on the Slack Channel. J oin the conversation. It's free!

p.s. are you interested in Visual Regression Testing? Micah Godbolt and I put together a free 6-day email course on the subject that costs nothing to take.

Forward

Check out the website

Follow Frontend Testing

Browse the archives