Here be a sample post with a custom background image. To utilize this “feature” just add the following YAML to a post’s front matter.

image:
  background: filename.png

This little bit of YAML makes the assumption that your background image asset is in the /images folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled.

If you want to set a background image for the entire site just add background: filename.png to your _config.yml and BOOM — background images on every page!

Background images from Subtle Patterns (Subtle Patterns) / CC BY-SA 3.0

Implementing Accessibility with AgularJs

This blog is written with love.

We have recently been using the Web Content Accessibiity Guidelines version 2.0 (WCAG 2.0) to improve the accessibility of our web projects.. In this blog, we will show a creative way to implement the item ARIA2: Identifying required fields with the aria-required property.

The following is a typical input field(input is a void element. the closing “/” is optional.):

<label for="user-name">User Name:</label>
<input id="user-name" type="text"/>

And in the browser, it looks like this in a browser: >text input with label

We would like to add asterisk to the label, if the input field is required: >required input field with label

The HTML element looks like:

<label for="user-name">User Name:<abbr title="required" class="required">*</abbr></label>
<input id="user-name" type="text"/>

There are many fields need to be updated, to make it simple, we are going to do it dynamically with angularjs.

Implementation

Directive asterisk

Let’s create a aterisk directive first.

//HTML

<asterisk></asterisk>

//JavaScript

// ua means usability and accessibility
var uaModule = angular.module('ua', []);

uaModule.directive('asterisk', function(){
  return {
    restrict: 'E', // only apply to Element
    template: '<abbr title="required" class="required"">*</abbr>',
    transclude: 'true',
    replace: 'true' // replace the current element
  }
});

Make sure you have bootstrapped your html with:

angular.element(document).ready(function () {
  angular.bootstrap(document, ['ua']);
});

Now whenever you add an asterisk element in your DOM structure, you will see a “*” on the page.

Please checkout this pluckr: http://plnkr.co/edit/kIIBicQklGuZVDblkw0Z?p=preview

Directive require

required is a new attribute introduced in HTML5, and is supported by all main stream browsers. Though there is a ‘html5shiv.js’ to fix some issue on IE9, I have NOT verified it. Please leave comments, if it does not work on your IE9 with html5shiv.

What we want to achive is have angularjs add the required span when it finds a required attribute on the input element.

First, add required attribute to input element. The code looks like:

<label for="user-name">User Name:</label>
<input id="user-name" type="text" required/>

After the enhancement, it will become:

<label for="user-name">User Name:
	<abbr title="required" class="required">*</abbr>
</label>
<input id="user-name" type="text" required/>
uaModule.directive('required', ['$document', '$compile', function (document, compile) {
  var linkFn, labelNode, labelElement, abbrElement;

  linkFn = function (scope, element, attrs) {
    // eliminate the dependency on jQuery
    labelNode = document[0].body.querySelector("label[for='" + attrs['id'] + "']");
    if (labelNode) {
      labelElement = angular.element(labelNode);
      // @ add asterisk to the label of a required input field
      abbrElement = angular.element('<asterisk/>');
      labelElement.append(compile(abbrElement)(scope));
    }
  };

  return {
    restrict: 'A',
    link: linkFn
  };
}]);

The final plnkr can be found here.

Syntax Highlighting Post

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.1

Pygments Code Blocks

To modify styling and highlight colors edit /_sass/_pygments.scss.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->
module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Standard Code Block

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

Fenced Code Blocks

To modify styling and highlight colors edit /_sass/_coderay.scss. Line numbers and a few other things can be modified in _config.yml. Consult Jekyll’s documentation for more information.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->
module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

GitHub Gist Embed

An example of a Gist embed below.

Articles Read in July 2013

  1. Jitbit’s SQL interview questions. > A basic SQL interview question list and its answer. Basic select, join on, etc. Also there is a debate in the comments > about whether a modern developer should learn these basic DB technologies.

  2. Java Basic Input and Output. > Java I/O is not as simple as you might think it should be. For example, in what scenarios, should you use BufferedInputStream?

Articles read in June 2013

  1. A Visual Explanation of SQL Joins. > it explains how INNER JOIN and OUTER JOIN work in a visualized way.
  2. Difference between clustered index and non-clustered index. > A clustered index is like a dictionary, where all words are sorted in alphabetical order in the entire book. > A non-clustered index is like an index in the last pages of a book, where keywords are sorted and contain the page number to the material of the book for faster reference.
  3. What is SOA. > SOA is supposed to solve this(hundreds of separate apps that are insufficiently integrated) by designing every app from the ground up to publish its services in a standardized, cross-platfrom manner so that other apps can access the data and don’t have to duplicate it.