i've noticed..

SassyPGH - CSS Organization Techniques

What do we want from a framework?

modular/re-usable

DRY

Maintainable

Semantic

Performant

standard design elements

design team/style guide integration

Existing frameworks

OOCSS

Find common elements across a design - assign them to objects

Created for handoff to developers

SMACSS

Created for a large team of developers

Base, layout, modules, states, themes

Modules are the heart of SMACSS. Modules should be able to be placed anywhere. Modules use a semantic class structure, created by how they are named.

.btn, .btn-warning, .btn-attention = modifiers

SMACSS built for yahoo mail makes it have strange characteristics that most devs stray from

BEM

More of a naming pattern

blocks - high level of an abstraction or component

elements - represents descendants of blocks that help form blocks as whole

modifier - different state of a block block__element--modifier{};

block__title--new{};

Similar to SMACSS without layouts

Random tips

& in sass is a shortcut for the parent selector

Browser Sass compiler

print design and outline modules

Anthony Short Blog

Use mixins until the end of a project, then go back and try to make them extensions

OOCSS breaks down with responsive design (maintainability-wise), but may be fixed with SASS

Check out style guide generators - generates style guides from existing apps

For 2013, the company I work for is encouraging each developer to take time to work on a personal project. Something of our own creation where we drive the vision, requirements and breakdown of work.

For my project, I've decided that I'd like to create an iOS app. I've already released five different apps on the App Store at a previous company and even saw some success reaching the top 10 in iPad Sports apps. Even so, I had no clue what I was doing and the experience was more about getting it done than understanding iOS development. This time around, my goal is to learn more completely how to create an iOS application.

But I've done Objective-C. I've used Xcode. It's a nightmare. It's not a fun tool to use. Luckily there is RubyMotion, a way to learn about iOS development, without leaving the tools I'm comfortable with. RubyMotion is a toolchain that allows developing iOS apps in not-quite Ruby (more on that later).

For my benefit and hopefully the benefit of somebody else out there, I'm going to blog my progress through RubyMotion: The bumps in the road, the lessons learned, random thoughts, results and code.

What Have I Already Learned

I've already begun writing a small bit of RubyMotion. What have I learned already?

First, it is really simple to get a basic app started. You can type 'motion create MyApp', add a few lines and have an app that actually does something rudimentary.

Speaking of adding a few lines. Using vim to edit iOS apps is great! I'm sure I could technically use vim for regular Objective-C iOS apps, but it certainly feels out of the realm of accepted procedures.

On first glance, the documentation is meh. Most everything available for RubyMotion, even through the official site, is paid content. There aren't a lot of people using it, so there aren't a lot of people writing about it. I have found RubyMotion Tutorial, which looks incredibly promising. I will update on that later.

You still have to understand the iOS frameworks. You won't be able to just pick up RubyMotion and assume that, because you know Ruby, you're set. You'll immediately find references to the framework, with UIAlertView's and UIWindow's. The framework is heavy and you have access to it all. There's still a learning curve.

Finally, RubyMotion isn't quite Ruby and still kind of ugly. The methods are written to look like Objective-C, with a weird Ruby syntax that won't even pass 'ruby -c'.

def application(application, didFinishLaunchingWithOptions:launchOptions)

This method is the equivalent of an Objective-C method called application:didFinishLaunchingWithOptions. That's all still there. Just Ruby-fied. Kinda.

What's Next

Update: Be sure to check the updated source code. I wasn't accounting for the paging mechanism in the Twitter API for followers. The old code won't work with over 100 followers.

Recently, I logged into Github to find a notification for a new mention. When I went to check it out, I found that I was mentioned because someone was logging all of their tweets with Github.

Being as obsessive about my low follower count as I am, I thought it would be really cool to apply a similar tactic to Twitter followers. I was able to create a script to do everything I need to track my Twitter followers with Git (and optionally Github) in just a little over an hour.

Before I began coding, I had to register a new application with Twitter and throw all of my keys/secrets into a config.yml. I also set up a git repository in directory with the script. This way, I didn't have to worry about checking for a repository - my script can just assume it is there.

Then the code... it's pretty simple, so I'll just paste it.

