ghinda.net

Nudgeti - waste less time on distracting websites

2018-03-02T00:00:00+00:00

Newsfeed algorithms and dark interaction design patterns are designed to trap you. Companies use them to make you spend as much time as possible on their platforms. We need a way around it.

Here’s what usually happens:

You want to look up a concert on Facebook, so you go to facebook.com. You’re greeted by a photo from one of your friends and some political posts, neatly placed in the newsfeed. Keep scrolling and the next thing you know is that 20 minutes have passed. You forgot what you were looking for in the first place.

You watch a short lightning talk on YouTube. Next to the video there’s a long list of recommended videos. If you didn’t click on one of them, as soon as your video is over, an “Up Next” video countdown shows up. If you cancel the countdown, a grid of similar videos appears.

They’re trying to get your attention by any means.

One solution is to block the websites, but this also blocks their utility aspect. You want to be able to watch some videos, see event details or send messages.

Nudgeti

Nudgeti is a browser extension that helps you snap out of the newsfeed hypnosis.

When you spend more than two minutes on social sites like Facebook or Reddit, a notification will pop-up telling you how long you stayed.
It uses one of the same attention-grabbing methods, notifications, against them.
After two more minutes another notification will show up, again telling you the time spent. Afterwards it will leave you alone, you most probably want to be there.
It won’t interrupt you or stop you from going to any website.

Notifications

Notifications are native to your operating system, thanks to Web Notifications. You can see them in the notification history.

They also work in Firefox for Android.

Privacy

The extension does not collect any personal data or statistics.

Because it’s built as a background script, it can only read tab overview details like titles or urls, but can not read tab contents (eg. your emails, facebook messages, etc.).

See the Nudgeti website.

Nudgeti is free software under the GPL license. Get the source code from github.com/ghinda/nudgeti.

Simple PouchDB view management

2017-03-03T00:00:00+00:00

PouchDB is a JavaScript database that can sync with a remote CouchDB, among other things. Syncing gets all the documents in a database, including views and other design documents.

View code

A common question is how to manage the code for the views.

A good approach is to keep them with the rest of the source code. You can then add them to the database on create, or on demand.

Querying views

Another problem you can hit is trying to query a view before syncing is done.

This can happen when the view is available only in the remote database, and no internet connection is available.

Since the view is not yet synced with the local database, it will return a 404 error.

Solution

To resolve these issues I created a function that tries to query a view and, if it doesn’t exist, creates it and retries the query.

This also solves the view code management issue, by keeping the views in the source code as a map.

// declare views
var views = {
  pills: {
    blue: {
      map: function (doc) {
        if (doc.color === 'blue') {
          emit(doc._id)
        }
      }.toString()
    },
    red: {
      map: function (doc) {
        if (doc.color === 'red') {
          emit(doc._id)
        }
      }.toString()
    }
  },
  agents: {
    agents: {
      map: function (doc) {
        if (doc.type === 'agent') {
          emit(doc._id)
        }
      }.toString()
    }
  }
}

// query couchdb views
function query (db, view, params) {
  var namespace = view.split('/')[0]

  return db
  .query(view, params)
  .catch((err) => {
    if (!views[namespace]) {
      throw new Error(`View ${namespace} is not defined.`)
    }

    // if view doesn't exist, create it, and try again
    if (err.status === 404) {
      return db
      .put({
        _id: `_design/${namespace}`,
        views: views[namespace]
      })
      .then(() => {
        return query(db, view, params)
      })
    }
  })
}

// can be used as
var db = new PouchDB('db')
query(db, 'agents')
query(db, 'pills/red')
query(db, 'pills/blue')

Demo

Here’s a demo of how it works.

CouchDB

The method can be adapted to use CouchDB directly, by replacing the PouchDB query and put methods with HTTP calls to the CouchDB API.

Downscaling large images in Canvas

2016-06-21T00:00:00+00:00

When resizing high resolution images in canvas elements, they usually end up aliased.

To work around this we can use step-down downscaling. This means reducing the image size in steps, rather than setting the final dimensions directly.

Here’s a basic function that will half the image resolution until it’s close to the right size.

The main downside of this approach is that the resulting image is sometimes blurry.

pica

If you don’t want to implement the downscaling function yourself, you can use pica.

Improved JavaScript debouncer

2016-03-14T00:00:00+00:00

Debouncer functions are used as rate limiters for functions that trigger many times in rapid succession. This is an attempt to improve the pattern by triggering the function earlier, making it seem more responsive.

To quote css-tricks.com:

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called.”

Existing approaches

Some popular implementations are Ben Alman’s or Remy Sharp’s.

The problem with the existing approaches is that they trigger only on the trailing end. Your function will trigger when the event has stopped firing for the configured time.

For example, using a debouncer on the keyup event will only trigger the function once you stopped typing. It will not fire when you start typing.

Improved debouncer

This improved debouncer triggers the first call immediately, and only debounces the next calls. It will trigger again on the trailing end only if it detects more calls.

function debounce (fn, delay) {
  var cooldown = null
  var multiple = null

  return function () {
    var self = this
    var args = arguments

    if (cooldown) {
      multiple = true
      clearTimeout(cooldown)
    } else {
      fn.apply(self, args)
    }

    cooldown = setTimeout(function () {
      if (multiple) {
        fn.apply(self, args)
      }

      cooldown = null
      multiple = null
    }, delay)
  }
}

Here’s a simple demo of the debouncer in action:

Performance

For performance, we could refactor the code to set the timeout only once. After testing both approaches with 10.000 debounced function calls, the difference between the version setting the timeout once and the one setting it multiple times is around ~50ms.

This is calculated using console.time, starting when we begin calling the functions, and ending when the last debounced function is called.

Based on these results, I would say optimizing the debouncer to only set the timeout once, thus making it more verbose, is not worth it.

Here’s the small performance test I used. Make sure you have the console open (for console.time).

lodash

The debouncer in lodash has a leading option that makes it behave like this improved debouncer, but is much more complex.

Run script tags in innerHTML content

2016-02-03T00:00:00+00:00

When inserting HTML content in the DOM using innerHTML, script tags inside it will not load or run. This applies to both inline scripts and external ones using the src attribute.

`document.write`

One way to load the scripts is to use document.write. The problem with it is that Internet Explorer 9 does not respect execution order. Each script tags will execute when loaded.

If you’re writing to an iframe, you can set the src attribute to javascript: '<script>...<\/script>'. This will work even in Internet Explorer 9 with the correct execution order.

`eval`

Another way is to load the external scripts using XMLHttpRequest, and run both inline and external ones with eval. One major drawback of this approach is that the same-origin policy restricts requests to other domains. eval also brings in a series of security issues.

`createContextualFragment`

