With jQuery Mobile, you develop your mobile application with HTML5 and JavaScript/jQuery. With jQuery Mobile, all of your UI is written in pure HTML5 tags with the correct CSS classes and attributes. jQuery Mobile is built on top of jQuery so many web developers can immediately start being productive with jQuery Mobile.

Everybody has an idea for the next great iPhone application. The top reasons I’ve heard from people, including from developers, as an excuse for not getting started is that they don’t have a Apple computer, they don’t want to learn another programming language, they don’t have time, etc. jQuery Mobile invalidates all of these excuses. You can use Firefox or Chrome to test your jQuery Mobile application, you develop using plain HTML5 and JavaScript, and most it’s easy to pick up.

Because a jQuery Mobile application is just a HTML5-based web application, if your an run it on your iPhone or other mobile device using the native web browser. On the iPhone, when you run a jQuery Mobile application the browser will take up a small portion on the screen for the navigation buttons, bookmarks, and other controls of the browser. One way to claim all of the screen real-estate is to create a native application, that is where PhoneGap comes in. PhoneGap is a native shell around a web application, such as those developed in jQuery Mobile. With PhoneGap, you can turn your jQuery Mobile application into a full fledged native application.

Top Favorites

• Laws of Source Code and Software Development
• Repetative Recursion
• Technology and Politics
• Being a Better Rails Developer
• Programming Memes
• Developer’s Perpetual Todo List

Fav Tutorial

• Anatomy of a JavaScript Bookmarklet
• Dynamically Create HTML Elements with JavaScript
• Grinding Griffon
• The 1KB CSS Grid
• Download Twitter Profile Images Using Ruby
• Jamming with Ruby YAML

Memorable Quotes

• Quotable Calacanis
• Quotable DHH
• Favorite Programming Quotes 2009

Twitter

• Twitter Ruby Gem
• Twitter Business Model
• The Three Laws of Twitters
• Twitcode
• Songs in Code

Twitter Conversations

• Remote Debug Your Thinking Process
• All Code is Inherently Evil
• The Mayor of Dead Space

Year in Review

• 2008
• 2007
• 2006
• 2005

1Kb CSS Grid

For my requirements I found when using The 1Kb CSS Grid that I tend to get more flexibility when I use 12 columns at 60 pixel wide each column and a gutter of only 10 pixels. The total grid width for this layout is 840px. If you peek in the generated grid.css you will find, with our configuration, 12 grid classes, such as grid_1, grid_2, etc. Think of grid_1 as a single column, and grid_2 as a one cell that spans two columns. You can have any number of rows, but each row you only have 12 columns. For example, you can have one grid_12, or three grid_4, or 12 grid_1 per row. Lets see the HTML for a few rows and how they would end up looking.

<div class="row">
  <div class="column grid_12">12</div>
</div>
<div class="row">
  <div class="column grid_6">6</div>
  <div class="column grid_6">6</div>
</div>
<div class="row">
  <div class="column grid_1">1</div>
  <div class="column grid_2">2</div>
  <div class="column grid_4">4</div>
  <div class="column grid_5">5</div>
</div>

Basic Grid Layout

Notice that each row can have any number of grids, as long as the grid count adds up to 12. You can also nest rows

<div class="row">
  <div class="column grid_8">8
    <div class="row">
      <div class="column grid_4">4</div>
      <div class="column grid_4">4</div>
    </div>
  </div>
  <div class="column grid_4">4</div>
</div>

As a tip, just remember that the grid count in the nested row must add up to the parent/containing column grid count. Below is a dramatization of what a CSS grid row with a nested row would look like.

Many of the features that are high lighted in Chrome are not necessarily revolutionary, instead I would say that the Google browser is retro-evolutionary. Chrome basically reduced the browser to the location bar, tabs, and content page.

