Tools Summary

This section groups all the tools, extensions and plugins mentioned on the article.

Wappalyzer (Chrome extension)

Identifies software on the web Wappalyzer is a browser extension that uncovers the technologies used on websites.
It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more

From wappalyzer.com

Instant WireFrame (Chrome extension)

View any web page as a wireframe. Instantly!
This extension allows you to view any web page, local or on the web, with a wireframe overlay.

From fluiddynamics.ro

Appspector (Chrome extension)

Alternative to Wappalyzer.
Detect web applications and javascript libraries run on browsing website.
This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website.

From nqbao.com

UnCSS (Node.js)

UnCSS is a tool that removes unused CSS from your stylesheets.
It works across multiple files and supports Javascript-injected CSS.

From github.com/giakki

CSS Remove and Combine (Chrome extension)

Removes unused selectors from all stylesheets on a page and combines the result into a single stylesheet that can be downloaded.

From Steve McArthur

CSS Unminifier (Sublime text plugin)

A Sublime Text plugin that can unminify CSS

From jonnypolite

Minify (Sublime text plugin)

The Minify Package for Sublime Text can create a minified version of a currently open JavaScript, CSS or SVG file.
The Minify package can also beautify (unminify) files.

From github.com/tssajo

unminify.com

Free online tool to unminify (unpack, deobfuscate) JavaScript, CSS and HTML code, making it readable and pretty.

From Mediafox

Videos

This section groups videos to support some of the steps described on the article.

This video shows Instant WireFrame (Chrome extension) in action.

Notice the img placeholders and how the media queries interact with the site structure.

Chrome dev tool Device Mode

The grid rulers can help you determine exactly where the breakpoints are.

This video shows how a website (in this case Twitter) renders differently in "iPhone 5" mode.

Notice how the URL changes to mobile.twitter.com when you do the switch.

Responsive Images in action.

Notice how the images are swapped when you resize the browser.

CSS can also be modified dynamically via Javascript.

This video demonstrates that quite often the code you see is not static.