Embedding fonts using SIFR

I've been around on the net since 1995, and have seen at least 3 ways to embed fonts on webpages: The microsoft way, the netscape way and now a cross platform way - SIFR.

As I try to put my threads short, I will just write a way to implement SIFR custom fonts on your website

1. Locate a TTF font you whish to use on your webpage
2. Goto the page which offers to convert the font to a "flash swf font" (used by SIFT):
   http://www.sifrgenerator.com/wizard.html
3. Follow the wizard guide and choose version 2 in the end.
4. Download the SWF file to a path near your website, say in a folder named "fonts"

Now the font is ready, all you need to do now is to try another free service appearing as a plugin for JQUERY - the sIFR plugin!

1. Goto the website http://jquery.thewikies.com/sifr/
2. Download the "Jquery sIFR plugin version 2" All in one.zip file
3. unpack it and follow the guide

To be able to use the font you generated yourself - copy'n'paste the font into the "fonts" directory in the unpacked "all-in-one" zip file.

That's it! :-)

Code snippets - lets unite!!

As I was browsing for some help for doing a simpel task I came across a site which contains Snippets - http://snipplr.com. Wow! That sounded interesting - the snippet I first clicked on was: "Opacity Hack. I was a litle disapointed, not with the snippet in question, but the fact that it was nothing but simpel text...

For years in the back of my head I have had the thought that code snippets should unite! :-) My hopes that snipplr.com was such a united snippet spot was spoiled...

But I tried to write my POWs about snippets - which was not 100% allowed by their comment system, so here goes - a (hopefully) working copy of what I tried to write about snippets standardlization:

Hi, In general I like the Idea of snippets, no doubt about that! But I would love to see some kind of standardilzation of them, preferable in a combination of XML, XSD (schema). You could then transform your XML snippet to what ever purpose you would need it in - say a HTML context. You can validate the input to the snippet using XSD. And some clever programmer might create add-ins for say MS Visual Studio 2008 or other commenly used development tools.
Here is my first thoughts about how it could be put together - based on this snippet for opacity:

<?xml version="1.0" encoding="utf-8"?>
<snippets>
  <snippet>
    <name>Opacity hack</name>
    <version>1.0</version>
    <context>CSS</context>
    <template>
      <outputRaw><![CDATA[selector {  filter: alpha(opacity=60); /* MSIE/PC */  -moz-opacity: 0.6; /* Mozilla 1.6 and older */  opacity: 0.6;}]]></outputRaw>
      <output>
        <input id="alpha" type="string" default=".selector" /> {
        filter: alpha(opacity=<input id="opacity" type="int" default="60"/>); /* MSIE/PC */
        -moz-opacity: <eval id="moz-opacity"><![CDATA[opacity/100]]></eval>; /* Mozilla 1.6 and older */
        opacity: <eval id="moz-opacity"><![CDATA[moz-opacity]]></eval>;
        }
      </output>
    </template>
  </snippet>
</snippets>

Snippet: External javascript Eval window

Below a code which (especially) in MSIE will be helpfull when debugging a webpage in frontend. The script opens a small window containing a textarea where you may enter your javascript code. When you Evaluete the code it will be in the context of the current window, so you can examine or edit the DOM tree of the document which is in the window where you clicked the Snippet.

You should create your snippet by

1. Create a bookmark (any page)
2. Place the bookmark in the "links" area, so that it will be available in your toolbar
3. Edit the bookmark (right click) and paste the code below into the URL
4. Rename it (to say "EVAL")

Here is the code:

javascript:void(eval("var s = '<script type=\"text/javascript\">function doEval(s) { opener.eval(s); }</script>';s+='<textarea rows=10 cols=80 id=source></textarea><br /><input type=button value=Eval onclick=\"doEval(source.value)\" />';window.w = window.open('','','width=700,height=210');window['w'].document.write(s);window['w'].document.title='Debug window'"))

Replace tokens in a string