Hat tip to Jake Archibald for this.

Using createContextualFragment to insert script tags will execute them. But, same as with document.write, the scripts will run as they are loaded and not in the specific order.

var range = document.createRange()
range.setStart($container, 0)
$container.appendChild(
  range.createContextualFragment('<script src="..."><\/script><script>...<\/script>')
)

`document.createElement`

The other solution is to re-create and re-insert each script tag into the DOM using document.createElement. This doesn’t handle execution order by itself, but we can insert the tags sequentially.

`type` attribute

Following the HTML spec for script tags, browsers execute only script tags with no type attribute, or with a valid JavaScript MIME type.

Some JavaScript libraries use inline script tags with custom types for precompiled code. For example, Babel’s (5.x) browser build can compile code from script tags with a text/babel type.

To match the browser behavior we must run only tags with an omitted or valid type attribute.

DOMContentLoaded

Browsers fire the DOMContentLoaded event when the document is loaded and parsed. This includes having loaded and ran all script tags.

Because some of the scripts we run could rely on the event, we must trigger the event manually after all tags load.

For Internet Explorer 9 support we use createEvent, instead of the Event constructor.

// trigger DOMContentLoaded
function scriptsDone () {
  var DOMContentLoadedEvent = document.createEvent('Event')
  DOMContentLoadedEvent.initEvent('DOMContentLoaded', true, true)
  document.dispatchEvent(DOMContentLoadedEvent)
}

Execution order

To preserve execution order we need to insert each script tag after the previous one has finished loading.

We also need to trigger DOMContentLoaded after all scripts are loaded.

For this we use a small helper function.

// runs an array of async functions in sequential order
function seq (arr, callback, index) {
  // first call, without an index
  if (typeof index === 'undefined') {
    index = 0
  }

  arr[index](function () {
    index++
    if (index === arr.length) {
      callback()
    } else {
      seq(arr, callback, index)
    }
  })
}

This runs an array of async functions, moving to the next one when the previous reaches the callback.

When it’s all done it runs the main callback function.

Script running

Putting it all together, here’s the script running code:

function insertScript ($script, callback) {
  var s = document.createElement('script')
  s.type = 'text/javascript'
  if ($script.src) {
    s.onload = callback
    s.onerror = callback
    s.src = $script.src
  } else {
    s.textContent = $script.innerText
  }

  // re-insert the script tag so it executes.
  document.head.appendChild(s)

  // clean-up
  $script.parentNode.removeChild($script)

  // run the callback immediately for inline scripts
  if (!$script.src) {
    callback()
  }
}

// https://html.spec.whatwg.org/multipage/scripting.html
var runScriptTypes = [
  'application/javascript',
  'application/ecmascript',
  'application/x-ecmascript',
  'application/x-javascript',
  'text/ecmascript',
  'text/javascript',
  'text/javascript1.0',
  'text/javascript1.1',
  'text/javascript1.2',
  'text/javascript1.3',
  'text/javascript1.4',
  'text/javascript1.5',
  'text/jscript',
  'text/livescript',
  'text/x-ecmascript',
  'text/x-javascript'
]

function runScripts ($container) {
  // get scripts tags from a node
  var $scripts = $container.querySelectorAll('script')
  var runList = []
  var typeAttr

  [].forEach.call($scripts, function ($script) {
    typeAttr = $script.getAttribute('type')

    // only run script tags without the type attribute
    // or with a javascript mime attribute value
    if (!typeAttr || runScriptTypes.indexOf(typeAttr) !== -1) {
      runList.push(function (callback) {
        insertScript($script, callback)
      })
    }
  })

  // insert the script tags sequentially
  // to preserve execution order
  seq(runList, scriptsDone)
}

It’s possible that some some external scripts will not load, so we also handle the onerror listener.

Here’s a demo of how it works:

Mimic native browser focus styles

2015-12-04T00:00:00+00:00

When creating custom web components or widgets, elements receiving focus are sometimes hidden. This makes us have to simulate focus on other elements.

This is one way to mimic the default focus styles, as much as possible, in a cross-browser way.

Even with custom components, you should try to use native controls (eg. buttons) that provide their own focus styles. Most of the time you should not mess with the browser’s default focus styles.

Defaults

By default, Firefox and Internet Explorer use a dark thin dotted outline on links and other elements.

Because Firefox tries to integrate with the operating system, native components like buttons provide their own styles, including focus styles, inherited from the OS.

Browsers with WebKit or Blink usually use a blue or gold glow outline. It’s defined as outline: auto or outline: -webkit-focus-ring-color auto 5px in the browser styles.

Custom focus

Our custom styles try to mimic focus on interactive controls like buttons, not on text links, so we use a 2px solid outline for starters.

On WebKit we can use the -webkit-focus-ring-color keyword for the outline color.

For other browsers we can use the CSS2 Highlight system color. Highlight is defined as “Item(s) selected in a control” so it works for what we need. It’s usually a blue-ish color, except for Opera, that uses a light gray.

WebKit browsers have outline-style set to auto by default, which looks more like a glow rather than a solid line.

Firefox and most other browsers translate auto to none. That’s why we have to use a WebKit-only media query for the outline style. To group WebKit-only properties together, we also set the WebKit specific outline color inside the media query.

The complete CSS:

.unreal-focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: Highlight;
}

/* WebKit gets its native focus styles.
 */
@media (-webkit-min-device-pixel-ratio:0) {
  .unreal-focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}

How it looks across various browsers:

Material design ripples with CSS

2015-11-20T00:00:00+00:00

I recently created a Material Design theme for the css-toggle-switch library, and found a way to implement the “ripple” effect using just CSS.

Most Material Design implementations use JavaScript for the ripple effect on the input components, to be able to match the “surface reaction” in the design spec.

Buttons

The technique is a mash of pseudo-classes that trigger an animation on a pseudo-element when matched.

For the button element, we create the ripple using button:after. Then, to trigger the animation on it, we use button:not(:active):after.

button:not(:active):after {
  animation: ripple 1s;
}

We can’t trigger the animation on :active because that would cause the animation to abruptly end when we stop clicking.

Setting the animation with the :not(:active) selector helps with triggering it again after the button was clicked, when the :active pseudo-class no longer matches. This also makes the animation re-play when clicking the button again.

Since the :not(:active) selector matches from the start, the animation runs once when the page loads, without any user input.

To fix this, we hide the ripple, and show it only when the button is focused.

button:after {
  visibility: hidden;
}

button:focus:after {
  visibility: visible;
}

Checkboxes and radios

Same as for button, we implement the ripple for checkboxes and radios using pseudo-classes, but instead of using :active we use :checked.

Since radios and checkboxes can use similar markup, we can implement the ripple using a single class on a parent container.

