Joe Hsu

named routes with react-router

Fri, 31 Aug 2018 09:25:27 -0700

While using react-router, I was tired of manually constructing link paths and having to change paths whenever I moved things to different routes. I created react-router-namesake to solve this.

I wanted to build something that allows the use of named routes. React 16 createContext had just come out and decided that it would be a good use of it.

Defining routes

I wanted to keep this really simple and not make too many assumptions on how the route definitions could be created, so I made a simple map of name to path. Using the NamesakeRouter component, you pass in a map of the application routes.

Now that the routes are defined, in place of react-router’s Link component, we use NamesakeLink with a to prop with the name of the route. We can also optionally pass in params that might be needed to generate the path.

onClick events

A common use of routing is to navigate on a click event. To support this, react-router-namesake provides WithNamesake component that gives you acces to a routes object. This is a wrapper around react-router-namesake’s context consumer.

You can then create a custom button like so:

experimentation

I also experiemented with utilities around generating the routes config, but it feels too verbose to generate a simple mapping.

Feel free to check out the source code and see how I use React’s createContext to provide named routes on github.

react-native border progress bar

Fri, 25 Sep 2015 08:00:23 -0700

I’ve been doing some experimenting with react-native recently. Great posts such as React Native Youtube Animated Video Slide by @browniefed inspired me to write a post and learn more about layouts in react native.

For the app I am working on, I wanted to come up with a novel way of displaying time progression. Instead of a simple line or cicle, my friend Warren had the idea to use the border around the screen and animate from the top left moving clockwise around the edges.

The way I decided to approach this was to make each border its own view. React Native uses flexbox for layout. In order to accomplish this, I split each border section into a two view layout. For the first border, I created a View that contains a view for the top border and a view for the rest of the screen’s content. Then inside the content view, I split that vertically with the content and the right border. I repeated this process until I had all for edges.

splitting the screen into two views, one for the top border and one for the rest of the screen and so on

Here’s the code I used to create this layout.


const ExampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.borderH}></View>
        <View style={styles.contentH}>
          <View style={styles.contentV}>
            <View style={styles.contentH}>
              <View style={styles.borderV}>
              </View>
              <View style={styles.contentV}>
                <Text>content</Text>
              </View>

            </View>
            <View style={styles.borderH}>
            </View>
          </View>
          <View style={styles.borderV}>
          </View>
        </View>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    marginTop: 20
  },
  borderH: {
    height: 20,
    backgroundColor: 'blue'
  },
  borderV: {
    width: 20,
    backgroundColor: 'green'
  },
  contentH: {
    flex: 1,
    backgroundColor: '#efefef',
    flexDirection: 'row'
  },
  contentV: {
    flex: 1
  }
});

checkout the example on rnplay

Now let’s add progress to each border (I’m going to set a width for each border bar, but in a real scenario, the next clockwise border won’t be filled until the previous one has completely filled). We do this by adding a view inside each border view that has a width (or height if the bar is vertical) with a background color. I’m going to set the background color of the previously shown views to be white so that we can clearly see just the outside borders.

As you can see, the bordersare not starting from a clockwise direction. That is because the content of the borders are left or top aligned. We need to tell the bottom border to align right and the left border to align bottom. The way we do that with flex is to set the bottom border (the view that contains the progress bar) to flexDirection: 'row' so that flex knows which direction the content should orient and then justifyContent: 'flex-end' which since we are using flex row, is the right-hand side. Similarily, for the left border, we set flexDirection: column since it is vertical and then justifyContent: 'flex-end' and BOOM

See the final source on rnplay

This is how I was able to create the layout for a progress bar that goes around the border of the screen. There are several parts I didn’t put in this post like how to determine what width to give to each progress bar view and also how to determine how much each bar should be filled given an overall percentage.

I hope you found this helpful in learning how to use flex in React Native. If you want to chat, hit me up on twitter (@jhsu) or join the reactiflux chat. I’ll leave you with this teaser

Building a flexible layout using AngularJS and UI-Router: Part 1

Tue, 11 Mar 2014 10:04:00 -0700

This is a series where I will be talking about building a flexible layout with angularjs and ui-router.

In this first part, I will be giving some back-story, basics of ui-router and planning the layout.

building an interactive UI

