Geolocation

A simple example:

 if (navigator.geolocation) {
          navigator.geolocation.watchPosition(
              function (pos) {
                  $("#lat").text(pos.coords.latitude);
                  $("#lng").text(pos.coords.longitude);
                  $("#alt").text(pos.coords.altitude);
                  $("#hdg").text(pos.coords.heading);
                  $("#spd").text(pos.coords.speed);
              },
              function (err) {
                  $("#status").text("ERROR: " + err.message);
              }
          )
      }

Device orientation

The first part that needs to be understood is this cryptic alpha/beta/gamma system. The alpha component is the heading relative to North. Unfortunately it rotates in a counter-clockwise manner (which is to say that an alpha of 90 is West rather than East) so that in order to obtain a more typical heading one has to subtract alpha from 360 (using the West=90 example above you would then get 360 – 90 = 270°, which is the value most people would expect for a device pointing West). The beta component is the vertical rotation. That is to say that a device laying flat on its back with its screen pointed up will have a beta of 0, and if it is moved to stand vertical with the top of its screen pointing up it will read at 90. The gamma component is the remaining rotation axis.

Touch events

In order to prevent the default zooming behaviour, you can return to the meta viewport element as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

Local Storage

To persistently store data locally is the simpler alternative: Local Storage. The more complex (but more powerful) approach, IndexedDB, is a large API and at times difficult feature the details of which are still being ironed out.

Local Storage is a simple key-value store, in which the keys and values are strings. There is only one store per origin. This functionality is exposed through the globally available localStorage object.

If you wanted to keep a simple counter of the number of times a given user has loaded your application, you could use the following:

var counter = localStorage.getItem("count") || 0;
counter++;
localStorage.setItem("count", counter);

Deleting a key completely can be performed through removeItem, and if you wish to reset the entire store, simply call localStorage.clear().

Local stores can also be iterated through in order to list all the content that they contain. The order is not guaranteed.

for(var i =0, n = localStorage.length; i <n; i++){     var k = localStorage.key(i);     console.log(k +": "+ localStorage[k]);}

Note that if all you need is to store session-based data in a manner that is more powerful than cookies, you can use the sessionStorage object which works in the exact same way as localStorage but the lifetime of which is limited to a single browser session.

Read more: webStorage: Persistent client side data storage

Websockets

Note that if all you need is server-push rather than a duplex conversation, then another simpler technology called Server-Sent Events can work for you.

Future technics

• System notifications
• Page visibility

1. The way to address scaling issues on a mobile device is to use the meta viewport element.

   <meta name="viewport" content="width=device-width"/>

   More info: An introduction to meta viewport and @viewport (dev.opera).

2. CSS Media Queries is a way of applying specific CSS styles depending on a number of properties of the target device. Typical properties include whether it is rendered on screen or in print, the orientation of the device, its resolution or colordepth, and many other such aspects (called “media features”). Examples:

   @media screen and(max-width:959px){     /* CSS rules to apply specifically when the above is true */}

   <linkrel='stylesheet'href='style.css'type='text/css'media='all and (min-width: 960px)'/>

3. When writing web sites that target both mobile and desktop, it is usually a better idea to write the core style sheet in a manner that works for mobile devices, and then use media queries to render the same page on larger screens, “mobile first”. This concept can be taken further by starting to design for the “dumbest” phone.
   
4. How to test for native JSON:
   

   if ("JSON" in window) {
       // code that depends on native JSON being available
   }

   Or, with a polyfill:
   

   <script>"JSON" in window || document.write('<script src="json2.js"><\/script>')</script>

   
   

5. In a mobile context, use opacity sparingly.
6. Xui has the advantage over Zepto that it’s fully portable to all known browsers, while Zepto tends to be Webkit focused.
   

Mentioned resources:

• JSON parser (to prevend use of vulnerable eval)
• Modernizr Download Builder
• Can I use

I was pleased to see that the W3C gives a more thorough answer to this question in it’s section on Mobile Web Application Best Practices:

Web servers should be configured to serve appropriately compressed responses. However:

• Most image formats (especially JPEGs) do not benefit from compression, but SVG does;
• Most other media formats (e.g. audio, video) do not benefit from compression;
• Very small files (e.g. <1k) generally do not benefit from compression.

