AzureDays

CSS Tutorial – Font Sizing

July 27, 2014

You can use Cascading Style Sheets (CSS) is to modify the font or typography of the page. There are several ways to describe font sizes.

In the font-size property, you’ll know that there are many different measurements to use when defining the size of the font.

Relative lengths

xx-small through xx-large – relative to the default browser font size
percentages – relative to the surrounding text
em and ex – relative to the parent element
pixels – relative to the screen resolution

Absolute lengths

points and picas – print units
inches, centimeters, and millimeters – length units

Continue reading “CSS Tutorial – Font Sizing”

Snippet – What to Do About Old Browsers

July 23, 2014

Web sites reflect the company’s professional image. If your site renders improperly or not at all, your company’s reputation can be tarnished. If your site has browser display problems, visitors and potential customers will leave your site and not look back.

In the post Using Modernizr, Polyfills, YepNope, you learned how you can support browsers that might not have the capabilities that you need. But at some point you may not be able to support really old browsers. At that point, you may just want to recommend the user update. Even for enterprise apps, you will want to remind users to use a current browser rather than have your app fail because your app is expecting something that does not exist.>p>You can use the following code to help your users get up to date browsers. Continue reading “Snippet – What to Do About Old Browsers”

Snippet – Checking Internet Connection, No More Hanging App

July 22, 2014

When you are writing your single page application (SPA) may find that you need to check your connection. The idea is that you might have one set of logic for your connected app and another for when you are disconnected.

In previous posts, AppCache for Offline Apps and Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache, you learned that your Web app did not have to be online to be run. In fact, when building HTML apps for mobile devices, you are running without a connection.

So how do you check? How do you know when you can upload and download new information from the Web?

Many of the comments on StackOverflow have to do with the connection hanging. The following snippets help you work around the issue.

Continue reading “Snippet – Checking Internet Connection, No More Hanging App”

Tip – Serving .json File on Windows (IIS, IIS Express)

July 21, 2014

So what is wrong with the simple getJSON call? Why doesn’t it work?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $.getJSON('data.json',function(result){
      alert("success");
    });
  });

It works fine in Firefox 11 but not in IE and Chrome. By default, IIS6 does not serve .json (no wildcard MIME type). So you will see a 404 not found thrown.

By default, IIS in Windows Server 2003 and beyond does not serve files that aren’t of a MIME type that it knows about (instead returning 404 errors).

So, to serve up JSON files you need to add a MIME type to IIS to allow it to serve that type of file. You can set it at the site level or at the server level.

Continue reading “Tip – Serving .json File on Windows (IIS, IIS Express)”

Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash

July 19, 2014

RequireJS is a JavaScript file and module loader. In Getting Started with Modules Using RequireJS, you have learned a lot about how you can use it to load your dependencies using define() and require().

In this code snippet, you will learn how you can load the dependencies, initialize a module with values that you pass in, and then make public some of the methods.

And you will see how to put files in folders to help keep identify which modules you write in your app and which modules are from third parties.

Continue reading “Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash”

Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls

July 17, 2014

So how can you use the check-boxes from Font Awesome, and get the box to check/uncheck. When a user clicks, how do I show the right icon?

When checked: icon-check ; unchecked: icon-check-empty.

The basic idea is to select spans:before that is next to input you want..

If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify. Continue reading “Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls”

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

July 13, 2014

When you have a JSON array, you may want to get one or more items from the array and display. jQuery offers two functions that can help: grep and filter.

$.grep(). Finds the elements of an array which satisfy a filter function. The original array is not affected.
$filter(). Reduce the set of matched elements to those that match the selector or pass the function’s test.
$.map(). applies a function to each item in the array, thus returning a modified array

In other words, $.grep() removes items from an array as necessary so that all remaining items pass a provided test; .filter() constructs a new jQuery object from a subset of the matching elements.

Also, filter is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like “:even”, “:odd” or “:visible” etc. You can’t do that with the grep function, which is intended to be a utility function for arrays.

Continue reading “Snippets – Filtering JSON Using jQuery Grep, Filter, Map”

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

July 12, 2014

When you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.

In this Snippet, you will learn how to:

Load JSON data from a getJSON call to our server.
Show and hide a spinning indicator inside a div.
Bind the incoming data to a view model object.
Use the view model to populate an external template.

Then once the page is loaded, it will display the data based on an external template.

And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.

Continue reading “Single Page App – isLoading jQuery Plugin to Indicate Content Loads”

Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops

July 11, 2014

The foreach statement repeats a group of embedded statements for each element in an array or an object collection. The foreach statement is used to iterate through the collection to get the information that you want.

It is not be used to add or remove items from the source collection to avoid unpredictable side effects. (If you need to add or remove items from the source collection, use a for loop.)

Continue reading “Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops”

Single Page Apps – Notes on Search Engine Optimization (SEO)

July 9, 2014

One of my readers has mentioned that there are issues regarding search engine optimization (SEO) for single page apps. Because content is dynamically loaded via JavaScript calls rather than as part of the initial page load, search engine crawlers won’t see all the content.

Let me explain.

Continue reading “Single Page Apps – Notes on Search Engine Optimization (SEO)”

For Cloud Developers and IT Pros