Web design tips and resources
Using the Asset Pipeline with Rails 4
Rails 4 beta is out and it has a lot of nice features—including a super fast new sprockets gem.
Unfortunately, the rails core team decided to renege on the automatic asset compilation that came from Rails 3. This is not super obvious from the changelogs—in fact I only found out about it the hard way when I borked the assets on my company’s marketing site. Here’s how to avoid that mistake and set up your app to use the asset pipeline again.
First you’ll have to add the new sprockets-rails gem to your Gemfile. Then configure production.rb and development.rb as seen below.
Now you should be up and running with your assets. Hope this was helpful!
How to: Adding twitter cards to your tumblr
If you haven’t heard about twitter cards yet, check them out, they’re awesome. The instructions for adding them are pretty straight forward but it took a bit of finessing to get them working the way I wanted with tumblr.
Here’s how I implemented the tags on the Hopscotch blog:
1. Go to the “Customize” page and click the “Edit HTML” button. If you’re logged in and go to your blog you should have something like this in the top left corner:
2. Add the following inside the <head></head> tags:
3. Replace the hopscotch specific content with your own url, your own image and your own twitter id. Save.
4. Use the twitter preview tool to make sure you got it right. Then submit your request to twitter.
5. Profit.
There’s a little bit of a wait to get them approved (I just realized I made one for the Hopscotch Blog but not this one… fixing soon!) but they make you seem like such a professional early adopter, definitely becoming a must-have!
Responsive Design for the iPhone
A couple interesting things I discovered when playing around with responsive layouts today:
1. The iPhone returns a device-width of 320px in response to a media query. This is the same whether you are in landscape or portrait mode even though the width of the iphone in portrait is 480px. It does not respond to the orientation media query.
2. The iPhone will scale the screen to a 480px width resolution (or 960px if you are on a retina device) regardless of whether you are in landscape or portrait. Apple REALLY doesn’t want your website to move around when you flip the device. What this means is that you’ll want a background image to have a width of 480/960px. It will scale down to 320/640px if you flip the device into portrait orientation.
Cocos2d + UIKit
I haven’t been writing much in here because I’ve been busy programming our new Hopscotch iOS app. This is a little bit of a PSA to save others from the giant gotcha I encountered when integrating Cocos2d into my UIKit app to power user-generated animations.
First, I used the excellent Kobold2d library to install cocos2d by following this tutorial. (This involved starting a new Xcode project and copying over my old files, amazing that this was far and away better than any alternative solution I encountered). Here’s where a whole new set of problems kicked int: my app became incredibly slow. It was difficult to pinpoint the problem since so many things had to change in order to integrate this library.
My original code to integrate cocos2d looked something like this:
After several weeks of forging ahead and continually wondering why my app was so crashy and slow I finally sat down to solve the problem. I used Apple’s Instruments application with the core animation template (NB: this only works on your device, not the simulator). When I checked “Flash Updated Regions” it quickly became clear what was wrong: my (mostly) offscreen stage view where animations would render was updating 60 times per second, even when all animations were stopped.
Armed with this knowledge the solution was simple. I set the frame right down to 10 seconds and only increased it when an animation was actually running. I added code to the reveal and conceal functions to make sure the frame right was always appropriate and my app was back to its old responsive self:
The secret to ridiculously productivity
Today I made a bet with myself. Finish up a large chunk of work by tomorrow: I go to a party. Fail to complete the work: Attend an iOS hack night as I had originally planned. I ended up doing more work in the 2 hours after that bet than I had done for the entire first part of the day (and possibly yesterday too…).
At a startup it’s tempting to stay late in order to convince yourself that you are making progress. For me, that leads to a feeling that I just need to get through the hours. I watch my clock and constantly check twitter rather than concentrating on my work.
Setting a goal of deliverables rather than time spent really kick-started me to just sit down and write the code I knew I needed. It looks like tomorrow I’m going to a party!
Rails-style form generator for Javascript
Being the technical cofounder of a startup ironically means that my coding time is rather limited. When it comes to non-mission-critical projects, such as open-source libraries, I just don’t have the bandwidth or mental energy needed to follow through on my ideas.
As they say: Those who can’t do, blog. It occurs to me that there are many coders who want to tackle some open source work but don’t know have a good idea. This blog post aims to come to their rescue.
Problem: Rails unobtrusive javascript is great for making your forms submit with ajax, but actually generating the HTML is still a huge pain. The rails form format is long and weird. It’s definitely not fun to handwrite form markup for your templating language of choice (I’m a big fan of mustache.js).
Solution: Write forms in javascript in the same way you do with ruby for server-side haml/erb/slim templates. The library would take in a JSON representation of a model and create a js form object that could easily generate tags with the proper attributes. It should even be able to recognize errors and output the correct markup to display them.
Use case: You’re building the next facebook, but this time in rails. Your user creates a wall post. Rather than refreshing the entire page you submit the post with ajax. The server responds with a JSON representation of your new Post object. Since your social network is fancier than facebook’s, your user is allowed to edit the body of her post. You use this awesome open-source library to generate a new form template for editing on the fly. Your network is blazing fast which convinces everyone to quit facebook and join you instead. Maybe.
Sample Implementation:
var myModelForm = SimpleForm.new({object: myModelJSON});
var email_input = myModelForm.input({
name: "email",
type: "text",
placeholder: "email goes here"
});
var name_input = myModelForm.input({
name: "name",
type: "text",
label: "name"
});
var template = myModelForm.formHtml({inputs: [email_input, name_input]});
$("#template_id").html(template);
The template would generate the form html recognized by rails with all the proper labels and placeholder text. If you make this library right I will definitely use it and I know a ton of other rails devs who would also be thrilled. I’ve outlined all the work, now all you have to do is write the code.
Is design the new social?
It seems like the new version of social networks is based not on how many connections you have but on how cool your profile looks. This is not a new idea, myspace offered an amazing amount of customization back in the early 2000’s and allowed you to make your homepage a destination in its own right. With the advent of facebook, twitter and linkedin the idea of the aesthetic profile fell by the wayside a bit. It seems like the latest round of social startups are bringing it back.
There’s Pinterest, the famously fast-growing social network for stuff. Now the random stuff on the internet you like gets wrapped up in a pretty package! When I joined Pinterest I didn’t care if my friends were on it, I was just proud of how cool my little corner of the internet was starting to look.
For kids there’s DIY.org, a new site/iPhone app from Zach Klein. It’s a site for kids to share their diy projects (tagline: We’re a community of kids who make) and it’s gorgeous. Just scrolling around the background image is a delight. Kids get to pick their avatar and a funny nickname- I chose an owl named Again Zip - and then they can begin sharing their creations. I want to make something just so I can photograph it and show off my awesome page (even though I’m not actually a kid anymore…).
Wander, a soon to be launched travel startup still hasn’t told users what it will do. That’s ok because you can download their beautiful wallpapers and create lovely little tableaus (scroll down for the content). It doesn’t totally matter whether your friends are on the site, it’s almost better if they’re not because then they’ll think you came up with it on your own.
I remember scheming with Jocelyn over a year ago about how to get a marketplace started, we concluded that we should start with a small subgroup and then move on to ever bigger markets. Current trends would say we are wrong. The way to start a social network now is to help people create more awesome versions of themselves on the internet.
How my mom inspired me to be an engineer
When we were kids, my brother and I always knew that our questions about math or science class should be directed at mom. She had a masters in Chemistry and had been working on a PhD before ultimately attending medical school. It was always clear to us that she knew her stuff when it came to science.
My mother was also the one who knew how to fix things. From busted remotes to leaky faucets to putting together new toys, my mom always had the solution (and she would yell at us if we didn’t follow it!).
My favorite story about my mom is by now family legend. When she was 12 she left China with her mom to immigrate to Hong Kong. When they got to the border the officer asked my mother’s age. Her mom replied: “12”. The officer told her that my mom was too old for the visa and could not leave China. Thinking quickly, her mother said: “Oh, she’s actually 11, her birthday’s next month and we just call her 12 because she’s so close.” That was how my mom got out of China and got to have 2 birthdays.
Because of these things, I grew up thinking that moms were the ones who were good at math and science. They had to be clever and think on their feet. They held high powered jobs to support their families. That has been a huge influence on me throughout my life- I knew that I had to be all of these things so that I could be like my mom.
At my company Hopscotch we spend a lot of time thinking about how to get more girls interested in STEM fields. To me, a big part of this is the lack of female role models in these disciplines. First at engineering school and now even more so while working as an engineer I look around at a predominantly male landscape. For most kids with a parent in the sciences that parent is their father. Thinking back to my childhood, I realize how lucky I was to have a mother like mine.
iOS programming: calculate height of text area
EDIT: A friend on Twitter informed me that the better way to do this is:
[nameText sizeWithFont:font constrainedToSize:CGSizeMake(300.f, MAXFLOAT) lineBreakMode:UILineBreakModeWordWrap];
The key being that you can create a CGSize object with MAXFLOAT as the height.
My iOS skills are certainly a work in progress.
While learning objective C I thought a good test project would be to give some love to my old friend Nerd Nearby.
Nerd nearby is pulling local info from several services such as instagram and foursquare. Since the data is unique to each user we have to dynamically size each section of each cell to accomodate different amounts of text.
In this example there are 2 lines of text but this will change with each item. This is trivially easy in HTML/CSS but it turns out that in iOS it’s tricky to do dynamic resizing because here are no built in functions to find out how tall your text should be given a fixed height.
My solution was to add a category that extended NSString. In objective C they make it really really easy to add methods to a class from any library. This is a little scary to me but for now I’m rolling with it. Here’s my code:
In NSString+NerdNearby.h:
@interface NSString (NerdNearby)
- (CGSize) multilineSizeWithFont:(UIFont *)font forWidth:(float)width lineBreakMode:(UILineBreakMode)lineBreakMode;
@end
And the gross bit, in NSString+NerdNearby.m:
@implementation NSString (NerdNearby)
- (CGSize) multilineSizeWithFont:(UIFont *)font forWidth:(float)width lineBreakMode:(UILineBreakMode)lineBreakMode
{
CGSize size = [self sizeWithFont:font];
CGSize oneLineSize = [self sizeWithFont:font forWidth:width lineBreakMode:lineBreakMode];
if (size.width > width) {
float area = size.width * size.height;
float newHeight = area/widthSize.width;
if ((int)ceil(newHeight) % (int)oneLineSize.height != 0 ) {
newHeight = (float) ((ceil)(newHeight/oneLineSize.height) * (int)oneLineSize.height);
}
size.height = newHeight;
}
size.width = width;
return size;
}
@end
This is certainly not perfect. For instance, it only checks if the first line break would be shorter than the width. I’m not really sure how to access how long the second line of text would be. For my purposes though, it’s good enough.
Entrepreneur and founder of 