Project Wrap-up Checklist

When nearing the end of a project, there are a ton of things that can be running through your head. I know I often get a little distracted buttoning up those final details, and that distraction can lead to things getting overlooked.

In order to prevent that from happening, here is a list of tools and utilities that I use to put the finishing touches on my projects. I actually compiled this list based on what I used when wrapping up this site.

SEO / Social

Let's face it, we don't want all of our hardwork to go overlooked. Even if you don't specifically like Facebook, or Twitter, there is value in including these tags since search services and other sites and applications have started to repurpose these tags to provide richer information when links are shared. Here's a list of the basic ones that I try to implement for most projects, where necessary/appropriate.

Validation

Now that we have all of our content and metadata in the site, we have to make sure all that stuff is valid. Depending on what you’ve setup, here are the validators you can use.

Optimizations

And finally, since we want to make sure our SEO'd, valid sites and applications load as fast as possible, we should now optimize our assets and test our work and see where we rank.

Minification

Over the past couple of years, one of the tools that I've been consistently excited about, and couldn’t imagine not using on projects has been Grunt. Here are the tools that I’ve been using to make sure all my CSS and Javascript are properly tested and optimized before I release a project.

  • JSHint - Not necessarily an optimization, but it feels good to know you’re writing clean code.
  • Uglify
  • Sass - Make sure that you use the :compressed setting for your Sass output.
  • Watch - Granted, it doesn’t necessarily optimize your files, but it optimizes your time, which is *way* more important.
  • Webpack - I’ve recently started to use this for large front-end applications, like the Vimeo Organizer and Taskliner.

Testing

Now that all your files are nicely compressed, it’s time to get our testing on.

And, in case you server is running Apache, here is the snippets that I add to the my .htaccess files in order to enable gzip and expiration headers for assets, which should help you increase the score on your tests.

#Gzip
<ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
</ifModule>
#End Gzip

# RFC says only cache for 1 year
ExpiresActive On
ExpiresDefault "access plus 1 year"

# Set Expires headers
<ifModule mod_headers.c>
    <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|svg)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
    <filesMatch "\\.(css)$">
        Header set Cache-Control "max-age=604800, public"
    </filesMatch>
    <filesMatch "\\.(js)$">
        Header set Cache-Control "max-age=216000, private"
    </filesMatch>
    <filesMatch "\\.(xml|txt)$">
        Header set Cache-Control "max-age=216000, public, must-revalidate"
    </filesMatch>
    <filesMatch "\\.(html|htm|php)$">
        Header set Cache-Control "max-age=1, private, must-revalidate"
    </filesMatch>
</ifModule>

You can also check out the gist here.

Conclusion

I hope this helps you on your next project. If you have any other tools or utilities that you use on your projects, please share them @ryanhefner and I’ll be sure to add them to this post, and of course credit the contributor.

Happy making!