Frontendplace Blog

Sometimes you need a list of selectors based under different environments and every environment has its own body class. If you need to make a lot of selectors with different colors for every environment it is best to set the list of colors and a list of environments in variables and let sass generate the color rules for every environment.

example:
// first we set the variables:
$darkcolor-df :#E17000; // rgb(225, 112, 0) portaal Defensie bar oranje
$lightcolor-df :#F6D4B2; //Defensie border licht oranje

$darkcolor-km: #0E61AA; //KM bar/border Blauw
$lightcolor-km: #E1EBF4; //.. KM lichtblauw

$darkcolor-kl: #00423C; // KLandmacht bar groen
$lightcolor-kl: #DFE7E7; // KLandmacht border lichtblauw
…

calling mixin
@include envcolor(background-color, ‘dark’, ‘#navigation .selected a,#navigation .selected a:visited’);

Mixin:

/* -----------------------------------
    mixin for setting the light or dark color per environment
    input param selector 	type:list of strings 	selector string(s) after the environment class
				prop 		type:style property
				clr 		type:string 	dark | light | #000000 colorcode
   ----------------------------------*/
@mixin envcolor($prop, $clr, $selector) {
	$env:  kl, klu, kmar, cmc, dmo;
	$darkcolors: $darkcolor-kl,$darkcolor-klu,$darkcolor-kmar,$darkcolor-cmc,$darkcolor-dmo;
	$lightcolors: $lightcolor-kl,$lightcolor-klu,$lightcolor-kmar,$lightcolor-cmc,$lightcolor-dmo;
	/* #{$clr} */
	@for $i from 1 through length($env) {
        $portal: nth($env, $i);
        $color: #{$clr}  !default;
		
        @if ('#{$clr}'=='dark') {
        	/* #{$portal} dark */
        	$color: nth($darkcolors, $i);
        }
        @else if ('#{$clr}'=='light'){
        	/* #{$portal} light */
            $color: nth($lightcolors, $i);
        } @else {
        	 $color: #{$clr};
        }
		.#{$portal} {
			#{$selector} {
			  	#{$prop} :#{$color};
			}
		}
    }
}

Generates:


/* dark */
/* df dark */
.df #navigation .selected a, .df #navigation .selected a:visited {
background-color: #e17000;
}

/* km dark */
.km #navigation .selected a, .km #navigation .selected a:visited {
background-color: #0e61aa;
}

/* kl dark */
.kl #navigation .selected a, .kl #navigation .selected a:visited {
background-color: #00423c;
}

/* klu dark */
.klu #navigation .selected a, .klu #navigation .selected a:visited {
background-color: #005187;
}...

Here is an excel sheet you can use to check your site with the dutch webrules.

webrichtlijnen.xlsx

In Februari 2014 all incasso payments must be done with the IBAN bank account numbers and all the webshops should consider the impact of these changes. All the banks and insurance companies already are migrating now.

So I would like to give some information here about some technical information for programmers that need to validate the numbers when updating payment software.

IBAN (International Bank Account Number) is an international standard for bankaccount numbers.(ISO13616) . The number consist of the following parts:

• ISO countrycode;
• Checksum number;
• Bankidentity;
• Bankaccountnumber at the local bank;

The IBAN starts with two country characters and two checksum digits
The IBAN is maximum 34 characters in length. The Bank identity and Bank accountnumber together is the BBAN. Each country has its own pattern of BBAN.

The Dutch IBAN is 18 character long and looks like this:

The Dutch bankidentity consists of 4 letters of the BIC code of the bank where the account is held.

Examples:

NL05 INGB 0661 0950 88
NL91 ABNA 0417 1643 00
NL54 RABO 0387 7819 00

So how do you need to check  the IBAN

The IBAN check is done by converting the number first by placing the country code and checksum at the end of the string value, replacing all characters with numbers (A=10, B=11 etc) and performing a BBAN test and Mod97 test. The resulting remainer should be 1.

Before the validation starts all spaces need to be removed and the characters are capitalized.
The following checks can be done:

• The code is not longer than 34 characters
• The IBAN contains only a-z, A-Z, 9-0
• The first characters must be: letter letter digit digit
• The check digits of IBAN cannot be 00,01 or 99.
• The length of IBAN is checked according to the country BBAN.
• The country structure of IBAN is checked according to the country BBAN.
• A Mod97 test (ISO7064) is performed on a ISO13616 prepared IBAN digitstring.

If you want sass to generate the classes to be generated to support “clearfix”  (clearing all the floats of previous content to be sure the element is always rendered at a new clear line). With the newest sass compiler you can use placeholders that are not generated until they are used  and can be extended.