Het belang van JavaScript op internet

Het belang van JavaScript op het web is de laatste jaren enorm toegenomen. Ten eerste heeft JavaScript deels de animatierol van Flash overgenomen, ten tweede is het web applicatiever geworden, waardoor JavaScript (bijvoorbeeld in ajax-communicatie) een grote vlucht genomen heeft. De rol JavaScript wordt groter en tegelijkertijd neemt de professionalisering toe. Het is opvallend te zien dat veel best practices uit de back-end-wereld gemeengoed aan het worden zijn bij JavaScript-development. Testen is zo’n belangrijk onderdeel.

Testen

Het testen van JavaScript kan op meerdere niveaus gedaan worden:

1. Lint testen. Het testen op correcte syntax door tools als JsHint, JsLint of Closure Linter. Dit kan deels door je editor gedaan worden.
2. Functioneel testen. Het testen van bijvoorbeeld klikscenario’s in je website of app met een tool als Selenium.
3. Unittesten. Daar gaan we in dit artikel dieper op in.
4. Last but not least: handmatig testen. Idealiter stel je hiervoor schriftelijke testscripts op, zodat je gestructureerd dezelfde scenario’s kunt testen bij opeenvolgende software releases.

De eerste drie soorten testtools kunnen geautomatiseerd worden, zodat je continu op de hoogte gebracht kunt worden van de staat van je applicatie.

Unittesten

Wikipedia zegt over unittesten: “Unittesten is een methode om softwaremodulen of stukjes broncode (units) afzonderlijk te testen. Bij unittesten zal voor iedere unit een of meerdere tests ontwikkeld worden. Hierbij worden dan verschillende testcases doorlopen. In het ideale geval zijn alle testcases onafhankelijk van andere tests.” Verschillende units samen worden getest in een integratietest.

Voor JavaScript zijn er diverse unittest frameworks beschikbaar. Enkele bekende zijn:

• QUnit
• YUI Test
• Js Test Driver
• Jasmine (voortgekomen uit JsUnit)

In dit artikel kijken we verder naar unittesten met Jasmine. Jasmine kan onafhankelijk van een JavaScript-library gebruikt worden en heeft ook geen DOM nodig om zijn testen uit te voeren. Verder is Jasmine goed te automatiseren. In syntax en mogelijkheden verschilt Jasmine niet veel van andere unittesting tools.

TDD – Assume your code will fail

Eén stap verder nog dan systematisch testen is het testen als uitgangspunt te nemen in je software-ontwikkelproces: “Test-Driven Development” (TDD). Test-Driven Development is een ontwikkelmethode voor software waarbij eerst tests worden geschreven en daarna pas de code. De testcases worden beschreven vanuit het oogpunt van de gebruiker. Hoewel TDD (een methodiek) en Jasmine (een tool) niet per definitie een combinatie vormen, werpen we hier een korte, inleidende blik op TDD met Jasmine.

Jasmine installeren

1. De voorbeeldcode bij dit artikel is te downloaden vanaf github.
2. Op het hoogste niveau zie je de directory’s “lib”, “spec” en “src”. “lib” bevat de core-bestanden van Jasmine, in “src” komen de JavaScriptbestanden van je project en in “spec” zitten de bestanden die de sourcecode gaan testen.
3. Open SpecRunner.html in je favoriete browser. Er worden direct enkele testen uitgevoerd. En met succes, want de SpecRunner kleurt groen.

Een eerste Jasmine unit test maken

Jasmine is opgebouwd uit suites, specs en expectations. Eén JavaScript-project bestaat normaal gesproken uit meerdere Jasmine testsuites. Eén testsuite, die vaak een component of een class omvat, kan op zijn beurt een geneste suite of meerdere specs bevatten. Een spec test gerelateerde functionaliteit. In een spec kunnen één of meerdere test cases (expectations) gedefinieerd zijn. Met de standaard matchers van Jasmine (functies zoals toEqual(), toBe(), toMatch(), toBeUndefined() etc.) kun je verschillende scenario’s testen.

Hoe schrijf je een spec? Belangrijke leidraden voor TDD zijn:

1. Schrijf eerst je test (dus niet eerst je functionele code)
2. Zie de test falen
3. Schrijf nu de code om de test te laten slagen, op de snelst mogelijke manier, dus niet rekening houdend met eventuele aanpassingen in de code
4. Refactor (verbeter de code zonder de functionaliteit te wijzigen)
5. Herhaal deze stappen

Voorbeeld

Stel dat je de Fronteers webshop beheert. Een product kan een variabele prijs hebben: De gewone bezoeker betaalt de volle mik, vaste klanten krijgen 20% korting, en Fronteersleden toucheren maar liefst 50%. Als je hier een functie voor wilt schrijven zou je dat volgens TDD met Jasmine als volgt kunnen aanpakken:

1. Maak een suite aan (/spec/FronteersShopSpec.js) die het component FronteersShop en de nog te schrijven functie calcDiscount() gaat testen:

   describe("FronteersShop", function() {
   
     var fs;
     var CLIENTTYPE_MEMBER    = 'member',
         CLIENTTYPE_FRONTEERS = 'fronteers',
         CLIENTTYPE_NONMEMBER = 'other';
   
     // Is executed before each spec:
     beforeEach(function() {
       fs = new FronteersShop();
     });
   
   });

2. De bijbehorende JavaScriptcode (/src/FronteersShop.js) ziet er dan nog als volgt uit:

   function FronteersShop() {
     // a lot TODO
   }

3. Unittesten worden doorgaans opgeschreven in begrijpelijke taal, zie achtereenvolgens de beschrijving van een suite, een spec en een expectation:
   • describe “when the discount price is calculated”
   • it “should correctly validate function input”
   • expect(fs.calcDiscount(null)).toBeUndefined();

   Dit maakt enerzijds de Jasmine-code self-documenting en geeft anderszijds duidelijk aan waar in de testen fouten optreden.

4. De functie calcDiscount() willen we twee input-parameters geven
• price {Number} – de prijs van het product
• customerType {String} – het soort klant: ‘member’, ‘fronteers’ of ‘other’.
5. In de eerste stap van onze functie calcDiscount() kijken we (in een geneste suite) of de twee input-parameters van het verwachte datatype zijn:

   describe("FronteersShop", function() {
   
     var fs;
   
     var CLIENTTYPE_MEMBER    = 'member',
         CLIENTTYPE_FRONTEERS = 'fronteers',
         CLIENTTYPE_NONMEMBER = 'other';
   
     beforeEach(function() {
       fs = new FronteersShop();
     });
   
     describe("when the discount price is calculated", function() {
   
       it("should correctly validate function input", function() {
         // Wrong number of expected arguments
         expect(fs.calcDiscount(1)).toBeUndefined();
         // First argument of wrong data type
         expect(fs.calcDiscount(null, CLIENTTYPE_FRONTEERS)).toBeUndefined();
         // Second argument of wrong data type
         expect(fs.calcDiscount(100, null)).toBeUndefined();
         // Input should be accepted
         expect(fs.calcDiscount(100, CLIENTTYPE_FRONTEERS)).toBeDefined();
       });
   
     });
   
   });

De testen zullen falen, want de bijbehorende code ontbreekt. Hier volgt een eerste implementatie van calcDiscount():

FronteersShop.prototype.calcDiscount = function(price, customerType) {

	// Check if parameter "price" is correct, must be floating point number
	if (isNaN(parseFloat(price)) || (!isFinite(price)) ) {
		return;
	}
	// Check if parameter "customerType" is a String
	if (typeof customerType !== 'string') {
		return;
	}

}

(Normaal gesproken wil je waarschijnlijk geen kale return doen, maar handel je de fout af. Dat valt buiten de scope van dit artikel.)

Tenslotte moet calcDiscount() doen waarvoor het in het leven geroepen is, de juiste prijs teruggeven, al dan niet met korting. Eerst schrijven we de spec:

describe("FronteersShop", function() {

   // ...

  describe("when the discount price is calculated", function() {

    // ....

    it("should correctly calculate discount", function() {
      // Expect 50% of 100 => 50
      expect(fs.calcDiscount(100, CLIENTTYPE_FRONTEERS)).toEqual(50);
      // Expect 80% of 100 => 80
      expect(fs.calcDiscount(100, CLIENTTYPE_MEMBER)).toEqual(80);
      // Expect 100% of 100 => 100
      expect(fs.calcDiscount(100, CLIENTTYPE_NONMEMBER)).toEqual(100);
      // Check decimals, expect 50% of 17.1 => 8.55
      expect(fs.calcDiscount(17.1, CLIENTTYPE_FRONTEERS)).toEqual(8.55);
    });

  });

});

Met vallen en opstaan kunnen we dan de bijbehorende JavaScript afleveren:

FronteersShop.prototype.calcDiscount = function(price, customerType) {

	// ...

	if (customerType === 'member') {
		return price * 0.8;
	} else if (customerType === 'fronteers') {
		return price * 0.5;
	} else {
		return price;
	}
};

Dit is natuurlijk een simpel voorbeeld. Hoe complexer je code, hoe meer de waarde van unittesten toeneemt.

Wat verder?

Om verder up-speed te komen met Jasmine kan het inleidende artikel op Nettuts erg nuttig zijn. De Jasmine-wiki biedt alle noodzakelijke informatie. Er zijn veel plugins voor Jasmine beschikbaar, bijvoorbeeld om Jasmine in je IDE te integreren (JsTestDriver) of om met zogeheten fixtures de interactie met de DOM te testen (zie de Jasmine jQuery-plugin). Het is ook mogelijk om Jasminetesten automatisch uit te voeren in Maven en hen zo een onderdeel te maken van de Continuous Integration.

Mocht je offline zijn dan heb je wellicht iets aan het verhelderende boek van Christian Johansen Test-Driven JavaScript Development.

Tot slot

Wanneer moet je nu alles uit de kast halen met unittesten? Als je een JavaScript-library, plugins of herbruikbare componenten schrijft, zijn unittesten een must. Maar ook in langlopende projecten met een snelle release cycle zijn unittesten onmisbaar om mogelijke regressiebugs af te vangen. Zelfs als je korte toevoeging schrijft voor een kleine website kunnen unittesten erg nuttig blijken. Ze laten je anders tegen je code aankijken, waardoor je code robuuster, leesbaarder en makkelijker overdraagbaar wordt. Ook voor front-enders belangrijke waarden.

1. Goto Window / Preferences
2. Type filter text “assoc”
3. At “General – Editors – File Associations” select “*.css”
4. Verify that the “CSS Source editor” is the default editor. If not select it and restart Eclipse.
5. If that still does not give you CSS code insight, check the following:
6. Goto the Project Explorer and right click on your project.
7. Select “Properties” and then “Project Natures”.
8. Select project nature “Web” and set it to primary. Eclipse should restart and refresh your project.
9. Now you should have CSS code insight. If not, throw your computer out of the window. Btw, that does not necessarily give you code insight.

Add jQuery selectors to Selenium

1. The selector engine of jQuery is called Sizzle. Download it from sizzlejs.com and store the file sizzle.js in your Selenium project. (I used the current version, 1.0.)
2. Create a blank JavaScript file, rename it to “user-extensions.js” and save it to your Selenium project.
3. Add the following code to “user-extensions.js”:
   PageBot.prototype.locateElementBySizzle = function(locator, inDocument) {
var results = [];
window.Sizzle(locator, inDocument, results);
return results.length > 0 ? results[0] : null;
}
4. Open Selenium IDE from Firefox.
5. Go to Options > Options > General.
6. Click the “Browse …”-button of “Selenium Core extensions (user-extensions.js)”
7. Multiple select “sizzle.js” and “user-selections.js”. They should be added comma-seperated to the input field (for example: “D:myProjectuser-extensions.js, D:myProjectsizzle.js“).
8. Restart Selenium IDE.
9. Execute the following test:

Command: verifyElementPresent
Target: sizzle=body
Value: true

This test should succeed on every normal HTML page. ;)

Comments

• Why use Sizzle and not the complete  jQuery library? The same setup can also be used for jQuery, but I could not get it working. Some say that recent versions of jQuery (I use 1.4.4) don’t cope with Selenium, at the moment.
• It’s still possible though to use jQuery functionality in your tests. If jQuery is available on the page you are testing, one could do a test similar to:

Command:assertEval
Target: selenium.browserbot.getUserWindow().jQuery("body").length
Value: 1

Helpful resources

• How to add jQuery (Sizzle) selectors to Selenium
• Sizzle

Sometimes it’s also important to set the text file encoding of your script file (php etc.). In Aptana 2 the global text file encoding is set to Cp1252. You can change this to UTF-8 the following way:

• In Aptana go to Window -> Preferences
• Type “encoding” in the search box.
• Go to General -> Workspace
• Change the text file encoding to UTF-8 and apply.

In my case Aptana hung with the build settings so I had to uncheck them all:

Happy UTF-8 programming!

The problem is as follows: You have a long sentence and you want to show only the first line and end up with … (the ellipsis) and trunk the rest of the sentence. Of course you can implement a server side solution, but today I prefer a client-side one.

IE6 and IE7 are simple, they support the CSS-property text-overflow, as do the Webkit based browsers Safari and Chrome. Text-overflow is part of the coming CSS3-recommendation, by the way. Because the property is not standardized yet Opera has it’s own implementation -o-text-overflow, while IE8 in standards mode supports -ms-text-overflow.

The only hickup we encouter with Firefox. The current version (Firefox 3.5) still does not support this property… This leaves us for several workarounds:

• Do nothing. All browsers will show an ellipsis, Firefox just shows nothing. My prefered solution, because it involves less time and effort.
• Create a Firefox-only selector in your CSS. This can be handy is you have something like Browserhawk installed on your server. Is not 100% waterproof though. Don’t just add the sometimes suggested “:after-content” option. (With something like myclass:after { content: “…” } we could easy add ellipsis to Firefox, but other modern browsers would render the ellipsis twice.
• Use the “:after-content” setting for all modern browsers and show the ellipsis in IE6 and IE7 with conditional comments.
• Use a JavaScript solution. Check for example this nice jQuery plugin.
• Use XUL.

The CSS at last:

.ellipsis {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  width: 230px;
  overflow: hidden;
}

Bonus:

Toggle the ellipsis view with jQuery:

$(".ellipsis").click( function() { $(this).toggleClass(".ellipsis") });

Disclaimer:

Not all options are tested. Please comment.

1. Met Windows Vista wordt IIS7 meegeleverd. Deze staat standaard (natuurlijk) niet aan. IIS aanzetten gaat via het Configuratiescherm > Programma’s > Windows-onderdelen in- of uitschakelen (administrator-rechten vereist).
2. Simpel Internet Information Services aanklikken is niet voldoende. Je moet ook kiezen voor World Wide Web-services > Toepassingsontwikkelingsfuncties > ASP.
3. Je zou nu een ASP-site moeten kunnen draaien op http://localhost.

Iedereen – behalve de Goden op de Olympus – maakt wel eens fouten in hun software. Om gedetailleerde foutmeldingen te tonen moet je de halve wereld omdraaien, maar de volgende handelingen zouden ook kunnen helpen:

1. Je kunt de IIS-manager (IIS-beheer geheten in het Nederlands) openen door in Vista te zoeken op “iis”.
2. Selecteer de default website (of een andere als het daar om gaat…).
3. Dubbelklik op het icoon Foutpagina’s. Klik op de actie Functie-instellingen bewerken…
4. Selecteer een van de opties voor gedetailleerde foutmeldingen.
5. Nu kreeg ik direct de weinig verhelderende foutmelding “An error occurred on the server when processing the URL. Please contact the system administrator” voor de kiezen.
6. Nu kun je a) in je logfiles gaan neuzen (die standaard op onzichtbaar staan in de Verkenner, dus die moet je eerst tweaken).
7. Fijner is het natuurlijk om de exacte foutmelding in je browser te zien. Daartoe moet je een command box openen (als administrator!!) en de volgende regel uitvoeren “%windir%system32inetsrvappcmd.exe set config -section:asp /scriptErrorSentToBrowser:true“. (Zie de comments op IIS.net)

Happy debugging!

https://careers.ing.com/