i am aldomatic

Audio

Wed, 22 Aug 2012 23:57:41 -0400

What are CSS Shaders?

Tue, 14 Aug 2012 12:37:22 -0400

Adobe announced a proposal for CSS Shaders at Adobe Max two days ago. This was backed by both Opera and Apple, and the spec will be developed by the FX Task Force at the W3C. For those of you who are not aware, the FX task force is an elite band of ninjas’s chosen from the ranks of the CSS…

Pick me up!

Thu, 09 Aug 2012 14:31:51 -0400

Pick me up!

Audio

Thu, 02 Aug 2012 15:00:35 -0400

MSN homepage has a jQuery syntax error in IE9! Ha!

Thu, 26 Jul 2012 15:49:15 -0400

MSN homepage has a jQuery syntax error in IE9! Ha!

Work fuel!

Thu, 19 Jul 2012 14:31:23 -0400

Work fuel!

working on a design.

Wed, 18 Jul 2012 09:29:58 -0400

working on a design.

Clever message when mobile site is in landscape mode.

Fri, 13 Jul 2012 11:34:25 -0400

Clever message when mobile site is in landscape mode.

Volleyball time!

Fri, 13 Jul 2012 11:31:25 -0400

Volleyball time!

backbone.layoutmanager

Tue, 05 Jun 2012 20:39:34 -0400

backbone.layoutmanager:

backbonejs:

Provides a logical structure for assembling layouts with Backbone Views. Designed to be adaptive and configurable for painless integration. - Created by Tim Branyen @tbranyen

9-bits: Leap represents an entirely new way to interact with...

Mon, 21 May 2012 15:49:33 -0400

9-bits:

Leap represents an entirely new way to interact with your computers.

Seems like a great way to avoid fingerprint-covered screens, as we propel into our gesture-based future. I’m impressed that they’re going straight into production with this — and curious to hear how usable it actually is.

6 Tools to Build a Mobile App on the Cheap

Wed, 09 May 2012 18:25:01 -0400

6 Tools to Build a Mobile App on the Cheap:

The massive growth of the app market has coincided with the creation of a parallel niche industry — the proliferation of accessible, low-cost development alternatives to traditional shops and agencies.

mobilelicious: In this highly entertaining and lively...

Wed, 09 May 2012 14:18:57 -0400

mobilelicious:

In this highly entertaining and lively presentation, Brian discusses the current status of HTML5 before moving into Device APIs, possibilities, and challenges. Topics discussed range from Installable Web Apps, Carrier APIs, WebRTC, the highly ironic Battery API, PhoneGap, and Boot2Gecko.

Inspect and preview web workflows on iOS and Android devices

Mon, 07 May 2012 14:58:14 -0400

Inspect and preview web workflows on iOS and Android devices :

Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Shadow will be updated regularly to stay in sync with web standards, web browser updates and support for new mobile devices entering the market, while incorporating user feedback to provide the best functionality and experience possible.

Use A JavaScript Confirm Dialog To Give Users Option Between Mobile or Desktop View

Mon, 07 May 2012 11:17:48 -0400

Use A JavaScript Confirm Dialog To Give Users Option Between Mobile or Desktop View:

The idea was to use the native look of the confirm box to give the user an option between viewing the site in a mobile view or stay on current view. I used a setTimeout method so i can have it fire 3 seconds after the pages has rendered in all its glory. The code below is pretty simple and straight forward.

You’ll never believe how LinkedIn built its new iPad app

Fri, 04 May 2012 14:52:03 -0400

You’ll never believe how LinkedIn built its new iPad app:

Guess how much of LinkedIn’s new iPad app is actually mobile web and not native.

Go ahead — guess. We’ve had a lot of fun asking people to guess this over the past couple days. They’ll start with 40 percent and edge up to 70 percent, but no one comes close to the real figure: 95 percent.

Yes, only one screen in the entire LinkedIn iPad app is actually native. The rest is good ol’ HTML5-based mobile web technology, running in the browser and leaning heavily onNode.js.

Windows and Node: Getting Started

Fri, 04 May 2012 14:22:54 -0400

Windows and Node: Getting Started:

In Windows and Node, we’ll take a look at Windows-centric Node development. In the first part, we’ll install Node (which now includes npm), take a look at the basics, then make a little Express web application to prove it’s generally portable with existing Node modules.

taitems: iOS Inspired jQuery Mobile Theme jQuery Mobile doesn’t...

Fri, 27 Apr 2012 13:22:15 -0400

taitems:

iOS Inspired jQuery Mobile Theme

jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems.

The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.

There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.

But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.

Some Caveats

To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.

The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.

Plenty of elements still remain unstyled, or are missing hit state styling.

Cross browser compliance is a low priority.

This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.

Some Issues This Exposes in jQuery Mobile

Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.

Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.

It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)

I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■

Adventure of writing jQuery code with CoffeeScript

Wed, 07 Dec 2011 17:25:00 -0500

I wanted to give CoffeeScript a try and decided to give it a go on current jQuery project. Below is a sample of the code.

CoffeeScript Code

$ ->	 
	### 
	--- Variables Init
	### 
	menuStatus = false
	newAlertsMenu = false
	### 
	--- Show Main Menu
	### 
	$("a.showMenu").live 'tap', ->
		if !menuStatus then $(".ui-page-active").animate
			marginLeft: "165px", 280, ->  
				menuStatus = true 
				return false	 
		else 			
			$(".ui-page-active").animate
				marginLeft: "0px", 280, ->  
					mentuStatus = false
					return false
	return 		
	### 
	--- Show New Alerts Panel
	###
	$("a.headerAlerts").live 'tap', ->
		if !newAlertsMenu then $("body").addClass("activeMenu"); $("#newAlerts").css("display", "block"); $(".ui-page-active").animate
			left: "-200px", 280, ->  
				newAlertsMenu = true
				return false

		else
			$(".ui-page-active").animate
				left: "0px", 280, ->  
					newAlertsMenu = false; 
					$("body").removeClass("activeMenu"); 
					$("#newAlerts").css('display','none');
					return false
	return

Generated jQuery Code

  $(function() {
    /* 
    	--- Variables Init
    */
    var menuStatus, newAlertsMenu;
    menuStatus = false;
    newAlertsMenu = false;
    /* 
    	--- Show Main Menu
    */
    $("a.showMenu").live('tap', function() {
      if (!menuStatus) {
        return $(".ui-page-active").animate({
          marginLeft: "165px"
        }, 280, function() {
          menuStatus = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          marginLeft: "0px"
        }, 280, function() {
          var mentuStatus;
          mentuStatus = false;
          return false;
        });
      }
    });
    return;
    /* 
    	--- Show New Alerts Panel
    */
    $("a.headerAlerts").live('tap', function() {
      if (!newAlertsMenu) {
        $("body").addClass("activeMenu");
        $("#newAlerts").css("display", "block");
        return $(".ui-page-active").animate({
          left: "-200px"
        }, 280, function() {
          newAlertsMenu = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          left: "0px"
        }, 280, function() {
          newAlertsMenu = false;
          $("body").removeClass("activeMenu");
          $("#newAlerts").css('display', 'none');
          return false;
        });
      }
    });
  });

jQueryMobile Pinky Theme

Tue, 29 Nov 2011 11:26:32 -0500

Last night i started a new jquerymobile theme that i will offer for free. I should have this one finished out by the end of the week. There is a preview link below for now. Check back later for the download link.

Preview Theme