Optimization

Use BrowserSync with Visual Studio

March 6, 2015 by Chris Sherman

BrowserSync is a synchronized browser testing tool with an ever-expanding suite of features. Fundamentally, BrowserSync will watch files for changes, alleviating the need to manually refresh the browser. In this tutorial I’ll explain how to integrate BrowserSync with Visual Studio.

Continue reading

Copy File If It Doesn't Exist with Grunt Plugin grunt-contrib-copy

March 5, 2015 by Chris Sherman

Grunt’s copy plugin, grunt-contrib-copy, is helpful for tasks like copying CSS and JavaScript from a Bower components folder to a friendly directory. Copying files is problematic, however, when you’ve modified the destination files and don’t want your changes overwritten the next time the copy task runs. In this tutorial I’ll explain how to add a filter to the copy task to ignore files that already exist.

Continue reading

Rename Copied Files Using Grunt Plugin grunt-contrib-copy

March 4, 2015 by Chris Sherman

Grunt’s copy plugin, grunt-contrib-copy, comes in quite handy for tasks like copying CSS and JavaScript from a Bower components folder to a friendly css/ or js/ directory. In this tutorial, I’ll show you how to extend copy tasks to rename files in the destination folder.

Continue reading

Code First Migrations with Continuous Integration

February 19, 2015 by Chris Sherman

Entity Framework’s Code First Migrations keeps the database in sync with its underlying data model, and Visual Studio provides a convenient checkbox within the Publish Wizard to execute Code First Migrations when publishing manually. If you use continuous integration to publish from source control, however, you still need a way to run migrations on the database. In this tutorial, I’ll explain how to add a flag that sets off the migration task.

Continue reading

Use Bootstrap with Bower and Grunt

February 18, 2015 by Chris Sherman

If you want to use the popular web framework Twitter Bootstrap for your next project, you could simply copy the Bootstrap CSS and JavaScript. But if you’d like to enhance your ability to customize, improve the efficiency of your workflow, and make the project portable, you can instead utilize SASS, Bower, and Grunt to set up Bootstrap. Let’s get to it.

Continue reading

Responsive Image Reflow Solution

December 22, 2014 by Chris Sherman

Have you ever visited a website and started scrolling down the page only to have the content suddenly jump? You lose your position on the page and are left to search up and down to find your place again. For devices with slow connections, this can occur multiple times, becoming especially frustrating.

Continue reading

Configuring a Foundation Libsass Project

December 18, 2014 by Chris Sherman

Setting up Foundation as a Libsass project can be confusing, especially if you’re not familiar with Node, Grunt, Bower and Git. I found quite a bit of discussion on how best to go about configuring everything but no definitive answer bubbled to the surface. In the following tutorial I’ll provide a set up that’s worked for me.

We’ll begin with a freshly created, Foundation Libsass project. The Foundation documentation does a good job explaining how to set this up, so I’ll refer you to that if you need instructions.

Continue reading

Tips for Using Foundation's Interchange

December 17, 2014 by Chris Sherman

Foundation’s Interchange is a responsive content solution that enables resource requests to adapt according to available screen real estate. Images are a particularly applicable use-case for Interchange since a massive, landscape photo doesn’t have the same effect on a phone as on a 27-inch monitor.

Continue reading

Minification and Bundling in Umbraco

December 16, 2014 by Chris Sherman

The Microsoft ASP.NET Web Optimization Framework improves the performance and reliability of your application through bundling, minification and versioning of your web resources. Bundling multiple scripts or stylesheets into one resource saves overhead by requiring browsers to make fewer HTTP requests; minification entails shortening the variable names and eliminating whitespace in your resources, thereby reducing file size; appending a version to your bundles ensures visitors to your site will use the current resources rather than stale, cached versions with the same file name.

Continue reading