%clearfix {
	zoom: 1;
	&:before,
	&:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}
	&:after {
	  clear: both;
	}
}
.container {
  @extend %clearfix;
  text-align: left;
}
.footer {
  @extend %clearfix;
  text-align: center;
}

This will generate:

.container, .footer {
  zoom: 1;
}
.container:before, .footer:before, .container:after, .footer:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.container:after, .footer:after {
  clear: both;
}
.container {
  text-align: left;
}
.footer {
  text-align: center;
}

An inline image is an image that is generated as base64 string inside the stylesheet. But this is not supported by IE6 if you want to support both you can use the * hack for IE6 like this:

@import "compass";
@mixin inline-image($url, $repeat:repeat){
  background: inline-image($url) $repeat;
  *background: image-url($url) $repeat;
}
.facebook {
  width: 34px;
  height: 34px;
  @include inline-image("icons/facebook.png",no-repeat);
}

And generates:
.facebook {
width: 34px;
height: 34px;
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAFbUlEQVR4XrWXT4hd…’) no-repeat;
*background: url(‘../images/icons/facebook.png?1346742026′) no-repeat;
}

Here is an example for a sass stylesheet. to support Retina display images. This example only support .png images where the basename of the image is passed to the mixin as variable.

@mixin retina {
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    @content;
  }
}

@mixin generic-background-image($image) {
	background: image-url("#{$image}.png");
	  @include retina {
	    background: image-url("#{$image}@2X.png");
	}
}

h1 {
	@include generic-background-image("content");
}

This will generate:

h1 {
  background: url('../images/content.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  h1 {
    background: url('../images/content@2X.png');
  }
}

Dreamweaver has some preference settings to rewrite your code on opening but even when you uncheck all and expect to view the original content then be warned..

example:

<test>
<!--<node1>
       <node2>
        <!- - Explanation:
         this is some html comment
        - ->
       </node2>
    </node1>-->
</test>

When you want comments nested inside other comments temporary changed and set a space between the two “-” character  in Dreamweaver the xml becomes this and your xml becomes corrupt:

<!--<node1>
       <node2>
          <!- - Explanation:
          this is some html comment
         - ->
        </test>
     -->

So better change this to <!- Explanation….. ->

If you have an error in joomla 1.5 website and your provider (or in my case in my snowleopard website)

Then you can try this fix http://phpscripts4u.com/uncategorized/parameter-2-frontpage-expected-reference/. It helped me.

For the dutch telephone numbers is a list of prefixes defined (see http://statisch.detelefoongids.nl/static/nl_NL/netnummer.html) and the place of the – and spaces is defined in a NEN description 2132.(http://taaladvies.net/taal/advies/tekst/53/)

If you also want to check for the correct prefixes in your form validation here is a sample expression that checks this all: (this doesnt backtrack the existence of first added “(” to validate “()” pair) and uses ungreedy grouping for better performance.

^\(??0(?:(?:(?:10|13|15|20|23|24|26|30|33|35|36|38|40|43|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79)\)??\s??\-??\s??\d{3}\s??\d{2}\s??\d{2})|(?:111|113|114|115|117|118|161|162|164|165|166|167|168|172|174|180|181|182|183|184|186|187|222|223|224|226|227|228|229|251|252|255|294|297|299|313|314|315|316|317|318|320|321|341|342|343|344|345|346|347|348|411|412|413|416|418|475|478|481|485|486|487|488|492|493|495|497|499|511|512|513|514|515|516|517|518|519|521|522|523|524|525|527|528|529|541|543|544|545|546|547|548|561|562|566|570|571|572|573|575|577|578|591|592|593|594|595|596|597|598|599)\)??\s??\-??\s??\d{2}\s??\d{2}\s??\d{2})$

I came up to a difference between firing events in internet explorer and firefox, Chrome, safari etc.
In Internet explorer 8 you can fire events like onclick, onmouseover etc with the method fireEvent with javascript. In other browsers you can use dispatchEvent for this and in some other libraries like Prototype you can use triggerEvent or trigger in jQuery.

When you fire an event in the standard browsers (FF,CHR etc) a submit on a form is triggered and a document.location change is triggered when an “click” event is called. And when you don’t want this to happen you should call preventDefault() to cancel the default action of the button or anchor (submitting or redirecting to an other page). But…. in IE8 I see that when calling fireEvent(‘onclick’) only the onclick listeners that are added to the buttons or anchors are triggered but NOT the default actions. So there will be no submitting or redirection when calling fireEvent(‘onclick’). But when you call the general click() function all the onclick event listeners will be triggered INCLUDING the default action. So try it yourself in this example with internet explorer.

See example on http://www.frontendplace.nl/bb/wp-content/uploads/2012/02/fireEvent-Method-Sample.html