ict.ken.be

Delivering solid user friendly software solutions since the dawn of time.

Selectors Overview 

Categories: CSS Javascript

CSS SELECTORS

element
#elementId
.elementClass
* { any element }
#elementId * { all children of elementId }
E { all tags E }
E F { all tags F descendants of E }
E>F { all tags F direct children of E } // child combinator
E+F { all tags F immediately preceded by sibling E } // adjacent selector
E~F { all tags F preceded by any sibling E } // sibling combinator
E.C { all tags E with class C }  // .C = *.C
E#I { all tags E with id I } // #I = *#I
E[A] { all tags E with attribute A }
E[A=V] { all tags E with attribute A of value V } // eg. a[href="foo"]
E[A^=V] { all E with attribute A value beginning with V }
E[A$=V] { all E with attribute A value end with V } // eg. a[href$=".jpg"]
E[A*=V] { all E with attribute A value contains with V }
E[A~=V] { all E with value in space separated list A }
a:link { anchors tags that not been clicked on }
a:visited { anchors tags that have been clicked }
X:checked { all checked radio and checkboxes }
X:disabled, X:enabled
X:after, X:before { generate content around an element } // eg. .crumb:after { content : ">" }
X:hover { styling element on hover over } // user action pseudo class
X:not(selector) // eg. div:not(#container)
X:first-child
X:last-child
X:only-child { target elements wich are only child of parent }
X:only-of-type { elements that have no siblings within parent container }
X:first-of-type { first sibling of its type }
X:nth-child(n) { nth-child is 1-based all the other selectors are 0-based }
X:nth-child(Xn+Y) { every x element }
X:nth-last-child(n)
X:nth-of-type(n) { select according to type of element }
X:nth-last-of-type(n)
X:nth-child(even|odd)
X::first-letter { first letter of block elements }
X::first-line { first line of block elements }

JQUERY SELECTORS

:animated
:button
:checkbox
:checkbox:checked
:contains(foo)
:file
:header //h1 -> h6
:hidden
:image //input[type=image]
:input //input, select, textarea, button
:not(filter)
:parent //all elements that have children including text but not empty ones
:password
:radio
:radio:checked
:reset
:selected
:submit
:text
:visible
:even
:odd
:eq(n) returns nth matching element
:gt(n) elements after nth matching
:lt(n) elements before nth matching
E:has(F) all tags E with at least one F contained //only one nested level eg. foo:not(bar:has(baz))

XPATH-JQUERY PLUGIN

/html//form/fieldset all <fieldset> elements direct under <form>
/html//form/*/input all <input> elements directly under exactly on element under <form>
//div/.. matches all elements that are direct parent to a <div>
//div[@foo=bar]
//div[@p] all div elements with at least one <p>
position() equals :first
position()>n equals :gt(n)
Comments 

jQuery Overview 

Categories: Javascript

A selector overview you can find at: https://ict.ken.be/selectors

$(selector) -> jQuery(selector) //jQuery.noConflict();
$(function() {}); -> $(document).ready(function() {});

.html();
$.trim(someString)
$("<div>"); -> $("<div/>"); -> $("<div></div>");
$("<p>inserted</p>").insertAfter(selector);
.end() //revert back to full set after a filter
.size(); //eg. $("#someDiv").html('There are '+$('a').size()+' links on this page.');
$('img[alt]').get(0) -> $('img[alt]')[O]
$('label+button').get();
$('img').index($('img#findMe')[0]);
$('img[alt], img[title]'); -> $('img[alt]').add('img[title]'); //or
$('img[title]').not('[title*=puppy]');
.filter(expression or fuction returning bool or selector);
.match(regex);
.slice(begin,end);
.children(), .contents(), .next(), .nextAll(), .parent(), .parents(), .prev(), .prevAll(), .siblings()
.addClass();
.find();
.contains();
.is(selector); //if any element in the wrapped set matches the selector
.clone();
.andSelf(); //merges two previous wrapped sets in a command chain

$.fn.disable = function () {} //extending jQuery

.each(function(n) {});

.append('<p>some html</p>')

if (!event) event = window.event; //IE
var target = (event.target) ? event.target : event.srcElement; //IE

$('*').each(function() {}); //for every element on the page

stopPropagation(); //stop bubbling up
return false; // will cancel the default semantics/actions and bubble

addEventListener('click', function(event) {}, useCapture); //DOM Level 2, use capture is false for bubble phase and true for capture - IE uses attachEvent()

.bind('click'), function(event) {}); //jQuery encapsultes the attachEvent and addEventListener
.one() //handler removed after one execution
$('*').unbind('click.editMode'); //namespace through suffix

.trigger(eventType);
.eventName(); //blur, click, focus, select, submit
.toggle(listenerOdd, listenerEven);
.hover(overListerner,outListener); //mouseover and mouseout will trigger on transitions of contained elements, hover will not

<label></label> //progressive disclosure: use to enclose radio and text, so clicking either will trigger click of control

EVENTS

Events: blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

Safe event instance properties: altKey, ctrlKey, data, keyCode, metaKey, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, type, which

APPENDIX

  • a closure is a function instance coupled with the local variables from its enviroment that are necessary for its execution.
  • javascript object is an unordered collection of name/value pairs
  • class attribute is represented by the className attribute property
  • an event bubbles all the way up until the root
Comments 

CSS3 Overview 

Categories: CSS

A selector overview you can find at: https://ict.ken.be/selectors

CSS3

border-radius:10px;
@font-face { font-family: "My Font"; src:url("myFont.eot"); }
column-count:2;
column-gap:1em;
text-shadow:x y blur color; (ie -> filter:dropshadow)

