We're growing into something new. Read More
rx

Tom Rix  Pro


// Take control of your radio inputs
$('input[type=radio]').customRadio();

Introducing jQuery.customRadio

A simple (and tiny, at 0.6kb) jQuery UI widget to pretty up radio elements. All display is done using CSS, so you can wrangle it to look however you like. Since it works by manipulating and reading the events right off your native radio inputs, it fully respects tabbing and keyboard navigation/selection of items. This also means you can call the standard jQuery val methods, bind to the change event, etc right on the native element. It also respects the disabled attribute and works with labels. As usual, it's fully unit tested with tests passing in IE7/8/9, Chrome, Safari and Firefox. http://rixth.github.com/customRadio/ - code, tests and full documentation The company I work (and made this) for is hiring awesome web developers. We're an industry leading data company, so we do cool data visualization too. Please check our senior frontend engineer job description and contact me with any questions. You might also like my other form related widgets, jQuery.bubbleBox and jQuery.customSelect.

    $('#yourBoringSelects').customSelect();

Introducing jQuery customSelect

A jQuery UI widget to transform your select elements in to powerful beasts. Not only do they look better, and are customizable using CSS, it also lets your users insert their own custom values. This is great for search forms where users want to be able to enter their own search range. There's hooks for validating the user's range/setting error messages, and controlling exactly what is displayed in the "window" along with the hidden data value. The best bit: it's all manipulating a normal <select> in the background and firing all the same events. So, if you already have code reading the val(), or bound to the change() event, no problem! This also means you don't need to do anything extra when you submit your form. As usual, it's fully unit tested with Jasmine (~500 lines of tests, vs. 250 lines of app code), with tests passing in IE7/8/9, Chrome, Safari and Firefox. http://rixth.github.com/customSelect/ - code, tests and full documentation The company I work (and made this) for is hiring awesome web developers. We're an industry leading company. We do cool data vis too. Please check out this job description and hit me up with any questions. You might also like another of my form related widgets, jQuery.bubbleBox.

    $('#emailAddressses').bubbleBox();

Introducing jQuery bubbleBox

A simple jQuery UI widget to manage a list of items. It's fully unit tested too, using Jasmine. There's hooks to do things like data validation. You can remove items by hitting the little x on each item, or by pressing delete when the input field is empty. http://rixth.github.com/bubbleBox/ - full readme & code The company I work (and made this) for is hiring awesome web developers. We're an industry leading company. We do cool data vis too. Please check out this job description and hit me up with any questions. You might also like another of my form related widgets, jQuery.customSelect.

Discussion

JSBeautify extension for Google Chrome