require "yaml" require "twitter" require "git" key_file = YAML.load_file('config.yml') g = Git.init('.') Twitter.configure do |config| config.consumer_key = key_file['consumer_key'] config.consumer_secret = key_file['consumer_secret'] config.oauth_token = key_file['oauth_token'] config.oauth_token_secret = key_file['oauth_token_secret'] end follower_file = File.open('followers','w') cursor = -1 followers = [] begin response = Twitter.followers :cursor => cursor followers += response.users cursor = response.next_cursor end while cursor > 0 followers = followers.sort{|x,y| x.id <=> y.id}.collect{|x| x.screen_name} followers.each do |f| follower_file.puts f end follower_file.close g.commit_all('Followers for '+Time.now.to_s) g.push

That's it. I set this up to run in a cron job twice a day, and now I have all kinds of green +'s and red -'s next to my follower list. It will fail if there hasn't been any changes to your follower list, but that's fine because there's nothing worth writing home about.

I may stop pushing to github, just to limit annoyances to my followers there, but I don't think I need to worry about the list being up there because it's not any thing that you can't get by visiting (scraping if you're a bot) my already public profile. One thing I really like about it being on GitHub is that I can use the RSS feed to passively keep tabs on when things change. I never have to visit that repository just to find out there are no changes.

http://instaplac.es - Instaplaces is a tool for finding cool things around you that you may have never knew existed. By using your phone's GPS or your computer's location, I've listed below the places near you where people are taking pictures most frequently using the popular Instagram app.

I was playing around with Instagram and noticed that there were locations for each picture, but seemingly no way to look at images taken at that location. So, instead of worrying about this missing feature... I built it.

I don't know what got to me, I don't really have free time, but I really wanted to get this done because I'll be moving to a new city in the next few weeks and will be looking to do all kinds of exploring. With Instaplaces, I can figure out what places are fun just by looking how many pictures are taken there and of what.

There are a few issues - like a lot of pictures going un-tagged with a location and a limited amount of images, but Instamatic grows every day and hopefully this will encourage people to tag their photos with a location ;). I also noticed it didn't work when I tested in Safari, but it works fine in Safari for iOS - so I'm just chalking that up to a gimmick for now.

Behind the scenes, Instaplaces is built with sintra and obviously powered by the Instagram API.

Nothing yet

9:43am - still nothing

I thought I was due for an update on Self Compete. This is almost a personal blog post, which (for me at least) is pretty strange. Luckily, it is a personal post hidden within a status update on something that may actually interest you so it doesn't get sappy or anything obnoxious like that!

Self Compete has come pretty far. The app functions well, with a few quirks, and the design is pretty solid, although not beautiful. The waiting list still grows every day. I had planned on sending out invites to participate in a beta during the past week but wasn't able to get to it.

I wasn't able to get to it because I've taken an awesome new job at StatSheet. I love it already. I get to write Ruby on Rails code that presents sports content to users with a fun team of passionate developers who care about improving everything they do.

One of the side effects of taking a new job was that I have virtually had two jobs for the past few weeks. Self Compete suffered a bit because of this, after all it is a one man show and with one man down that means no work gets done.

So, for a few weeks while I adjust to my new job and move across state lines, updates to my personal ventures will come more slowly. They will come, however, because these projects are important to me.

Seriously, if you are building any kind of web application, you should be using LaunchRock. LaunchRock is a service that creates a viral "Coming Soon" page that you can use to collect potential users. Sounds simple, right? Too simple? Actually... yeah. But the return on investment is just huge. Let me explain how it worked for me.

The Need

I had gotten to a point in building Self Compete where I was going to begin testing a feature that posted to Twitter and Facebook. This only way to test this feature (as in posting to Twitter and Facebook), is extremely public. If I was going to be doing testing that everyone was going to see, I better have something for them to look at. So I began to design a sign up page, hoping to turn the interest of these public tests into some sort of user base. I spent a few days designing something that I felt looked good and began working on a script to collect emails. Then I realized the headache that entails. "I have to convert this design to HTML", "I'm going to need to pay for hosting to host a page", "I'm going to have to write a script to store the emails that are entered", "I'm going to write a script to display or send the emails that are stored", "I'm going to have to market this page constantly". For such a small page, with at most 2 fields, there is a lot of work to be done. That means a lot of time spent NOT working on my application which I need the sign up page for!

The Solution

