How can I convert a string to upper- or lower-case with XSLT?

Sometimes you need to convert a title in XSLT 1.0 to upper or lower case. In XSLT 1.0 the upper-case() and lower-case() functions are not available.

We’re gonna use the translate function, to transform a string. The input is the var title, which will output Example

Step 1: Declare variables

<xsl:variable name="smallcase" select="'abcdefghijklmnopqrstuvwxyz'" />
<xsl:variable name="uppercase" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" />

Step 2: Call translate function

<xsl:variable name="titleLowerCase" select="translate(title, $uppercase, $smallcase)" />

The translate function wil process the given string and will output example.

It’s HBO

Check out this recently launched website to promote the HBO television channel www.itshbo.nl

The website uses a fullscreen video background combined with a minimal interface. It’s only for desktop users because mobile visitors will see a TV schedule and a small slideshow. This RESS (Responsie Design & Server Side Components) technique is used more often nowadays. I’m curious how this will affected the SEO of the website.

It’s nice to see that IE8 visitors, will see a message that they’re using a old browser. Apparently support for IE8 is dropping fast. Statistics from StatCounter shows that only 6,79% of the visitors is using this legancy browser.

MEAN Stack

De javascript frameworks vliegen je als developer om de oren. Samen met mijn online collega’s bij www.ambitions.nl, zijn we een programmeerwedstrijd gestart om zo nieuwe technieken, frameworks, werkmethodes te proberen. Aangezien de javascript MVVM frameworks niet meer weg te denken zijn, heb ik besloten om er volledig in te duiken. Na het lezen van een aantal artikelen besloot ik voor AngularJS te gaan.

Het ontwikkelen van een kleine app vereist ook een database en zodoende kwam ik bij een uitstekende tutorial: http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/

Wil je aan de slag met AngularJS, MongoDB, NodeJS en Bower dan raad ik aan om de onderstaande tutorial te volgen. #MEAN #expressjs #nodejs #angularjs #bower #nodejs #jade. De tutorial is geschreven voor Windows, Mac en Linux. Je zal voornamelijk gebruik maken van de commandline.

 

Hoe maak je een NS-stations dropdown lijst

We zullen in deze HTML5 webform tutorial excel data gaan omzetten naar een select option in html. Een aantal handige truukjes met notepad++ zullen we gebruiken om deze missie snel een gemakkelijk te laten verlopen.

Webform mission:  een gebruiker wil in een webformulier één van de NS-stations kunnen selecteren.

Mission skills

  1. Javascript / Jquery
  2. HTML5

Mission requirements:

  1. Notepad++
  2. NS stationamenlijst (excel link)

Mission objectives

  1. Convert data van excel naar automatisch gevuld select options lijst

1. Excel data omzetten naar array[]

De NS stationslijst is aangeleverd als excel en uiteindelijk elk station als <option>. Open het excel bestand en selecteer de kolom met de stationsnamen. Plak de namen in een nieuw txt document in Notepad++. Nu gaan we de zoek en vervang functie gebruiken om de namen om te zetten naar een array. Het verwachte resultaat : [“Stations naam 1″, “Stationnaam West”,”etc” ]. Om de namen van de stations moeten quotes komen te staan en gescheiden worden door komma’s.

Met CTRL-F kun je in notepad het venster openen om woorden te zoeken.  In het tweede tabje vervangen kun je de volgende instellingen overnemen.notepad_vervang_newline

Find what: \n
Replace with: ,”
Searchmode: Extended 

Je geeft hiermee notepad te zoeken naar het onzichtbare teken “newline”. \n staat voor het afbreken van de regel en vervang dit door ,” (komma gevolgd door dubbele quotes).

notepad_vervang_newline_resultaat

Vervang nu de \n door \r en vervang ,” ) door ” (dubbele quotes).

notepad_vervang_newline_resultaat_r

Controleer het begint en eind en zorg er voor dat dit een valide javascript array wordt. Mijn resultaat: link.

2. Genereer automatisch gevulde <options>

$stationslijst = [“Aalten”, “Abcoude”, “Akkrum”, “etc”]

var $totalStationslijst = $stationslijst.length;
var optionHtml= “”;
optionHtml = “<option value=”>Selecteer een station</option>”;

for (var i = 0; i < $totalStationslijst; i++) {
optionHtml += “<option value=” + $stationslijst[i] + “>”+ $stationslijst[i] +”</option>”;
}

 

3. Actie!