Build Robust & Production Quality Applications: Precourse, Link_to Review

This is a quick reivew of how to list all a catgories videos:

- @category.videos.each |video| do
    link_to video, do
      %img(src="#{video.small_cover_url}")

- @category.videos.each |video| do
    link_to video_path(video), do
      %img(src="#{video.small_cover_url}")

- @category.videos.each |video| do
  link_to image_tag(video.small_cover_url), video_path(video)

- @category.videos.each |video| do
  link_to image_tag(video.small_cover_url), video

Build Robust & Production Quality Applications: Precourse, Haml

Writing Basic Haml 1. No closing tags 2. Nesting controlled via strict white-spacing and indenting 3. Nesting tags must be indented on a new line 4. Use spaces or tabs to nest tags within other tags 5. Tabs must be consistent

Examples:

Haml:

%h2
%ul
  %li
  %li
  %li

Links:

Haml:

%a{href: '/courses', title: 'Courses'} Courses

or

%a(href="/courses" title="Courses") Courses

HTML:

<a href='courses' title='Courses'>Courses</a>

Divs:

Haml:

%section#content.container
  %div.stats.container

HTML:

<section id="content" class="container">
    <div class="stats container"></div>
    </section>

Haml will insert a div if no HTML tag is explicitly defined:

Haml:

Note: stats.container is the same as %div.stats.container

HTML

<div class="stats container"></div>

Adding Ruby:

• Lines to evaluated begin with a hyphen (-) instead of erb (<% %>)
• Lines to be output begin with an equals sign (=) instead of erb (<%= %>)

Haml:

- title = 'Rails for Zombies'
%h1= title

Erb:

<% title = 'Rails for Zombies' %>
<h1><%= title%></h1>

HTML output:

<h1> Rails for Zombies </h1>

Loops:

Haml:

- zombies = %w{Ash Bob Jim}
%section#zombies
  %ul
    - zombies.each do |zombie|
    %li= zombie

HTML:

<section id="zombies">
   <ul>
   <li>Ash</li>
   <li>Bob</li>
   <li>Jim</li>
  </section>

You can use the same view helpers as before:

Haml:

=link_to "Check us out on twitter", "http://twitter.com/codeschool"

HTML:

<a href="http://"twitter.com/codeschool"><Check us out on twitter</a>

Interpolation:

You can also use #{} interpolation to insert Ruby expressions

Haml:

%p Hi, My name is #{@user.name}

HTML:

<p> Hi, My name is Casey</p>

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

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

Build Robust & Production Quality Applications: Precourse, From Design to Development

Items Covered:

1. Slicing Mockups
2. SASS
3. Haml

How to serve sliced mockups pages

Slicing with UI Controllers

We will use a UI controller that will point to pages that we need, such as "sign in" page, "account page". Currenty the data and images in these layouts/templates are hardcoded with data and images (nothing is actually linked to the database)

Because we don't want these templates accessible in prod, we have a before filter to ensure that that's the case:

#ui_controllers.rb
class UiController < ApplicationController
  before_filter do
    redirect_to :root if Rails.env.production?
  end

  layout "application"

  def index
  end
end

In the routes:

#routes.rb
Myflix::Application.routes.draw.do
  get 'ui/:action)' , controller: 'ui'
end

UI Index

So we want our index action to show all views available with links containing ('html.haml') unless its index:

%section.ui-index
  %ul
    - Dir.glob('app/views/ui/*.html.haml').sort.each do |file|
      - wireframe = File.basename(file,'.html.haml')
      -  unless wireframe == 'index' || wireframe.match(/^_/)
        %li= link_to wireframe.titleize, action: wireframe unless wireframe == 'index'

• To read more about UI Controllers, checkout this blog post from hashrocket:

Stylesheets

SASS

In this project, we will use application.css (manifest file) that will pull in all of our required files (asset pipline). You had several options - some devs like to use 1 sass/css stylesheet for their entire app, in this case, we broke it out according to the page (user sign in, billing, etc.)

There are two options when using sass, sass and scss. Scss is more verobse but desgined to be compatible with vanilla css. In this case, we are using sass because its less verobse.

• To read more about Sass:Sass Documentation

Views

HAML

We are also using Haml instead of ERB. Haml appears to be more succint because it uses indentation instead of closing tags

• To read more about Haml: Haml Documentation

• To read more about the asset pipeline: Rails Asset Pipeline

Build Robust & Production Quality Applications: Precourse, From Ideas to Products

The Process of Going from Ideas to Products

Prototype process for web applications

Step 1. You have an idea

Step 2. Build wireframes

• balsamiq mockups
• moqups.com

Purpose:

1. Communication: not for design but merely for commuincation (to yourself, designers, devs, and the client)
2. Workflow
3. Scoping

Points for wireframing:

1. Don't over design, this is to quickly put together a concept
2. When you wireframe - you want to do several versions and iterate from there. This will free your from the attachment to your idea.

Step 3. Design

Provides: Layout *Colors *Typogaphy *Look & Feel *Tools: Typically Photoshop, producing a .psd file

Step 4. Slicing

Taking the .psd file and turning it into mockups. At this point, you want your .psds to as pixel perfect as possible because this is where we turn the psd into html/css

Step 5. Development

The advantage of this process is that it isolates the each step into layers, allowing you to explore many alternatives at each step.