Webdev

Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings

Three weeks ago, my colleague Petri presented our (that is, me, Petri, and Teemu who did most of the work) paper titled "Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings" at Workshop on Security and Privacy in Social Networks. The main purpose of the paper was to analyze a set of WordPress plugins to find out if plugin ratings predict the number of potential security vulnerabilities in them. In order to do that, we downloaded the source code and ratings and download counts of a set of random plugins (322 in total). We then ran the RIPS PHP security vulnerability scanner to find potential security holes in the code. The 322 plugins had:

  • 3,792,711 downloads
  • 2,783 user ratings
  • 179,393 lines of PHP code

Of the 322 plugins, 127 had a potential security vulnerability according to RIPS. In total, 860 vulnerabilities were identified.

When comparing this with the ratings of the plugins, we found only a small, negative correlation between the rating of the plugin and the number of potential vulnerabilities. To put it another way, plugin ratings are not a good measure of the security of the plugin.

There are, of course, several problems with our analysis and conclusion. Biggest of those is that the sample size was really small compared to the total number of plugins (over 21,000 at the moment). To improve the results, we are currently analyzing a bigger sample (100% of them, to be exact).

If you are interested in more details, the full paper can be downloaded here.

Our First Mobile App for Learning Python - Soon Ready

Our company's (ByTheMark, that is) first mobile application is getting closer to publishing. It is a quiz game for learning and testing Python programming knowledge. Name of the app is Quiz & Learn Python.

The game asks questions ranging from simple concepts to more advanced tricks in Python programming.

The player has four lifelines at her disposal: remove two incorrect answers, skip the question, stop time and debug the program. The last one is what I think makes this game different from a typical quiz with questions about programming. Below is an image from the debugger.

The game will be soon available for iPhone, other platforms possible later. You can test Quiz & Learn Python online. On the linked page, you can also register for our newsletter to be notified when the game is ready!

Books I Read in 2011

A new year has started, so I wanted to look back on the books I read in 2011 (the idea actually came from this post by Tim Kadlec). Here is an almost complete list of the books somewhat related to web development or entrepreneurship. I've left out stuff I read for fun (like the Stieg Larsson's Millennium Trilogy) as well as the ones I did not enjoy. These are the good books!

DeviceOrientation event and device orientation

I've been building an HTML5+JavaScript demo for using the device orientation and device motion events for an educational application. The article "This End Up: Using Device Orientation & Device Motion" on HTML5 Rocks does a great job explaining how to work with these events. In my case, I'm controlling a ball based on the device orientation (you know, like in a labyrinth type game). This is easy to do with HTML5 device orientation events. So, what I do is register an event handler for the ondeviceorientation event:

window.addEventListener("deviceorientation", orientationHandler, false);

The handler simply stores the values from the event for later use:

function orientationHandler(eventData) {
  tiltLR = eventData.gamma;
  tiltFB = eventData.beta;
}

The gamma and beta attributes of the event object give the left-right and front-back rotation angles. Based on these values, the position of the ball can be updated (tiltLR is change of x-coordinate, tiltFB y). For the iPad, I've divided them by 3 to get a decent speed. Note, that I'm simplifying things here and not considering the fact that Firefox has an event of their own. Read the linked article for details.

Now all goes well until the user turns the phone/tablet on its side or upside down. Now the ball moves in weird directions. The simple fix to this (which I'm sure I'll forget soon, hence the blogpost) is to check window.orientation and change the values accordingly. The value of window.orientation will be 0 when the device is in its' normal orientation, -90 when rotated on its' right side, 90 on left side and 180 when upside down. So, to take this into account and get the x and y coordinate changes:

var orient = window.orientation;
if (!orient || orient === 0) { // normal portrait orientation
dx = tiltLR;
dy = tiltFB;
} else if (orient === -90) { // landscape, rotated clockwise
dx = -tiltFB;
dy = tiltLR;
} else if (orient === 90) { // landscape, rotated counterclockwise
dx = tiltFB;
dy = -tiltLR;
} else if (orient === 180) { // portrait, upside down
dx = -tiltLR;
dy = -tiltFB;
}

This works and the ball moves in a natural way relative to the browser window. Still, it is difficult to control it when the window gets rotated. Eventually, I'd like to disable rotation of the browser window. Is there any way to do it with HTML/CSS/JS? Or is this one of those things that require wrapping the webapp into a native application?