An app that I have been working on called Fit Entry has been using minimal javascript to create user interactions on the client-side. It started off as simple jquery snippets and then brought in backbone.js which provided a Models and Collections which were useful in interacting with the API. This worked great with the initial simple interactions, but I wanted to build better workflows and nicer interactions for users and backbone really didn’t allow the ease to develop such interactions.

I decided to take the dive and pick up Angular.js.

After rebuilding the API and setting up some controllers and views, I wanted nested views. The reason being that I wanted to show a list of items alongside a detail view of the item side by side. Natan found ui-router.

planning the layout

The layout I wanted was a top navbar, sidebar, announcements pane, main pane, and details pane.

To understand this layout, there are a few situations to know about and what they would show. The navbar would always we shown and the sidebar would almost always be shown.

the dashboard: navbar, sidebar, announcements and the main pane. The details pane would be shown when clicking on something in the main pane and also hide the announcements pane.
listing page: show a table in the main pane, announcements and details would not be shown. When clicking on a row in the table, the details pane would be shown.

brief intro to ui-router

UI-Router is a routing framework and uses $stateProvider as an alternative to using $routeProvider to map urls to controllers and templates. Instead of routes, ui-router uses states which are identified by a state name.

Here is a simple example of using ui-router.

You can see that it defines things very similar to $routeProvider.

In your main html template you would put <div ui-view></div> and when visiting /dashboard, the DashboardCtrl will execute and render dashboard.html inside of the ui-view.

Based on this simple example, you might be wondering how this is an advantage. The real power of ui-router comes from its ability to allow for child states. Here is an example of how a child state is used:

then inside of the dashboard.html template you would put a link to this state using the ui-sref attribute and make sure there is a ui-view inside also, since that is where the child view will be rendered!

The full path for the dashboard.child state becomes /dashboard/child since it inherits the prefix path from its parent, the dashboard state.

Now when you visit /dashboard and click show the child view, the url will change to /dashboard/child and render the dashboard.child.html inside of dashboard.html’s ui-view.

Read more about ui-view nested states from the ui-router wiki.

thinking about implementation

Thinking about ui-router and the layout I desired, I had a hard time trying to figure out a way to represent this in a reusable way for multiple states and how to manage the states of each of the panes. In the next part I will go through some of the methods I tried and what I ended up settling on.

Leave any comments or suggestions about what you would like to know more about below

PDX

Fri, 29 Nov 2013 16:55:00 -0800

Hello, everybody.

I am now a resident (and homeowner) in Portland, OR!

Nickel City Ruby Conference

Tue, 03 Sep 2013 14:34:00 -0700

Nickel City Ruby Conference:

Ruby Conference in Buffalo

Come on over to Buffalo, NY for our first Western New York ruby conference!

I have been working with several others in the WNY Ruby community to bring this conference together and it’s finally coming!

We have several great keynoters: Jeff Casimir, Sara Chipps, Zach Holman and Neal Sales-Griffin and a range of interesting speakers and topics!

There are also two events surrounding the conference.

Ignite Buffalo

“Ignite Buffalo is a rousing evening of food, drink and 5 minute lightning talks”

http://ignitebuffalo.com/

Code Retreat

There is also a Code Retreat (you’ll learn a lot from this, I know from attending one a year ago) workshop that will have you pairing and doing code katas. You will learn lots from working under different constraints. This is definitely for all levels.

NYC Bus

There is a bus specially arranged by Ruby Central from NYC to Buffalo, NY.

Help others attend

If you want to sponsor a student to attend, contact nickelctyruby@gmail.com.

Info

Find more information about the conference, speakers, events and register on the website nickelcityruby.com.

Rails Workshop Reflection

Mon, 02 Sep 2013 11:59:41 -0700

It’s been a week now since leading my first workshop Introduction to Ruby on Rails with Girl Develop It Buffalo and I have had some time to reflect on it.

workshop preperations

Install fest went well. I had students install vritualbox and use Vagrant to boot a ubuntu vm I had already set up. I wanted all students to work under the exact same environments. I had some issues with getting it all set up on windows, but besides that I think it went well.

It worked well for the class, but it might have been useful to have a dev environment outside of a vm ready on their computers for after the class.

8-hours is not a lot of time

When putting together the curriculum I was nervous, wondering if I had enough material to fill the time.

