Code & Iron

Programming

January 14, 2014

Mimicking iOS 7 with jQM and Rails

iOS on the Web A client of mine needed a companion mobile web app that mimics their new iOS 7 app for their non-apple users. Their designer is also hugely passionate about user experience, and has built custom cells, icons, …

  Show More

iOS on the Web

A client of mine needed a companion mobile web app that mimics their new iOS 7 app for their non-apple users. Their designer is also hugely passionate about user experience, and has built custom cells, icons, and has high performance expectations for UI behaviour and response. I knew for him to be happy it needed to be as close as humanly possible to the real deal.

So here’s how to get that nice, smooth, Apple-y feel on the mobile web…

Modifying jQuery Mobile for Fun and Profit

Enter jQuery Mobile to take some of the load off. jQM is a responsive mobile web CSS and Javascript framework that just released stable version 1.4. It aims for a native app experience by offering persistent headers and footers, widgets for common UI paradigms, and AJAX enhancements. However, it maintains a look and feel distinct from all existing platforms. The reasoning behind this is to remain “seriously cross platform” (That list of browsers makes me tired just looking at it). To get around this (admittedly bland) skin, there is an online WYSIWYG editor called “ThemeRoller” that handles the basics. Beyond that, we’re on our own.

Order Matters

Rails 4 uses the asset pipeline, a way of compiling and combining assets to form the eventual CSS, Javascript, and images sent over the wire. It does this by using “manifest files” that send tendrils out to the other folders in your app. More specifically, the “require tree .” in your application.css will find everything under assets/stylesheets in app/ vendor/ and lib/. However, it does not guarantee the order in which they are loaded. This can lead to confusing and difficult to diagnose CSS bugs when dealing with a framework like jQM.

Here are the three CSS components that you need for a fully customized jQM app:

1. Download the minified, gzipped, themeless “structure” of jQM to vendor/assets/stylesheets, or use the jquery-mobile-rails gem.

2. Go to ThemeRoller to paint the broad strokes of your app, and download the original and minified versions to vendor/assets/stylesheets.

3. Finally, overrides of the jQM defaults and your custom CSS or SASS can go alongside your application.css file in app/assets/stylesheets.

Modify your application.css to load in this order:

*= require jquery.mobile.structure.min
*= require my-app-themeroller.min
*= require_self
*= require_tree .

You’re not !important, be more Specific

If you catch yourself rage-clearing your cache, shift/command refreshing, switching browers, or all of the above, you may try the sledgehammer of CSS. Appending !important to a css rule says “disregard any previous, more specific rules, use THIS one”. It has some uses (apparently), but by and large it will make later revisions to your code nightmarish. It’s like try… catch Exception e… swallow in Java. Respect the next developer, just don’t do it.

Instead, if your CSS just isn’t applying, you likely need a more specific CSS selector. CSS cascade and specificity rules are massively complex. Also, jQuery Mobile by convention is filled with very targeted selectors.

So don’t leave it up to chance. Use your Chrome Developer Tools or Safari Web Inspector. Find out the exact CSS selector used by jQM, and override that, it may be much  tighter than you expect. Here’s an example of me nullifying the standard listview borders:

.ui-listview > .ui-li-static, .ui-listview > .ui-li-divider, .ui-listview > li > a.ui-btn {
border: 0px;
}

If it looks like an Apple…

Now that we have our structure set up, what do we modify?

Here are some basic steps to getting that iOS 7 feel out of jQM:

1. Apple uses “Helvetica Neue Ultra Light” for headings and text to achieve that fresh, open air feel. We can mimic that easily on devices with this font pre-installed (Apple products, mainly). However, it’s important to degrade elegantly all the way to sans-serif just in case.

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
font-weight: lighter (or 100)

2. Eliminate unnecessary borders, backgrounds, and shadows. Whitespace and sharp contrasting colours are your friends here. Take a look at some of the stock iOS 7 apps for inspiration. Much of this work can be done in ThemeRoller