<div class="toggle">
  <input type="checkbox" name="c" id="c1">
  <label for="c1">Checkbox</label>
</div>

<div class="toggle">
  <input type="radio" name="r" id="r1" checked>
  <label for="r1">Radio</label>
</div>

We create the ripple on the label:after pseudo-element.

To trigger the animation when deselecting the checkbox, we use the .toggle input + label:after selector.

.toggle input + label:after {
  animation: ripple .4s ease-out;
}

To re-play the animation when selecting the checkbox, or when selecting a radio button, we need to duplicate the @keyframes, and change the animation name.

.toggle input:checked + label:after {
  animation-name: rippleDuplicate;
}

We use the same :focus trick as for the button, to make sure the first animation run is not visible when the page is loaded.

Drawbacks

The “Responsive interaction” section of the Material design spec calls the ripple “instant visual confirmation at the point of contact”.

With the CSS implementation the ripple will only show up when the input action was finished. That’s because of the pseudo-classes we’re using.

The other issue is that we can’t position the ripple at the point of click/touch, without using JavaScript.

Another downside is that the ripple will suddenly disappear if you unfocus the button or input while the animation is running. That’s because of the :focus trick we use to hide the first run of the animation when the page loads.

These snippets are highly experimental and will work only on modern browsers. If you need production ready toggle switches, with or without material design, you can use css-toggle-switch.

Simple Angular scope namespacing

2015-02-24T00:00:00+00:00

The best way to work with controller scopes in Angular is to avoid using the $scope object as much as possible. Instead you should use the controllerAs syntax introduced in Angular 1.2.

If for some reason you can’t use it, here’s a simple pattern that will help you handle and namespace your models.

At its core, this is how a basic controller using the pattern looks like:

app.controller('MainCtrl', function($scope) {
  var model = $scope.model = {};

  model.fullName = '';
  model.age = 30;
});

You’ll notice the most important part at the top:

  var model = $scope.model = {};

What this is doing is using a big object that will contain all the models in our controller. This helps with a couple of things.

First, it helps with the “there’s gotta be a dot in there somewhere” guideline for ng-model.

And second, it gives you some syntactic sugar for referencing the models. After you set the model variable this way in your controller, you won’t need to reference $scope again, neither in the templates or in the rest of the controller (except for $watch or other $scope methods).

That means you can now use model.modelName in the controller and in the templates, for pointing to a model.

// in controllers
model.modelName = 'abc';

<!-- in templates -->
<input ng-model="model.modelName">

The pattern’s benefits are more obvious when using it with nested controllers.

Let’s say you want a couple of global models to use throughout the app. You can use the run block for defining the global models.

app.run(function($rootScope) {
  var root = $rootScope.root = {};

  root.userId = 'abc';
});

app.controller('MainCtrl', function($scope) {
  var root = $scope.root;
  var model = $scope.model = {};

  model.fullName = '';
  model.age = 30;
});

For namespacing, I used a different variable name(root) for the model in the run block.

You can now reference any model in the root namespace by using root.modelName in both the controller and the template.

Use the same pattern for any number of parent scopes, just make sure to use different namespaces for each parent.

When you want to share the same model namespace with a parent controller, you can use a slightly modified version of the model definition.

$scope.model = $scope.model || {};
var model = $scope.model;

This will either inherit model from a top controller scope, if it exists, or define it as an empty object. This means you can use it as a standard route controller, or as a nested controller that shares the model namespace with its parent.

Even if you do use this pattern, keep in mind that the best practice is to to use services for models shared between controllers.

Turn your old Android phone into a media center

2014-10-16T00:00:00+00:00

If you have a non-smart TV with USB support and an Android phone, this will show you how to turn them into a poor man’s media center. It will include a torrent server with remote access and automatic torrent downloads, Samba and SSH.

In my case, I’m using a Samsung LE32E TV and an Alcatel OT-918 smartphone.

We’ll work only with the phone, so you won’t have to change anything on the TV.

First, you need to make sure your device is rooted. See this guide for rooting the Alcatel OT-918.

Next up, if you’re also using an older phone with a smaller internal memory, you need a partitioned SD card, with a larger ext2/3/4 partition and the rest as FAT32. I’m using a 32GB SD card with a 1GB ext2 partition and the rest as FAT32. I definitely recommend using a class 10 SD card.

This means your Android kernel needs to have support for ext partitions. See this kernel with ext support for Alcatel OT-918.

After you’ve partitioned your SD card, and made sure you have ext support in the kernel, use Link2SD or something similar to mount the ext partition.

Then connect your phone to your WiFi router and set a static IP for it. If you’re using Android 2.3, go to Settings > WiFi Settings > Advanced and press Use static IP. Set the IP to something like 192.168.1.XX.

Optware for Android

We’ll start installing software on the phone. You’ll need to use a Linux system for this. Using a Live CD should also work.

Optware is a lightweight package manager for Linux. We’ll install it on the phone and use it to get the rest of the packages we need.

Make sure you have adb installed. If you’re running Ubuntu you just need to install the android-tools-adb package.

Connect the device to your PC and, in a terminal, run:

sudo adb devices

Your device should show up in a list.

Download the Optware package manager install script.

If your Android device has a small internal memory, edit the optware-install-via-adb.sh script, and change the OPTWARE_DIR variable to point to an /opt folder on your mounted ext partition. The variable should look like OPTWARE_DIR=/data/sdext2/opt.

Otherwise, if your device has plenty of internal memory, you can just leave the script as it is.

Now run the script with:

./optware-install-via-adb.sh

This will install Optware for Android on your device.

We now have a proper package manager on the device, so we’ll open a shell and start installing packages.

Connect to the adb shell and start the Optware shell with:

adb shell
./data/sdext2/opt/start.sh

Now install everything related to Transmission (torrent server), FlexGet (automatic downloads), OpenSSH and Samba.

ipkg update
ipkg install nano
ipkg install transmission

ipkg install openssh
ipkg install perl
ipkg install samba36

ipkg install gcc
ipkg install python26
ipkg install py26-setuptools

easy_install transmissionrpc
easy_install flexget # in case of easy_install error, edit opt/lib/python2.6/distutils/distutils.cfg

easy_install periscope # for subtitles

easy_install pip # just to be able to remove packages

Now that we installed the packages, we’ll start configuring them.

Configure SSH

We’ll enable connecting by SSH using your public key. I’m assuming you already have your SSH keys set up on your system.

Edit the /opt/etc/openssh/sshd_config file, and set the RSAAuthentication and PubkeyAuthentication to:

RSAAuthentication yes
PubkeyAuthentication yes

You can edit the file with Nano, since we installed it before:

nano /opt/etc/openssh/sshd_config

