Ramon Torres

{ ggrrrrrrrrhhhhh }

iPhone 5-6 Screen Size Cheat Sheet

iphone-sizes

Logical Coordinate Space (portrait)

Model Size (points) Scale
iPhone 5/5S/5C 320 × 568 @2x
iPhone 6 375 × 667 @2x
iPhone 6 Plus 414 × 736 @3x

Device Coordinate Space

Model Size (pixels)
iPhone 5/5S/5C 640 × 1136
iPhone 6 750 × 1334
iPhone 6 Plus 1,242 × 2,208*

* Downsampled to 1080 × 1920 px.

Comments

Using Rake to deploy a static site to S3

One of my favorite development tools is Rake. Not so long ago I discovered how great this tool is and started using it for automating development chores.

The Rakefile of a static site project would look something like this:

require "s3"
require "mimemagic"

desc "Deploys the site to S3"
task :upload do |t, args|
  service = S3::Service.new(:access_key_id => "...",
                            :secret_access_key => "...")

  bucket = service.buckets.find("mybucket")

  files = Dir['*.html'].to_a
  files += Dir['css/*.css'].to_a
  files += Dir['js/*.js'].to_a
  files += Dir['img/*.*'].to_a

  files.each do |source|
    object = bucket.objects.build(source)
    object.content = File.open(source)
    object.content_type = MimeMagic.by_path(source)
    object.save
    puts "Uploaded https://#{bucket.name}.s3.amazonaws.com/#{source}"
  end
end

Dependency Management

To manage our dependencies we will use Bundler. The Gemfile should look something like this:

source "http://rubygems.org"

gem "s3"
gem "mimemagic"

Comments

SVG background images with PNG fallback

SVGs are awesome, but Android's browser didn't support them until version 3.0, and since 2.x devices represent more than 50% of Android's market share it is still important to provide a fallback.

Sass Mixins FTW

One of my favorite features of Sass are mixins, they let you reuse chunks of CSS code and keep things DRY. The mixin we created looks something like this:

@mixin svg-background($name, $w, $h) {
  background: url('../images/#{$name}.svg') no-repeat;
  background-size: $w $h;
  .no-svg & {
    background-image: url('../images/png/#{$name}.png');
  }
}

And can be easily included:

#brush-selector {
  .pencil {
    @include svg-background('pencil', 15px, 8px);
  }
}

This will generate something that looks like:

#brush-selector .pencil {
  background: url("../images/pencil.svg") no-repeat;
  background-size: 15px 8px;
}

.no-svg #brush-selector .pencil {
  background-image: url("../images/png/pencil.png");
}

Feature Detection

For detecting whether or not SVG is supported we can use Modernizr or roll out our own. I decided to roll out my own to keep it lightweight.

$(document).ready(function () {
  var supportsSVG = document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1');
  if (!supportsSVG) {
    $('body').addClass('no-svg');
  }
});

Comments

Code Snippet: GA Unobtrusive Click Tracking with jQuery

HTML:

<a href="size-chart.pdf" data-track="Size Chart">Size Chart</a>

JavaScript:

$(document).ready(function () {
  $('a[data-track]').on('click', function (e) {
    var label = $(this).attr('data-track');
    //_gaq.push(['_trackEvent', 'Links', 'Click', label]);
    ga('send', 'event', 'Links', 'Click', label);
  });
});

Update Aug 5, 2014: New Google Analytics API.

-R

Comments

My name is Ramon Torres. I'm a software developer and product designer, currently working at Night Agency and Doodle.ly building cool stuff.