Here is a usefull litle function which replaces values in a string:

 function replaceTokens(sString, aTokens) {
   var oRe;
   var sResult = sString;
   for(var iToken=0; iToken<aTokens.length; iToken++) {
      oRe = new RegExp('\\u007b'+iToken+'\\u007d', 'ig');
      try {
         sResult = sResult.replace(oRe, aTokens[iToken]);
      } catch(e) {
      }
   }
   return sResult;
 }

Find the coordinates of your address

Enter your address and get the coordinates for the address. The resulting page is containing XML, but you should be able to understand it :-)

Address

Zip

city

Debugging in javascript

General view on debugging posibilities
When developing webpages using javascript you have great debugging posibilities when errors occur. That is ofcause if you have the right tools installed on your computer/browser. I use Microsoft Visual Studio 2008 for javascript running in MSIE, and Firebug for javascript running in Firefox.

Both support breakpoints - though it is easier in Firebug. In MVS2008 I open the code and attach it to a running version of the code, after that I can add breakpoints. Firebug simply lets you add a breakpoint and volia it is active!

Debugging using own code
I found a post here: webdeveloper.com, modified it a litle and now have a stong debugging tool!

Below I have added some code which will allow you to show a "call stack" at any given point in your code. A call stack shows which functions with which parameters have brought us to a given place in your code. This allows you to find sources of errors more easy.
Furthermore it allows you the option to start the debugger if you wish! What more could you wish for! :-)

You can get the javascript code here:
http://www.netsi.dk/javascripts/showCallStack.txt

getEaster([year])

This code will return the date of easter at a [given] year. If you call the function without any year, current year will be used:

function getEaster(year) {
year = (arguments.length==1) ? year : new Date().getYear();
var a=year%19, b=Math.floor(year/100), c=year%100, d=Math.floor(b/4), e=b%4, f=Math.floor((b+8)/25), g=Math.floor((b-f+1)/3), h=(19*a+b-d-g+15)%30, i=Math.floor(c/4), k=c%4, l=(32+2*e+2*i-h-k)%7, m=Math.floor((a+11*h+22*l)/451), n=h+l-7*m+114;
return new Date(year, Math.floor(n/31)-1,n%31+1);
}

It return a javascript Date object.

eval function in any browser!

Working a lot in frontend environment you sometimes have to do "eval()" in javascript. That function is not standard for all browsers.

Firefox for one does not support it! No problem! Here is a simple script you can put in the top of you page. It will ensure that a working eval function is present!

Try it out! - Enter code and press "eval"

alert(document.location);


<script language="javascript" type="text/javascript">
<!--
if (typeof(eval)=='undefined') {
eval = new Function(s, '_dynamicCode = new Function(s);_dynamicCode()')
}
// -->
</script>

isValidEmail(sEmail)

How many times have you wished that some build-in checks existed in the Regular Expression object? One on the ones which I use often is a check if an e-mail address is valid - so here you are! You may use it as you like! :-)




function isValidEmail(sEmail)
{
var pattern = "^[a-zA-Z0-9._+&*# -]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$"
var regex = new RegExp(pattern, 'ig');
return regex.test(sEmail);
}

How to: Demask a masked e-mail address in Dynamic Web

In Dynamic Web CMS you can choose that all e-mail adresses will be "masked". If you from a javascript wish to get the "demasked" version of such a value you can use this function:

function getDemaskedEMail(sEmail)
{
  if (sEmail.substr(0, 2)=='&#' && sEmail.substr(sEmail.length-1, 1)==';')
  {
    sEmail = ';'+sEmail+'&#';
    sEmail = sEmail.split(';&#');
    var ss = '';
    for(var i=0; i<sEmail.length; i++)
    {
      if (sEmail[i]!='') {
        ss+=String.fromCharCode(sEmail[i])
      }
    }
    sEmail = ss;
  }
  return sEmail;
}

How to make a file download link in Dynamic Web

Sometimes you want the user to be able to just download a file you point to from your Dynamic Web CMS homepage. What you need to do is simple:

• Prefix your filepath with:

  /Admin/Public/DWSDownload.aspx?File=



• If your file is here:

  /Files/files/myFile.txt



