25 Nov 2012

A New Look

Old Blog Design CloseupI've finally updated my blog again. I've thrown away most of the old style and code. I needed a new look. Apparently a year ago I was a bit obsessed with low contrast and textures. These design concepts can work wonderfully. On my site they did not. I needed a new inspiration. One was not forthcoming.

About a month ago I started watching White Collar. I really liked the logo. It stuck with me. Last Friday I had a day off, so I decided to see if I was indeed "inspired". I suppose I was close enough. I am much happier with the current site design than the old one.

Blog Design CloseupThe rest of this paragraph may sound pretentious, and I apologize for that; however, I hope it gives some insight into the new design. The basic design language is that of a blue background overlain with a white sheet of material. The header and footer are on peeking out of the background. The blue headings and the date boxes are carved out of the white foreground to reveal the blue underneath. The white lettering in the header, footer, and date boxes are meant to be leftovers from white foreground material. The black text and images in the body of the page are sitting on top of the white foreground.

I also can't help but try out some new (to me) technologies, especially if they might be useful in my day job. I've used a bit of Sass in the context of Rails before, but I was interested in learning more about it. And this Compass thing I kept hearing about sounded really useful.

It turns out that I really like Sass and Compass. Together they give a front-end developer many wondrous tools. It would be hard to go back to not using variables and mixins. I also found Susy, a responsive grid framework, to be very useful.

Integrating Jekyll and Sass was not as easy as I had hoped. I at first tried the jeklyy-sass gem. I could not get it work after about half an hour of futzing with it. I assume this failing was on my part, not that of the gem. I think decided to do something a bit more simple. I followed the advice of another blog and just used the Jekyll and Compass command separately with foreman gluing them together.

I also took the opportunity to research fonts/typefaces to use. All really knew was that I wanted a strong sans serif font for the headings and a nice readable serif font for the body text. I did find two fonts that I really liked:

Eventually I decided that it really didn't make sense to pay for fonts on a blog that no one actually reads. So I decided to look up what fonts are installed by default and pick the my favorites (as it were). I landed on Verdana for the headings and Georgia for the body.

I did wind up using one custom font: Inconsolata. I use this font in my text editor, so I decided to make the code snippets on my site use it. I found Font Squirrel's @font-face generator very useful

I couldn't figure out how to display each post's date until I stumbled across this post about CSS text rotation. I also had to brush up on CSS3 transitions to create the header. Making text look indented (or a letterpress effect) with CSS is surprisingly difficult. I found this gist incredibly useful.

I'm still not done. There are still some bugs especially on mobile devices. I will continue to refine and fix. Hopefully this version lasts longer than a year.

08 Mar 2012

Adding a Splash Screen For An Android PhoneGap App

The fact that you can add a splash screen to your PhoneGap app on the Android platform is surprisingly hard to come across. After some searching I did find some answers.

After finding those helpful posts my next question was:

What is this property thing I'm setting?

Starting on line 100 of the DroidGap.java file there are some helpful comments:

   /* Properties: The application can be configured using the following properties:
   * 
   *    // Display a native loading dialog.  Format for value = "Title,Message".  
   *    // (String - default=null)
   *    super.setStringProperty("loadingDialog", "Wait,Loading Demo...");
   * 
   *    // Hide loadingDialog when page loaded instead of when deviceready event
   *    // occurs. (Boolean - default=false)
   *    super.setBooleanProperty("hideLoadingDialogOnPage", true);
   * 
   *    // Cause all links on web page to be loaded into existing web view, 
   *    // instead of being loaded into new browser. (Boolean - default=false)
   *    super.setBooleanProperty("loadInWebView", true);
   * 
   *    // Load a splash screen image from the resource drawable directory.
   *    // (Integer - default=0)
   *    super.setIntegerProperty("splashscreen", R.drawable.splash);
   * 
   *    // Time in msec to wait before triggering a timeout error when loading
   *    // with super.loadUrl().  (Integer - default=20000)
   *    super.setIntegerProperty("loadUrlTimeoutValue", 60000);
   * 
   *    // URL to load if there's an error loading specified URL with loadUrl().  
   *    // Should be a local URL starting with file://. (String - default=null)
   *    super.setStringProperty("errorUrl", "file:///android_asset/www/error.html");
   * 
   *    // Enable app to keep running in background. (Boolean - default=true)
   *    super.setBooleanProperty("keepRunning", false);
   */

These properties can be set in your appname.java file:

  package com.example.appname;

  import android.app.Activity;
  import android.os.Bundle;
  import com.phonegap.*;

  public class appname extends DroidGap
  {
      @Override
      public void onCreate(Bundle savedInstanceState)
      {
          super.onCreate(savedInstanceState);
          super.setIntegerProperty("splashscreen", R.drawable.splash);
          super.loadUrl("file:///android_asset/www/index.html", 3000);
      }
  }
01 Oct 2011

Using will_paginate and activerecord-sqlserver-adapter with SQL Server

Having Rails and Microsoft SQL Server communicate is much easier than it once was thanks to projects like TinyTDS, but sometimes things still don't work exactly right. We ran into an issue where pagination simply would not work. Below is what we came up with after some research.

This solution was based on the following:

This patch was tested on an app using Rails 2.3.x and SQL Server Adapter 2.3.15.

config/environment.rb
  require "#{RAILS_ROOT}/lib/monkey_patch_sql2005_limit.rb"
lib/monkey_patch_sql2005_limit.rb
  # monkey-patching SQLServerAdapter to support SQL Server 2005-style pagination
  # based on http://alexle.net/archives/tag/mislav-will_paginate-sqlserver-2005
  # - http://alexle.net/archives/tag/mislav-will_paginate-sqlserver-2005
  # - http://www.sqlservercentral.com/articles/T-SQL/66030/
  # - http://stackoverflow.com/questions/4871523/sql-server-2008-r2-pagination/4871591#4871591
  # - https://gist.github.com/335683

  # produces paginated sql ( if set to 2 results per page) that looks like this:
  #
  # WITH cols AS ( 
  #   SELECT ROW_NUMBER() OVER(ORDER BY training_types.id) as seq, 
  #     * FROM [training_types] 
  # ) 
  # SELECT * FROM cols WHERE seq BETWEEN 1 AND 2 ORDER BY seq;

  module ActiveRecord

    module ConnectionAdapters
      class SQLServerAdapter  < AbstractAdapter
        def add_limit_offset!(sql, options)
          if options[:limit].blank?
          
            super
          
          else
            options[:offset] ||= 0
          
            options[:limit] ||= 1000

            table = sql.match(/FROM\s+\[(\w+)/i)[1]
            options[:order] ||= "#{table}.id"
            
            sql.sub!(/ORDER BY.*$/i, '')
          
            sql.sub!(/SELECT/i, "WITH cols AS ( SELECT ROW_NUMBER() OVER(ORDER BY #{options[:order]}) as seq, ")
         
            sql << ") SELECT * FROM cols WHERE seq BETWEEN #{options[:offset]+1} AND #{options[:offset]+options[:limit]} ORDER BY seq"
      
            sql
          end
       
        end
        
      end
    end
  end
26 Sep 2011

My Favorite Mac OS X Apps For Web Development

Text Editors

Sublime Text 2 (currently free; will be $59)

I've been using this as my main text editor (replacing TextMate). It uses TextMate bundles and themes. Sublime runs on Mac OS X, Linux and Windows. Also checkout the Vintage mode if Vim intrigues you

Tincta (free)

A really simple code editor with syntax highlighting.

Graphics/Design

Pixelmator ($29.99)

I love this app. Does almost everything that Photoshop does. It actually will open Photoshop files and does a pretty good (but not perfect) job with them.

Color Picker Pro (free)

A simple, intuitive app that makes sampling any color on your screen super easy.

SeaShore (free)

It is literally a prettied-up, simplified version of GIMP for Mac OS X.

Utilities

GitHub for Mac (free)

A very nice looking Git client.

Liya (free)

A simple GUI for MySQL, SQLite, and PostgreSQL

Alfed (free)

This is basically a better Spotlight. I have it mapped to Command-Space instead of Spotlight.

PandaBar ($4.99)

An awesome Pandora player.

Divvy ($13.99)

Manage your windows. Definitely set some global shortcuts. Mine are: ⌥-⌘-f (fullscreen), ⌥-⌘-← (left half of the screen), ⌥-⌘-→ (right half of the screen), ⌥-⌘-↑ (top half of the screen), ⌥-⌘-↓ (bottom half of the screen)

12 Sep 2011

Candy Japan

I just ate some weird Japanese candy called takoyaki-ya san. It is supposed to mimic the look of "octopus balls" (a Japanese dish that is decidedly not candy like). The candy, unlike the food on which it is based, is peach/strawberry flavored. Takoyaki-ya san embodies two concepts that seem a bit odd to me: candy that looks like real (non-candy) food and candy that you have to assemble yourself. Overall it was pretty ok. The texture was strange, but the flavor was fine.

I received this candy from CandyJapan.com--a neat little service that will send you some weird Japanese candy twice a month for $24. I don't know how long I'll keep my subscription, but I think I'll get at least a few months of entertainment out it