Use Bootstrap SASS with Angular CLI

March 21, 2017 by Chris Sherman

Create a new Angular CLI project with the SASS style option:

ng new my-app --style=sass
cd my-app

Continue reading

Angular NgPlural Directive for Localization

February 22, 2017 by Chris Sherman

The Angular ngPlural directive adds or removes DOM templates based on a numeric value. It comes in handy when you’re doing localization (l10n) to adapt your content to meet the language and cultural requirements of a specific market.

When you want to use the plural rules, enter the plural category in the ngPluralCase directive. When you want an exact match, such as “4” in the example below, use the equal sign before the value in the ngPluralCase directive.

Continue reading

Wait for Data Before Rendering Views in Angular 2

December 12, 2016 by Chris Sherman

When you have an Angular view that combines static elements, such as a navigation bar and footer, with dynamic elements that depend on data from an HTTP request, the browser will initially render only the static elements. Since we don’t want to display a blank dynamic component while waiting for the HTTP request, we can pre-fetch the data prior to activating the route. In Angular 2, you accomplish this using the Resolve guard.

Continue reading

AngularJS AJAX Validation

December 6, 2016 by Chris Sherman

Sometimes client-side validation needs information from a datastore to determine whether input is valid. For instance, you may want to check if a username is already taken. To do this in an Angular application, we can use a custom directive along with the $http service to validate user input on the fly.

To get started, create a directive, naming it something that will allow you to easily identify its use in HTML markup. We’ll wrap the directive in an immediately-invoked function expression (IIFE) to make sure we don’t accidentally leak any variables into the global scope.

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