TRANSITIONS

-webkit-transition-property:height;
-webkit-transition-duration:0.7s;
-webkit-transition-timing-function:ease-in;
-webkit-transition-delay:.5s;

MORE CSS3

Comments 

HTML5 Overview 

Categories: HTML

HTML5

Html5 replaces html4 + xhtml1 + dom2.

What is not html5: css3 transitions, web sockets, geolocation, svg, css3 @font-face, messaging api.

Html5 introduces new elements: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time, video.

Html5 introduces WebForms 2.0: datepickers, numeric steppers, email-search-url fields, put/delete.

Html5 extends api: audio, video, offline apps, editable, drag&drop, history, protocols.

<!DOCTYPE HTML> -> needed cause otherwise will goto quirks
<meta charset="UTF-8" />

<header>multiple headers allowed</header>
<nav>use only for major navigation, eg. not needed for footer link group</nav>
<section>regions with distinct titles</section>
<hgroup>grouping h-tags that belong together, eg. subtitle</hgroup>
<h1>restarting header numbering is encouraged</h1>
<footer>for nearest section</footer>
<article>independently distributable</article>
<aside>inside the tag it relates to</aside>

<figure>group visual content</figure>
<video src="my-movie.mp4" width="320" height="240"></video>
<audio></audio>
<embed></embed>
<canvas>use for report graphics and games, watch out with accessibility friendliness</canvas>

<meter>progress bar if min and max is known</meter>
<progress>progress bar if length of action unknown</progress>
<time></time>
<details>used for tabs and accordions</details>
<command>things that can be invoked by user</command>
<menu>list of commands</menu>

<label for="theAddy">the label</label>
<input name="theAddy" type="email" id="email" tabindex="30" autocomplete="false" autofocus placeholder="suggested input" required>
<input type="number" step="5" min="1" value="1">

getElementsByClassName();

Elements deprecated for authors: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes

Attributes deprecated for authors: a (link rev, charset), img (longdesc, name), html (version), th (abbr), td (scope), all-block-level(align), body (background), img (hspace, vspace), table (tr, th, td, bgcolor, table border, cell padding, cell spacing), td (th,height,width), table (valign).

CONTENT MODELS

block: div, form, h1, h6, ol, ul, li, p, pre, table
inline: span, a, em, img, input, label, strong

metadata, embedded, interactive, heading, phrasing (similar to inline), flow (in normal flow of document), sectioning (by article, aside, nav, section)

API

Video and Audio API (Ogg Theora .ogv - Google VP8 .webm)

Inline Editing API

Offline Application API

History API

Web Protocol API

TOOLS

html testing:

outline testing:

backward compatibility:

MORE HTML5

Comments 

C# Singleton Pattern 

Categories: Patterns 
// Singleton pattern -- .NET optimized

using System;
using System.Collections.Generic;
 
namespace DoFactory.GangOfFour.Singleton.NETOptimized
{
  /// 
  /// MainApp startup class for .NET optimized
  /// Singleton Design Pattern.
  /// 
  class MainApp
  {
    /// 
    /// Entry point into console application.
    /// 
    static void Main()
    {
      LoadBalancer b1 = LoadBalancer.GetLoadBalancer();
      LoadBalancer b2 = LoadBalancer.GetLoadBalancer();
      LoadBalancer b3 = LoadBalancer.GetLoadBalancer();
      LoadBalancer b4 = LoadBalancer.GetLoadBalancer();
 
      // Confirm these are the same instance
      if (b1 == b2 && b2 == b3 && b3 == b4)
      {
        Console.WriteLine("Same instance\n");
      }
 
      // Next, load balance 15 requests for a server
      LoadBalancer balancer = LoadBalancer.GetLoadBalancer();
      for (int i = 0; i < 15; i++)
      {
        string serverName = balancer.NextServer.Name;
        Console.WriteLine("Dispatch request to: " + serverName);
      }
 
      // Wait for user
      Console.ReadKey();
    }
  }
 
  /// 
  /// The 'Singleton' class
  /// 
  sealed class LoadBalancer
  {
    // Static members are 'eagerly initialized', that is,
    // immediately when class is loaded for the first time.
    // .NET guarantees thread safety for static initialization
    private static readonly LoadBalancer _instance =
      new LoadBalancer();
 
    // Type-safe generic list of servers
    private List _servers;
    private Random _random = new Random();
 
    // Note: constructor is 'private'
    private LoadBalancer()
    {
      // Load list of available servers
      _servers = new List
        {
         new Server{ Name = "ServerI", IP = "120.14.220.18" },
         new Server{ Name = "ServerII", IP = "120.14.220.19" },
         new Server{ Name = "ServerIII", IP = "120.14.220.20" },
         new Server{ Name = "ServerIV", IP = "120.14.220.21" },
         new Server{ Name = "ServerV", IP = "120.14.220.22" },
        };
    }
 
    public static LoadBalancer GetLoadBalancer()
    {
      return _instance;
    }
 
    // Simple, but effective load balancer
    public Server NextServer
    {
      get
      {
        int r = _random.Next(_servers.Count);
        return _servers[r];
      }
    }
  }
 
  /// 
  /// Represents a server machine
  /// 
  class Server
  {
    // Gets or sets server name
    public string Name { get; set; }
 
    // Gets or sets server IP address
    public string IP { get; set; }
  }
}

 

Output:
Same instance

ServerIV
ServerIV
ServerIII
ServerV
ServerII
ServerV
ServerII
ServerII
ServerI
ServerIV
ServerIV
ServerII
ServerI
ServerV
ServerIV
Comments 
Page 32 of 43 << < 20 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 > >>