Edit the /opt/home/root/.ssh/authorized_keys file, and paste the contents of your local public key file (./pub) in it.

Same as before, you can use Nano for this:

nano /opt/home/root/.ssh/authorized_keys

Now restart OpenSSH with:

/opt/etc/init.d/S40sshd

Sometimes when restarting OpenSSH, it will complain about the host key. If it does, create it with:

ssh-keygen -t ecdsa -f /opt/etc/openssh/ssh_host_ecdsa_key -N ''

Exit the ADB shell, and you should now be able to get on the device using SSH:

ssh root@192.168.1.X

Now that we have SSH, you can also log-in onto your device using something like FileZilla for easier file access.

Configure Samba

I won’t go into much detail about the Samba config. Download my smb.conf file, and copy it into /opt/etc/samba.

Now restart Samba with

/opt/etc/init.d/S08samba

and it should be working.

There is an issue with Samba that is preventing you from deleting any files on the device. I haven’t managed to figure out what the cause is yet. It’s possible that the old version of Samba packaged for Optware has this bug.

On Ubuntu, mounting the Samba share with cifs fixes the issues with deleting files.

Add this to your /etc/fstab to mount the share with cifs:

//192.168.1.X/sdcard /media/MOUNT_POINT cifs users,username=root,password="",rw,nounix,iocharset=utf8,file_mode=0777,dir_mode=0777 0 0

Configure Transmission

Run the transmission-daemon first, then stop it, so it will create its config file.

transmission-daemon
killall transmission-daemon

You can edit the config file at opt/home/root/.config/transmission-daemon/settings.json, or just use my settings.json.

A good idea is to change the download-dir to point to the location you want it to download the torrents on the FAT32 SD card partition. Set the rpc-enabled property to true, to enable RPC and be able to connect to the web interface at http://192.168.1.XX:9091/ or use the Transmission Remote GUI.

These are both already done in my settings.json file.

Once you have the config set-up, start transmission with:

transmission-daemon

Configure FlexGet

FlexGet is a multipurpose download automation tool. We’ll use it to automate downloads.

To configure Flexget, edit the /opt/home/root/.flexget/config.yml file. You can check out the FlexGet Cookbook for config file examples.

See the Transmission config example, to connect FlexGet to it, and have it add torrents automatically.

If you need automatic subtitle downloads, we installed Periscope before, so just follow the FlexGet Periscope config.

Now copy the flexget.sh file to /opt/flexget.sh.

We’ll use this file to run the Flexget tasks. Flexget does have a daemon mode with a scheduler, but I noticed it’s a real memory hog, so I can’t use it.

Configure autorun and scheduling

Copy start.sh to /opt/start.sh. This script will run everything related to SSH, Samba and Transmission.

We need something that will run the script on startup and periodically run FlexGet. I’m using Script Manager, since it can do both.

You need to set up the two scripts in Script Manager. Set /opt/start.sh to run on Boot and /opt/flexget.sh to run as often as you need it to check for new content (every 1 day/1 hour/etc.).

Dual Mount

By default, when you connect the Phone to the TV with USB, all apps on the phone, including Transmission and FlexGet will not be able to access the SD card. To get around this, we have to use a dual mount app.

The app will mount the SD card on phone and the TV at the same time. This is usually not a good idea, since it will corrupt your SD card when doing simultaneous writes, but in this case the TV has read-only access, so it won’t happen.

I recommend using Dual Mount SD Widget since it’s the one that worked best for me.

You can also use something like Multi Mount SD-Card Lite or similar.

##Extra tips

My TV does not auto-refresh the contents on the SD card, so I have to turn it on and off to be able to see the newly added files in the USB interface.
If you’re using an older phone, it’s best to free up as much memory as possible. So remove any apps you don’t need and use something like Disable Service to kill any extra services.
After downloading lots of torrents on the SD card, even if it is a class 10, corruption will happen on the FAT32 partition. When it does, mount the SD card on your PC and run sudo dosfsck -w -r -l -a -v -t /dev/sdc1 (replace sdc1 with your SD card FAT32 partition) to try and fix the issues.

Thanks Webmonkey

2014-08-01T00:00:00+00:00

Around 2000, there weren’t that many “tutorial websites” out there for web development. The tutorials available were hard to follow or not that well-written. All but the ones on Webmonkey.

I had to search for hours for a good tutorial on anything related to web development, before great learning resource sites like Codecademy, Smashing Magazine or MDN were available.

Considering I didn’t have an internet connection at home, and internet cafés were pretty expensive at the time, this was less than ideal. When I did get a dial-up connection at home, the prices were still terrible.

But looking around, one of the websites especially stood out. That was Webmonkey.

I found it through Tripod.com, a free ad-supported web hosting service by Lycos that was popular then. Tripod.com gave you a whole 20 MBs of storage space, and a *.tripod.com subdomain, for free!

Lycos also owned Webmonkey, so naturally they were pointing future “webmasters” to it.

It was one of the few who had well-structured tutorials, with learning plans, containing everything from graphic design to JavaScript or SEO. It even had an “E-Business” category with stuff related to marketing or analytics.

Dave Thau, or just Thau! as he was known on Webmonkey, wrote some of the best articles. His Advanced JavaScript Tutorial became pretty popular, and had stuff like cookies, timers or image preloading. It was awesome.

His tutorials are the ones that initially got me into JavaScript, and helped me understand how it worked with the DOM and everything else.

The articles were so great I was downloading them onto floppy disks at cafés, to take home and read again. I had created my own personal “MDN”, that I could reference anytime I couldn’t remember a tag or a JavaScript method.

There were also lots of articles on other things like browser sniffing, frames, or XSS, which influenced how we did web development for years.

Lycos shut down Webmonkey formally in 2004, but it’s still online today in a basic news format.

For all the nights I stayed up reading your tutorials, wanting to learn more because it was so much fun, I just wanted to say thank you!

Community driven development

2013-07-23T00:00:00+00:00

Just following trends is a bad idea at any time. But this is not about following trends. This is about switching open-source development tools because of the communities around them.

What I’ve learned is that with free software projects, large communities are a definite sign of health and bring a lot of benefits in terms of code, documentation, testing or bug reports.

From Brunch to Yeoman

The first decent build tool I used for my JavaScript projects was Brunch. It has a simple config file, clear directory structure, and it’s flexible enough. It’s great. But I’m switching to Yeoman now. And here’s why.

Brunch itself is written in CoffeeScript, but other than that, it’s language agnostic, so it doesn’t force it on you unless you want to contribute to the project directly. Still, because of this the community around it is also CoffeeScript-based, so most plugins, skeletons, and tutorials are CoffeeScript, so you can’t contribute to those either, unless you write CoffeeScript.

