Stuck? Need startup advice?

Be a beginner at something, everyday

4df0809f99c19f7b5e0e673836262106?size=150
by Bob Jansen on April 11, 2014 with comments

This week I worked on my first Wordpress blog theme. And it was a lot of fun. I put on my training wheels and set off into the unknown, excited. Compared to my normal development speed progress was dead-slow. But with every line of code and every search in the Wordpress code documentation I was learning. Which was great.

Doing a project like this from time to time is really important. Economically it might not be the best investment of time. I could've hired a good Wordpress freelance developer on oDesk to do the same work in a fraction of time. But doing this myself was emotionally rewarding.

Trying something new allows you to do stupid things. Things that would've been done by experienced people. But that's precisely the point. It's a reminder that you correct yourself. Spot things that don't make sense or could've been done better and more easily. You learn to collaborate and ask questions and process the answers.

Simulating external services during design and development

Fb613ae74d247c05eba250f575e2c9b0?size=150
by Michiel Sikkes on January 21, 2014 with comments

I'm working on an application that uses an external service to generate quotes for an order. When someone places an order, the external service generates a PDF that we save to our database. One problem is that the external service only works when I log into it and take manual action to generate a quote. This is an inconvenience when designing the interface and testing our application's end-to-end flow for other developers and designers. So, I decided to write some code to simulate communication with the external service when developing. This way we make designing, demo-ing and testing with the external service easier.

How do I simulate the external service?

I have one Sidekiq job that sends an order to the external service and saves a quote PDF on my model. This looks like this:

class SendQuoteRequestWorker
  include Sidekiq::Worker

  def perform(order_id)
    order = Order.find(order_id)

    connection = Faraday.new(url: Rails.configuration.x.quote_service.url)
    get_quote_response = connection.post "/quotes"

    quote_info = JSON.parse(get_quote_response)
    order.quote_id = quote_info['quote_id']
    order.quote = StringIO.new(quote_info['quote_pdf']))
    order.save

    NotificationMailer.notify_user_of_quote_created(order)
  end
end

In development, I do not want Faraday to send a HTTP request to the external service. I want to fake this behavior and save a quote from a fixture. This way my team members that do not have access to the external service, can still test our application's flow of requesting a quote and continue with designing the interface.

To do this, I added a configuration option called Rails.configuration.x.quote_service.simulate using the custom_configuration gem by @dhh and modified the SendQuoteRequestWorker Sidekiq worker to use this configuration option:

class SendQuoteRequestWorker
  include Sidekiq::Worker

  def perform(order_id)
        if Rails.configuration.x.quote_service.simulate
      perform_simulate(order_id)
    else
      perform_real(order_id)
    end
  end

  def perform_simulate(order_id)
    order = Order.find(order_id)
    order.quote_id = SecureRandom.uuid
    order.quote = File.open(Rails.root.join('test', 'fixtures', 'files', 'quote.pdf'), "wb")
    order.save

    NotificationMailer.notify_user_of_quote_created(order)
  end

  def perform_real(order_id)
    order = Order.find(order_id)

    connection = Faraday.new(url: Rails.configuration.x.quote_service.url)
    get_quote_response = connection.post "/quotes"

    quote_info = JSON.parse(get_quote_response)
    order.quote_id = quote_info['quote_id']
    order.quote = StringIO.new(quote_info['quote_pdf']))
    order.save

    NotificationMailer.notify_user_of_quote_created(order)
  end
end

My controller code doesn't have to change:

class OrdersController

    def create
      order = Order.new(order_attributes)
      if order.save
          SendQuoteRequestWorker.perform_async(order.id)
          redirect_to finished_order_url(order)
      else
          render :new
      end
  end
end

There is one case that I need to solve. When implementing the external service, I want to be able to test the communication while developing. So, in config/environments/development.rb I added a line to set the Rails.configuration.x.quote_service.simulate from an environment variable that I can set in my .powrc locally.

So, in config/environments/development.rb:

OrderApp::Application.configure do
  # other configs

  config.x.quote_service.simulate = (ENV['QUOTE_SERVICE_SIMULATE'] == 'true') || true
end

Now, if I want to disable simulation in development, I set my .powrc to:

export QUOTE_SERVICE_SIMULATE=false

And restart pow. This will start my Rails app with the QUOTE_SERVICE_SIMULATE set to false and my app will execute the real code that communicaties with my external service.

Conclusion

Simulating the part of the job that connects to the external service, makes designing and developing our application easier. With the configuration option in development.rb, I can enable the real code to be executed when working on the implementation with the external service.

Backups I dream about

Fb613ae74d247c05eba250f575e2c9b0?size=150
by Michiel Sikkes on January 03, 2014 with comments

I dream about good backups.

  • Backups should be encrypted
  • Backups should be pulled from your servers, not written to another server
  • Backups should be stored somewhere safe, where the right people can access it

I've written down some thoughts about the difficulties with backing up:

Why are backups this hard

Making backups is hard to do securely and with confidence that everything is humming along smoothly when your cronjobs kick in at night.

