grit| commit

daily learnings as a ruby dev

Build Robust & Production Quality Applications: Precourse, Views to Mockups

15 Dec 2014

The Process of Building Queues from Mockups:

Building out the videos page

Step 1. Copy layout from the ui videos template

%article.video
  .container
    .row
      .video_large_cover.col-sm-7.col-sm-offset-1
        %img(src="http://dummyimage.com/665x375/000000/00a2ff")
      .video_info.col-sm-3
        %header
          %h3 Futurama
          %span Rating: 4.5/5.0
        %p Pizza boy Philip J. Fry awakens in the 31st century after 1,000 years of cryogenic preservation in this animated series. After he gets a job at an interplanetary delivery service, Fry embarks on ridiculous escapades to make sense of his predicament.

Step 2. Change/Remove hardcoded data for future code

%article.video
  .container
    .row
      .video_large_cover.col-sm-7.col-sm-offset-1
        %img(src="#{@video.large_cover_url}")
      .video_info.col-sm-3
        %header
          %h3= @video.title
          %span Rating: 4.5/5.0
        %p= @video.description

Step 3. Build Routes corresponding with future code

Myflix::Application.routes.draw do
  resources :videos, only: [:show]
 end

Step 4. Begin testing videos controller spec

Related Posts