Wicked Strategery

Thirty years ago today, the The Conscience of a Hacker (also known as The Hacker's Manifesto) was published in Phrack.

I remember when I first read it. It was years after it was was first published. I don't remember how I found it, but I remember it was on a green screen Commodore 64 at my hometown's library. The machine was on a dimly-lit back wall at the end of a wing of bookshelves. I would sit back there and connect to BBS's and play with BASIC.

I was deeply moved by its words, they resonated with me. They struck a chord that nothing else I had read matched. It describes the same liberation I felt playing with code; the beauty in what was possible; the impartial meritocracy that was available to me.

Both Hack-A-Day and CSOOnline have fantastic write-ups discussing the manifesto as well. And it's noteworthy enough to have a Wikipedia article.

Thirty years since it was written (and over twenty since I first read it), its words still ring true to me, and I'm sure to countless others.

"Yes, I am a criminal. My crime is that of curiosity."

I've written before about minification of stylesheets and Javascript and briefly mentioned using PNGGauntlet. Compressing images is an easy way to save bandwidth, especially if your hosting provider changes for bandwidth. Jeff Atwood wrote about using Zopfli to compress images and I decided to try it myself.

On average, I'm seeing a 2% to 9% reduction in file size on top of what PNGGauntlet already did! So now all the images on my sites are compressed with Zopfli and I'm saving a few kilobytes on every page load! The only downside is the upfront time required to do the compression. But since that is done once at design-time, it is worth the time.

The Zopfli Github repository includes the source for the compression algorithm as well as a command line tool to compress PNGs (called zopflipng). It's easy to fork and build the tool - it's all done with make as described in the README.

So the next question is what else can I compress? Because of the slower compression speed, Zopfli isn't suitable for on-demand compression but better for one-time use. I found a Nuget package called libzopfli-sharp (source) that will let me do this. Now to find what is worth compressing even further.

I downloaded and installed Sonarqube - and it's amazing. It finds, displays, and tracks all sorts of defects for several languages. Or as their website states, it is "an open platform to manage code quality". I can analyze C#, JavaScript, HTML, and CSS as well as several others I'm not using. It's not just showing me issues with my code, but it tracks issue counts over time so I can see things are getting better. In addition to the built-in support, there is a plugin available for including ReSharper issues using the ReSharper Command Line Tools. And another plugin for StyleCop. Further, I can track code coverage of unit tests. In the event that my coverage slips, it shows up as an issue to be resolved. And I see the change in coverage over time on nice visual graph.

The support for Visual Studio solutions is lacking and really difficult to get working properly. The MSTest coverage doesn't work out of the box (requires a transform). There are some naming requirements to associate a test project with the source it covers too. If you skip the solution support and go straight to a project-by-project analysis, it is way more flexible and customizable. The downside being you have to modify the analysis to accomodate the changes to the solution.

I created a custom MSBuild script as well as some helper MSBuild tasks (including the code coverage transform required) - available for download.

Overall, it's fantastic. Every release, the tool has gotten better and better. They just released version 4.5.2 under their Long Term Support program and started working on version 5.

In a previous post I detailed how I added JavaScript and stylesheet minification. The changes here are based upon that setup.

JavaScript and Stylesheets

The changes are as follows:

1. I've upgraded to version 5.7 of the Microsoft Ajax Minifier.

2. I still use a Batch script, but now it is a pre-build step rather than a post-build step. (You can refer to step 4 in the original post.)

3. I am now using a manifest XML file rather than individual invocations within the Batch script. Overall, this seems to do the job faster than before.

   The manifest allows the all of the same options as the command line, but I can put all of the minification tasks in a single manifest and it is easier for me to read than a Batch script command line.

   Details on the format can be found in the documentation (XML File Formats).

                   <root>
                     <output path="css\wickedstrategery.min.css" type="css">
                       <arguments>-clobber</arguments>
                       <input path="css\layout.css" />
                       <input path="css\style.css" />
                     </output>
                     <output path="scripts\wickedstrategery.min.js" type="js">
                       <arguments>-clobber -strict:true -global:$</arguments>
                       <norename name="$" />
                       <symbolMap name="v3" path="scripts\wickedstrategery.min.map" />
                       <input path="scripts\jquery.codeformatter.js" />
                     </output>
                   </root>
                 

   The neat thing about the minifier is that will combine multiple source files into a single output file. This means that only a single HTTP round-trip is needed to download the content, which thanks to the minifier is now smaller.

   And the Batch script has changed to:

                   set PATH=%~dp0;"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\"
                   pushd "<full path to my project here>"
                   ajaxmin -xml ajaxmin.manifest
                   popd
                 

I still get the same benefits as before, only now it's easier for me to read and add new things to be minified.

Images

Additionally, all the PNG images have been processed via PNGGauntlet and there was a substantial difference in filesize with no difference in how the image looks.

I think I've finally figured out how to work JavaScript and stylesheet minification into my development workflow. I've been looking for something that will preserve the ability to work in a formatted file, generates a minified file, and doesn't leave Visual Studio complaining about missing files.

The set up involves the Microsoft Ajax Minifier, a batch file, and some Visual Studio setup.

1. First download and install Microsoft Ajax Minifier. Make note of the install folder (it was "C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\" for me).

2. Add a Batch script to the Visual Studio project. Make sure to set the "Build Action" to "None". I'm calling my Batch script "minify.bat".

3. The Batch script is what minifies the JavaScript and stylesheets for me. The contents look like:

                   set PATH=%~dp0;"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\"
   
                   pushd "<full path to my project here>"
   
                   ajaxmin -clobber
                           Styles\layout.css
                           Styles\style.css
                           -o Styles\wickedstrategery.min.css
   
                   popd
                 

   I've broken out the lines for readability only.

4. Setup the project to run the Batch script when the project is built via the Post-build Build Events in the Project Properties:

                   call "$(ProjectDir)minify.bat"
                 

5. Run the script once at the command line (or build in Visual Studio) and the minified files would be created.

6. Back in Visual Studio, use the "Show All Files" in the Solution Explorer to expose the newly created external files. I then imported them into the solution, and made sure the "Build Action" was set to "Content".

7. Go to each of the source JavaScript and stylesheet files and set their "Build Action" to "None". They will stay in the project, but will not show up when the solution is built. The post-build step will regenerate the minified versions and copy the output to the output folder. Leaving the output to contain minified files but not the originals.

8. From there, the last step is to go through the project (really just my MasterPage) and ensure the references to the originals are replaced with references to the minified version.

The inspiration for getting this all running was Scott Hanselman's write up The Importance (and Ease) of Minifying your CSS and JavaScript and Optimizing PNGs for your Blog or Website.

The end result is that my project still contains the nicely formatted scripting and stylesheets, but outputs minified versions. The minification is part of the build and doesn't interupt me working. I haven't added any steps to publishing the site either. And Visual Studio's built-in sanity check for files that exist continue to function.