• Resulting URL:

  /Admin/Public/DWSDownload.aspx?File=/Files/files/myFile.txt

If the file path is written using Javascript you should

escape()

the file path.

How to get a xml object in javascript

This function will return a XML object:

function getXMLObject(sXML) {
  var oXMLObject;
  try {
    oXMLObject = new DOMParser().parseFromString(sXML, 'text/xml');
  } catch(e) {
    try {
      oXMLObject = new ActiveXObject('Microsoft.XMLDOM');
      oXMLObject.loadXML(sXML);
    } catch(e) {
    }
  }
  return oXMLObject;
};

Javascript - trim() method...

Javascript is very cool in the way that i handles objects. The way that it lets you dynamically extend objects with properties and methodes, I find very cool.

Yes you need to keep focus due to this "anercistic" structure of javascript - sometimes you hate it but most of the times you probertly love it :-)

Anyway, I found a good example of this object extending feature. A trim method is not included in the standard javascript String object. So here you are - a way to extend String with a Regular Expression based trim() method:

String.prototype.trim = function() {
return (this.replace(/^[\s\xA0]+/, "").replace(/[\s\xA0]+$/, ""));
}

(I found it here: Codeproject)

/Sten

Introducing meeboo.com!

This chatroom I have "created" using meeboo.com, it is a very cool up-front website.

A simple effective HTML-escape/encode function in Javascript!

At LUNARMEDIA I found this function below will take a string and return a HTML-encoded version of it!

function escapeHTML (str)
{
var div = document.createElement('div');
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
};

getLocationRoot()

This javascript function will return the root of the current page location.

function getLocationRoot() {
var sLocation = document.location.toString()
return sLocation.substr(0, sLocation.indexOf(document.location.pathname))
}

RegExp validation of zip codes

Sometimes when sites are multi language you need some Javascript to validate ZIP codes for several countries. Here are some regular expression objects which you chan use:

var oRegExp_NoValidation = /.*/ig;
var oRegExp_DDDD = /^\d{4}$/ig;
var oRegExp_DDDDD = /^\d{5}$/ig;
var oRegExp_DDDDDD = /^\d{6}$/ig;
var oRegExp_Uk = /[A-Z][A-Z]?[0-9][A-Z0-9]? ?[0-9][ABDEFGHJLNPQRSTUWXYZ]{2}/ig
var oRegExp_DDDD_AA = /^\d{4}.[A-Z]{2}$/ig;
var oRegExp_DDDD_DDD = /^\d{4}-\d{3}$/ig;

I then create an object for the countries which I need to validate ZIP code for:

// countryCode:[regExpToUse, bLooseValidation]
// bLooseValidation => "not sure if postcode should confirm 100% to validator" :-(
var countryCodeRegExpRelation = {
dk:[oRegExp_DDDD, false],
be:[oRegExp_DDDD, false],
uk:[oRegExp_Uk, true],
fr:[oRegExp_DDDDD, false],
nl:[oRegExp_DDDD_AA, false],
it:[oRegExp_DDDDD, false],
lu:[oRegExp_DDDD, false],
po:[oRegExp_DDDD_DDD, false],
ch:[oRegExp_DDDD, false],
es:[oRegExp_DDDDD, false],
de:[oRegExp_DDDDD, false],
at:[oRegExp_DDDD, false],
cn:[oRegExp_DDDDDD, true],
us:[oRegExp_NoValidation, true],
UNKNOWN:[oRegExp_NoValidation, true]
}

Each country becomes a property of the object "countryCodeRegExpRelation", and it also has a definition stateing if it should be "strict". To get the RegExp for a ZIP code in say Polen, you should use the RexExp in the property: "countryCodeRegExpRelation.po[0]".

You might use this code to validateZIPCode:

function validateZIPCode(sCountryPrefix, sZIPCode) {
var oRegExp = countryCodeRegExpRelation[sCountryPrefix][0];
if (sZIPCode.match(oRegExp)!=null) {
return true
} else {
alert('ZIP code not valid!');
return false;
}