3. Custom icons on a flat background go a long way and are achieved in jQM via CSS classes with backgrounds

data-icon="carat-right" goes on your list item tag... and then:

.ui-icon-carat-right:after {
background-size: 70%;
background-image: image_url("carat-right.png");
}

So there! Go out into the world and modify jQuery Mobile to your hearts content! Down with the standard skin!

  Posted by Matt Holtom on January 14, 2014
August 27, 2013

Asynchronous Scheduling Options in a Rails Application

The stack behind torontofirecalls.com is not exciting, and that’s the way it should be. There are no outlandish requirements for throughput, response time, or searching. The app will never serve thousands of users at once. Sharding, clustering, caching, eventual consistency; …

  Show More

The stack behind torontofirecalls.com is not exciting, and that’s the way it should be.

There are no outlandish requirements for throughput, response time, or searching. The app will never serve thousands of users at once. Sharding, clustering, caching, eventual consistency; better left to start-uppy folks who are the next Twitter (or have deluded themselves as such).

Yes, it’s Rails.
Yes, it’s on Postgres.

Not much to talk about. So what to contribute?

Well, It’s been an absolute saga to schedule an asynchronous “every 5 minutes” job for this project. From that I ended up with a fairly good understanding of the options out there. Please learn from my pain. An alternate title to this article could be “Why Walled Gardens Eventually Suck”.

Req: Every 5 minutes the app shall update from the City of Toronto, parse the XML, and store the live events. If we miss an hour, that data is lost to us, possibly forever.

Scheduling Options on Heroku

1. Custom Rake Task and Heroku Scheduler
Pros – Free. Very easy setup. Create a custom rake task, and schedule/managed jobs in the web dashboard
Cons – Strictly limited to every 10 minutes, 1 Hour, 1 Day

heroku addons:add scheduler:standard

2. Clockwork and DelayedJob
Pros – Full, expressive DSL. Plays nice with Heroku Cedar. Excellent for applications deployed on multiple machines. Separates scheduling and performance of work (important). Works well when you have hundreds or thousands of jobs at once and need many workers.
Cons – $Expensive$ to run on Heroku, even for a few jobs. Requires one “clock” dyno for scheduling the work, and one “worker” dyno processing jobs. Adds $70 USD /mo to your app.

every(1.hour, 'feeds.refresh') { Feed.send_later(:refresh) }

3. Clockwork and DelayedJob with Workless
Pros – Workless Allows you to sleep a “worker” dyno until there’s something in the delayed_jobs table. Saves almost all the monthly costs of the worker dyno.
Cons – Unreliable. Uses heroku’s scaling API to sleep/awaken your worker(s). Often workers will die silently, or zombie with 0 jobs in the queue. Also, you still need a full-uptime clock dyno to schedule the delayed_jobs, so it still adds $35 USD/mo to your app.

In your production initializer:

config.after_initialize do
  Delayed::Job.scaler = :heroku_cedar
end

Then configure your scaler (to taste) with:

heroku config:add WORKLESS_MAX_WORKERS=1
heroku config:add WORKLESS_MIN_WORKERS=0
heroic config:add WORKLESS_WORKERS_RATIO=1

Scheduling Options off Heroku

* At this point, I got fed up with Heroku and it was time to move on. The Workless gem had failed to scale up/down multiple times. To stay reliable, I was running up an $70 USD/month bill just to process under 300 jobs a day. Not okay. I ported everything to WebFaction and within a few hours had a parallel instance running there.

4. Bare Cron
Pros – Expressive syntax. Full control. Literal decades of proven use. Available on most self hosted servers. Free as in beer.
Cons – Requirement of running the job is not stored alongside your code. Syntax can be intimidating for first time users. Heroku blocks it’s use. Is not ideal for multi-machine deployments/clusters.

