Expect everything to change...

1. X Y

li a {
  text-decoration: none;
}

2. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

3. X + Y

ul + p {
   color: red;
}

4. X > Y    (direct children)

div#container > ul {
  border: 1px solid black;
}

5. X[title]

a[title] {
   color: green;
}

6. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

7. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

8. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

9. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

10. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

11. X:after

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
 }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

12. X:hover

div:hover {
  background: #e3e3e3;
}

13. X:not(selector)

div:not(#container) {
   color: blue;
}

14. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

15. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

16. X:first-child

ul li:first-child {
   border-top: none;
}

17. X:first-of-type

A Test

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>
</div>

Solution 1

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

Solution 2

p + ul li:last-child {
   font-weight: bold;
}

Solution 3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

function MyScript(){}
(function()
{
  var THIS = this;
  function defined(x)
  {
    return typeof x != 'undefined';
  }
  this.ready = false;
  this.init = function(
  {
    this.ready = true;
  };
  this.doSomething = function()
  {
  };   
  var options = {
      x : 123,
      y : 'abc'
      };
  this.define = function(key, value)
  {
    if(defined(options[key]))
    {
      options[key] = value;
    }
  };
}).apply(MyScript);

(function()
{
  ...
})();

function doSomething()
{
  ...
}

doSomething();

The Beauty Within

var THIS = this; 

function defined(x)
{
  return typeof x != 'undefined';
}

this.ready = false;
this.init = function()
{
  this.ready = true;
};
this.doSomething = function()
{
};

var options = {
  x : 123,
  y : 'abc'
  };
this.define = function(key, value)
{
  if(defined(options[key]))
  {
    options[key] = value;
  }
};

THIS or That?

function MyScript(){}
(function()
{
   var THIS = this;  
   function defined(x)
   {
      alert(this);      //points to defined()
      alert(THIS);      //points to MyScript()
   }
}).apply(MyScript);

Wrapped Up!

1. If the selectors are the same then the latest one will always take precedence.
2. The more specific a selector, the more preference it will be given when it comes to conflicting styles.
3. The embedded style sheet has a greater specificity than other rules.

Specificity hierarchy

1. Inline styles (Presence of style in document).
   An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
2. IDs (# of ID selectors)
   ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
   This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).
   Including for instance :before and :after.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors; 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

What is what

p { padding: 10px; }

p.section { padding: 10px; } 

#section { padding: 10px; }

p span { font-style: italic; }

p[title] { font-weight: bold; } 

a:visited {
text-decoration: underline; 
}

p:first-line {
font-variant: small-caps; 
}
a:link:after { content: " (" attr(href) ")"; }

1) Most common way, unfortunately, global function calls

makeArray('one', 'two');  
   // => [ window, 'one', 'two' ]  

2) Method call

//creating the object
var arrayMaker = {
 someProperty: 'some value here',
 make: makeArray
};

//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

var arrayMaker = {
 someProperty: 'some value here',
 make: function (arg1, arg2) {
  return [ this, arg1, arg2 ];
 }
};

//using jQuery
$('#btn1').click( function() {
 alert( this.id ); // jQuery ensures 'this' will be the button
});

3) + 4) Two more: apply() and call()

var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler,  'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]

5) Constructors

//declaring the constructor
function ArrayMaker(arg1, arg2) {
 this.someProperty = 'whatever';
 this.theArray = [ this, arg1, arg2 ];
}
// declaring instance methods
ArrayMaker.prototype = {
 someMethod: function () {
  alert( 'someMethod called');
 },
 getArray: function () {
  return this.theArray;
 }
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ am, 'one' , 'two' ]

It's a wrap

Introduction

Creating a simple web page scraper

public class HtmlTitleRetriever
{
    public string GetTitle(Uri file)
    {
        string fileContents;
        string title = string.Empty;

        WebClient client = new WebClient();
        fileContents = client.DownloadString(file);

        int openingTagIndex = fileContents.IndexOf("<title>");
        int closingTagIndex = fileContents.IndexOf("</title>");

        if(openingTagIndex != -1 && closingTagIndex != -1)
            title = fileContents.Substring(openingTagIndex, 
                closingTagIndex - openingTagIndex).Substring(7);

        return title;
    }
}