Even after Grunt and Yeoman were released, I stuck with Brunch. But in the meantime the community around Yeoman and Grunt has gotten much bigger, and that means more plugins, generators and help available online right now.

I’m not switching from one to the other because of a lack of features, but because I would have to invest more time in the development process if I didn’t. If I would stick with the project with the smaller community I’d have to be write plugins, skeletons and find documentation.

Same thing, different tools

Around late 2009, after using Subversion for a pretty long time, I decided to move on to distributed version control.

On most projects I worked on with Svn, we used a single branch, continuously merged our code, and used tags for stable releases. It was less than optimal, and that’s why I was really looking forward to the proper branching features in DVCS’.

The most popular options were, and still are, Mercurial and Git, so I had to choose between the two.

Most of the people I work with use Windows, so good support for it was a must. This was definitely a plus for Mercurial, since Git was pretty shaky on Windows at the time.

I also liked the more clean and monolithic architecture of Mercurial, instead of the more MacGyver-ish Git, which had many different ways of doing more or less the same thing.

Since I chose Hg and wanted to have my repositories available online, I started using Bitbucket.

Bitbucket was great, but it didn’t have a community as large as GitHub’s. This meant more people with GitHub accounts, and possibly more contributions, bug reports, and overall better visibility for a public project there, rather than on Bitbucket.

That’s why, when I released Acorn Media Player, I hosted it on GitHub. There haven’t been that many contributions over time, but I’m sure there were more then there would have been if the repository would be on Bitbucket.

At work I was still using Svn, but planned on moving to Hg, as I decided initially. I looked around for a web interface for Hg initially, like Bitbucket and Github, but open-source and self-hosted.

Browsing around, I found RhodeCode and Gitlab. After I tested them both, it was clear that Gitlab was better for us, and just as with Github/Bitbucket, it had a larger community than RhodeCode and a faster development pace.

This, along with GitHub’s popularity and the larger community around Git, which also meant more help available online, made me switch completely to Git for all my projects.

Competition vs. Collaboration?

Ever since I took this decisions I wonder: is this popularity contest ok? Should we try to take a different approach?

Maybe trying to improve the tool we’re currently using? But, again, wouldn’t this just be wasted time, if everybody else still switches to the other, more popular project, eventually?

Having a common system of plugins, packages or modules, used by multiple projects would definitely solve a part of the issue, but i’’s probably not going to happen too soon.

In an issue on GitHub discussing the differences between Yeoman and Brunch Paul Miller, the creator of Brunch, says:

I believe existence of Yeoman is a potentially good thing, because it brings competition to the board. Yeoman will become better, brunch will become better.

Free software should be about collaboration, but collaboration rarely happens between projects with the same scope, so we just end up creating the same functionality in different ways.

This is the same type of competition that goes on between closed-source projects. Is this better than collaboration?

Google Tasks sidebar in Gmail

2013-06-29T00:00:00+00:00

RightTasks is now also available for Opera and Firefox.

A couple of months ago I released the RightTasks for Gmail extension for Chrome, which adds your Google Tasks to a sidebar in Gmail.

Google Calendar has this feature by default, and allows you to have your Google Tasks visible in a sidebar, on the right side of the calendar. Since it’s so handy, people have been asking for the same feature in Gmail for, at least, as long as it’s been available in Calendar.

The default Tasks widget available in Gmail, when activated, is placed above everything else, so you have to keep opening and closing it, to not get in the way of your work.

I’ve seen people use Remember The Milk just for the tasks sidebar feature, since they provide the Remember The Milk for Gmail Add-on.

There is a different way of getting something similar, by using the Gadgets feature from Labs, but it’s not nearly as functional as the default Tasks widget.

There are also other extensions for Tasks, but having to manually open a popup, or tab, just to see them is not as useful as having them placed next to your emails, especially if you’re using Gmail like a traditional desktop email client, keeping it open all the time.

RightTasks uses the default Tasks widget, so you have all the official features available, like adding an email as a task, with the SHIFT + T keyboard shortcut, or focusing on the Tasks widget with the G then K keyboard shortcut.

You can contribute to the extension, or report any issues, on GitHub: https://github.com/ghinda/righttasks.

Send a JPEG Blob with AJAX on Android

2012-11-25T00:00:00+00:00

Having to upload a JPEG image as a raw Blob on Android 4.0+ revealed a couple of bugs.

If you have direct access to the specific JPEG image, when the image is on the same domain as the rest of your app, or you are in an environment without cross-origin restrictions, such as a PhoneGap webview, you can use the XHR2 responseType property to specify the format of the returned data.

XMLHttpRequest 2 support was introduced in Android 3.0.

var imageXhr = new XMLHttpRequest();
imageXhr.open('GET', 'path/to/image.jpg', true);
imageXhr.responseType = 'blob';

Get image from `canvas`

If you have to get the image data from a canvas, you should be able to get the dataURL, write it to an ArrayBuffer and then write it to a Blob. In the near future we’ll be able to use the toBlob() method, which will return the image data as a Blob. Right now, to be “future friendly”, we can detect support for toBlob() and use Sebastian Tschan’s canvas.toBlob() polyfill if there’s no native support for it.

Unfortunately, if you need the image data as a JPEG you’ll hit an Android bug.

The toDataURL method allows you to specify the type of the returned data:, so you should be able to specify the ‘image/jpeg’ type, and get a JPEG image. While this works on most desktop browsers, Android always returns the image as a PNG.

Here’s a simple test for the canvas.toDataURL('image/jpeg') method, demonstrating the bug. While this will work on desktop browsers, testing it on Android 3+ will always return image/png.

The only work-around is to use a JavaScript JPEG Encoder, and encode the raw image data yourself.

var encoder = new JPEGEncoder();
var imageData = encoder.encode(canvas.getContext('2d').getImageData(0, 0, canvasWidth, canvasHeight), 100);

You can now convert the image data to a Blob.

Blobs

Android introduced support for Blobs in 3.0, using the now deprecated BlobBuilder interface, and has kept it the same up to the latest version (4.2 as of November 2012).

According to chromestatus.com, Chrome for Android also has support only for the BlobBuilder interface right now.

This isn’t really a problem, since we can check support for BlobBuilder, and create the Blob using the supported interface.

The canvas.toBlob polyfill adds an additional function called dataURLtoBlob, which can convert a data url to a Blob. We can use this method on the manually-encoded JPEG image data.

Sending the Blob with AJAX

XHR2 allows us to send additional formats with AJAX beside FormData, like Blob or ArrayBuffer. We can simply use the send method with our Blob as the parameter.

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload/binary/jpeg', true);
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send(blob);

While the request works as expected on supporting desktop browsers, there seems to be a bug in Android that sends the request completely empty. Here’s a test for xhr.send(blob) using GitHub’s API, which sends both a Blob and an ArrayBuffer.