As someone who has been working with a technology, it is easy to forget many aspects. Steps become embedded as habits and fade out of the foreground.

Scaffolds

While experienced rails developers cringe at the thought of using the scaffold generator, it’s a huge time saver when teaching. Generating a model, migration, views, controller and actions with basic CRUD is super useful.

Once the first scaffold is generated, it also makes a great way to explain the process of a request coming into a rails app without breaking the explanation while building the different parts.

Explain, Show, Do.

During the class, I would explain one topic such as adding a route, had each person follow along, then having them do the same with a different resource.

I like this process, but I would probably have split things up differently. I think it might have been better to:

explain and show - Go through the topic while students them, then show it in use
do - after a few related topics have gone through explain & show, have students use what they learned collectively. This would raise signals in what topics needed more attention

I enjoyed teaching the workshop and hope the students got something useful from it. I enjoy enabling others. Maybe I’ll do something simlar in the future.

Introduction to Ruby on Rails Workshop in Buffalo

Mon, 05 Aug 2013 12:00:29 -0700

In preparation for Nickel City Ruby Conference, I will be teaching a workshop with Girl Deveop It Buffalo. The workshop will be an Introduction to Ruby on Rails.

What to expect

This workshop will be hands-on walkthrough on getting started with web development using Ruby on Rails.

You will learn:

the Ruby on Rails framework
development workflow with Rails
working with third-party libraries (rubygems)
building an application with users
basics of deploying an application

Who can attend? Do I need to know how to program?

While the event is held under Girl Develop It, anyone can attend!

You don’t need to know how to program, you just need to be motivated to learn. This is about building something.

You will learn through doing and learn how to use the many resources to effectively learn more.

Install Fest

We will be holding an Install Fest the night before the workshop ( Friday, August 23rd, 2013 – 6:00pm-9:00pm) at the Buffalo Engine Yard office to help get a development environment set up so that everything is ready for the workshop.

Schedule

The workshop is split into two sessions.

Both sessions will be at Engine Yard’s Buffalo office.

Friday, August 23rd, 2013 6:00pm - 9:00pm
Saturday and Sunday August 24-25, 2013 12pm - 4pm

Register

Cost

The workshop is $80 for two 4-hour sessions

Girl Develop It has a great article on How to ask your employer for reimbursement

Hope to see you there and don’t forget to register for Nickel City Ruby conference!

Calendar UI for an app I am working on. It uses a backbone view...

Thu, 27 Jun 2013 20:02:00 -0700

Calendar UI for an app I am working on. It uses a backbone view and model, renders client-side and uses pushState for navigating dates and months.

Working with the stripe API

Tue, 25 Jun 2013 10:30:00 -0700

Recently I have been integrating an app to work with stripe API and thought I’d share some things I learned. Please excuse my coffeescript =).

Know where to find the docs
Use the correct publishable key
Protect customer credit cards and yourself
Don’t have to require cvc when it’s not required
Stripe application webhooks (added: July 18th, 2013)

stripe-ruby

Reading the rubydoc is hard, since things are so abstracted you’ll have to hop from class to class. Just check out the stripe documentation at https://stripe.com/docs/api/ruby.

Stripe Connect

if you are making stripe requests both server-side and client-side, you will have to ensure you are using the right access tokens and publishable keys!

This bit me once when I was using stripe.js to add a card to a customer client-side (so the card info never touches the server but gets a token from stripe) and was setting

Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

to my stripe account, but it needs to be set to the stripe connected account’s stripe publishable key. You should be storing that along with the access token in your database for future reference. Hint: save all the attributes stripe gives you because you never know when you will need them: https://stripe.com/docs/connect/oauth .

Stripe.js (stripe docs)

Protecting credit-cards

Protect your users and yourself from exposing credit card information by not having it even touch your server.

Using stripe.js you can create a form with inputs for credit card inputs that is submitted to stripe and returns to you very basic info (last 4-digits, etc) , which you can store on your server, and a single-use token that references a credit card.

Stripe gives you a basic implementation for doing this, but lacks a few things such as submitting the basic card information back to your server, and also while the stripe docs say that the card CVC is optional, using the boilerplate stripe.js form, a card would be rejected without it.

To pass the card’s basic information to the server, I append hidden inputs to the form with the basic information

Since the CVC number from the card is not required, but it is checked for when submitting to stripe, the input needs to be checked and removed before submitting it to stripe.

I use these simple functions to check if cvc is blank and simply remove it before calling Stripe.createToken(form, ...).

Here’s the working coffeescript class I use to handle stripe.js interactions:

Handling stripe.js interactions

The code could be cleaned up a lot more, but the way it works is through the bindStripeForm() handling the form submission to get a stripe payment method token which then stripeResponseHandler() passes information to StripePaymentMethodForm to render any error messages and then add basic payment information as hidden inputs into the form and submits it along with the stripe payment method token to the server.

Stripe application webhooks

Stripe webhooks are handled slightly differently for a standalone Stripe integration versus a Stripe application. What this means is if you have a stripe application where others can integrate their own stripe accounts.

When setting up a stripe events callback, I noticed I was getting several exceptions for Stripe::InvalidRequestError: No such event: evt_****; a similar object exists in test mode, but a live mode key was used to make this request.. This means that test events are being sent to a live events callback.

I confirmed this after checking the documentation under Configuring your webhooks:

You can enter any URL you’d like to have receive the events. The mode determines whether test events or live events are sent to this URL — if you want to send both live and test events to the same URL you need to create two separate settings (application webhooks do not follow this rule).

What this means is you will have to for livemode root level param to see if the event should be ignored.

The Prototyping of Medium

Wed, 10 Apr 2013 11:00:28 -0700

The Prototyping of Medium:

Great story about the development of the idea of Medium and the process in rapidly prototyping and filtering ideas to something simple and focused.

Joining Engine Yard

Thu, 17 Jan 2013 15:21:00 -0800

On January 11, 2013, I had my last day at Academic Software Plus and will be the Platform Team at Engine Yard in about a week.

I was the companies first intern back in 2009, and was hired at the end of the internship and I accepted my first full-time job as a web developer.

makeshift Best Intern Award. We found this plaque when we expanded our office space and it was repurposed using the label maker.

I was able to be there at the start of a large project being written in Ruby on Rails and help it go live in under a year. I watched the team grow in terms of skill and size.

I was able to attend my first developer conference (mountain west ruby) and several others. I was able to be a part of WNY Ruby group and the company has been backing the group since as long as I can remember.

It has been a great experience working at AS+. While there, I learned to work in a team.

The changes you make impact others.

The changes you make impact others and you have to understand whatever you push, must be ready for others to pull in. So, don’t commit those git conflicts, don’t forget database migrations or even don’t forget to check in an updated database schema file.

Keep things clean.

Clean commit history helps a lot. When someone looks at the git log they should be able to read it, and not like reading a 14 year old’s twitter feed (“OMG”, “LOL”, “HE TOLD ME TO!”, etc.). rebase your feature before you merge in to make sure you adjust your work on top of others.

Allow people to figure things out easily.

The original author will not always be available to explain the reasoning behind decisions or easily decipher the purpose of methods. Make things easier for everyone and document. This is a lesson learned through growing pains and especially harder justify when things are changing frequently. But, better late than never.

The best way for change is to encourage.

Sometimes small pains just pile up and it all becomes this larger monster that no one wants to attempt. People will yell about the pains, which helps bring awareness, but what really helps is when someone is able to say, “here was a problem, here’s the start of a solution”.

Leaving

Accumulated office possessions. Lots of coffee mugs, a few foldable.me’s, a giant mousepad and some led lights.

I ran gitstats on our main application’s git commit history and got some interesting stats from it.

I was the number 1 commiter at 26% of all commits since August 2009. I removed more lines than I have added in commits (I’d like to think that’s a good thing).

The future at Engine Yard

I look forward to joining Engine Yard and the awesome people in the Platform team that I had the pleasure of meeting in Portland, OR and the former AS+ employee Jim Lindley. I will also be hanging out with the Buffalo team in their office.

I do not know too much about exactly what I will be working on, but look forward to some big things!

"From Pitch to Plan: Learn the Secret" talk by George Chamoun of Synacor

Wed, 28 Nov 2012 19:33:38 -0800

Undergraduate Academics of University at Buffalo hosted a talk by George Chamoun, a founder and now executive vice president of Synacor, about starting a company.

The Big Idea

George told his story of starting Synacor, fresh out of college as an alumni of University at Buffalo. They were sports fans and thought it would be awesome to have an email @ domain of their favorite team instead of just @hotmail.com, which George said sounded “like a porn site.” They would then partner with companies to brand emails with advertisement in exchange for the email service. So they had an idea, but they faced the classic dilemma for startups, an idea but no capital or even anything built.

Path to Starting

Luckily, one of the founders was interning at a company, and after pitching the idea, was able to not only get an adviser to help guide them, but also space in the office for them to meet and work out of.

They had a space, but they were business guys and still needed an engineer to build the platform. They approached a local developer, Mark Musone, and pitched him the idea. As a result, they were able to have him do the development, but in exchange, they would help work on his house. This meant putting up drywall, putting in windows and a stairway. They now had an employee… and employer.

First Customer

In order to get their first customer, they decided to provide the service for free. They approached the Buffalo Bisons and asked to have a link placed on their site for email signups.

From there, they were able to get more customers and more advertisers. Three years after that, they had over 200 customers!

Seeking Investors

When finding people to invest, you should think about what people are interested in and focus on that.

People believe in markets and people.

The Secret: PHD

The big secret to starting a company. George revealed his ideology behind being successful at starting a company, the acronym PHD.

P - Passion

He sees passion as having believe in yourself and your dream. As time passes, this makes things fun.

H - Hours

Devote more time than others. Put in that extra effort and immerse yourself in your field. Devoting time becomes more and more natural.

D - Discipline

Be able to focused to your goals. Out of the three, this becomes harder over time and needs more attention.

Takeaway

From this talk, I learned how important it is to find advisers to fill in those knowledge gaps.

During Q&A, he answered the question of how to address self-doubt or second guessing. He said that you are going to be 50% wrong, but also 50% right and just know that and be ok with that. This made me think that beyond that, you should know the next step to take if you are going to be wrong, that way you have confidence no matter if you are right or wrong.

Startup Weekend Buffalo 2012

Mon, 19 Nov 2012 13:14:00 -0800

The first Startup Weekend Buffalo happened this past weekend November 16-18, 2012.

Here’s the experience I had.

The Start

Day 1

Started at 6:30pm

We listened to some speakers talk about how the Startup Weekends started and some inspiring words from Eric Reich and Tom McManus.

Then we went into pitches.

I pitched an idea for a mobile app. I was super nervous for those 60 seconds, despite that, I said what I said. We wrote our ideas on large sheets of paper and posted them up on the surrounding walls. We were given 3 sticky notes to place on the ideas we liked.

Several groups wrote their idea name and a few paragraphs about what they were about. They even stood by their poster to pitch to anyone with a sticky note. I wasn’t sure if that was something that was allowed. I probably should have written more on my poster and stood by it, but I wanted to mingle.

I was pretty bummed about not having my idea voted, but as luck would have it, I found an idea that clicked with me.

We formed our group, made up of Devin, Elizabeth, myself, and Nicholas, discussed the idea further and worked out our next steps. Elizabeth Weinberg, the idea-pitcher, walked us through her experience and what she believed the solution would be.

The problem we are trying to solve is that public relation professionals need to distribute their releases, but the current methods are inefficient and painful. The accepted way is to blast it to journalists and writers or send it directly in hopes that it will not be missed. This process is very inefficient. We want to help get valuable information to interested parties.

We had 2 developers (including myself), 1 front-end dev / designer, 2 non-technical people (taking care of validation, research and formalizing our idea).

Day ended for our group at about 1am, though I continued to work through to about 3-4am at home.

Day 2

I got in a little before 9am

Group met, found a table near an outlet and had breakfast.

We had a discussion about which language to go with, since one was a php developer and myself a ruby dev. We discovered that the night before (well, more like morning 1am-3am) we both had separately already started. We decided to go with rails =). I got the team set up for development. Installing dependencies was an adventure.

We were able to merge in the front-end design work being done into our application with relative ease.

We settled on the name PRessConnect and we got cracking on building the platform.

Groups of mentors were introduced to our groups and ideas and were able to ask some quick questions. As they day went on, the mentors walked around and were able to spend time individually with groups. We had some great mentors to speak to and showed genuine interest and also were able to give us harsh feedback, which is super useful in pointing out questions we need to have answers for.

The questions that seemed important for our solution seemed to be about rollout and competition.

We got some good food.

Fat Bob’s

We continued to do research on competition and got feedback from journalists, PR professionals and small companies that might need to issue their own press releases.

Headed home at about 2am.

Day 3

Somehow, I was able to get in before 10 am.

We continued working on the platform, getting the UI looking decent and functioning.

I fixed up user registrations, made sure a user could sign up as either a journalist or publicist. Several parts of the ui needed to be tweaked. The front page, press release creation and dashboards were essential and wanted to make sure those were solid.

We had a lot of questions we had to make sure we had answers to. Definitely had my head in code and needed to pull back and make sure we worked on what was most important, our presentation and pitch.

A lot of the time was spent just thinking and discussing.

Presentations started at about 5 pm.

We were lined up at number 12.

I wasn’t nervous. We were solving a visible problem and were one of the few teams with working demos and it felt good. Plus, I didn’t have to speak.

Presentation went well.

We got some tough questions about existing competitors. I feel like we provide more as not being that blast out and allows journalists and writers to be part of the communication.

The winners of the event were Do Something. A mobile app similar to Draw Something, except words were acted out in video instead of drawn.

The Aftermath

We didn’t win. That’s ok. We still believed in our idea.

Getting customer validation over a weekend before a national holiday is hard.

We got mentioned in the Startup Weekend article in Buffalo News and I even got quoted!

Hopefully you’ll hear more about PRessConnect soon =).

The Tech

For those of you that are interested:

Ruby 1.9.3
Rails 3.2.8
puma app server
postgres database
hosted on Heroku
devise for authentication
cancan for authorization
bootstrap for base styles and grid layout

Stop waiting.

Tue, 06 Nov 2012 07:05:48 -0800

Note to self: stop waiting.

Great piece and except from a Dr. Seuss called Oh, The Places You’ll Go!

RailsRumble 2012: Bring-a-Thing

Mon, 15 Oct 2012 06:55:17 -0700

For RailsRumble, we decided to create a group to represent our local WNY Ruby meetup group.

We formed our gang of four:

We started a few hours late (DARN YOU TIMEZONES CONVERSIONS!), but we put in the 48-hours. Our app idea came from Mark. The app would help manage what people are to bring to a party.

Bring-a-Thing

Don’t forget to check out our RailsRumble Page and vote for us!

Rails Responders: Versioning an API

Tue, 02 Oct 2012 11:38:00 -0700

Disclaimer: Not sure if this is a good idea or not, but so far I like it. Let me know what you think about this on twitter @jhsu or comment on my gist.

In order to version an API I decided to try and follow what conventions I could. I decided to do something similar to Github and what’s talked about in Versioning Your APIs by setting the version in the headers ‘Accept’ param and putting 'v1’ in the vnd suffix (is that what is called?).

Using Responders’ functionality that ActionController::Responder makes use of, I created a custom responder to determine the version of the API during a request and using the decorator pattern (through the draper gem) to have different decorators for each version and each resource.

The Responder:

In the controllers:

Update (2 Oct., 2012)

This was presented at WNYRuby 2 Oct., 2012. Here are the slides.

Draper: decorating named scopes and relations

Wed, 26 Sep 2012 07:51:20 -0700

In this post, I will go over a pull request I got accepted into Draper. View the pull request and the changes on Github. This post will deal with how to figure things out and also a little about the internals of draper and ActiveRecord.

Draper is a Ruby gem that implements the Decorator Pattern and provides a convention for rails models. The decorator, in very simple terms, is an instance that wraps another to provide additional behavior. In draper’s case, the decorators act as presenters for rails models.

The Pain

A coworker of mine was using draper to decorate models for use in views, but when calling a named scoped on a decorated object, it was returning an undecorated instance, which then requires you to redecorate it.

Similarly when calling scopes on a decorated relation, it was returning a relation instead of being decorated. Thus requiring you to rewrap the collection in a decorator.

It feels like what this returns should be decorated. So, how do we approach this?

Digging into Draper

When creating a decorator, the class inherits from Droper::Base, so let’s take a look at how that handles methods that we don’t explicitly define. My guess is that it uses ruby’s method_missing to delegateto our model.

Ah, there we are, inside of method_missing we see draper checking for the basic dynamic finder methods else just call the method on the model:

if method.to_s.match(/^find_((all_|last_)?by_|or_(initialize|create)_by_).*/)
  self.decorate(model_class.send(method, *args, &block), :context => args.dup.extract_options!)
else
  model_class.send(method, *args, &block)
end

We can see that draper does try and redecorate the instance, but only in cases when the method called matches certain finder methods. At the same time, we don’t want to decorate every method call, we want to decorate these three cases:

finder methods & named scopes
methods that return the model’s self

How can we ask the model these questions?

Making Draper Aware

Calling a scope on a model returns an ActiveRecord::Relation instance (which you can see by calling in the console Thing.limit(1).class). Rails does this to allow chaining of named scopes which allows us to delay the database call until we need it.

So, based on that, we can check if we get returned the model itself or an ActiveRecord::Relation.

model_result.kind_of?(model_class) || 
  (defined?(ActiveRecord) && model_result.kind_of?(ActiveRecord::Relation))

Awesome, this covers the case when we have an instance, decorate it, and call a scope on it. But now we have to handle the case of when we decorate a ActiveRecord::Relation, such as ItemDecorator.decorate(Item.limit(3)) and then chain a scope on it.

To do that, we need to modify Draper::DecoratedEnumerableProxy. In this case, we check if the collection responds to the method. If it does, handle it the same way we did in Draper::Base, else pass it to its super. The reason that respond_to? is used is because ActiveRecord defines a custom respond_to? method that handels dynamic finders and scopes.

Service Oriented Architecture (links)

Fri, 07 Sep 2012 07:03:00 -0700

Looking to split up your app(s)? Here’s some great reads on separating into services:

Songkick

Service Oriented Songkick. Getting started with SOA and several things to consider.
SOA: What our services look like
The Client Side of SOA. This one talks about how to move an existing app to be service oriented. A resource’s access to active record is separated into two classes, a service class and a client class.

Articles

SOA for the little guys – RubySource

Book

Service Oriented Design with Ruby and Rails. Some concepts about SOA, simple ways to build services and touch on many aspects of SOA. Most examples use a small sinatra app.

Growing and staying stable (links)

Thu, 06 Sep 2012 10:33:02 -0700

Here are some links that I found to be great reads about growing larger:

From Adam Keys:

http://weblog.therealadam.com/2012/09/02/three-application-growth-stories/

From John Nunemaker:

From Github:

https://github.com/blog/1252-how-we-keep-github-fast

From these, it is obvious that building tools to monitor and handle exceptions is a must for growth.

Launch Your Startup Idea for less than $1000 -- with Skillshare's Michael Karnjanaprakorn

Mon, 20 Aug 2012 17:45:01 -0700

I signed up for this Skillshare hybrid class which started tonight.

Rather than focus on building the product itself, I felt that focusing on growing an idea and validating it is more important. This way I am not working on the product and making excuses to validate it.

The biggest cost to any startup is time, not money 
--steve blank

Idea development

Is this a problem worth solving?
Figure out the MVP.
Tuning the engine. Iterate. Measure. Learn. Figure out market fit.

When pitching:

When developing your idea, pitching should be about getting feedback.

Imagine giving your pitch to your idol
speak 20% of the time, listen and ask questions

What is an MVP?

A common mistake is creating the wrong product for the wrong market.

Product market fit- right product for the right market

Example on figuring out an MVP for a restaurant

example biggest problem: you aren’t a cook.

What is the least amount of work I can do to validate that the chicken I can cook is amazing.

Level 1: host dinner at my apartment, cook fried chicken, mix it up with other fried chicken, see what friends think.

Level 2: Try and rent space for a night, test with public. Set a goal for the night.

User voted questions

Picking your idea

What you would like to work on for the next 5-years, what are you passionate about.

Most companies make the mistake of focusing on what they are building instead of why they are building it.

Building

Focus early on building the idea, rather than the team or product.

Idea protection

Your idea isn’t the asset, it is all about execution. The only way your idea will be successful is by sharing.

Finding a (technical) co-founder

Easier when the idea is solid. Validate idea then build the team.

How to deal with harsh feedback

When building your idea, flaws will be exposed. Look for the feedback and filter what flaws can be addressed. For example, Skillshare had trouble with people who could not teach well, they started teaching people how to teach and hold classes.

Resources

Pitching