areus.co

Pay more because you're on a Mac

2012-10-23T00:00:00-07:00

For those interested in the whole browsers+pricing thing: informationweek.com/internet/ebusi… & slate.com/articles/busin…
— Miss Potter (@hellomisspotter) October 23, 2012

Curious, I clicked through the links, read the articles about how your browser/OS is detected, and you are shown conditional pricing based off of that information. While this sucks, fortunately, if you're a chrome user, there is a fairly easy work-around that you can do in order to see if sites you're visiting are showing you conditional pricing.

The Workaround

Right click in a page, and go down to inspect element. Doesn't matter what site you're on, we just need to be able to access the menu. I've done it in a blank chrome tab:

You should get a window pop up similar to the one below. Go ahead and click the little cog icon in the bottom right corner.

It's going to bring up a semi opaque box. There are 3 tabs at the top. You're going to want to click on the Overrides tab. Once you do, you'll see a checkbox named User Agent. Go ahead and check that to make it active.

You'll see the dropdown light up, and it'll show you a list of different browsers. Since Internet Explorer 7,8, & 9 are all strictly Windows, I often choose one of those.

Websites now recognize you as the browser you selected in that dropdown list. You can verify at the My Browser Info website. If you go to that site before you perform any of the steps above you'll get something like this:

Your Browser User Agent String is
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko)
Chrome/22.0.1229.94 Safari/537.4

Notice it tells you Mac, Intel, AND OS version. After you make the switch, you get:

Your Browser User Agent String is
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

MSIE 9.0 = Microsoft Internet Explorer 9
Windows NT = Detects you as a Windows User.

Now you can buy things on the internet looking like a "poor person" again. I'm sure there are add-ons for Firefox. A simple search for change user agent string firefox in google might get you somewhere.

When you're done with all your purchasing, make things normal again simply by unchecking the User Agent box shown above.

Building Blocks

2012-09-27T00:00:00-07:00

In about a week, I'll be launching a Kickstarter for a project I've been contributing to for the past month. Lingual has been a project at TinyFactory that started before I joined the company earlier this year. I have a bucket on Dribbble with some of the work, as does Michael.

We're planning on an October 8th launch, and I was put in charge of handling all the video for all the marketing and advertising. Video isn't something I necessarily identify with when it comes to skillset. It's more of a hobby, or a tool in the shed if I ever need to rely on utilizing it for myself. Photography follows the same formula.

Designers have the ability to use the fundamentals of their field to apply into all these different mediums. Line, shape, color, space, and texture. I hit the ground running, and kept a smile on my face the whole time. I'm no expert at filming, have no knowledge whatsoever in the theory of cinematography, nor the practices to adopt/avoid. I just hit the record button, and moved around until we ended up with something we liked.

I'm proud of what we ended up with. I had fun taking random pictures, and making dumb videos in the process. I just used the building blocks.

Launch Party

2012-08-28T00:00:00-07:00

August meant a lot of switches flipped for TinyFactory. We launched a new website, and last week, the team put a chrome extension online into the Chrome store.

When we initially put Benchwarmer online, it got a decent response. A few dribbble shots from the team, a couple tweets, and obligatory Facebook posts, the stats hiccuped. Nothing incredible, but the traffic felt appropriate.

We received an incredible plug from Beautiful Pixels, which setup (what I consider to be) an enormous achievement for all of us and the company. The Next Web covered our extension. We expected people to download it. We were hopeful for some love back from the community. We got that and so much more.

It was interesting to see how far we got in such little time on this project.

The Tiny Mechanics

2012-08-17T00:00:00-07:00

Over the past couple months, myself and the rest of the gentlemen at work have been plugging away at our online presence. Something long overdue. Even before starting work with TinyFactory this past March, we'd mentioned that the site needed a new look. A fresh take & an updated goal.

We gave it a new look before a node.js meetup we hosted in our office; we completely half assed the website so we had something online in time for the event. Down to the point where we left lipsum copy while it was live. We didn't even pick any of the cool ones.

Content[less]