Run crontab -e and:

17 8 * * * root echo "This command is run daily at 8:17 am"

5. Cron with Whenever
Pros – Simple, expressive DSL creates/updates jobs in your crontab with the “whenever” command. Requirement and changes to the jobs are stored inline with your code in SCM. Integration with Capistrano available for “update on deploy”. As available, sturdy, and free as cron (for Ruby apps).
Cons – … Heroku blocks its use. Is not ideal for multi-machine deployments/clusters.

In your schedule.rb file:

every :hour do
  runner "SomeModel.ladeeda"
end

Update your crontab using:

whenever -i

Solution #5 has been working very well for me, so the application will finish being ported to WebFaction, likely by the end of the week. It’s now costing ~$10 USD to host instead of ~$80 USD. Hopefully the above comparisons will help you make the right decision early by learning from my 4 mis-steps.

Next writeup will be a quick explanation of how I used the Google Maps for Rails gem and MapIcons by Nicolas Mollet to create the UI.

’till next time…

  Posted by Matt Holtom on August 27, 2013
April 2, 2012

Making the Leap: Log4J to SLF4J

So. The team lead has come to you and said “time to switch project X over to SLF4J“. Or you’re the team lead and you just realized all your log statements only work with Log4J? What if that project dies …

  Show More

So. The team lead has come to you and said “time to switch project X over to SLF4J“. Or you’re the team lead and you just realized all your log statements only work with Log4J? What if that project dies out?

Freaking out? Worried you will have to manually edit lines upon lines of code? Time to hire a coop? Fear not brave coder. We will bring the full power of bulk editing and unix “diff” to bear on this one. (And a really experienced colleague of mine who helped me through this!)

For those who are unfamiliar, SLF4J is the Simple Logging Facade for Java. It is a layer on top of Log4J, Logback, and others that allows you to decouple your log statements from your underlying implementation. SLF4J is to Log4J as JPA is to Hibernate.

Also the interface it provides is absolutely delicious. No more checking isDebugEnabled() before a log statement to avoid performance hits, SLF4J does so automatically. Also, no more complex string concatenation inside logger.info(). In SLF4J the info, debug, error, trace, and fatal methods take objects and plug them into message placeholders “{}” for you, calling the toString() methods as appropriate.

So let’s switch your project over. First, check out a fresh working copy of the project you need to modify, let’s call it project-logging-dirty. Next, check out another working copy of the same project, in directory project-logging-clean.

Download the SLF4J Migrator Tool here:
It’s perfectly suited to changing from Log4J to SLF4J, but it has one problem: It touches every single line of every single.java file in your project, and screws up the whitespace more often that not. I personally hate losing svn/git history due to whitespace mods. I want to know who to svn blame (lol, bad joke) when I’m looking at this project in 6 months.

Run the SLF4J migrator against project-logging-dirty.


java -jar slf4j-migrator-1.6.4.jar

If you do an svn diff you will see a HUGE number of lines changed (which are mostly whitespace modifications). Let’s pull those changes by making a unified diff of the two directories, ignoring .svn and whitespace mods, and forward the output to a new file called slf4j.patch.


diff -udrEbBw -x.svn project-logging-dirty project-logging-clean > slf4j.patch

Change to project-logging-clean so that it’s your present working directory, and apply the patch!


patch -p1 -ZEBw --ignore-whitespace < ../slf4j.patch

Run svn diff again in project-logging-clean. You should see a clean changeover to SLF4J including LoggerFactory.getLogger statements and all the rest. Commit project-logging-clean once you've run all integration tests against the build. Delete project-logging-dirty, to never be seen again.

