i've noticed..

2013, Aug 07

My SassyPGH Notes

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


Find common elements across a design - assign them to objects

Created for handoff to developers


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


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__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

Check out MVCSS

2013, Apr 06

And what should they know of England who only England know?

If your idea of practice is doing the same thing every day without deviation, you will never become great at that thing. Because, until you know the world around that thing, you will be missing the entirety of that thing. The perspectives that deviation brings allows you to appreciate the unique aspects of what you have deviated from.

I’m a Rubyist by trade and I love Ruby. But recently, I’ve made it a goal to be more of a polyglot so I can become better at what I do. I attend meetups for Python and clojure as well as run the polyglot hack night OpenHack Pittsburgh. I’ve learned about my weaknesses and strengths and I’m slowly becoming a more rounded programmer.

To facilitate my polyglot learning, I built the same web app in three separate frameworks. These examples of frameworks, in which I haven’t had any previous experience using and barely know the languages they’re built on, are clearly not the best examples. But here’s what I did and some of what I thought about it all:

Node.js + express
- incredible speed
- confusing file structure

clojure + pedestal
- couldn’t figure out templates
- crazy clojure syntax
- does routes very well
- largest app, by a large margin

python + flask
- <3
- very straightforward
- practically the same as sinatra
- started with this one

What did this teach me about ruby?
- Ruby is kinda slow (but not slow enough to matter)
- Method naming in Ruby is excellent. I can usually guess correctly a method name in Ruby, but not the others (and it’s not an experience thing)
- rvm and bundler are really nice
- express and pedestal come with some weird default routes. It’s not opinionated stuff to help you, it’s just example code that’s been implemented. Gross

Perspective doesn’t just help with the mastery of a skill. It also helps with happiness. I spent a year living away from my hometown of Pittsburgh and it made me realize the non-obvious things that make it special (That list: the rich historical background, many small dense communities created by the city’s unique geography, and the stubborn work ethic of the people). Without being away from those things, I may have never realized them. Now that I’m back, I think about them almost daily.

So I encourage you to think outside of your comfort zone and try something new. Take a different route to work. Learn a new language. Learn wood working. I don’t know? You can’t tell what each of those will teach you about the things important to you.

2013, Jan 06

Beginning RubyMotion!

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

The progress came slowly over the past few weeks with the Holidays, but I should get beyond a “Hello World” app this week. I will start a GitHub repo just for this blog series and keep my progress there.

Jan 04
Is tumblr a viable blogging platform anymore?

Is tumblr a viable blogging platform anymore?

2011, Aug 05

Social Nerds Track Twitter Followers with github

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']

follower_file = File.open('followers','w')

cursor = -1 
followers = [] 
  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

g.commit_all('Followers for '+Time.now.to_s)

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.

You can find the full project here: https://github.com/justinxreese/justinxreese-followers

Jun 29

You can now use images to search Google Images

2011, May 25

So… here’s what I did tonight

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.

2011, May 21

Live-Blogging the Rapture

  • Nothing yet
  • 9:43am - still nothing
  • 6:23pm - still nothing
May 18
Is Color&#8217;s founder Bill Nguyen one of the few leaving positive (and kind of snarky) reviews for Color?

Is Color’s founder Bill Nguyen one of the few leaving positive (and kind of snarky) reviews for Color?

2011, May 18

An Update on Self Compete

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.

Beta invites will be going out some time over the next few weeks to some of Self Compete’s most eager followers and I will be using their input to determine when the app will be suitable for launch. If you want to participate in the beta, make sure you sign up for the waiting list over at http://www.selfcompete.com

May 02
This is what happens when you add something to your cart with the Zappos app

This is what happens when you add something to your cart with the Zappos app

Apr 27
Man&#8230; that is just so cool. I love the internet.

Man… that is just so cool. I love the internet.

2011, Apr 17

Seriously, Use LaunchRock

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!

Read More

2011, Apr 06

How MealSnap Works

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.

It’s actually refreshing to see such a non-technical solution after apps like IntoNow, Shazaam, Google Goggles and Word Lens have amazed me with new breakthroughs in analyzing the real world. Sometimes the most simple solution gets the job done. Maybe I should use manual labor in Self Compete?

2011, Apr 01

What is Self Compete?

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.

My newest goal is to bring those things to you and to make them fun. I’ve already begun to develop and hope to have something out very soon. In the meantime sign up for early access at www.selfcompete.com and I’ll post regular updates on this site. I’ll be listening for your feedback!