We don't take on client work, so how are we to showcase all this work that hasn't come in? We hack together a lot of cool stuff in house, some of which never see the light of day. We didn't want to focus on a bunch of smaller, seemingly insignificant little hacking projects, so we started putting together things like the documentation, @michaelsacca's semi-secret-almost-public project, and we're messing around with an Arduino to power the lights in front of the office via your smartphone.

All of these things are incredible, but they don't put work in a portfolio.

Activity, not complexity

This got me thinking. Since we are trying to open source a lot of the work we've been doing lately, why not showcase these projects front and center to show the amount of momentum they have. It sucks when you run across an awesome project online that hasn't been updated in 3 months. So, the new TinyFactory site does just that. Showcases all our activity.

The new site pulls latest activity from all of the team's social accounts, and aggregates them onto one page using, yet another, soon to be open source js platform. GitHub commits, Tumblr blog entries (for our iPad game), Twitter, any new docs are added to the doc site, and selected TF shots from dribbble. It's essentially a lifestream setup on Facebook's timeline model.

The tiny mechanics behind the new site is probably for another post, but on Monday the 20th, you'll all be able to see what we've been working on for the past month.

No Right To Complain

2012-07-21T00:00:00-07:00

Sparrow doesn’t owe you anything. You paid, you got software. They can sell and/or kill it if they want. No right to complain. Sad, true.
— Matt Gemmell (@mattgemmell) July 20, 2012

Later, a ~1200 word 'article'. It's a compelling writeup if you're into playground drama or hypocrisy.

Neue Reform

2012-07-15T00:00:00-07:00

Prior to starting my degree in July of 2008, past graduation in September of 2011 to now, I've been a part of some pretty amazing projects. Some freelance, some through friendships, and some professionally. Roughly 5 years of being involved with design one way or another, and I've never given myself the opportunity to run something for myself. I've never given myself a creative outlet away from third party influence & client input.

Neue Reform is what I hope to be my freedom. I don't fully know what "it" will mold into. I don't fully know if it'll be prosperous, or that the content it brings will be rewarding to the end user. I don't know if this will be a rousing success, or a financial failure. I do know that I'm most happy when I'm designing, and we will love it regardless of what it is a year from now.

The only incentive for signing up, currently, is curiosity. Handmade digital craft goods. The original domains were registered in December of 2009. Breathing new life into a seemingly dead project feels so good.

Soft launching with a big bang isn't my intention.

Putting us on the map is.

Roll Your Own Icon Font

2012-07-10T00:00:00-07:00

Hieroglyph

Icon fonts are the new hotness. There are pros & cons, and if you want to waste your time reading terrible opinion pieces on all those reasons, Google away.

We're going to use a lovely tool called Hieroglyph. There's already a pretty intuitive readme file in the repo, but I hope to elaborate a little more on what was provided.

Installing Hieroglyph

Open up Terminal and type gem install hieroglyph. If for some reason you get an error and/or the install fails, update RubyGems by entering sudo gem update --system into Terminal, then give it another shot. You can test to see if it works by simply entering hieroglyph in terminal to generate an empty, dummy font.

You should get output similar to this:

~/Desktop » hieroglyph
  
Setup:
  ImageMagick not detected - skipping character sheet
  
Reading glyphs:
  
Done!
  MyFont generated saved to /Users/Aaron/Desktop/MyFont.svg
  Single characters: 
  Unicode characters:

Then just delete the generated SVG, in my case, on my Desktop.

Getting your icons ready

Open up Illustrator and create a new document sized 1000pt x 1000pt. We need to make sure that the icons are centered, and relatively the same size. Drag a horizontal guide so it sits 250 points from the top of the canvas. You can set this easily by dragging out a guide, then in your Illustrator toolbar setting the Y value to 250. You should also drag out a vertical rule with the X value of 500 so you have a vertical center showing.

Download Icon Template

Important: Make sure your icon is a compound path. If your canvas has more than one shape, it will cause issues with the font generation. You can make it a compound path by selecting all the shapes in the icon, and pressing CMD + 8.

Saving & Naming Convetion

Save your files as SVGs. Name them [key]-icon-name.svg. If you downloaded the template, you'll notice it's named [t]-twitter.svg. This will map the icon to the T key when our font is generated.

