    
|
Brian Cooksey goes from "I don't really know what Web Workers are" to "OK I totally get Web Workers." on one short article.
...they are scripts that run in their own background thread. Independence from the regular JavaScript event loop means that a worker can churn away at something for a long time and your UI will remain responsive.
Direct Link to Article — Permalink
Intro to Web Workers is a post from CSS-Tricks
]]>|
|
|
|
 |
Three weeks ago we launched a photo contest and asked everyone to submit a creative picture of the object that fuels their creativity and inspiration. For all of you who have participated, thank you so much for taking the time and thought to interpret your object in a creative way. We did not only enjoy the brilliant photography that you sent us, it was also inspiring to read your thoughts on the story behind all these objects.
We received around 350 entries from all over the world and only 70 could make it onto the poster we’ve created exclusively for our dear fans.
As promised, the 10 most creative and original submissions will be awarded with a printed poster. The ones who have been selected will be contacted via email very soon — if not already! If you’ve followed our submission guidelines, your inspiring picture has surely made it to our jury. And if you find your object among the 70 pictures on the poster, you’ll see that your name has been included among the names of all the contributors that made this poster possible. Of course, the owner of each photo owns all the copyrights.
Below you will find a larger version as well as an exclusive version of the poster in PDF format:
“Lead, Tin, Antimony, Wood & Plastic” designed by Adam Pócs:
This is a metal movable type I acquired when I studied typography on Moholy–Nagy University of Art and Design. This small piece of the history of printing resides above my monitor in the peaceful company of a wooden letter “O” and a plastic “Q” key saved from a computer keyboard representing the ever changing tools of the written human culture. The actual background of the image shows a part of my CD collection wall.
“Stationary Crane” designed by Holly Lambert:
I love origami paper cranes and up cycling paper, so I combined the two and decorated my cubicle with paper cranes made of old maps and a variety of call for entry posters. I even have a Starburst wrapper paper crane!
“Take a Bite Out of Your Task List” designed by Jen Riehle:
This frog is a little paper clip. It has a small spring and can clasp papers in its mouth. It sits on my desk, and has ever since high school when my mother gave it to me. She got it as a child so I’m sure it’s quite old. I should probably put it away and not use it but it’s too cute and it makes me smile every time I look at it.
“Together” designed by Ratul Mukherjee:
I was visiting one of my friend’s relatives house. They have travelled around the world and the house contained lot of interesting pieces collected from other countries. The picture is of two tooth-picks’ holder from Paris. They were really cute and I was playing around with them as if I was a kid. They were designed so as to hug each other when placed face to face. And when I looked at these two inanimate objects hugging so sweetly, I envisaged love, friendship, care ,solidarity, peace. I believe we were also designed so as to hug each other when placed face to face but some of the blue-prints got lost in translation.
“Ma’Guitar” designed by Santanu Karar:
Ma’ guitar is not a thing. It is an extension of myself. It is who I am. ~ Joan Jett
“My bottle of creativity” designed by Stefania Peter:
Colours, rare lights make me inspired. They give me a strange, but very good feeling when ever I see such photos or real life scenes. It took me some time to get such bokehs, till I got an idea to use Christmas tree lights in the background! Those lights were exactly what I was looking for. When I was a little girl, I spent many hours near our tree and enjoying the lights and colours. Probably, that’s why I get inspired when ever I see similar photos.
“Traces” designed by Janina Imberg:
I’ve taken a picture of my old and dirty shoes I was obviously wearing way to often. But they are carrying so many reminders of every step I took, so they are a kind of inspiration. And actually I just like their worn out look.
“Morning duo” designed by Jovo Milanovic:
What would be most inspiring object that would spark my creativity than mug of coffee? Hm, well thats true, but watch for big “S” on picture. That “S” simbolize Smashing magazine. There is no morning on work that would start without daily dose of coffee and daily dose of SM :) Cheers
“My Keyboard” designed by Konstantin Meier:
Music has always been a great inspiration pool for me. So when I get stuck in design process, instead of clicking trough css galleries, I often start playing keyboard.
“Pantone Catalyst” designed by Rebecca Miller:
A photograph of the brilliance that Pantone inspires.
“Check Mate” designed by Jerry Locke:
This is a photo of a famous check mate called, “Hippopotamus Mate” which can seal a match in 6 moves. The photo symbolizes a quick turn of events that can change an outcome. Hopefully, one is on the right side of the check mate.
Designed by Nicholas Koh:
This is a photograph of a lil’ mini-bonsai that lives happily on my work desk. Two of its lower branches seem to reach out to you and have that ‘pom-pom’ effect, which always serves to cheer me up whenever I take a look at it. I also enjoy inspecting its network of constantly-growing aerial branches that weave around towards the soil… there’s just something about it that’s so mesmerising!
“Hour-Glass” designed by Chris Preen:
I use this for concentrated bursts of totally non-distracted and unplugged work.
“Play for inspiration” designed by Jeffrey Lu:
Playing games is not just about having fun and passing time, but for me they are quite educational and make me a better designer. They are a great source of inspiration and design reference and problem-solving material!
This is a photo of my Nintendo 3DS XL playing Fire Emblem: Awakening, a game I’ve been playing almost everyday for the past month and more! Great Turn Based Strategy game! :D
“The Foosball Table” designed by Harshad Methrath:
We, the staff of MP&A Advertising Agency take out our stress or enjoy a break over a game of foosball. I personally use it when I have hit a creative wall and I need to get away from my system. It always helps.
“Threads of a Colorfull Life” designed by Jofy Baby:
The picture depicts the different emotions of one’s life which consists of colors of joy, sorrow , love , envy etc. Our life is too like these threads that bind us with these emotions in different phases.
P.s All rigths reserved
“Repotting Day” designed by Jennifer Cui:
Because I feel unproductive.
Designed by Margaret Martin:
Clay meets my wild daughter with unlimited imagination. Result: paintbrush vase. Flowers wilt anyway.
“The Butterfly Effect” designed by Marvin Christopher Moloczek:
One butterfly at the right time and the right place can create a storm with a flap of its wings. One coffee at the right time at the right place can help to create a storm of creativity. One butterfly, which had coffee at the right time – pretty much any time – that’d be interesting.
“Keep on typing” designed by Mickael Mao:
Because we tend to forget things, one of the way to capture them is to write them.
“Perritos” designed by Monica Molina:
In the south of Chile we call those clothes hanger “Perritos”, (spanish), in English means little dogs.
“Music, I love you…” designed by Nik Aximov:
When I begin to create something, the only thing I need is music. I don’t drink and smoke, the music and love are the only sources I use in my works:)
“Milk & Cookies” designed by Oana Mangiurea:
My reminder of my inner child. Keeps me creative wihout having to fear of what others have to say regarding my work.
“iCreativity” designed by Olivier Jousset:
What better object in 2013 may represent the creativity and the inspiration… a tablet of course !
“This fuels my creativity!” designed by Per Swantesson:
Photo at sunset on my terrace in Guanajuato, Mexico
Thanks to all who have participated in this contest. There will be more contests and goodies coming up soon, so be sure to stay tuned!
Yours sincerely,
The Smashing Team
(ml) (ea) (il)
© The Smashing Editorial for Smashing Magazine, 2013.
]]>
Back in January this year jQuery announced a new plugins registry, so now seemed like a great time to write a tutorial combining building a jQuery plugin with my passion – realtime web technologies.
Realtime web technologies make it really easy to add live content to previously static web pages. Live content can bring a page alive, retain users and remove the need for them to refresh the page periodically. Realtime updates are generally achieved by connecting to a source of data, subscribing to the data you want to add to the page and then updating the page as the data arrives. But why can’t this be achieved through simply marking up a page to identify what data should be shown and where? Well, maybe it can!
jQuery’s tagline is write less, do more. The tagline for the jQuery Realtime plugin that we’re going to build in this tutorial will be write less, do realtime.
In this tutorial we’ll create a jQuery plugin that makes it really easy to add realtime content to a page by simply adding some markup. First, we’ll cover how to use a service called Pusher to subscribe to realtime data. Then we’ll define a way of marking up an HTML5 document with ‘data-*’ attributes in a way which can then be queried by our realtime jQuery plugin and converted to realtime data subscriptions. Finally, we’ll create the jQuery plugin which will use the attributes to subscribe to data and instantly display updates within the page.
If you just want to dive straight in you can view a demo in action or you can download the code and start hacking.
Pusher is a hosted service that makes it easy to add realtime content and interactive experiences to web and mobile apps. Here we’re going to simply connect, subscribe to some data and then update a page when the data comes in.
To demonstrate this create a file called ‘example.html’ and include the Pusher JavaScript library from the Pusher CDN. We know we’re going to use jQuery 2.0.0 so we should also include that now:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Creating a realtime jQuery plugin | Webdesigner Depot</title>
</head>
<body>
<script src="http://js.pusher.com/2.0/pusher.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
Once the Pusher JavaScript library has been included we can connect to Pusher by creating a new ‘Pusher’ instance and passing in an application key. Create an additional ‘<script>’ tag beneath the jQuery include as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Creating a realtime jQuery plugin | Webdesigner Depot</title>
</head>
<body>
<script src="http://js.pusher.com/2.0/pusher.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
( function( $ ) {
var pusher = new Pusher( '7b9f9ade2135118a915b' );
} )( jQuery );
</script>
</body>
</html>
Note: For the tutorial we’ll use an application key that I’ve provided but for your own applications you’ll need to sign up to Pusher to get your own.
You can check that you’re connected in three different ways. You can do it manually by checking the Pusher Debug Console, if you load the page with the Pusher Debug Console open you’ll see the connection logged. The Pusher JavaScript library provides a log property that you can assign a function to and then you can manually check to make sure a connection has been established by inspecting the browser’s JavaScript console. Or you can check the connection programmatically by monitoring the connection state of the Pusher instance.
The Pusher Debug console
Whatever you choose to do, you’ll now be connected.
Pusher uses the Publish & Subscribe pattern, so to receive data from Pusher you first need to subscribe to it. Pusher uses the term channels when it comes to subscriptions, so let’s subscribe to a channel called ‘test-channel’.
<script> ( function( $ ) {
var pusher = new Pusher( '7b9f9ade2135118a915b' );
var channel = pusher.subscribe( 'test-channel' );
} )( jQuery );
</script> As with connection state, you can check the status of a subscription in a few ways; using the Pusher Debug Console, by checking the output from ‘Pusher.log’ or by binding to the ‘pusher:subscription_succeeded’ event.
Using Pusher.log to log pusher-js library information
Those of you who use jQuery will probably be familiar with the idea of binding to events. jQuery does provide shortcuts for some events (e.g. ‘.onclick( <function> )’) but you can also bind to events using ‘.bind(<type>, <function>)’. Pusher follows this convention and you can bind to events to be informed when something updates; when the connection state changes, when a subscription succeeds or when new application data is received. For this example, and with the realtime plugin, we’re interested primarily in the latter.
Let’s bind to a ‘test-event’ on the channel:
<script>
( function( $ ) {
var pusher = new Pusher( '7b9f9ade2135118a915b' );
var channel = pusher.subscribe( 'test-channel' );
channel.bind( 'test-event', handleEvent );
function handleEvent( data ) {
console.log( 'in handleEvent:' );
console.log( data );
}
} )( jQuery );
</script>
When binding to an event you simply identify the event by name and pass in a reference to a function that will be called when that event occurs (is triggered) on the channel.
If you have a Pusher account you can test that the ‘handleEvent’ function is called by using the Pusher Event Creator; enter ‘test-channel’ as the channel name, ‘test-event’ as the event name and some data (‘{ “some” : “data” }’) into the event data text area and click the submit button. You’ll then see the debug information, along with the data you entered, logged to the JavaScript console.
Triggering an event from the Pusher Event Creator and logging it in the JavaScript console
Since the realtime jQuery plugin that we’re building doesn’t publish (trigger) data (it just consumes it) we won’t cover that here. But if you’re interested in finding out more checkout the Pusher server docs.
The next thing to consider is displaying the realtime data updates to the user.
For this we’ll need an idea for a simple application; having worked in finance for a few years I’m generally keen to avoid any type of financial example, but Bitcoin has made it interesting and relevant. So, let’s create a very simple display for showing Bitcoin prices.
Note: We’re going to use some fake data. Let’s make sure this doesn’t result in more Bitcoin panic selling!
First, let’s create some HTML where we’ll display the realtime prices. We can pre-populate the display with prices known at the time the page was loaded:
<h1>Bitcoin Fake Prices</h1>
<table id="bitcoin_prices">
<thead>
<tr>
<th>
</th>
<th>Last</th>
<th>Low</th>
<th>High</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>BTC/USD</td>
<td>61.157 USD</td>
<td>51 USD</td>
<td>95.713 USD</td>
<td>66271 BTC / 4734629 USD</td>
</tr>
</tbody>
</table>
Let’s update the JavaScript to subscribe to a more appropriately named channel called ‘btc-usd’ and bind to a ‘new-price’ event:
<script>
( function( $ ) {
var pusher = new Pusher( '7b9f9ade2135118a915b' );
var channel = pusher.subscribe( 'btc-usd' );
channel.bind( 'new-price', handleEvent );
function handleEvent( data ) {
}
} )( jQuery );
</script>
The ‘data’ sent to the ‘handleEvent’ function should also be in a more appropriate format – here’s the JSON:
{
"last": "last value",
"low": "low value",
"high": "high value",
"volume": "volume value"
} Now that we know this we can change the ‘handleEvent’ function to update the appropriate cell in the table:
function handleEvent( data ) {
var cells = $( '#bitcoin_prices tbody tr td' );
cells.eq( 1 ).text( data.last );
cells.eq( 2 ).text( data.low );
cells.eq( 3 ).text( data.high );
cells.eq( 4 ).text( data.volume );
} If you now trigger a ‘new-price’ event on the ‘btc-usd’ channel, using the JSON we defined, the page will update to show the new values.
There are ways of both making this code nicer and, as the page grows to show more data, optimise things. But, we’re going to make it so that realtime data will be added to the page simply by applying markup.
Before we progress, let’s first add a bit of styling to the example. In the ‘<head>’ add the following CSS:
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#bitcoin_prices {
border-spacing: 0;
}
#bitcoin_prices thead {
background-color: gray;
}
#bitcoin_prices tbody tr:nth-child(odd) {
background-color: #fff;
}
#bitcoin_prices tbody tr:nth-child(even) {
background-color: #ccc;
}
#bitcoin_prices tbody tr td:nth-child(1) {
background-color: yellow;
}
#bitcoin_prices td {
padding: 4px 10px;
}
</style>
As you can undoubtedly tell, I’m no designer. So please feel free to improve on this.
The “styled” Bitcoin Fake Prices application
Finally, restructure things so we’re set up for building the plugin.
The directory structure should now look as follows:
/
examples/
bitcoin/
index.html
src/
We’re now ready to define our realtime markup and build the realtime jQuery plugin.
The first thing to highlight is that this isn’t a new idea — I worked for a company called Caplin Systems and in 2001 they had a technology known as RTML that let you markup a page so that realtime updates could be applied. The purpose here is to use jQuery to parse the page and then interpret the markup, resulting in subscriptions, event binding and ultimately live content being added to the page.
For our plugin we’ll use HTML5′s data-* attributes. These attributes don’t directly affect the layout or presentation of the page so they’re a great choice for our realtime markup.
The questions we now need to answer about the markup are:
The first one is relatively easy. Since we need to include our plugin JavaScript file we can add a ‘data-rt-key’ attribute to the ‘<script>’ element for the plugin include and make the value our application key.
Channel subscriptions can be identified by a ‘data-rt-channel’ attribute. This will mean that the element that the attribute is on and all children are related to this subscription.
Event binding can be achieved using a ‘data-rt-event’ attribute where the element with the attribute, and all children are related to this event.
The values to be extracted from the event data can be indicated by a ‘data-rt-value’ attribute.
Putting this all together, update the Fake Bitcoin Prices markup to look as follows:
<h1>Bitcoin Fake Prices</h1>
<table id="bitcoin_prices">
<thead>
<tr>
<th></th>
<th>Last</th>
<th>Low</th>
<th>High</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr data-rt-channel="btc-usd"
data-rt-event="new-price">
<td>BTC/USD</td>
<td data-rt-value="last">61.157 USD</td>
<td data-rt-value="low">51 USD</td>
<td data-rt-value="high">95.713 USD</td>
<td data-rt-value="volume">66271 BTC / 4734629 USD</td>
</tr>
</tbody>
</table>
<script src="path/to/jquery.realtime.js"
data-rt-key="7b9f9ade2135118a915b"></script>
So, from the script tag you can see we’re going to connect to Pusher using the key identified by ‘data-rt-key’. We’re going to subscribe to the ‘btc-usd’ channel and bind to the ‘new-price’ event. When an event is received we’re going to update the appropriate table cell based on the value indicated by ‘data-rt-value’; if the value of the attribute is ‘last’ then the value of the ‘last’ property is taken from the received ‘data’ object and displayed in the cell.
Hopefully what we are trying to achieve is now pretty clear. Let’s start looking at how to create a jQuery plugin.
The jQuery plugin creation docs are pretty good so I won’t go into the details here. We’ll simply concentrate on building the functionality that we need in our plugin.
Before we write any code we should consider how we want to use the plugin. The normal way a plugin functions is that you use jQuery to query the page, and then you execute the plugin functionality against the matched elements.
$( 'a' ).toggle();
The above code would find all ‘<a>’ elements and then execute the ‘toggle()’ functionality on them — probably hiding all anchors, so not the most useful example you’ll ever see.
So, let’s say we would want to use the plugin as follows:
<script>
$( function() {
$( '#bitcoin_prices' ).realtime();
} );
</script>
Let’s look at creating the expected functionality.
First, create a ‘realtime.jquery.js’ file within the ‘src’ directory. This file will contain the plugin functionality. Then add the following to the file as the starting point of our plugin:
( function( $) {
$.fn.realtime = function() {
console.log( 'realtime!' );
console.log( $( this ).html() );
};
}( jQuery ) ); We can even test this out now. In ‘examples/bitcoin/index.html’ remove the example plugin ‘<script>’ tag and find the one below the jQuery include and replace it with a ‘<script>’ tag which includes the new ‘realtime.jquery.js’ file (don’t forget the ‘data-rt-key’ attribute) and a script block which executes the ‘realtime()’ plugin on the ‘bitcoin_prices’ table:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.realtime.js"
data-rt-key="7b9f9ade2135118a915b"></script>
<script>
$( function() {
$( '#bitcoin_prices' ).realtime();
} );
</script>
If you refresh the page now you’ll see ‘realtime!’ logged to the JavaScript console along with the HTML from the ‘<table>’ element. This is great as it means the plugin is working; we’re successfully executing our plugin functionality on the table identified by the selector we passed in to jQuery.
Our realtime plugin relies on a 3rd party library — the Pusher JavaScript library. For the moment we have it included statically within our HTML, but we don’t want to make that a requirement to use the plugin. So, let’s dynamically load it. jQuery provides a way of easily doing this in the form of the ‘.getScript()’ function.
So, let’s load version 2.0 of the Pusher JavaScript library. We’ll load the HTTPS hosted version so that browsers are happy if our plugin is used on a page served over HTTPS (Chrome already blocks attempts to load HTTP hosted scripts in HTTPS pages and Firefox will do in Firefox 23). I’m going to wrap loading the library in a function as follows:
var libraryLoaded = false;
function loadPusher() {
$.getScript( "https://d3dy5gmtp8yhk7.cloudfront.net/2.0/pusher.min.js" )
.done( pusherLoaded )
.fail( function( jqxhr, settings, exception ) {
console.log( 'oh oh! ' + exception );
} );
}
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
console.log( 'pusher.min.js loaded: ' + textStatus );
}
loadPusher();
If you reload the page the ‘pusher.min.js loaded: success’ message will be logged to the console.
As we’re developing it’s always good to have a way of logging information so at this point let’s create a simple ‘log’ function that we can use which just logs to the console. We’ll use this now and also use it for logging Pusher events. The full source of the plugin is now:
( function( $ ) {
function log( msg ) {
console.log( msg );
}
var libraryLoaded = false;
function loadPusher() {
$.getScript( "https://d3dy5gmtp8yhk7.cloudfront.net/2.0/pusher.min.js" )
.done( pusherLoaded )
.fail( function( jqxhr, settings, exception ) {
log( 'oh oh! ' + exception );
} );
}
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
Pusher.log = log;
log( 'pusher.min.js loaded: ' + textStatus );
}
$.fn.realtime = function() {
log( 'realtime!' );
log( $( this ).html() );
};
loadPusher();
}( jQuery ) ); You’ll also notice that we’ve assigned the ‘log’ function to the ‘Pusher.log’ property. This means we can see the internal Pusher library logging as well as our own.
Due to the asynchronous nature of loading the library we can’t guarantee that it will have loaded when our plugin is called into action. Unfortunately this makes things a bit more complex than is ideal but we’ll try to solve it in as simple a way as possible.
We need to check to see if the library has loaded — hence the ‘libraryLoaded’ flag — and act appropriately; if the library has loaded we can connect, if it hasn’t we need to queue the execution until it does. Because of this it makes more sense to only create the Pusher instance when we really need it, which is when we actually want to subscribe to data.
Let’s look at how we can do that:
var pending = [];
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
while( pending.length !== 0 ) {
var els = pending.shift();
subscribe( els );
}
}
function subscribe( els ) {
}
$.fn.realtime = function() {
var els = this;
if( libraryLoaded ) {
subscribe( els );
}
else {
pending.push( els );
}
};
When the plugin is called we check the ‘libraryLoaded’ flag to see if the Pusher JavaScript library has been loaded. If it has we’re good to go and we can subscribe. If it’s still pending then we need to queue up the subscriptions. We do this by pushing the jQuery collection (‘els’) onto a ‘pending’ array.
Now that we know that the Pusher JavaScript library has loaded and that the page wants to subscribe to data we can create our ‘Pusher’ instance. Because we only want one ‘Pusher’ instance per page we’re going to follow the Singleton pattern and have a ‘getPusher()’:
var pusher;
function getPusher() {
if( pusher === undefined ) {
var pluginScriptTag = $("script[src$='jquery.realtime.js']");
var appKey = pluginScriptTag.attr("data-rt-key");
pusher = new Pusher( appKey );
}
return pusher;
}
This function grabs the plugin script tag by looking for a tag with a ‘src’ attribute that ends with ‘jquery.realtime.js’, and then gets the value of the ‘data-rt-key’ attribute. It then creates a new ‘Pusher’ instance, passing in the key. As discussed earlier, creating a new ‘Pusher’ instance results in a connection to the source of our data being established.
We can now use the ‘getPusher()’ function anytime we want to access the ‘Pusher’ instance. In our case we want to use it when we parse the elements to determine subscriptions.
Update the placeholder ‘subscribe’ function and add the additional functions shown below:
function subscribe( els ) {
var channelEls = els.find( "*[data-rt-channel]" );
log( 'found ' + channelEls.size() + ' channels' );
channelEls.each( subscribeChannel );
}
function subscribeChannel( index, el ) {
el = $( el );
var pusher = getPusher();
var channelName = el.attr( 'data-rt-channel' );
var channel = pusher.subscribe( channelName );
}
function find( els, selector ) {
var topLevelEls = els.filter( selector );
var childEls = els.find( selector );
return topLevelEls.add( childEls );
} The ‘find’ function is a utility function to get any elements from an existing collection that match a given selector using ‘.filter()’, along with any descendants of the elements using ‘.find()’. We use this function to find any elements marked up to represent channel subscriptions (‘data-rt-channel’ attribute) and for each we then call ‘subscribeChannel’. This function extracts the name of the channel to be subscribed to and uses the value in calling ‘pusher.subscribe( channelName )’ to actually subscribe to the channel.
We then need to find any elements marked up to represent events (‘data-rt-event’ attribute) to be bound to:
function subscribeChannel( index, el ) {
el = $( el );
var pusher = getPusher();
var channelName = el.attr( 'data-rt-channel' );
var channel = pusher.subscribe( channelName );
var eventEls = find( el, '*[data-rt-event]' );
log( 'found ' + eventEls.size() + ' events' );
eventEls.each( function( i, el) {
bind( el, channel );
} );
}
function bind( el, channel ) {
el = $( el );
var eventName = el.attr( 'data-rt-event' );
channel.bind( eventName, function( data ) {
displayUpdate( el, data );
} );
}
function displayUpdate( el, data ) {
} For each event element we find call our own ‘bind’ function which binds to the event on the channel using ‘channel.bind( eventName, eventHandler )’. The event handler function is a small closure which allows us to pass the data update, when received, and the event element to a ‘displayUpdate’ function.
If we run this now we can see from the logging that a connection is being established, we’re finding one channel and subscribing to it, and finding one event to bind to.
jQuery realtime markup finding channel subscription and event binding
When the event handler is called we need to find the name of each property on the ‘data’ object (e.g. last, low, high and volume) sent with the update and find any elements that are marked with that name.
function bind( el, channel ) {
el = $( el );
var eventName = el.attr( 'data-rt-event' );
channel.bind( eventName, function( data ) {
displayUpdate( el, data );
} );
}
function displayUpdate( el, data ) {
for( var propName in data ) {
var value = data[ propName ];
var updateEls = find( el, '*[data-rt-value="' + propName + '"]' );
log( 'found ' + updateEls.size() + ' "' + propName + '" elements to update' );
updateEls.text( value );
}
} We loop over the ‘data’ object and get the name of each property. Once we know the property name (‘propName’) we can find the associated elements and update their text value with the new data value. For now we’re not going to support objects with any kind of hierarchy — we just want one level of key and value pairs.
If you now refresh the page and trigger an event from the Pusher Event Creator the new data will be instantly displayed within the page.
Have you worked with a live data service? What lessons did you learn? Let us know in the comments.
Featured image/thumbnail, live data image via Shutterstock.
| 700+ Professional Web Backgrounds – only $29! |  |
|
|
In a nutshell, my year so far has consisted of:
Traveling for 10 months around the world through 17 countries covering Africa, South East Asia, Australasia and North, Central and South America. The trip was centered around surfing and photography
Presenting in Hong Kong, Japan, the US and London
Writing a book for O'Reilly as I went, titled JavaScript Web Applications
Writing another book on CoffeeScript, soon to be published by O'Reilly.
Doing a ton of open source libraries, such as Spine, Spine.Mobile, GFX, and Juggernaut.
Building a startup prototype
Presenting at FOWA
And finally, landing a job at Twitter
So, let me start a year ago, in September 2010. I had just left a startup I’d co-founded, and whilst the experience was useful, I was feeling bit burnt out from the incredibly long working hours involved. I was back in England and needed to make some decisions. A long held dream of mine was to move (if only for a few years) to the US, so I wrote the following in Google Notebook:
Choices in life:
Do a bachelors at Columbia in NYC
Downside - v expensive, not much to learn practically, boring?
Upside - it's a uni in NYC!
Write a book and apply for an O1 visa
Downsides - very time consuming, risky
Upsides - good for career, interesting
Wait. Just go to NYC for a holiday (3 months). Wait for startup visa.
Easy option - not very interesting
Maybe do 2, falling back to 3?
In the end I decided to do option 2, to write-up a book idea I’d been mulling over on JavaScript web applications, and what better way to write a book than traveling round the world, another dream of mine. I bought a round the world plane ticket through oneworld (cheaper than you’d expect) and set off the next week to my first destination, South Africa.
If you’ve never been to Africa, you should. Its scenery is raw and beautiful, hard to describe eloquently to those who haven’t experienced it. I had fallen in love with South Africa the previous year, doing a surfing tour up the East coast for three months. This time I only had time for one month, traveling through the Transkei up from Cape Town to Durban. As I travelled North, I started writing, fleshing out some of the chapter ideas I’d proposed to O'Reilly earlier.
The Transkei is an extremely rural part of South Africa, consisting of rolling hills, small villages and mud huts. They still have a chieftain hierarchy and a king, and most locals survive off the land and by fishing. It takes about two days driving on a heavily potholed road to reach my favourite spot, a beautiful cove called Coffee Bay. From there I would charge up batteries and save some articles offline in preparation for further expeditions up the coast.
I vividly remember walking miles down the untouched beaches, traveling from village to village, alone apart for the sand and the waves. At one stage I came across a swollen river, and rucksack held aloft managed to swim across it without drenching my Nikon and iPod. Africa is a place to lose yourself, to free up your mind, and to work out what’s really important in life.
The next stop was Hong Kong, where I had my 21st birthday, and then I traveled by land from Singapore to Hanoi. What most people don’t realize is that Hong Kong is 70% national park, and I had a great time hiking some of the spectacular routes, such as the Dragon’s Back. Some days I’d hang out at boot.hk, a co-working space, and teach a fellow traveler Ruby. Then, at night, I’d party with some couchsurfers in Soho till the early hours.
Traveling through Thailand, Cambodia and Vietnam was probably my favorite part of the trip, and if you have never been through Asia, you really should. The countries are beautiful, the weather fair, the food delicious and the people friendly. Angkor Wat is one of the wonders of the world, and should be on everyone’s bucket list. It was Trey Ratcliff’s photographs that inspired me to go there, and indeed many of my other destinations. That man was a catalyst for the trip in the first place.
On some obscure blog, I’d heard tell of a remote and beautiful island off the coast of Cambodia. It spoke of a bar in Sihanoukville, where I could organize a fishing boat out to the place. I, along with some really good friends, took the night bus to the town, and started looking for this legendary bar. The search lasted most of the day, each bar I’d inquire at sending me to another. Finally, I found the place, and organized a shuttle to take us the next morning.
The photo above is of the beach outside our $10 a night shack. Apart from the local inhabitants, our group was alone on the island, free to rein as we pleased. During the day we’d laze on the beach, eating incredible fruit salads the island’s chef had prepared, then at night we’d swim in the sea amongst all the glowing plankton.
Next stop was Vietnam, and we traveled along the Mei Kong’s tributes to reach a border town. There, we were the only westerners, and communicating was definitely an issue. Luckily we found what must have been the only English speaker in town, and he gave us a tour on his bicycle. His help was especially useful when my credit card got gobbled up by an ATM!
Our group parted ways, and by the time I’d reached Vietnam the book was well underway and coming along nicely. I stayed a few extra weeks in Saigon to really make some progress on the chapters, and was around for the Chinese New Year’s celebrations, which were truly spectacular.
Next was Japan, Australia, New Zealand and Hawaii. I can’t possibly cram into this post all the experiences I had, but suffice to say it was the time of my life. It’s incredible that so much beauty can be packed into one country, but that’s New Zealand for you. Some of my fondest memories are running at sunset around the lake at Wanaka, or hiking for days through the mountains along the Routeburn, carrying all my food and supplies. I made some lifelong friends traveling around that country; it’s truly a piece of paradise.
By the time I’d circumnavigated New Zealand’s South Island, the book was practically finished and submitted to the technical reviewers.
Next up were New York and San Francisco, two incredible cities containing some brilliant developers, some of whom I’m lucky enough to call my friends. Techcrunch Disrupt was awesome (I can highly recommend the hackathon), as was ‘adopt a coder’.
During my stop-over in New York and San Francisco, I did a ton of interviewing at various companies and landed a job at Twitter where I’ll be working on the front-end. I’m absolutely stoked to be working there with such an awesome team, and also by the move to San Francisco, a lifelong dream of mine.
Whilst the visa was being assembled, I traveled through Central and South America, hacking on my pet project as I went: a JavaScript MVC library called Spine. I traveled down Costa Rica, Panama, Peru, Bolvia and Argentina. Peru was easily my favourite, and although I had some trouble with the altitude, I had an incredible time exploring. The picture below is of one of the Colca Canyon’s fabled Condors, taken whilst I was climbing down the canyon, the world’s deepest.
When I was in Costa Rica, I got a tweet from a guy called Roberto, saying he’d read the book and was I interested in doing a surfing tour. Of course I readily agreed and took the bus to San Jose, meeting him a few days later. During the day we’d hack on Spine and Ruby projects at his beach-side condo, using the mobile dongle and car batteries to power our laptops. Then, when the power was low, we’d go out surfing as the solar panels did their work.
I can highly recommend writing a book, especially combining it with traveling. Indeed, if I didn’t have my sights set on San Francisco, I have a feeling I’d still be traveling, consulting and making startups. Being an author won’t make you much money directly, but it will definitely raise your profile and provide you with many more opportunities indirectly. In fact, what I most enjoyed about the process was being able to research and know a subject matter really deeply.
The last year has been the best year of my life, and I have a feeling the next will be better still. While I’ve settled down for the time being, I don’t think I’ll ever shake the lure of traveling; I still carry my passport in one pocket, and my wallet the other, ready to leave at a moments notice.
However, this post is not just about my travels, there’s a message to it:
The peculiar thing about programmers is that they’re the one profession that can easily work remotely and travel, and yet they’re the one profession that doesn’t. Of course there are exceptions, but on my travels I didn’t meet another programmer doing anything similar; a sad state of affairs. My message to fellow programmers is stop making excuses, man up and do it. You only live once, and I guarantee that you will have the time of your life.
As for me, I feel incredibly fortunate to be in the position I’m in, to have found my passion and to be doing what I love every day. That said, much of my current situation is no accident or fluke, but rather the result of planning, goals and work.
The harder you work, the luckier you get
The point of this post isn’t some self-aggrandizing narcissistic pontification, but rather to demonstrate that setting goals works, and to inspire people to do likewise. Work out where you are now, where you want to be in a year, and set-down a series of concrete steps that will get you there. Follow your dreams.
This is a repost of an article first posted in November 2011
]]>Please find below an announcement for an Ethnographic Study with the National Park Service. Be advised that there is a brief window for application – responses are due June 28th – and the opportunity would be most appropriate for students who will not require travel funding to the Antietam National Battlefield in Maryland.
All inquiries should be directed to Jennifer Talken-Spaulding (202 619-7205) or Walter H. Zachritz (301 689-7108,walter_zachritz@nps.gov).
Dear Chesapeake Watershed CESU Partners and Researchers,
Please distribute this announcement to eligible researchers that might be interested. Notice the due date of June 28th. Read carefully and direct questions about the project to Jennifer Talken-Spaulding (202-619-7205) or myself.
The project will produce an ethnographic overview and assessment for Antietam National Battlefield, completing needed baseline documentation of ethnographic groups associated with park resources. The ethnographic overview uses anthropological and sociological methods to identify and describe the park neighbors, park residents, ethnic groups, or others with historical and cultural ties and associations with, or special knowledge of, park resources, including former residents and their descendants who remain attached to the area despite having relocated.
Thanks very much for your help!
Walter
|
|
IE10 in Windows 8 Consumer Preview includes support for Error.stack , which enables Web developers to diagnose and correct bugs faster, especially those that are difficult to reproduce. Developers can build amazing apps with the capabilities of Web platforms that power today’s modern browsers. In Windows 8, we expose that power through both Internet Explorer 10 and Metro style apps in JavaScript .
]]>