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.
- Sitemaps - I’ve found that both submitting your sitemaps to the major search engines (Google, Bing), and including a
Sitemap: http://www.ryanhefner.com/sitemap.xml
entry in yourrobots.txt
file is probably the most thorough way of getting your sitemaps out there. - Rich Snippets / Structured Data
- Facebook Open Graph Tags
- Twitter Cards
- Apple Touch Icons
- Favicons - Thanks to Audrey Roy for compiling this great resource.
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.
- W3C Markup Validation
- Rich Snippets / Structured Data Validator
- Facebook Open Graph Validator
- Twitter Cards Validator
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!