On supporting desktop browsers, you’ll get the proper response from the API, while on Android you’ll get an error for the Blob-based request, because the API request doesn’t send the required parameters, sending the request without any payload.

Weirdly, the work-around is to send an ArrayBuffer, instead of a Blob, which will have the exact same effect. You can convert a Blob to an ArrayBuffer using the FileReader object. Check the str2ab_blobreader function in the example above to see how you use it exactly.

Bug reports

I’ve opened bug reports for these bugs on the Android bug tracker:

And also on the Device-Bugs issue collection:

Please help me get the attention of the Android developers, so that they can get these bugs fixed for newer releases.

I love Adaptive Web Design poster design process

2012-08-03T00:00:00+00:00

In February, Veerle Pieters partnered with Easy Readers and launched the I Love Adaptive Web Design Poster Contest. Since I was lucky enough to be among the winners, I thought it would be a great idea to give some insight on how the poster came together, and what’s the idea behind it.

There is just not enough information online about the complete design process. Sure, there are a lot of tutorials, articles and notes about specific tools or techniques, but design is much more than that, crossing tools and mediums.

Concept

The basic requirement for the contest was to design a poster celebrating your passion for adaptive web design, as stated in the original briefing, so there was plenty of creative freedom.

Veerle Pieters provided the sources for the cover she had designed for Aaron Gustafson’s book, along with the design process for the cover available on her blog, which provided a great starting point for me.

Since adaptive web design is such a broad term, I tried not to use actual devices, screen sizes, or the such, even if those were my initial thoughts. But, even if I didn’t want exact metrics, I still wanted to present the concept in clear way that was easy to understand.

After getting the first chapter of the book, that was available for download, and reading Aaron Gustafson’s clear description of the levels of user experience, the idea of infographics quickly came to mind.

Inspiration

It’s always important to know your history, so, as a designer, it’s mandatory to know where’re we’re coming from. If you’re unfamiliar with design history, I encourage you look into the great work of the past, such as the Bauhaus or the Swiss design style. There are of course many more parts of history to look into, but for a condensed overview with a focus on graphic design I suggest you take a look at DesignIsHistory.

After some browsing around I came up with the following mood board.

The Tower

Afterwards, I started sketching to see if there was anything good I could come up with, starting from the moodboard, the levels of user experience and the general idea of infographics.

I imagined the levels of experience as skin layers on an onion, but also as building blocks providing a different experience at each height. I prefer a more geometric style, so I decided to work on the “building blocks” idea some more.

After some initial sketching, this is how the first version looked like.

Final version

While I was pretty happy with the first version of the poster, it still wasn’t as clear as would’ve liked it to be. The basic idea was to be able to show the poster to somebody who was unfamiliar with the concept, and they could easily understand it.

With this idea in mind, I started sketching and experimenting with including more text, without complicating the overall look of the poster.

Ultimately, the idea came from one of Ladislav Sutnar catalog layouts.

You can find some great articles about design processes on David Airey’s website or on Veerle Pieters’ Blog.

The full list of winners is available on Veerle Pieters’ blog.

Congrats to the winners, the entries were great!

Mobile support for the CSS toggle switches

2012-03-10T00:00:00+00:00

Update December 2012

The latest version of the toggle switch has full mobile support and easy integration with Twitter Bootstrap or ZURB Foundation.

See the latest demos: CSS Toggle Switch.

Update October 2012

After some testing it turns out that the Android 2.3 browser, and possibly other older Webkit browsers, are affected by this older WebKit Adjacent/General Sibling and Pseudo Class Bug, which was causing issues with the toggle switches.

The fix I added is based on the one described in the article above, but applied only to the containers, not the whole body, for performance reasons.

Another issue was that, on older iOS versions the input was not selected, when tapping the label. The work-around for this was to add an empty onclick handler. This handler also makes Opera Mini re-render the page, with the right input selected.

These changes completely remove the need for the JavaScript functionality that was previously adding mobile support.

Latest demos: CSS Toggle Switch.

While testing the CSS toggle switches from my last article, I noticed they had issues, or didn’t work at all, in various mobile browsers. The only mobile browsers which seemed to properly support the switches were Firefox Mobile and Opera Mobile.

For both the radio and checkbox-based versions, the switches looked alright but the behavior wasn’t working; the toggle buttons didn’t move when selected.

The only version that worked properly was the one where the checkbox input was placed inside the label.

After some digging, I ended up on The CSS Ninja, who also had similar problems with custom radio and checkbox inputs. His latest solution to the iOS issue was to make sure the input is topmost, and set it’s opacity to zero.

When applying this technique on the basic checkbox-based example, after taping the switch, the background, border, and text colors where changing, but the position of the button wasn’t.

The .toggle input:checked + label:after rule was working, while the .toggle input:checked ~ span rule, supposed to change the position of the toggle button, wasn’t.

Also, it wasn’t working at all for the radio input-based switch.

Mobile Webkit

After some more digging, it turns out that most mobile Webkits try to prevent reflows, and don’t trigger them when checking/selecting radios or checkboxes. I’m guessing this is mostly for performance reasons.

That’s why, to get mobile support, you have to force a reflow when toggling the switch. The only way to do this is to use JavaScript.

Opera Mini

Since Opera Mini is one of the most used mobile browsers, supporting it is big plus. And, even though it’s a proxy browser, it does have some support for JavaScript. Still, using the same technique to trigger a reflow as on the other mobile browsers, isn’t working.

But, it turns out that setting the checked property on the input with JavaScript, does trigger a sort-of-reflow. It will reload the page, with the new option selected. It’s probably the best solution we can get for Opera Mini, since it doen’t have any “real” interactions on the page.

The Script

The script I put together is pretty straight forward, except for a couple of things.

/* Minimal Touch support test.
* You should probably use Modernizr.
*/
var touchSupport = ('ontouchstart' in window),
  mobile = (screen.width <= 1024);

// Utility function, needed to get the input elements next to labels
Object.prototype.previousObject = function() {
  var p = this;
  do p = p.previousSibling;
  while (p && p.nodeType != 1);
  return p;
}

/* Manualy check the input, for Opera Mini/proxy browsers
*/
function checkRadio(e) {
  var input = e.target.previousObject(),
    inputType = input.getAttribute('type');

  if(inputType === 'checkbox') {

    if(input.getAttribute('checked')) {
      input.removeAttribute('checked');
    } else {
      input.setAttribute('checked', true);
    }

  } else if(inputType === 'radio') {

    input.setAttribute('checked', true);

  };
};