The day I had finished my design, and was about to start coding, was the day that I received an invite to use LaunchRock. Instantly, 2 days of work (and then the continued marketing) was transformed into 2 hours of work for free. I signed up, changed some DNS settings, filled out a form and www.selfcompete.com was now a social media powered sign up page.

Sure... a sign up page is easy stuff, but it has just gotten to the point where it is such an unnecessary burden on time that could be used better. This is like paying for food to be delivered so you can continue to work, instead of spending time cooking or leaving to get food. LaunchRock is your favorite pizza place.

Managing Your List

Just being on LaunchRock is going to get you a fair share of sign ups. The best part of LaunchRock, however, is how it encourages the sign up of friends by giving each person a unique code to share. You'll find that virality works in strange ways and your list will grow from unexpected places.

If you've used DailyBurn's new app, MealSnap, you've probably been mystified wondering how it works. MealSnap is an app that lets its user take a picture of the food they're eating and, based on that image, will provide calorie information for that food.

I've used app for about 6-7 meals now and I've been pretty amazed at the accuracy. So much so that I had to find out how they did it.

There has been some speculation at how it works in articles, but I couldn't find a solid answer. Is it image recognition? Do they have a team? Do they use Mechanical Turk? Well... one of those hypotheses is incredibly easy to test. 

I visited Mechanical Turk, typed in "food", and ta-da! 

Well.. truth be told, I had to hit refresh because these HIT's are moving fast and the first search turned up no results. Looks like they're using Mechanical Turk to identify the foods at anywhere from $0.02-$0.05 per picture and then using the data returned from Mechanical Turk to search for calorie information in their already well established database of food.

With a $2.99 price point for the app, DailyBurn would start losing money at around meal 60. By that point, however, Daily Burn has a loyal user that can easily be converted to the sale of another app in their family of products.

On the road here, to search for the new headquarters of Self Compete in beautiful Raleigh-Durham. Well, not exactly… I am on the road, headed toward Raleigh-Durham (which is beautiful), and Self Compete is a thing but it’s not a thing that’s ready for a headquarters. So… what exactly is Self Compete? Self Compete is my entry into the wonderful world of web applications. The idea started as a personal motif - a mission for each day, to improve upon the day before. It felt good. It felt like personal growth. It improved self confidence because I was growing and able (and willing) to take on new things.

This way of living wasn’t without its drawbacks. There was the risk of overdoing it and causing myself to degrade rather than improve. Also, it was difficult keeping track of where I had already been. I want to run further than the last time… but how far did I run last time? Around the time of realizing these issues, I was also a big fan of playing games on my iPhone. I would get 2 stars on Angry Birds and think to myself, “well I will definitely get 3 stars if I break 100,000.” That was the moment of realization - these high scores were what I needed for every day life.

Self Compete is my solution to these problems. It is an application that creates a way to measure any goal, break new personal bests and even do a little bragging. Through measuring where I had been, I was able to set realistic goals that were both attainable and still an improvement. Through incremental and controlled improvement, I could get better without over doing it and risking degrading myself. Along with the ability to set goals, I gained an emotionally valuable understanding of myself.

If you come across the need to store time as a float in ruby (I won't judge you), you can use this bit of code. It assumes that each subpart of the time string is 60 parts of the previous part. This works for hours, minutes and seconds, regardless of how it is entered, and will always use the first part as the base measurement.

j = 0

timer = 0

"12:40:30".split(':').each do |y|

timer += y.to_f / (60**j); j += 1;

end

If you're obsessive about your iTunes collection, you may never get to this point. I, however, have left my library unattended to for quite some time and have found a few too many albums without artwork for my liking. I'd like to clean it up a bit and, as far as I'm concerned, necessity AND laziness are the mothers of invention.

First, I created a Smart Playlist to find all of the albums that are missing artwork.

That will give us a nice organized playlist.

Which we can do a Cmd+a (Select all) and then right click to "Get Album Artwork" from the iTunes store.

Which will, in all likelihood, clear out a majority of your playlist's blank album art. You'll find that a lot of what's left is either a poorly labeled album or a track without an album. 

Nothing groundbreaking here. Not comprehensive. I'm sure there are even programs that will do most of the work for you. This, however, is quick, easy and already installed on your computer if you are using iTunes... so, why not try it?

Update:

... or this