Finding Unused CSS – Chrome Audit Panel

After you develop a site or web based content there is likely unused CSS (code detritus) in your files. We find for performance and maintenance purposes it is best practice to remove this unused code from your project.

To find unused CSS we use the Audit panel in the Chrome browser. With the Audit panel you can analyze a page as it loads. The audit output then provides suggestions and optimizations.

To generate a CSS audit open the Audit panel (View->Developer->Developer Tools->Audit). On the panel select the Web Page Performance audit, and Reload Page and Audit on Load, then click Run. Unused CSS is detailed in the Remove unused CSS rules list.

TechNote #44

Adding Command Line Tools to BBEdit

BBEditWe use BBEdit for a good portion of our html/css/javascript production work. Like many OS X applications BBEdit allows you to execute Applescript from its script menu. This makes it very easy to add command line tool support (e.g., linters, minimizers, compilers) to the application.

In the example below the Applescript will run the Google Closure Compiler (see TechNote #36) on the saved version, of a javascript file, open in the front most document window. If there are errors the Applescript try block will direct the output to a new BBEdit document window.

To make this script available to BBEdit simply place your .scpt file in BBEdit’s Scripts Folder. For more info about scripting BBEdit see the application documentation. To get started with Applescript see TechNote #4.

tell application "BBEdit"
	set jsfile to file of text document 1
end tell

process_item(jsfile)

on process_item(this_item)
  set theFile to quoted form of the POSIX path of (this_item as text)
  set the item_info to info for this_item
  set ext to the name extension of the item_info
  set i to length of ext
  set nam to the name of the item_info
  set j to length of nam
  set nam to text 1 thru (j - i - 1) of nam
  set dir to the POSIX path of (this_item as text)
  set k to length of dir
  set dir to text 1 thru (k - j) of dir
  set outFile to quoted form of the POSIX path of (dir & nam & "_compiled." & ext)
  set theFile to quoted form of the POSIX path of (this_item as text)
  set AppleScript's text item delimiters to " "
  try
    do shell script "java -jar /Applications/Utilities/closure/compiler.jar  --js_output_file=" & outFile & " " & theFile
  on error errorMessage
    tell application "BBEdit"
      set dest to make new text document
      set text of dest to errorMessage
      set name of dest to nam & "." & ext & " -- " & "Closure compiler errors"
    end tell
  end try
end process_item

TechNote #41

Google Closure Javascript Compiler

google_dev_logoGoogle’s Closure Tools project is an open source toolset for creating and maintaining rich interactive web applications. The set includes a compiler, library, templates, and linter.

The Closure Compiler is more than just a JavaScript minimizer. It both rewrites and minimizes JavaScript into compact, efficient code. It also checks syntax, variable references, types, removes dead code and warns about common pitfalls. The compiler itself is a Java app that can be run from the command line. Bash shell example,

java -jar compiler.jar –js_output_file=example_compilied.js example.js

Tip: To get familiar with the Closure Compiler try optimizing some js code with the Closure Compiler Service UI: http://closure-compiler.appspot.com.

Tip: If you do your development on a Mac it is easy to wrap the command line in an Applescript droplet. For more about droplets see Technote #4.

TechNote #36

The HTML5 Canvas Element

The Canvas element is arguably one of the most useful features of HTML5. First introduced by Apple in 2004, a canvas is a rectangular area on an HTML page where you can draw graphics (lines, circles, text, bitmap images) on-the-fly using Javascript. Canvas is now part of the HTML standard and is supported on all current browsers. The w3c official description for the canvas element can be found at

http://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html

To learn more are how to use the canvas element just search the web. There a myriad number of examples and tutorials. To illustrate the possibilities here is an interactive graph (“living graph”) example

Michaelis-Menten Plot

TechNote #28