View Demo

The parallax effect, or using multiple moving images to give the illusion of depth, is increasingly being used on sites across the web. So its worth exploring how we can create this effect using CSS, without the need for any JavaScript.

Let’s start out with this:

.bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
}

<div class="bg"></div>

This styles the element to stretch to the size of the first non statically-positioned parent element, and layers three different background images on top of each other. Note that the x-positioning of each image is offset a certain percentage, so as the element size changes the images move disproportionately to each other, creating that sweet depth effect.

Now to get them moving we have a number of options. First option is to use the transition declaration, and add it to the .bg class. Vendor prefixes are still needed for some browser versions— check out Can I Use for the latest details on which browsers support CSS transitions.

Read on →

Qt embeds a complete WebKit browser that works on Mac OSX and Windows complete with advanced HTML5 features like websockets, the video tag, and local storage. It evens offers a straightforward way of communicating between JavaScript and C++. This makes it easy to embed a website in a larger app (e. g. to implement OAuth in a desktop app) or to build a desktop app entirely in HTML5 (like Adobe AIR but with local storage, websockets, and the video tag).

The only annoyance is that it’s not immediately clear from the documentation how to enable the WebKit Inspector. Fortunately, this is relatively straightforward.

Read on →

Time being the limited resource that it is, it took a little while to wrap up, but BenchPress is now open source.

BenchPress is intended to be able to be able to represent many different types of payloads via simple JSON configuration, but the project is still new and it doesn’t (yet) have a lot of flexibility in terms of what users can do with the existing task definition language. Fortunately, it’s pretty straightforward to make your own custom task types, so in this post I’ll show how to make a “hello world” custom task type. You can also check out the sample code on GitHub.

BenchPress basics

The basic structure of the JSON you submit to the job controller is simple.

{
    "task": {
        "type": "HELLO-WORLD",
        "config": {
            # whatever you want
        }
    }
}

The config can be any JSON you wamt for your task type. The type is a semi-magical string that is used to identify a few classes that comprise a specific type of task; you’ll see how that string is used later.

TaskFactory and friends

I’ll go from the bottom up to explain the task execution structure. There are two types of nodes in BenchPress: worker and controller. Typically there is only one controller, but theoretically there could be many if you want. A job is submitted to the controller, which splits its sole task among the available workers. Each worker gets its own partition of the overall work.

Fundamentally, the work that a worker does is just a collection of Runnable instances. The Runnables are made on each worker by a TaskFactory instance. This is the relevant method of the TaskFactory interface:

Read on →

Apache ZooKeeper is a powerful system for managing distributed systems. While ZooKeeper’s power is great, and the developers even provide recipes for common use cases, it is perhaps masked by the extreme flexibility and complexity of the system. Thankfully, the folks at Netflix have implemented many of the aformentioned recipes in their Curator framework. The only lacking bit of Curator is documentation—the wiki has a lot of information, but is inscrutable for a beginner. This post intends to simplify the introduction to using Curator for service discovery.

This is not a cut & paste tutorial for using Curator, but rather a summariztion of how we implemented Curator in BenchPress. While the class names are unchanged, their content is simplified. Pull up the BenchPress code for further detail on employing Curator’s Service Discovery.

To begin with, put some junk in your POM:

<dependency>
    <groupId>com.netflix.curator</groupId>
    <artifactId>curator-framework</artifactId>
    <version>1.1.9</version>
    <exclusions>
        <exclusion>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
        </exclusion>
        <exclusion>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>com.netflix.curator</groupId>
    <artifactId>curator-x-discovery</artifactId>
    <version>1.1.9</version>
</dependency>

Read on →

XPath Basics

XPath is a query language that operates on XML documents and offers a reasonably succinct way to find XML nodes. Unfortunately, XPath string literals have an unsophisticated syntax, so there’s a little extra work to be done to handle strings safely. I’ve released an xpath-utils library for Java to do this robustly.

The simple XPath //div will find a div anywhere in the document. You can also use attributes in your XPath. If you have XML like this

<foo>
    <bar attr="baz">asdf</bar>
    <bar attr="quux"></bar>
</foo>

then you could find the second bar tag with /foo/bar[@attr='quux'].

XPath has lots of tutorials, so check those out if you’re curious.

Strings in XPath

XPath is useful when writing Selenium tests. Even though many Selenium selectors are better done with CSS selectors, XPath can express things that CSS cannot, so it’s useful to know how to use it. One common operation in Selenium is using text() to match against text node contents. You could match the first bar node in the above xml with //bar. However, to match against arbitrary strings, it’s important to be able to safely handle them, just like proper XML escaping is important when generating an XML document.

Read on →