• The class does more than it should do. A principle of good system design is SoC - separation of concerns. According to this principle, a software component should be able to do a simple task only, and do it well. Instead, the class first downloads the file from the web, and then applies some sort of parsing to retrieve the contents it cares about. These are two different tasks, which should be separated into two different components.
• What if the class needed to be able to retrieve documents not accessible via the HTTP protocol? You'd need to change the implementation of the class to replace or add this feature. The same consideration applies to the parsing process. In this example it doesn't make much sense but you may discover that under certain circumstances adopting a different scraping mechanism would lead to better performance. In other words, the class has deep knowledge - read, dependencies - on concrete implementations of other components. It's better to avoid this because it leads to bad application design.

Components and Services

Applying SoC with Components and Services

public interface IFileDownloader
{
    string Download(Uri file);
}

public interface ITitleScraper
{
    string Scrape(string fileContents);
}

public class HttpFileDownloader : IFileDownloader
{
    public string Download(Uri file)
    {
        return new WebClient().DownloadString(file);
    }
}

public class StringParsingTitleScraper : ITitleScraper
{
    public string Scrape(string fileContents)
    {
        string title = string.Empty;
        int openingTagIndex = fileContents.IndexOf("<title>");
        int closingTagIndex = fileContents.IndexOf("</title>");

        if(openingTagIndex != -1 && closingTagIndex != -1)
            title = fileContents.Substring(openingTagIndex, 
                closingTagIndex - openingTagIndex).Substring(7);

        return title;
    }
}

public class HtmlTitleRetriever
{
    private readonly IFileDownloader dowloader;
    private readonly ITitleScraper scraper;

    public HtmlTitleRetriever(IFileDownloader dowloader, ITitleScraper scraper)
    {
        this.dowloader = dowloader;
        this.scraper = scraper;
    }

    public string GetTitle(Uri file)
    {
        string fileContents = dowloader.Download(file);
        return scraper.Scrape(fileContents);
    }
}

Approaching IoC and DI

Castle Windsor Container

IWindsorContainer container = new WindsorContainer();

container.AddComponent("HttpFileDownloader", typeof(IFileDownloader),
     typeof(HttpFileDownloader));
container.AddComponent("StringParsingTitleScraper", typeof(ITitleScraper),
     typeof(StringParsingTitleScraper));
container.AddComponent("HtmlTitleRetriever", typeof(HtmlTitleRetriever));

HtmlTitleRetriever retriever = container.Resolve<HtmlTitleRetriever>();

string title = retriever.GetTitle(new Uri("some uri..."));

container.Release(retriever);

<?xml version="1.0" encoding="utf-8" ?>
<configuration>

  <configSections>
    <section name="castle"
        type="Castle.Windsor.Configuration.AppDomain.CastleSectionHandler, 
          Castle.Windsor" />
  </configSections>

  <castle>
    <components>
      <component id="HtmlTitleRetriever"
                 type="WindsorSample.HtmlTitleRetriever, WindsorSample">
      </component>
      <component id="StringParsingTitleScraper"
                 service="WindsorSample.ITitleScraper, WindsorSample"
                 type="WindsorSample.StringParsingTitleScraper,
                      WindsorSample">
      </component>
      <component id="HttpFileDownloader"
                 service="WindsorSample.IFileDownloader, WindsorSample"
                 type="WindsorSample.HttpFileDownloader, WindsorSample">
      </component>
    </components>
  </castle>
  
</configuration>

• id (required): a string name to identify the component
• service: the contract implemented by the component
• type: the concrete type of the component

IWindsorContainer container = new WindsorContainer(new XmlInterpreter());
HtmlTitleRetriever retriever = container.Resolve<HtmlTitleRetriever>();
string title = retriever.GetTitle(new Uri("some address..."));
container.Release(retriever); 

Taking advantage of IoC and DI

Summary

Logging Levels

1. OFF - nothing gets logged (cannot be called)
2. FATAL
3. ERROR
4. WARN
5. INFO
6. DEBUG
7. ALL - everything gets logged (cannot be called)

// Configure log4net using the .config file
 [assembly: log4net.Config.XmlConfigurator(Watch = true)]
 // This will cause log4net to look for a configuration file
 // called TestApp.exe.config in the application base
 // directory (i.e. the directory containing TestApp.exe)
 // The config file will be watched for changes.

private static readonly ILog log = LogManager.GetLogger(typeof(Program));

using System;
using System.Collections.Generic;
using System.Text;
using log4net;

namespace log4netDemo
{
  class Program
  {
   // Define a static logger variable so that it references the name of your class
   private static readonly ILog log = LogManager.GetLogger(typeof(Program));

   static void Main(string[] args)
   {
    log.Info("Entering application.");

    for (int i = 0; i < 10; i++)
    {
     log.DebugFormat("Inside of the loop (i = {0})", i);
    }

    log.Info("Exiting application.");
   }
  }
}