/* Force reflow
*/
function forceReflow(e) {
  /* There's a delay between taping a label, and checking the input.
  * That's why we have to
  */
  if(e.target.previousObject().checked) {
    // force reflow
    document.body.className = document.body.className;
  } else {
    // if the input is not checked yet, try again
    setTimeout(function() { forceReflow(e) }, 100);
  };
};

/* Get all labels on the page.
* You should use a more specific selector on your page.
*/
var labels = document.querySelectorAll('label');

if(touchSupport) {
  // Mobile Webkit(Android, iOS, BB, WebOS, etc.), and others with Touch support
  for(var i = 0; i < labels.length; i++ ) {
    labels[i].ontouchstart = forceReflow;
  };

} else if(mobile) {
  // Non-touch browsers, Opera Mini and other proxy-browsers
  for(var i = 0; i < labels.length; i++ ) {
    labels[i].onclick = checkRadio;
  };

};

I’m using the timeout because there seems to be a delay between taping the label, and the input actually getting checked. If we trigger the reflow too early, before the input is checked, it still won’t change it’s position. So we have to wait until the input is checked, before the reflow.

The reflow is triggered using:

document.body.className = document.body.className

These solutions should also work on other “checkbox-hack” experiments.

The demos are on Github: css-toggle-switch.

CSS toggle switches

2011-10-21T00:00:00+00:00

Update December 2012

The latest version of the toggle switch has full mobile support and easy integration with Twitter Bootstrap or ZURB Foundation.

See the latest demos: CSS Toggle Switch.

Back in August I saw Orman Clark’s latest work at the time, a set of beautiful toggle switches, and decided I’d have a go at creating a functional version of them.

We must start with some meaningful markup, this will ensure our switches are accessible and work everywhere.

Radio

The best way to mark up the multi-state switch is to use radio buttons. The first obvious advantage is that it supports an unlimited number of options, and is easily usable by keyboard alone.

<fieldset>
  <legend>View: </legend>

  <input id="week" name="view" type="radio" checked>
  <label for="week">Week</label>

  <input id="month" name="view" type="radio">
  <label for="month">Month</label>

  <span></span>
</fieldset>

I use a fieldset to wrap the switch, along with a legend for the switch label, and the radio buttons with a label for each.

Accessibility

We don’t have to use any aria-roles for the switch, because we’re using proper markup, and screen-readers (or other assistive technology) will recognize it as a form control.

We need to hide the inputs, but we can’t use display: none, because this will also hide them from screen readers, and make them unreachable by keyboard.

To overcome these issues we hide them by moving them off screen.

fieldset input {
  position: absolute;
  top: -9999px;
}

NVDA will reach the fieldset, read the legend, and stop on the first input. Then we can use the up-down/left-right keys to switch between the inputs.

Switch button

“So what that’s empty span?”, you might ask. While I’m not really a fan of empty elements used only for styling purposes, we’re forced to use an actual element, rather than a pseudo-element, if we want to be able to use transitions on the switch.

There is a bug in most web browsers right now, except Firefox 4+, that prevents CSS3 animation and transitions on pseudo-elements. More about Transitions and Animations on CSS Generated Content.

Look

We create the background slide rail with an :after pseudo-element on the legend.

legend:after {
  content: '';

  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;

  width: 50%;
  height: 100%;
  padding: 2px;
  background-color: #2d3035;

  border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
}

Then we position the labels next to each other, and create the look of the switch button. I won’t go into to many details regarding the look of the switch, since you’re all pretty familiar with CSS rounded corners, gradients and box-shadows.

Behavior

This is where all the magic happens. We implement the full functionality of the switch only with CSS, by targeting the span, from the last :checked input, using the general sibling selector.

fieldset input:last-of-type:checked ~ span {
  left: 75%;
}

The switch is now fully functional, but we’re lacking one important feature: a way to style the focused label, this is especially useful for users that are unable to use a mouse.

Active label

To style the active label differently, we target the label following the checked input, using the adjacent sibling selector.

fieldset input:checked + label {
  color: #2d592a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

We also need to provide a way to highlight the focused label, even if the associated input is not checked. We’ll use the same technique we used for the checked item, but instead of using the :checked pseudo-class, we’ll use :focus, and provide an outline for it.

fieldset input:focus + label {
  outline: 1px dotted #fff;
}

This benefits mostly Opera, since it’s the only browser that allows you to reach each option using Tab, and select it by pressing the Enter or Space keys. Other browsers jump to the next fieldset when pressing Tab.

Every browser, except Chrome, will also focus the label when clicking it. Chrome will only focus it when reached by keyboard.

Checkbox

Update: This approach has been removed from the latest version of the toggle switches, because of accessibility issues.

My next approach was using a checkbox, instead of radio input. This means we can simplify the markup a bit, since we don’t have multiple input elements, like in the radio version.

<label>
  View:
  <input type="checkbox" />
  <span></span>
</label>

Notice I’m not using the fieldset element any more, but just wrapping the input in a label, and again, than empty span.

On/Off Labels

We can only use the main text in the label, so we have to use generated content to create the “Week” and “Month” labels.

<label data-on="Week" data-off="Month">

To be able to easily reuse the toggle switch, you can see I’m using custom HTML5 attributes for these labels.

label:after {
  position: relative;
  width: 50%;

  content: attr(data-on) "\a" attr(data-off);
  white-space: pre;
  text-align: center;

  column-count: 2;
}

In the content property, I use the attr() notation to get the value of the custom data- attributes, and separate them using the \a newline character.

I’m doing that to be able to properly position them. The problem is that, because of the look of the switch, I need to use the :before pseudo-element to create the background of the switch. This leaves me with only one element for both the text labels.

So, in order to properly position them I use the CSS3 column-count property to split the :after element into two columns, and center each label in each of these columns.

That’s where the \a character comes in. Using it, I’m pushing the “Off” label to next line, and since it’s a single line, the next column.

Accessibility

NVDA will read the label as “View, checkbox, not checked, Week Month”. But this is only because the latest version of NVDA(2011.2 right now) also reads generated content. Other screen readers, and especially older versions, don’t read generated content at all. So the “Week” and “Month” labels won’t be available to screen reader users.

This is one of the main downsides of this approach.

The other downside is from a semantic point of view. Checkboxes are just not suitable for for these type of selections, but rather for on/off states.

Add these to the bigger issue, that, even if using a modern screen reader that can read generated content, the read label just doesn’t make proper sense. Which one is selected? Which one is checked or unchecked?

Needless to say, these would be impossible to use using a screen-reader. Which brings me to my next approach.

Checkbox, used properly

Since checkboxes should be used for on/off states, I’m using another one of Orman’s great designs as a starting point, this set of on/off switches.

Markup

You’ll notice I’m using a structure similar to the one used in the radio version, that allows for more flexibility in CSS.

<fieldset>
  <input id="wireless" type="checkbox" />
  <label for="wireless">Wireless:</label>
  <span></span>
</fieldset>

Behaviour

When activated, the switch needs to move the toggle button and change the style of the rail. For this, I use the sibling selectors.

/* Move the toggle button */
input:focus ~ span {
  right: 45px;
}

/* Change the style of the rail */
input:checked + label:after {
  background-color: #a0c66b;
  border-color: #87aa5b;

  color: #60783f;
}

I’ve used the label:after pseudo-element to generate the rail, like in the radio version, and also included the On/Off text labels in it, since they’re on the same depth.

Accessibility

NVDA will read the switch as “Checkbox, not checked. Wireless. Off, On”. Once reached, it can be controlled (checked/unchecked) using the Space or Enter key.

Even if you’re using a screen-reader that doesn’t read generated content, the switch still makes sense, because it will read the checkbox as “checked” or “unchecked”.

It’s usable, but it would be ideal if we could place the label before the input, so that the screen-reader will read it before reaching the checkbox. But we can’t change the order of the elements, since we need to reach the label and span elements using the + and ‘~’ sibling selectors.

Still, it’s not an absolute must, since many form layouts place the checkbox before the label, and people are probably used to it.

Internet Explorer

The switches work right, without transitions, in IE9. But, as usual, IE8 and bellow will need special treatment. There’s two ways you can deal with this.

Either use conditional comments, or classes created with conditional comments, to make the input visible again, and provide standard form controls.

Or, since we don’t really have nothing specific to feature-detect, wrap the switch-specific code in a plain @media all media query. This will make sure browsers that support media queries get the proper switch, while browser that don’t, such as IE8 and bellow or older mobile browsers, get the perfectly usable, standard form controls.

Mobile support

After some quick testing on mobile browsers (Mobile Safari, Android, S60, Opera Mobile and Mini), the only one that seem to properly support the switches is Opera Mobile.

The switches look right in all the browsers, but the toggle buttons don’t move when selected, in either the radio or checkbox versions.

~~I'm working on a solution for this, and will follow-up with a new post addressing mobile support for the switches.~~

I’ve added mobile support for the toggle switches, describing the development process in a new article: Mobile support for the CSS toggle switches.

Any ideas? You can contribute to the css-toggle-switch GitHub repository.

Make your HTML5 media player accessible

2010-12-10T00:00:00+00:00

In my last article regarding HTML5 media, I implemented a customizable, cross-browser video player for the <video> element. This is a good solution for many reasons, including accessibility - HTML5 <video> can be a lot more accessible than plugin-based alternatives, for example in terms of keyboard accessibility out of the box, and easier to customize without the need for a costly IDE.

But our work does not stop there. The solution I have built so far, like other JavaScript-based widgets, still has a number of accessibility concerns in terms of semantics and discoverability, which could be addressed using the W3C Web Accessibility Initiative’s WAI-ARIA specification.

In my latest article on Dev.Opera, I’m trying to address such problems with WAI-ARIA, and add some further accessibility enhancements to the player, such as closed-captions and transcript.

I’m trying to get the best accessible keyboard navigation model possible, that’s why I’m not implementing any custom keyboard shortcuts, combinations, access-keys, or the like. Instead I’m relying on well known, easy to use, tab-based navigation for the player controls. This should make it much easier, especially for people using screen-readers, to find and use the controls.

For the sliders, I’m using the ARIA slider role, and some further attributes to better describe the current position.

To finish up, I’m wrapping the media in a <figure> element, and pointing to a <figcaption> element inside it using aria-describedby to provide a better description of the media element. I’m not totally sold on this markup approach, but when browsers will expose the new HTML5 elements to screen-readers better, we probably won’t need the aria-describedby attribute any longer.

Read the complete article on Dev.Opera: A more accessible HTML5 <video> player.

Source

Build your own customizable HTML5 media player

2010-09-10T00:00:00+00:00

If you’ve been following the latest in web browser tech, you’ve surely noticed the widespread support for HTML5 <video> by now. Even IE9 is supporting it!

There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. This means that we will soon be able to create a single version of the video that will play in the <video> element in most browsers, and the Flash Player in those that don’t support WebM natively.

The other major barrier to consider is building up a custom HTML5 <video> player — this is where a Flash-only solution currently has an advantage, with the powerful Flash IDE providing an easy interface with which to create a customized video player component. If we want to write a customized player for the HTML5 <video> element we need to code all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player!

Tutorial

I’ve recently wrote an article for Dev.Opera addressing the custom media controls issue, and explaining step-by-step how you could create your own HTML5 media player “shell”, using jQuery, the slider component from jQuery UI and some CSS3 wizardry.

Read the article on Dev.Opera, here: Building a custom HTML5 video player with CSS3 and jQuery.

Open Source

What started out more as a proof-of-concept video player ended up being a usable jQuery plugin.

Therefore, I’m constantly trying to improve it, and looking for suggestions. So feel free contribute code or report issues on the acornmediaplayer GitHub repository.

You can also check out the Acorn Media Player project page for some demos and documentation on how to use the plugin.

ghinda.net

Nudgeti - waste less time on distracting websites

Nudgeti

Notifications

Privacy

Simple PouchDB view management

View code

Querying views

Solution

Demo

CouchDB

Downscaling large images in Canvas

pica

Improved JavaScript debouncer

Existing approaches

Improved debouncer

Performance

lodash

Run script tags in innerHTML content

document.write

eval

createContextualFragment

document.createElement

type attribute

DOMContentLoaded

Execution order

Script running

Mimic native browser focus styles

Defaults

Custom focus

Material design ripples with CSS

Buttons

Checkboxes and radios

Drawbacks

Simple Angular scope namespacing

Turn your old Android phone into a media center

Optware for Android

Configure SSH

Configure Samba

Configure Transmission

Configure FlexGet

Configure autorun and scheduling

Dual Mount

Thanks Webmonkey

Community driven development

From Brunch to Yeoman

Same thing, different tools

Competition vs. Collaboration?

Google Tasks sidebar in Gmail

Send a JPEG Blob with AJAX on Android

Get image from canvas

Blobs

Sending the Blob with AJAX

Bug reports

I love Adaptive Web Design poster design process

Concept

Inspiration

The Tower

Final version

Mobile support for the CSS toggle switches

Mobile Webkit

Opera Mini

The Script

CSS toggle switches

Radio

Accessibility

Switch button

Look

Behavior

Active label

Checkbox

On/Off Labels

Accessibility

Checkbox, used properly

Markup

Behaviour

Accessibility

Internet Explorer

Mobile support

Make your HTML5 media player accessible

`document.write`

`eval`

`createContextualFragment`

`document.createElement`

`type` attribute

Get image from `canvas`