Facebook Twitter

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery) Posted by Maggie on 07/01/2009 Topics: accessibility css javascript jQuery progressive enhancement ui design visual design web standards Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

In the past few years web application interface designs have evolved from flat metal gray to having rich color palettes and dimensional background images thanks to the adoption of web standards and advanced CSS techniques. When considering how to build our own customized input script, we set out to do as little as possible — on their own, checkboxes and radio buttons capture data and display feedback, and we wanted to use that native functionality and not reinvent it using JavaScript.

Demo jQuery CustomInput plugin demo by Filament Group Markup <form><fieldset><legend>Which genres do you like? Styles Script Usage. WebSocket and Socket.IO. My favorite web technology is quickly becoming the WebSocket API.

WebSocket and Socket.IO

WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently and with a simple syntax. Let's take a look at the HTML5 WebSocket API: its use on the client side, server side, and an outstanding wrapper API called Socket.IO. What is the WebSocket API? The WebSocket API is the next generation method of asynchronous communication from client to server. What's great about the WebSocket API that server and client can push messages to each other at any given time. AJAX technology was a clever usage of a feature not designed to be used the way it is today. WebSocket API Usage var socket = new WebSocket(' socket.onopen = function(event) { socket.send('I am the client and I\'m listening!') Let's take a look at the individual pieces of the snippet above.

WebSocket with Socket.IO node socket-server.js. Underscore.js. Backbone.js. Paper.js. CodeMirror. Pjscrape: A web-scraping framework written in Javascript, using PhantomJS and jQuery. Overview pjscrape is a framework for anyone who's ever wanted a command-line tool for web scraping using Javascript and jQuery.

pjscrape: A web-scraping framework written in Javascript, using PhantomJS and jQuery

Built to run with PhantomJS, it allows you to scrape pages in a fully rendered, Javascript-enabled context from the command line, no browser required. Features Client-side, Javascript-based scraping environment with full access to jQuery functions Easy, flexible syntax for setting up one or more scrapers Recursive/crawl scraping Delay scrape until a "ready" condition occurs Load your own scripts on the page before scraping Modular architecture for logging and writing/formatting scraped items Client-side utilities for common tasks Growing set of unit tests In its most concise syntax, pjscrape makes scraping a webpage as easy as this: And crawling a set of webpages as easy as this: Ok, that's 14 lines with comments.

Tutorial Writing Scrapers The core of a pjscrape script is the definition of one or more scraper functions. Asynchronous Scraping Docs coming soon. A Conditional Loader For Your Polyfills!