Remember the good ol’ days when you were learning how to code, and all that mattered was getting the code to compile and making sure the site rendered what you expected? You probably tried to keep your code organized and readable; after all, you had to be able to understand what you wrote. Maybe you even realized the value of Code Analysis and Style Cop early on. But the front end of a site received less attention. Performance? It’s fast on my machine. SEO? Hey, I’ve got the meta title tag filled in! Accessibility? Yes, I can access my site. Perhaps we cared less because browsers are so forgiving and can render HTML even if it’s riddled with errors.

Well we’re professionals now, and now we care. We can’t just go by business and functional requirements – we have to be preemptive about fine-tuning our applications and dig deeper than the visible functionality.

In this post, you’ll find an overview of web development tools to help you do just that in areas including:

• CSS and Reflow
• Page Performance
• Accessibility
• Search Engines
• QA

CSS and Reflow

The browser has to parse all your CSS rules, load the DOM tree, and figure out which rules should be applied to which DOM nodes. Then, every time the DOM is modified, the process needs to be repeated – it’s a huge amount of processing. You can help by keeping your CSS optimized and error-free, and by avoiding excess DOM depth.

According to https://developers.google.com/speed/articles/reflow…

• Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document
• Reflow is a user-blocking operation
• Triggers of reflow: resizing the browser window; using JavaScript methods involving computed styles; adding or removing elements from the DOM; changing an element’s classes
• To minimize reflow: reduce unnecessary DOM depth; minimize CSS rules; keep complex rendering changes outside of flow; avoid unnecessary, complex CSS selectors

Here are some tools that can help you in these areas:

W3C CSS Validation Service – http://jigsaw.w3.org/css-validator/

Structured Data helps search engines to understand what the content is specifically about – it allows users to see the value of a website before they visit by enabling search engines to generate rich snippets.

This tool enables you to test the structured data within your markup:

Google Structured Data Testing Tool – https://search.google.com/structured-data/testing-tool

WORKS WITH LOCAL SITE WORKS WITH PROD SITE

“Provides a variety of ways to develop, test, and modify your structured markup.”

QA – Regression Testing

Sometimes when you refactor something on the backend you want to make sure you didn’t cause any changes to functionality on the front end. If you are not lucky enough to be working with a project that has automated tests set up for this task (like Selenium), you can use a tool like this:

PerfectPixel by WellDoneCode – https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

WORKS WITH LOCAL SITE WORKS WITH PROD SITE

“This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them”; you can compare a screenshot pre-changes to what the site looks like post-changes.