Catch UI regressions with Huxley from Facebook

Pete Hunt and Maykel Loomans (from Instagram) launched Huxley a little while back. It’s a test-like system for catching visual UI regressions in web applications — similar to a test suite for code, but instead it takes screenshots as you browse and compares them to a known good version of your site.

An implementation of Facebook’s ChatHeads on iOS #

If you’re a fan of Facebook 6.0 with Chat Heads you’re gonna love this.

This project is an attempt to re-implement this feature and to figure out how the animations are done. I don’t support this project in a way to completely implement all features of ChatHeads. It should only illustrate how parts of ChatHeads are done.

Yours truly even has a commit. Sure, it’s just a spelling change, but that’s all it takes.

Check out the source on GitHub.

ht/ @Soffes

Xray-rails reveals which files are being rendered in your view #

When I pair with Railsbridge attendees or new developers, I often wish I had a visual way to let them see the connection between the files in the codebase and what’s rendered in the browser. Today Ruby 5 featured Xray and a number of friends contacted me about checking it out. In no time I knew I’d found the solution.

I gave it a test drive on one of the student apps and it took 5 minutes, at most, to get up and running.

Just drop this in your Gemfile:

group :development do
  gem 'xray-rails'
end

Bundle and delete the cached assets:

$ bundle && rm -rf tmp/cache/assets

Restart your app, visit it in your browser, and press cmd+shift+x

xray-rails

By far the best feature in Xray is the fact that it allows you to actually click on the overlay and go straight to the file or partial being rendered. It defaults to Sublime, which is easy for new users, but is simple enough to customize to another tool for seasoned pros.

Xray is great for:

  • Helping new Rails developers while pairing to get clearer understanding of views
  • Gaining quick insight into complex views
  • Debugging templates, partials, and backbone views

See Xray in action

Right now Xray is a tool for the Rails framework but there are plans to expand and make it available for any framework. You can check it out on Github.

Skycons from the makers of Forcast and Dark Sky released as open source #

Sometimes you just have to do something for yourself to get the effect, or a certain “je ne sais quoi” if you will, that’s needed to complete the aesthetic of an interface. That’s exactly what the makers of Forecast did.

Skycons Example

For most of its development, Forecast used Adam Whitcroft’s Climacons, but they lacked the animations seen elsewhere in the app. As mentioned in the announcement post, “the Climacons simply felt too flat, too static; we therefore set about making our own set of animated weather icons that felt more alive.”

The result? Skycons — a set of ten animated weather glyphs, generated by JavaScript using Canvas and heavily inspired by Adam Whitcroft’s Climacons.

Check out the Skycon’s homepage or the source on GitHub if you’re looking to learn from or hack on the project.

Flat UI user interface kit from Designmodo #

If you haven’t heard, flat design is pretty trendy right now.

Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo.

A month ago they released Flat UI, a free and open source user interface kit. If you were paying close attention, you’d know that LayerVault slapped them with a DMCA take-down notice issued to GitHub saying “I am the exclusive rights holder for the artwork contained within Flat UI, Free Web User Interface Kit; These exclusive rights are being violated by material available upon your site at the following URL designmodo.github.com/Flat-UI” — but that take-down has since been lifted and the air is clear. In the end LayerVault was simply saying that a few of the icons were way too close to their original flat UI designs and had to defend themselves. It happens.

You should check out Flat UI — even if just to get some ideas on creating your own UI kit.

HTML5-Clear: A replica of the Clear iPhone UI in HTML5 and CSS3 #

If we’re fans of anything, we’re fans of experiments that get open sourced.

As a followup to our native coverage of Clear’s UI with JTGestureBasedTableViewDemo, you might enjoy this experiment by Evan You to replicate the UI of Clear in HTML5 and CSS3.

HTML5 Clear

HTML5 Clear is a replica of the awesome Clear iphone app (UI only) featuring the innovative gesture controls and the look and feel in HTML5 using CSS3 transitions.

While Evan might not have been able to get 100% of the details right, it comes pretty close and there’s certainly something to learn from the codebase.

Source on GitHubDemoVideo

UIKit – Modern UI components for the modern web #

TJ is at it again. The creator of Express, Stylus, and other projects you probably use has released UIKit, a lightweight web UI component library. Let’s be honest, most JavaScript UI component libraries are bloated, tangled messes. UIKit aims to be leaner yet object-oriented. Consider this ColorPicker example:

var picker = new ui.ColorPicker;
picker.el.appendTo('#default-color-picker');
picker.on('change', function(color){
  $('.r').text(color.r)
  $('.g').text(color.g)
  $('.b').text(color.b)
  $('.rgb').text(color.toString()).css('background', color)
});

Color Picker

Check the project web site or source for a list of components and usage.

UIDickBar: Annoying Twitter style #dickbar for your iOS apps #

Ever wanted to add an obtrusive Dickbar to your iOS apps?

Dickbar

Wait no more, for Ching-Lan HUANG 黃青嵐 AKA @digdog has packaged up this UI tragedy for you to use in less than ten lines of Objective-C:

UIDickBar *dickBar = [[UIDickBar alloc] initWithDickTitle:@"#DickBar" dickBadge:@"Stupid" actionBlock:^{
    // Anything you want to do after UIDickBar tapped
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://digdog.tumblr.com"]];
}];
[dickBar showInView:self.view];
[dickBar release];

[Source on GitHub] [Blog post]

navigasmic: Semantic navigation for Rails #

Site navigation isn’t rocket surgery. But how many times have you gone down this route? You plop that <ul> into your header and then add <li>’s with each of your site navigation links. Then you need to make one of them highlighted based on the current page. Suddenly your nice clean view code gets a lot less readable as you handle conditional logic for setting the highlighted state, not to mention any sub navigation for the selected item. Try as you might to pull as much code into view helpers as you can, straddling the line between Haml or ERB and Ruby helpers never quite seems like a clean fit.

Jeremy Jackson has created an elegant solution with Navigasmic which aims to be simple, customizable, and pleasant to use while using less code than it generates. It features:

  • A clean API, leading to cleaner views
  • Support for Haml and ERB
  • Nested site navigation
  • Highlighted states
  • Disabled states
  • XML sitemaps

Installation

To install Navigasmic, configure the gem in your Gemfile

gem "navigasmic"

… and run

bundle install

In your view, use the semantic_navigation helper method to build your navigation. Here’s an example:

- semantic_navigation :main do |n|
  = n.group 'Media', :html => {:class => 'media'} do
    = n.item 'Image Gallery', :link => {:controller => 'media/images'}
    = n.item 'Videos', :link => {:controller => 'media/videos'}
  = n.group 'Info' do
    = n.item 'About Us', :link => '/about_us', :html => {:title => 'we are the coolest'}
    = n.item 'Nothing Here'

This produces the following HTML:

<ul id="main" class="primary semantic-navigation">
  <li id="media" class="with-group">
    <span>Media</span>
    <ul>
      <li id="image_gallery"><a href="/media/images"><span>Image Gallery</span></a></li>
      <li id="videos"><a href="/media/videos"><span>Videos</span></a></li>
    </ul>
  </li>
  <div class="secondary">
    <li id="info" class="with-group">
      <span>Info</span>
      <ul>
        <li id="about_us">
          <a href="/about_us"><span>About Us</span></a>
          <ul>
            <li id="nothing_here"><span>Nothing Here</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </div>
</ul>

Highlighting

One of the most powerful Navigasmic features is the range of highlighting options:

- semantic_navigation :main do
  = n.item 'Image Gallery', :link => 'media/images'
          :highlights_on => [{:controller => 'media'}, /images/, proc { Time.now.wday == 1 }]

Simply pass an array of options as :highlights_on including url_for options, strings, Regexes, even Ruby procs. If the highlighting criteria is met, the <li> gets a highlighted CSS class:

  <ul id="main" class="semantic-navigation">
    <li id="image_gallery" class="highlighted"><a href="/media/images"><span>Image Gallery</span></a></li>
  </ul>

Be sure and check the Readme for advanced usage including disabling options, XML sitemaps, and more.

[Source on GitHub]

reveal: jQuery modal for HTML5 and data attributes #

The Zurb team has long pushed the envelope of CSS3. Now they’ve released a simple plugin for jQuery that uses HTML5 data attributes to wire up links to modal dialogs. To use, you’ll need jQuery, the plugin, and the base CSS:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

To create a dialog, just create a <div> with a reveal-modal class and an ID:

<div id="theModal" class="reveal-modal">
    <h1>Listen to the Changelog</h1>
    <p class="lead">The Changelog is hands-down the best Open Source podcast on the interwebs.</p>
    <a class="close-reveal-modal">×</a>
</div>

Screencap

Now, we just need a link or button to open the dialog, wiring up via the data-reveal-id attribute:

<a href="#" data-reveal-id="theModal">What's the greatest tech podcast?</a>

Reveal also supports advanced options such as animation, animation speed, and close button behavior, specified in additional data-* attributes:

<a href="#" data-reveal-id="theModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">What's the greatest tech podcast?</a>

If you like Reveal, be sure and check out Orbit, a slick jQuery content slider plugin.

[Source on GitHub] [Reveal project page]

fancy-buttons: Fancy CSS Buttons using Sass and Compass #

Fancy buttons is a Compass Extension written in Sass (installable as a gem) that helps you to easily generate beautiful, flexible CSS3 buttons. It’s written and maintained by Brandon Mathis and he recently announced the 1.0 release of Fancy Buttons.

Listen to Episode 0.0.1 (our first episode) to learn more about Compass

How to Install

First things first we need to get compass and the fancy buttons gem installed.

gem install compass
gem install fancy-buttons

To create a new project based on fancy-buttons:

compass install -r fancy-buttons -f fancy-buttons /path/to/project

To add fancy-buttons to an existing compass project, add this to your configuration file (rails: compass.config, other: config.rb):

require 'fancy-buttons'

Then import fancy-buttons in your sass file:

@import "fancy-buttons";

What’s It Doing?

Below are details of what CSS rules this mixin handles for you:

  • Button reset – to get browsers to the same starting point
  • CSS3: Rounded corners, Text shadows, Gradients, Inset box shadows, and browser vendoring
  • Background image fallback
  • Padding, Text size, line-height, etc
  • Default, Hover, and Active states for all styles
  • Lots of tricky color math to generate beautiful gradients from one color

If you were writing the actual CSS for this (and not leveraging Sass), it would be a lot of CSS to write. Fancy buttons has taken the pain out of the way and effectively reduced all that thinking and math down to a single Sass mixin. Of course, it’s also great that you get to use the bare minimum HTML.

[Source on GitHub] [Homepage] [Demo]

Wijmo Open – Open Source jQuery UI Widgets #

Thanks to Chris Bannon for letting us know about Wijmo.

Wijmo Open is a complete kit of jQuery UI widgets. Wijmo is an extension to jQuery UI and adds new widgets and features to your arsenal. Every widget was built to jQuery UI’s standards and framework. Some widgets like slider and dialog literally extend their counterpart from jQuery UI. Each widget is ThemeRoller-ready and comes styled with our own theme called Aristo.

By the looks of things, this project was just Open Sourced this past week (October 20th, 2010). Documentation is still pending (maybe this Friday), but they have a nice little demo for you to check out. Also be sure to check out the samples directory of the project for usage details.

Visit the Wijmo Forum for discussions and questions, but you’ll need to register for an account. Wijmo Open can be licensed under the MIT or GPL licenses.

Wijmo Open also has a commercial counterpart. If you’ve used Wijmo, be sure to tweet or email us at ping@thechangelog.com.

Check out the codes

[Source on GitHub]. Documentation? [Read their blog] for now.

HotCocoa: MacRuby HotCocoa UI library #

HotCocoa is a thin & idiomatic Ruby layer that sits above Cocoa and other frameworks, developed by Rich Kilmer. MacRuby 0.5, which was recently rev’d, now supports HotCocoa.

HotCocoa used to be developed inside the MacRuby project, but we decided that it would have a better life on GitHub, where it is far easier for developers to submit contributions…

HotCocoa also has been transformed as a gem and is included in the 0.5 package installer. Be sure to require rubygems before using it.

To see more information on HotCocoa (including tutorial) see macruby.org.

require 'rubygems'
require 'hotcocoa'
include HotCocoa
application do |app|
  win = window :size => [100,50]
  b = button :title => 'Hello'
  b.on_action { puts 'World!' }
  win << b
end

Installation

sudo macgem install hotcocoa

(Please note ‘macgem’ instead of ‘gem’)

[Source on GitHub] [Homepage]

UKI – simple UiKit for complex web apps #

UKI doesn’t aim to be a broad framework but is instead a JavaScript user interface toolkit for desktop-like web applications. It handles layout and aims to do it well.

Simple example

uki({ view: 'Button', text: 'Click me', rect: '10 10 100 24' }).attachTo( window );

uki('Button[text^=Click]').click(function() { alert(this.text()); });

[Source on GitHub] [Homepage] [Examples and Demos]

Qt 4.6: The Trailer #

Qt is a cross-platform application and UI framework. Qt 4.6’s QtScript implementation is based on WebKit’s JavaScript engine, JavaScriptCore (you might’ve also heard it being referred to as “SquirrelFish” or “SquirrelFish Extreme”).

[video] [learn more]