Caveat: When doing thread-specific concurrent programming, you may be using NDC (Nested Diagnostic Context), a stack of context specific log message parameters. NDC is unsafe as the log parameter stack could theoretically grow without bounds (memory leak anyone?). SLF4J does not support NDC, and switches to MDC (Map based, which is much more forgiving if you are writing to the log parameters forget to remove). Caution should be exercised when doing any thread specific logging: each map.put should have a corresponding map.remove, in a finally block. BUT take note: The SLF4J Migrator Tool cannot change over your NDC statements to MDC, you will need to do this manually.

Best of luck, I hope you have as much fun with SLF4J as I do!

  Posted by Matt Holtom on April 2, 2012  /  Tags: , , , , ,
January 25, 2012

The Maven Dependency Plugin, It’s Tree Time.

I recently inherited an external testing project that is about 6 months stale. It was written by a co-op who left a while ago. For those of your playing the home game, neither of these are good signs. It’s a …

  Show More

I recently inherited an external testing project that is about 6 months stale. It was written by a co-op who left a while ago. For those of your playing the home game, neither of these are good signs. It’s a suite of tests packaged in an executable jar that use selenium to automate a firefox (or any) browser. Its purpose is to automatically verify there have been no regressions in the target project since the last major feature set. Nifty right?

Only one issue. The project was started in, and run exclusively out of, eclipse. Specifically, all of the dependency information was created by modifying the eclipse build path settings. This means that a ton of relevant project information is stored in the .classpath file on a specific computer. To make matters worse, the .classpath, .settings, and .project files are commonly ignored globally by users of svn or git, to avoid muddying up the repository. If that one computer has a hard drive crash, or the co-op quits, dies, or goes on a road trip, we’re scuppered. The project now requires a goat sacrifice as part of the build process, it’s arcane magicka twisting just outside our mortal comprehension.

For the record: I have nothing against eclipse. I think it is a great IDE, and I use it every day. However, it is not, and never will be an enterprise level build/dependency management tool.

Enter the POM (Project Object Model). The pom.xml file is your first step to using Maven as a build and dependency management tool.

Create a basic pom.xml file at the root of your project, and make sure your directory conforms to the “convention over configuration” maven directory structure.

<project>
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.mycompany.app</groupId>
  <artifactId>my-app</artifactId>
  <version>1</version>
</project>

From there, you can take advantage of the fact that every pom.xml automatically inherits all of the behaviour of the standard “super pom”, and bango, without even realizing it you’re using a fully featured build tool. To add a dependency (i.e. the junit 4 api) reference its groupId, artifactId, and version as follows:

<dependencies>
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.8.2</version>
  </dependency>
</dependencies>

Go ahead and build your project with the command:

mvn install

Notice that the dependency is downloaded, along with any other dependencies that IT in turn depends on, magic! No more DLL Hell for us (well, JAR hell, but you get the picture)! For the interested, this is called transitive dependency management: a->b->c therefore a->c.

Let’s take this one step further. To see a nicely formatted tree of your newly downloaded dependencies, add the maven dependency plugin to your pom.xml as follows:

    <build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <version>2.4</version>
        </plugin>
    </plugins>
    <sourceDirectory>src/</sourceDirectory>
    </build>

Now try the command:

mvn dependency:tree

You should be looking at a somewhat simpler version of this:

[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building Test MPG 1.0.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-dependency-plugin:2.4:tree (default-cli) @ test-mpg ---
[INFO] com.acme.myproj:test-proj:jar:1.0.0-SNAPSHOT
[INFO] +- junit:junit:jar:4.8.2:compile
[INFO] +- org.slf4j:slf4j-log4j12:jar:1.6.3:compile
[INFO] |  +- org.slf4j:slf4j-api:jar:1.6.3:compile
[INFO] |  - log4j:log4j:jar:1.2.16:compile
[INFO] +- org.seleniumhq.selenium:selenium-firefox-driver:jar:2.12.0:compile
[INFO] |  +- org.seleniumhq.selenium:selenium-remote-driver:jar:2.12.0:compile
[INFO] |  |  +- cglib:cglib-nodep:jar:2.1_3:compile
[INFO] |  |  - org.json:json:jar:20080701:compile
[INFO] |  - commons-io:commons-io:jar:2.0.1:compile
[INFO] +- org.seleniumhq.selenium:selenium-htmlunit-driver:jar:2.12.0:compile
[INFO] |  +- org.seleniumhq.selenium:selenium-api:jar:2.12.0:compile
[INFO] |  |  - com.google.guava:guava:jar:10.0.1:compile
[INFO] |  |     - com.google.code.findbugs:jsr305:jar:1.3.9:compile
[INFO] |  +- net.sourceforge.htmlunit:htmlunit:jar:2.9:compile
[INFO] |  |  +- xalan:xalan:jar:2.7.1:compile
[INFO] |  |  |  - xalan:serializer:jar:2.7.1:compile
[INFO] |  |  +- commons-collections:commons-collections:jar:3.2.1:compile
[INFO] |  |  +- commons-lang:commons-lang:jar:2.6:compile
[INFO] |  |  +- org.apache.httpcomponents:httpmime:jar:4.1.2:compile
[INFO] |  |  +- commons-codec:commons-codec:jar:1.4:compile
[INFO] |  |  +- net.sourceforge.htmlunit:htmlunit-core-js:jar:2.9:compile
[INFO] |  |  +- xerces:xercesImpl:jar:2.9.1:compile
[INFO] |  |  |  - xml-apis:xml-apis:jar:1.3.04:compile
[INFO] |  |  +- net.sourceforge.nekohtml:nekohtml:jar:1.9.15:compile
[INFO] |  |  +- net.sourceforge.cssparser:cssparser:jar:0.9.5:compile
[INFO] |  |  |  - org.w3c.css:sac:jar:1.3:compile
[INFO] |  |  - commons-logging:commons-logging:jar:1.1.1:compile
[INFO] |  - org.apache.httpcomponents:httpclient:jar:4.1.2:compile
[INFO] |     - org.apache.httpcomponents:httpcore:jar:4.1.2:compile
[INFO] - org.seleniumhq.selenium:selenium-java:jar:2.12.0:compile
[INFO]    +- org.seleniumhq.selenium:selenium-android-driver:jar:2.12.0:compile
[INFO]    +- org.seleniumhq.selenium:selenium-chrome-driver:jar:2.12.0:compile
[INFO]    +- org.seleniumhq.selenium:selenium-ie-driver:jar:2.12.0:compile
[INFO]    |  - net.java.dev.jna:jna:jar:3.3.0:compile
[INFO]    +- org.seleniumhq.selenium:selenium-iphone-driver:jar:2.12.0:compile
[INFO]    - org.seleniumhq.selenium:selenium-support:jar:2.12.0:compile
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2.051s
[INFO] Finished at: Wed Jan 25 00:18:37 EST 2012
[INFO] Final Memory: 6M/81M
[INFO] ------------------------------------------------------------------------

Pretty cool right? Check that pom.xml into the repository, and bask in the fact that anyone in your organization can check your project out and build it straight out of the gate. Now say three Hail Mary’s and ten Bless Me Father’s, and swear off eclipse dependency management for good. No seriously, please don’t do it, or it might be you we sacrifice next time instead of the goat 😀

Take care,
Matt

  Posted by Matt Holtom on January 25, 2012  /  Tags: , ,
January 23, 2012

Source to the World!

Okay, time to really put wordpress through its paces. Let’s try a tad of java with *gasp* syntax highlighting! Here goes! That’s all folks, Take care, Matt

  Show More

Okay, time to really put wordpress through its paces. Let’s try a tad of java with *gasp* syntax highlighting!

Here goes!

//HelloWorld.java
public class HelloWorld{
  public static void main(String args[]){
    System.out.println("Hello World");
  }
}

That’s all folks, Take care,

Matt

  Posted by Matt Holtom on January 23, 2012  /  Tags: