Don’t FTP the Git Shit

I didn’t even realize I was pushing all my (uncountable) git directories when FTP’ing. But Filezilla appears not to have a default filter for git directories. Luckily it’s easy to create one:

In Filezilla 3.5.3 go to View > Filename filters… and add a filter with the following settings:

filezilla-filters

Done, happy FTP’ing!

A front-end build with Grunt 0.4

Update February 22, 2013:
Grunt 0.4 is officially released. Please take that into account when following the instructions below.

grunt-logoAddy Osmani’s talk on the developer toolbelt at Fronteers 2012 inspired me to have a closer look at Grunt. Especially for front-end or JavaScript driven projects, Grunt looks like a promising alternative to the Ant or Maven build systems.

Note: this is not a tutorial on Grunt or build systems in general. If you’re new to building read the Grunt introduction on Nettuts. This article aims to overcome the pitfalls when setting up a build with Grunt 0.4. Grunt version 0.4 differs a lot from 0.3, but unfortunately both the Grunt documentation as well as a lot of plugin documentation have shortcomings regarding which Grunt version is supported.

Continue reading “A front-end build with Grunt 0.4”

HTML5 JavaScript APIs to be used in mobile environments

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 “HTML5 JavaScript APIs to be used in mobile environments”

Basics of Mobile Web Development

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

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

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 “Geharnast JavaScript”

CSS code insight in Eclipse or Aptana

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

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