Read the rest of this article →

Intercity Preview: Installing a server to run Ruby on Rails

Fb613ae74d247c05eba250f575e2c9b0?size=150
by Michiel Sikkes on December 30, 2013 with comments

Intercity is our new server management application. It makes you and your team a better Ruby on Rails company by making server management easy. In this preview I'll show you how easy it is to install a server to run your Ruby on Rails applications.

Intercity saves you the hassle of setting up a server by installing your server for you. It installs the nginx web server, and creates databases and configuration files for hosting Rails apps on your server. And it uses random generated passwords and best deployment practices from the Ruby on Rails community.

I will now walk you through the steps of installing a server with Intercity.

Read the rest of this article →

Creating fancy money entry for your Rails app

Fb613ae74d247c05eba250f575e2c9b0?size=150
by Michiel Sikkes on November 21, 2013 with comments

This week I was working on a client project where we wanted to implement a nice way of entering an amount of money. We wanted to replace a standard text input field with something like this:

Money entry sample

In the resulting implementation, when the user types the amount in the text box it automatically splits thousands and the decimal point.

Here's how this is implemented in Rails:

Read the rest of this article →

Testing your own API classes without mocking, Part 1.

Fb613ae74d247c05eba250f575e2c9b0?size=150
by Michiel Sikkes on November 12, 2013 with comments

Recently, I had to hook up a Ruby on Rails app to a SAP Business One installation. This involved doing things like connecting to a SOAP web service. Multiple points in my application had to make use of this connection, so I decided to write a separate class for it. Here is a simplified version:

Read the rest of this article →

The Hidden Job of the M7 processor in the iPhone 5s

4df0809f99c19f7b5e0e673836262106?size=150
by Bob Jansen on November 05, 2013 with comments

Apple launched the iPhone 5s a couple of weeks ago. The 's' line in the iPhone range is known for it's spec bumps and minor updates. This year however the iPhone got two distinct features that improve the usability of the phone on many levels. TouchID helps you log-in to your phone using your fingerprint. The M7 processor contains all the hardware for tracking purposes.

Read the rest of this article →

Steve Jobs explained Customer Development pretty well

4df0809f99c19f7b5e0e673836262106?size=150
by Bob Jansen on November 04, 2013 with comments

Steve Jobs quote on Customer Development

One of the biggest mistakes made in startups is asking people what they want. It's not uncommon I see startups only testing their products and services. While instead they should have been asking and researching the problems.

Your target audience is under constant influence. By the time you finally ship the working product someone asked for, their view on what they want has changed. Probably already found an alternative or solved the problems themselves.

Secondly people are really bad at predicting their own behavior. They know about their problems, but they can't design the best solutions. They have ideas, but probably those are not suited for the mass market.

Designing working and marketable solutions for problems is your job. Not that of the people you talk to.

How the product is perceived is what you should measure when the product is being designed. But measuring how people like a solution is very different than asking how they want their problems solved.

Update: Check out this post from VentureHacks for a more in-depth look how Steve applied Customer Development.

Style form input placeholders using CSS3 and make them easy to re-use with SASS

4df0809f99c19f7b5e0e673836262106?size=150
by Bob Jansen on October 31, 2013 with comments

Finally all modern browsers support styling form placeholders through CSS. Editing form placeholders required using some javascript or javascript library. And still, for backwards compatibility you'll need one of the javascript libraries, obviously.

This post will just focus on the CSS3 implementation.

Controlling form styles through CSS

Controlling the style of an form input is done through a normal CSS property.

input[type="text"] {
    color: red;
    &::-webkit-input-placeholder {
        color: red;
    }
}   

Like many CSS properties we need to prefix for the different browsers:

::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder //for newer versions of Firefox
:-ms-input-placeholder

Pay attention to the two prefixes used for the Mozilla implementation. Older Firefox versions require usage only one colon while newer versions require usage of two colons.

Putting the browser prefixes in a mixin

We can make our lives easier by putting this into a SASS mixin.

@mixin input-placeholder($color)
  &::-webkit-input-placeholder
    color: $color
  &:-moz-placeholder
    color: $color
  &::-moz-placeholder //for newer versions of Firefox
    color: $color
  &:-ms-input-placeholder
    color: $color

By prefixing the CSS properties we're extending the CSS class and calling them correcting when including them.

Now if we have our input element living inside one of our forms. We can call the placeholder with the @include.

    input[type="text"]
        border: 1px solid white
        @include input-placeholder(white)

The will output the correct CSS to take control of the placeholder styling.

How to create a stylish button in CSS and make it re-usable using SASS mixins

4df0809f99c19f7b5e0e673836262106?size=150
by Bob Jansen on October 29, 2013 with comments

SASS mixins are a great way to keep your CSS clean and simple. Creating a mixin is actually easy and will save you loads of times repeating your code over and over.

I'll be using Bourbon Neat in the CSS code for the buttons. Bourbon is a great mixin library for SASS including many functions with cross browser support.

This is what we'll be creating:

Fancy CSS gradient buttons

Read the rest of this article →