Oct 12, 2012

Qio.me has all your screens covered

Hello Qio friends! Super excited to start showing you some mobile support thats been cooking. People visit your personal Web site on all sorts of devices. It can be complicated and time consuming to support all of them. Qio has you covered! Here's a preview of the Original theme fully mobile-fied!

Qio Mobile Preview

As you can see some of the data is being used in new ways. This should encourage you to ensure you upload a high-def profile image!

Qio Mobile Preview

This will be launching very soon. Expect it in under the week!

Sep 14, 2012

How this designer learned to program with Ruby on Rails and launched Qio.me

I've gotten a few requests to share how this paradigm shift happened. By trade, I'm a designer. Have been for many years. But how did I learn how to code a basic Rails product and get Qio.me out the door?

The four things that screwed me up:

  • Learning what MVC is and how it works
  • Learning how Rails has_many & has_one relationships work
  • Learning what a string, boolean and integer are
  • Learning what a method, object and hash is

My first venture into a product was MyZeus, where I admit I learned a whole lot from sitting down with my awesome co-founder Brandon Weiss. I sat inside the code base because at that time I was designing and building the front-end inside the Rails application. Anyone with moderate knowledge of using WordPress or any CMS should easily understand how Rails organizes views (similar to how many platforms theme content). Every time I looked in the controllers and tried to do something, he would explain it well for me.

First lesson: Find a friend who can show you a thing or two and who has massive amounts of patience.

One of the biggest initial hurdles was understanding how an MVC framework operated. It sounds simple once you understand it and becomes second nature. But like many others, I had so many questions about it. Models send information to the database, Controllers retrieve that information through the accessible model and Views give you the front-end power to display it (MVC). But, I was mostly confused about what type of code goes where. Rails for Zombies helped me with that most immediately. I didn't learn advanced skills through Rails for Zombies, but I did learn what MVC was and how it worked.

Second lesson: Try every single tutorial out there until you find one that works. I suggest Rails for Zombies and even just playing with Railscasts

Rails is definitely not the best framework out there. But it is great for beginners. You can bundle gems which will let you extend functionality with little to no knowledge and really move quite quickly. You can even scaffold (scaffolding a test application and deleting it taught me more than the Rails guides ever did) a few test ideas to learn how it all works.

One of the other tricks I learned was using GitHubs advanced search. Search for what your looking to learn or extend and choose Ruby as the preferred language. This is often times better than searching RubyGems.org because it will fuzzy search and try to pinpoint interest better. Look for gems or code that have high stars to them so you know other programmers thought it was interesting as well (use it as validation).

Third lesson: If your stuck, use StackOverflow or ask a friend. Remember that you do have friends you can ask.

Everyone says it's going to be trial and error. That is correct but it's not very encouraging or useful. Know that it's actually pretty easy to get a Ruby environment setup and with Rails integrated (probably about 1 hour of time). If you don't have the environment set up at all, this post seems to detail it pretty well. Although I'm not sure you need to do every single step in that writeup.

Use open source code to help you as well. I found that the Stripe API documents confused the hell out of me. Instead, I took my own advice with GitHub search and found Monospace Rails by the Stripe team. That allowed me to learn how to integrate Stripe way better than any tutorial. Purely looking at code.

Overall tips: If you have a full-time job, sit with the programmers. Ask them questions. If you have contract gigs, go to the offices and hang with their programmers. Continue to ask each programmer different questions, you'll be surprised how well they can help. If your using a gem and can't figure out a complex problem, either put it in their GitHub issues or send them a really nice email* saying how great their work is and that your stuck. If you just can't seem to grasp any of this and really want to take it seriously, my friends have created The Starter League. It's very comprehensive curriculum that will place you in Chicago for some number of weeks to learn everything you need to know (I've sat in on classes and have learned a lot in one sitting).

*= Don't be fucking rude. They coded something for you, for free. And they don't want to do more of your work (again, for free).

I'm a designer, why should I learn?

Because you will:

  • Learn better terminology to communicate with other programmers
  • Understand what is simple/complex, time consuming or basic
  • Utilize design as engineering power not a visual layer
  • Dream bigger and bigger (Be cautious: don't let your knowledge of programming cloud your dreams)

The success? Well, I launched Qio.me just this week and it's closing in quickly on one thousand Web sites created.

Starting with Ruby

Brandon Weiss suggests starting with Ruby first then beginning to learn the extent of Rails. Unfortunately I didn't take this route and I wish I would have. He suggests reading The Well-Grounded Rubyist. I'll be picking up this book as well.

Resources in this article

Sep 12, 2012

Using Name and Username with FriendlyId

One of the simple things about Qio is that it will automatically create a great scoped URL for its customers based on their name. The Friendly_ID Ruby Gem will do this for you.

But you might want to allow your users to define their own slug after they've registered. This can be done pretty simply.

User.rb (model)

$ class User < ActiveRecord::Base
$  extend FriendlyId
$  friendly_id :username_or_name, use: :slugged
$
$  def username_or_name
$   if username.present?
$    username
$   else
$    name
$   end
$  end
$ end

What we've done is created a method in the User model that simply checks to see if the user has filled out the string named username. Two strings, one for the users name, one for the username which is the custom slug we put in the user settings.

This code here can even be condensed or done a few different ways. But you can see how simply its done.

Sep 10, 2012

Qio.me in beta

Today I'm extremely pleased to open Qio in beta. The first thing to mention is how many bugs there are. There's quite the list and the product is far from perfect. But it'll get there!

What is Qio trying to solve? I'm constantly surprised by how many people don't have online presences and even when they do, they're sharing the wrong kind of information. Personal Web sites should be similar to a glossary. What have you done? How would you describe yourself? Where can I find you? And so on. Instead, I see people focusing on all the wrong information. Large imagery of themselves, lack of ethical stature and inability to find contact information. Even blog posts I believe are not a great way of expressing your personal being. Everyday visitors go to your personal site and want to learn about you, so let them.

OK. Facebook, LinkedIn, Flavors, About.me and the list goes on. Is Qio a clone? First off I'm one person. So if you'd like to compare me to those multi-million dollar funded companies each with more than 10+ employees, feel free. I'd be honored. But in actuality, I think these services are a little different from Qio. In our industry we have a tendency to compare and contrast companies/people who are solving similar problems. I find that to be obnoxious. Solving a problem better than the previous person is still solving a problem.

Qio is a Web site creator. The morals for Qio will never change. Those morals will continue to evolve around enabling consumers to have access to beautiful, simple and effective personal pages for their professional lives. That means enabling you the control over your information on the Web.

The future

The current plan is to enable Qio customers to pay an $8/m premium for upgraded accounts. I'm not exactly sure how the tiers will be organized as of yet. But what I do know is that I'd love to enable more themes to exist, custom domains to be enabled and your site no longer needing my beautiful little Qio badge on it.

The full stack

I'm a designer by craft. I'm not the best programmer. But I decided I needed to learn. Mostly because I'm addicted to 'crafting'. This is my first official Ruby on Rails Web application as a product. I'd really suggest for a lot of designers to get out of Photoshop and start learning to code.

The wide stack: Postgres, Memcache, Ruby, Rails and S3. To scale I will be focusing more on the front-end and caching.

By focusing more so on code I was able to learn what was important. I realized if a users page doesn't look and work well, what good is a full-fledged beautiful marketing site? Designers would have most likely spent weeks on a marketing page. But in actuality, the marketing page should evolve. I wanted to focus everything on ease of publishing in the dashboard and the themes for each personal page.