Font Generation

Let's get this thing generated. I've saved all my icons into a folder on my Desktop called glyphs. Go back into Terminal and browse to your Desktop by typing cd ~/Desktop.

Once we're there we can run hieroglyph -n FontName -g path/to/glyphs -o destination/path.
Or if you've setup everything the way I have hieroglyph -n Icons -g glyphs will generate the font on your desktop.

Your output will change depending on how many icons you've generated, but mine reads:

~/Desktop » hieroglyph -n Icons -g glyphs/
  
Setup:
  ImageMagick not detected - skipping character sheet
  
Reading glyphs:
  Parsing 1
  Parsing 2
  Parsing 3
  Parsing 4
  Parsing 5
  Parsing 6
  Parsing 7
  Parsing 8
  Parsing 9
  
Done!
  Icons generated saved to /Users/Aaron/Desktop/Icons.svg
  Single characters: 1,2,3,4,5,6,7,8,9
  Unicode characters: 
  
  To create a full set of webfonts, upload to http://www.fontsquirrel.com/fontface/generator
  If you're having trouble uploading SVGs, try converting to a TTF first using 
  http://www.freefontconverter.com

You can see a demo of the social font I just generated on my portfolio website.

Now that you've got your font in an SVG format, go ahead and run your new font through this font-face generator to get the other @font-face formats. Also make sure that you've clicked Expert and selected the custom subsetting option in the font-squirrel interface. If you're ballin' out of control, you might use FontXChange to generate the different formats instead.

In Conclusion

Now you're ready to embed those files into your stylesheet and start serving some icons!

If you really want to do it up proper, GitHub's post about Octicons goes through their process in great detail.

If this is too much for you, fortunately there are tons of great services out there right now that really make this easier. There is the newly created Symbolset, which is a font of icons that advocates way better semantics than I've shown above. The Pictos font has a pretty wide array of icons, Pictos Server and Shifticons which are both damn fine services for doing this a lot faster. Finally, Doug linked me to IcoMoon which gives you a nice drag and drop interface for building a custom font

Turkish Delights

2012-07-08T00:00:00-07:00

A quick video for a contest that a friend is entering at Mac Cosmetics.

Moving from WordPress to Jekyll

2012-07-06T00:00:00-07:00

For the past few months I've been wanting to start pouring some of my notes and processes onto the web. I've been using all 3 flavors of DayOne to keep track of most of the things I work on, important dates, things I've learned, or just enriching content like a tweet, or an image. DayOne makes that exceedingly easy with Dropbox.

When I registered this domain, I installed a generic WordPress install with a hacked up version of one of the themes I regurgitated last year. I'm comfortable with WordPress because it's a cake walk to do anything you want, but I didn't need 80% of what WordPress offers. I used SiteCake for a few clients as a test run. It was a step in the right direction, but not quite as light as I was hoping to get. Then I stumbled across Pelican. After a few cries for help, and a lot of help from a friend, I was off and running on Pelican.

It did exactly what I wanted it to do. Took a post written in whatever environment I wanted to write in, and spit out HTML. So I start looking through the templating engine that Pelican used and start familiarizing myself with it. Then I remember Jekyll. If GitHub uses it, then it must be awesome right? Right. Installing it was extremely easy. Since it's built in Ruby, I was able to take all my SASS files and drop them straight into the framework. Amazing.

Posting an entry is just as easy as it was from everything I've used before, and in a lot of ways safer and more reliable. No more databases, no more framework bloat, no more teeming installs with plugins.

As long as stuff like this is around, I'll never go back to WordPress.

How it's running

No more database driven stats. I've switched from Mint to Reinvigorate (maybe Gaug.es in the future).
I write my posts in DayOne or Byword.
I use a rake file to build and deploy the static files to the server. Just as fast as using Git to deploy.
I still have the site on a GitHub repository, mainly as a way to backup my entries.
No images. Everything is either a font, or base64 encoded (minus individual post media).
Video or image content is being served from Rackspace cloudfiles. Faster, and cleaner.
Fonts served from Typekit.