Finally, my use case for this: I'm building an interactive exercise for learning the binary search tree search that uses the deviceorientation event. After testing this on iPad, I ran into the problem described. More on the exercise later :)

CSS3 and AV revisited (with flexible box layout)

In the first post about CSS3 and algorithm visualization, I had demos showing how to animate sorting algorithms using CSS3 transforms. Yesterday, when watching CSS3 First Look on Lynda.com, I learned about the CSS3 Flexible Box Layout Module and wanted to give it a try and improve the previous animations.

Flexible Box Layout

The flexible box layout gives an excellent way to control the layout and ordering of elements on a page. All in all, it's really flexible. To give an example, let's work with the following HTML. 

  <div id="container">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
  </div>

Now, without any styling, this would become a page where the divs are vertically on top of each other. With just one line of CSS3 magic, we can change that:

    #container  { display: box; }

Actually, we need at least three lines until the specification is ready and vendor prefixes are dropped:

    #container {
      display: -webkit-box;
      display: -moz-box;
      display: box;
    }

This will arrange the boxes horizontally next to each other (see the demo, example 2). The feature I was most interested in related to the sorting algorithm animation is the box-ordinal-group property. It allows to change the order of the child elements inside the box. To give you an example, the following CSS3:

    #box1 { 
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2; 
      box-ordinal-group: 2;
    }
    #box2 {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      box-ordinal-group: 3;
    }
    #box3 {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      box-ordinal-group: 1;
    }

would change the boxes to be in order box3, box1, box2 from left to right (view the demo, example 3).

Visualizing Sorting Algorithms

One of the problems with the original CSS3 algorithm visualizations was the calculation of pixels when translating the elements to animate array item swaps. The box model seems like a great solution for replacing the pixels with just changing the box-ordinal-group property.

After creating a simple test case, I realized that it did not work as I suspected. The elements changed places, but no smooth animation was shown. After spending some time trying to fix my CSS I turned to Google. To my disappointment, it wasn't my code that was broken. Nor was it the browser. The box-ordinal-group just isn't one of the animatable properties according to the CSS3 Transitions specification.

So, to sum up the experiment: flexible box model could be used to visualize sorting algorithms, if no smooth animation is needed. In modern browsers, that is. According to caniuse.com, browsers that support this currently are Firefox 3.5+, Safari 3.2+, and Chrome 9.0+. In addition, Mobile Webkit on iOs and Android support it.

New Publication List with bib-publication-list

I finally got tired of updating my old HTML publication list by hand. I wanted something that would be automatically generated from my BibTeX file, without me having to remember to run any scripts or copy files. So, I wrote bib-publication-list. With it, I can just include the BibTeX into my HTML page and tell the script to turn it into a sortable and searchable table. Besides loading the required JavaScript files, all that is needed is to add a table where the data should be added and include the BibTeX:

    @article{Karavirta:JVLCTaxonomy,
        title = {A comprehensive taxonomy of algorithm animation languages},
        journal = {Journal of Visual Languages \& Computing},
        volume = {20},
        number = {1},
        pages = {1--22},
        year = {2010},
        issn = {1045-926X},
        doi = {DOI: 10.1016/j.jvlc.2009.09.001},
        author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}
    }

Alternatively, the bibtex can be loaded from a file. I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page.

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript:

bibtexify("#bibtex", "pubTable");

The result looks like the figure below (or my new publication list).

The source code for the library is available on GitHub. The code uses some great libraries: jQuery, DataTables, Protovis, and JavaScript BibTeX Parser.

Let me know what you think. Especially comment if you have problems with it, I haven't tested it on all browsers (yet).

Fun with MozOrientation in Firefox 3.6

The already not so new Firefox 3.6 ships with a way for websites to detect the orientation of the laptop/device of the user. This opens interesting new possibilities for web applications similar to some iPod/iPhone/etc games. Some interesting demos are already available online:

Technically, using the new feature in JavaScript web application is really simple. It is  be done by listening to the MozOrientation event. So, in Javascript:

//register a listener
window.addEventListener("MozOrientation", updateOrientation, true);
function updateOrientation(orientation) {
    // do something with orientation.x, orientation.y
}

Since it seemed easy to use, I wanted to give it a try. The result is a simple game where you need to "collect" a number of targets on the screen. Try it yourself if you have a laptop that is supported and has an accelometer, for example MacBook(Pro). Can you come up with an application for the use of accelometer in education?