This is a simple Chrome extension that will detect if you're looking at a JavaScript file and offer to format is using JSBeautifier. Clippy moves out of the way automatically after 4 seconds. Woohoo! It's now linked on the homepage of JSBeautifier. Install from Chrome Extension Gallery (you can turn Clippy on/off in the options). If you don't dig Clippy, there's a version which uses an alert bar instead (it's a boolean value inside js/application.js whether you want to use Him or not).

svn revert --depth=infinity . && svn up && svn st|grep "^?"|awk '{print $2}'|xargs rm -rf

SVN mega revert

This command will reset your working copy to it's original state. It'll svn revert everything that has changed, and remove files that are unknown to SVN (those that start with ? in svn status). You may also need to svn up if there are things missing from your checkout that you've removed. Use with care, if run in the wrong directory, could rm -rf stuff you want.

::-webkit-input-placeholder {
  font-style: italic;
  color: red;  
}

:-moz-placeholder { /* buggy! */
  font-style: italic;
  color: red;
}

Bug when styling the placeholder attribute in Firefox & Webkit

This is the syntax described by the browser manufacturers for styling the default text in the HTML5 placeholder="" attributes on elements. The Webkit one works as expected, making your text italic and red. The Mozilla rule, however, only changes the font-style. If you want the color rule to apply in Mozilla too, you need to change the selector to: input:-moz-placeholder Raw Code » I'm not sure what other properties are subject to this bug, so if you notice cross browser weirdness, try increasing the specificity of the selector you're using. I have also noticed the selectors do not play nicely together, the following CSS does nothing in both browsers. ::-webkit-input-placeholder, input:-moz-placeholder { font-style: italic; color: #888; } Raw Code »

assertTrue(jshintr.makesBetter('yourCode'));

// JSHintr is an intuitive web interface to JSHint.
// Just change your URL from .js to .jshint, it's that easy.

JSHintr: an elegant server-based javascript code quality tool

One barrier to people running jshint is that it's a pain to constantly be copy/pasting code to a textbox to run checks, or to be dropping to a command line. This app aims to help lower this wall, all you have to do is change the URL in your browser from ".js" to ".jshint" and you get pretty output. If you disagree with a certain issue jshint has raised, you can mark it as skipped. Every issue raised is provided with a code sample with context that expands on hover, even marking the specific characters that were problematic. It's all written in JavaScript using the express framework and the code-checking is handled by JSHint. There's a bunch of screenshots at the URL below. The code is all up on GitHub too, just for you. I'm really eager to get some feedback here, so please comment, contact or raise issues on GitHub. JSHintr on GitHub

use 5.10.0;
use File::Spec::Functions qw(rel2abs);
use File::Basename;

sub combine_css_file {
  my ($root_file, $root_file_dir, $root_file_handle, $css_content, $i);
  my ($sub_css_handle, $sub_css_path, $sub_css_content, $sub_css_dir);
  my ($lines, $old_dolla_slash, $css_files_included);
  
  $root_file = rel2abs($_[0]);
  $root_file_dir = dirname($root_file);
  
  # Unset $/
  $old_dolla_slash = $/;
  undef $/;
    
  # Add this file to the list of things imported already
  @css_files_included = ($root_file);
  
  # Get root file contents
  open $root_file_handle, $root_file;
  $css_content = <$root_file_handle>;

  # Process lines, looking for @imports
  @lines = split("\n", $css_content);
  for ($i = 0; $i < scalar(@lines); $i++) {
    # printf("Checking %d: %s\n", $i, $lines[$i]);
    if ($lines[$i] =~ /@import url\((?:'|"|)(.+?)(?:"|'|)\);?$/) {
      # Resolve full path, and do sanity checks
      $sub_css_path = rel2abs($1);
      
      
      # Skip css files already included, to avoid infinite loops
      if (!grep(!$sub_css_path, @css_files_included)) {
        push(@css_files_included, $sub_css_path);
        
        open $sub_css_handle, rel2abs($sub_css_path);
        $sub_css_content = <$sub_css_handle>;
        
        # Rewrite the imports in here so they can be nested correctly    
        $sub_css_dir = dirname($sub_css_path);    
        $sub_css_content =~ s/@import url\(('|"|)/@import url($1$sub_css_dir\//g;
        
        # Tack on a line stating the origin
        $sub_css_path =~ s/$root_file_dir\///g;
        $sub_css_content = sprintf("\n/* Built from: %s */\n%s", $sub_css_path, $sub_css_content);
        
        splice(@lines, $i, 1, split("\n", $sub_css_content));
      }
    }
  }

  # Reset $/
  $/ = $old_dolla_slash;

  # Return the goodness
  sprintf('%s', join("\n", @lines));
}

CSS deployment script that finds your @import's and injects them directly in to your CSS

This is a Perl 5.10 subroutine that takes a CSS file path as an argument. It loads this file, parses through it looking for @import rules. When it finds one, it loads that file's contents, and puts it in place of the @import statement that included it. It allows you use use @import in dev, which is nice since it lets you break apart your CSS and still maintain line numbers in your browser based tools, but with no performance hit when it comes time to go live.