HTML5 JavaScript APIs to be used in mobile environments

Posted on by
Reply

At the moment I’m attending the online course Mobile Web 2: Applications at W3 Tech courses. This post is a summary of the fourth week’s subject JavaScript APIs. (Please note: this is not a thorough objective summary of the course, but just the highlights that I found important for myself to remember.)

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);
              }
          )
      }

Continue reading →

Basics of Mobile Web Development

Posted on by
Reply

At the moment I’m attending the online course Mobile Web 2: Applications at W3 Tech courses. This post is a summary of the second week’s subject Basics of Mobile Web Development. (Please note: this is not a thorough objective summary of the course, but just the highlights that I found important for myself to remember.)

  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:

To GZIP or not to GZIP

Posted on by
Reply

When the question to GZIP or not to GZIP is raised I’m sometimes asked if the cost (in time and battery usage) of decompressing data on the client is balanced against the gains in transport efficiency. “Yes, I assume it is, otherwise why would Yahoo propagate it?”, was mostly my answer.

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.

Geharnast JavaScript

Posted on by
Reply

Dit artikel is eerder geplaatst in de adventskalender 2011 van Fronteers. De discussie speelt zich daar af.

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.

Continue reading →

CSS code insight in Eclipse or Aptana

Posted on by
Reply

Lately I changed my editor from Aptana to Eclipse with the Aptana plugin. Suddenly my CSS code insight did not work any longer. With these steps I could get it working again:

  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.

Run Selenium IDE tests with jQuery selectors

Posted on by
Reply

This took me a lot of time to find out, so here is a short and handy overview for everyone that wants to use jQuery selectors instead of Xpath selectors in their Selenium IDE tests. First the steps to achieve this, followed by some comments for the few readers that are still interested.

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

 

Set text file encoding to UTF-8 in Aptana

Posted on by
2

Working in a web environment, it’s important to keep your character encoding clear. Serious websites set their character encoding to UTF-8 to be sure to be compatible with different language sets. Obviously the same accounts for the database.

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!

CSS and ellipsis: Cross-browser practices

Posted on by
1

Every now and then, say twice a year, I run into the same problem: what is the best cross-browser ellipsis solution? Because I end up searching the internet everytime, I decided the write down my prefererred solution.

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.

IIS7 configuren voor Windows Vista Home Premium (NL)

Posted on by
6

Daar ging mijn halve avond in rook op: ik wilde even mijn oude ASP-site draaiend krijgen op mijn localhost op Windows Vista…

  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!