The most touted features in Chrome are its crash control, incognito mode, and safe browsing. Chrome runs each web page on its own process so that if one page fails only that page is effected. Incognito mode is like Safari’s Private Browsing, aka Porn Mode, it allows you to surf the web without caching cookies and history of the sites you visit on your local computer. It’s safe browsing feature will help you to identify web sites with malicious code or applications. Many of these features are not entirely novel, so why would Google go to the efforts of creating a new browser?

What I think is novel is that Google decided to release yet another browser. The browser space is already crowded with Firefox, IE, Safari, Opera, Konqueror, and Flock to name just a few. It is clear that Google will align Chrome with its properties, search, applications, development tools, and user generated content sites. Seeing Google take this approach I wonder if other companies follow suit and release internet browsers that compliment their business. Can you imagine a custom browser from Adobe, Mcaffee, Oracle, Amazon, or EBay?

Via Noise to Signal

Technorati Tags: google, chrome, firefox, ie, browser, adobe, oracle

The general structure of the HTML used by the web page that I will be scraping is something like the following.

<div class=”post”>
<div class=”date”>
Sun
<em>
May
<big>18</bi>
</em>
</div>

<div class=”link”>
<a href=”http://www.juixe.com” class=”link”>Juixe TechKnow</a>
</div>
</div>

One thing to note about the HTML produced by the site we will scape is that the date is optional in the post. The date is only displayed once for a day, so some posts don’t have a given date. Also, there are several other types of posts such as quotes, images, etc. We are only interested in posts with links. Again, the Ruby/Hpricot script will only gather the links for the past week.

require ‘rubygems’
require ‘hpricot’
require ‘open-uri’
require ‘parsedate’

# Convert days to number to seconds
def days_to_sec(days)
secs = days.to_i
secs *= 24
secs *= 60
secs *= 60
secs
end

# pretty print the link in a list
def print_link(link)
print ” <li>”,
“<a href=’#{link.attributes['href']}’>”,
“#{link.inner_html.strip}”,
“</a>”,
“</li>\n”
end

def get_links(doc)
curr_date = Time.new
(doc/”div.post”).each do |post|
post_date_elem = (post/”div.date/em”)
date = post_date_elem.inner_html.strip

# Parse the date of the post
if date != “”
date_day = (post_date_elem/”big”).text
date_mon = nil
date.each_line do |line|
date_mon = line.strip if date_mon.nil?
break if date_mon.nil?
end
date_str = “#{date_mon} #{date_day}, #{$week_ago.year}”
data = ParseDate.parsedate date_str
curr_date = Time.local data[0], data[1], data[2]
end

# Stop if already looking past one week
break if curr_date < $week_ago

# Handle all links in post
(post/”a.link”).each do |link|
print_link link
end
end

if curr_date > $week_ago
next_page = Hpricot(open($rubyist_next))
get_links next_page
end
end

# The Rubyist home page to be scraped
$rubyist_home = “http://rubyist.tumblr.com/”
$rubyist_next = “http://rubyist.tumblr.com/page/2″
# Scrape one weeks worth of links
$week_ago = Time.new – days_to_sec(7)

# Run the script
doc = Hpricot(open($rubyist_home))
get_links doc

Technorati Tags: ruby, rubyist, hpricot, html, scape

Prism works well for web applications, where all the links point to the domain where the application is running from. If you there are links to other domains, Prism will open those links in FireFox instead of the Prim application window. Other than launching the web application in a undecorated application window, I don’t see how different this is from just creating a internet shortcut. The web application is not downloaded, you still need internet access, and you are still limited by the browser limitations for it to really feel like a desktop application.

I think some great opportunities will emerge if you can mashup Mozilla Prism, Google Gears, and some great JavaScript libraries like YUI!, jQuery, or Ext JS. This is definitely a technology to watch.

Technorati Tags: firefox, mozilla, prism, gears, web, webdesign

The iPhone Dev Camp started on Saturday by a nice presentation by Chritopher Allen, a MacHack veteran, regarding what is known about the iPhone from a web developer’s perspective. What is known is that the iPhone uses web standards (HTML, XHTML, CSS, JavaScript, PDF and Quicktime). Web 2.0 best practices apply for the iPhone, such as the proper use and sepration of HTML, CSS, and JavaScript. Christopher recommends avoiding the use of Flash, SVG, Java applets, embedded video, custom x.509 certificates, and framesets. Christopher also states the the finger is not a mouse and you need to design accordingly with large enough buttons and links with plenty of space between each other.
Fingers can do more than the traditional point and drag cursor such as double tap, touch and hold, one or two finger drag, flick, and pinch.

It might come as a surprise but many of JavaScript events don’t work, such as onscroll, onkeydown, onkeypress, onmousemove, etc. Some web development recommendations for the iPhone are to use columns and small blocks in the layout, such as floating divs. You should also use the tel: and mailto: protocols in links. You can also integrate with Google Maps simply by adding your location search to maps.google.com/maps? URL.

The current activity on the the iPhoneWebDev Google Groups seems to be focused around iPhone specific development libraries, implementing the infamous back button, debugging JS, optimizing application for low bandwidth, and hacking the viewport. There is also a series of open questions such as, what level of support is there for the canvas tag? What level of persistent storage is available, cookies? The right questions will lead to the right answers. I have also published a great list of available iPhone development resources.

Most of time at the iPhone Dev Camp was spent developing a collaborating for the hack-a-thon. This was a working camp focused on developing some really cool applications on the iPhone.

iPhone Dev Camp Hacks

Telemoose has a nice presentation for optimizing a web application for low bandwidth environments and the iPhone entitled Living on the EDGE. He also has some helpful JavaScript functions for working on the iPhone.

Nearly 50 iPhone hacks were developed at the iPhone Dev Camp. I can safely say that about thirty percent of those hacks developed used iUI and the iPhone liquid navigation, both developed by Joe Hewitt. Joe also has been busy phone phreaking the iPhone and had time to developed Firebug for iPhone.

Some of my favorite made at iPhone Dev Camp hacks include Tilt (the first ever motion controlled iPhone game), PickleView, AppMarks, and Qix.

iPhone Dev Camp Pictures

Hacking the Phone
moPhaic co-developer
Sleeping MacBook
Chris Messina, iPhoneDevCamp co-organizer
Hard Core Hacker
Tilt Paper Prototype
iPeeps
In the Crowd
Microsoft Techie
Newton Dev Camp?
Joe Hewitt, Kent Bye, Felipe Ortiz
Hack this Phone
iPhone Zoolander
Option Shift K

Technorati Tags: iui, apple, iphone, iphonedev, iphonewebdev, iphonedevcamp, devcamp, barcamp, webdev, webapp, javascript, js, tilt, iphone game, firebug

• iPhoney – A free iPhone web simulator for designers.
• iPhone Interface in JavaScript – A JavaScript based iPhone simulator.
• iPhone Simulator – Yet another JavaScript-based iPhone simulator.
• Morfik Builds First iPhone Development Tool – Development tool for iPhone.
• Aptana IDE: iPhone Development Plugin – Aptana iPhone development plugin for Eclipse.
• Firebug for iPhone – “Trying to debug web pages on my iPhone transported me back to a dark place I hadn’t been in some time: The Land of alert() Debugging!”
• iPhone Dev Wiki – iPhone development wiki.
• Apple iPhone development secrets revealed – Some development tips and advice.
• iPhone Javascript and spec benchmark – Some iPhone benchmarks.
• iPhone Web Development Tips – Tips available from Ajaxian.
• iPhone Dev Camp – iPhone devcamp in San Francisco.
• iPhone Web Dev – iPhone development Google group.
• Web Develpoment for iPhone – Official Apple Developer Connection documentation.
• JavaScript Coding Guidelines for Mac OS X – JavaScript basics and best practices.
• Introduction to the Document Object Model – DOM basics.

Bonus Resource

• IPhoneWebDev – Some nice web examples and tips for the iPhone.

Technorati Tags: iphone, development, webdev, apple, safari, javascript, iphonewebdev, iphonedev, iphonedevcamp

CommunityOne 2007: Monday
Welcome to CommunityOne 2007
Getting Started and what’s New in GlassFish v2
Lunch with the Java Posse
Ajax Applications Made Easy with jMaki and Scripting
Swing GUI Building with Matisse: Chapter II
JRuby: Understanding the Fuss
Up the Stack
G2One

JavaOne 2007: Tuesday
Tuesday General Session
JRuby on Rails – Agility for the Enterprise
Evolutionary Java – General Session
Java Puzzlers
Using jMaki in a Visual Development Environment
Java Persistence API – Best Practices and Tips
Developing a Real-World Web Application with NetBeans 5.5 Visual Web Pack
Grails, Sails, and Trails – Rails Through a Coffee Filter
Rapid Seam Application Development with the NetBeans IDE

JavaOne 2007: Wednesday
Wednesday General Session
Swing Vector Graphics
Effective Java Reloaded – This Time It’s for Real
Building JavaServer Faces Applications with Spring and Hibernate
Extreme GUI Makeover 2007
Anatomy of an Eclipse RCP Application
Tricks and Tips with NIO
Dive into the GlassFish Aquarium
Seamless Web Browser Integration
Putting a Swing Front End on a Web Application

JavaOne 2007: Thursday
Thursday General Session
Being Productive with Swing
Technical Overview of GlassFish v2
JavaScript FX
Why Spaghetti is Not Tasty
Beans Binding
Write a 3D Game in Java
Web 3.0 – This is the Semantic Web
The Java 3D API and Java Binding for OpenGL
Glossitope – An Open-Source Java-based Widget Container

JavaOne 2007: Friday
Friday General Session
Bringing Life to Swing Desktop Applications
Ajax and JavaServer Faces Tooling in Eclipse
Bytecode Manipulation Techniques for Dynamic Applications for the JVM
Filthy-Rich Clients – Talk Dirty to Me
Writing Games with Project Darkstar

Technorati Tags: javaone, javaone2007, glassfish, darkstar, netbeans, eclipse, rcp, jmaki, jsf, jfx, javafx script

Another format like FOAF is the Description of a Project (DOAP). DOAP is used to describe an Open Source projects with a name, description, SVN info, etc. so that this information can be crawled, indexed, scrapped, and later successfully searched. RDF, like XML, is open in such a away that you can define your own ontologies, and there are many existing ones that will be standardized. Competing ontologies will be naturally selected and standardized by the community. Another interesting RDF format is Beatle, bug and enhancement tracking language.

The speaker started the session by describing a timeline of recent modern computing. He narrowed the PC Era to the desktop of the ’80s, the Web 1.0 was the original World Wide Web of the 90′s, he described the Web 2.0 as the Social Web we currently live in, Web 3.0 will be the Data Web or Semantic Web, and Web 4.0 which is slated for 2020 will be the NetOS or Intelligent Web. In terms of search, he stated that we started Web 1.0 with natural language search, we will soon move to semantic search, then associative search, simple reasoning, and finally to intelligent agents in the Web 4.0.

The speaker said that the Semantic Web, and RDF, can be used to search, archive, and retrieve online content in new ways. He said that the open web would be treated like a massive distributed database. The web is made up of data and RDF can define your data into a database that can be located, reference, and related to other data with URLs.

The speaker also touched on the growing number of semantic tools, a large portion of which are written in Java. The speaker spoke of RDF databases and repositories and SPARQL, a SQL-like query language to search RDF repositories.

Technorati Tags: javaone, javaone2007, web3.0, web2.0, semantic web, rdf, microformats