tap349

my blog

frontend

21 Apr 2016

notes about frontend development in Rails.

layouts

  1. http://guides.rubyonrails.org/layouts_and_rendering.html#finding-layouts

looking up current layout in Rails (more specific match wins):

<body> classes

consider adding 2 classes to <body> of each page in application.html.slim:

it will make it easier to bind common CSS rules for all actions of controller:

.c-sites
  padding: 10px
  ...

instead of:

.sites-index,
.sites-new,
.sites-show
  padding: 10px
  ...

also it will make it natural to have this file naming scheme:

Sass mixins

  1. http://sass-lang.com/guide#topic-6

media queries

  1. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  2. http://stackoverflow.com/questions/8549529

in CSS2 they were called media types, in CSS3 - media queries.

media queries are used to define different style rules for different media types after checking media features:

for styles rules (CSS) to be applied media queries must resolve to true (media type matches device and all media features are true).

media query syntax (using SASS):

@media not|only media_type and (media_feature)
  CSS

media types (devices):

other media types are deprecated.

media features:

using images

  1. http://guides.rubyonrails.org/layouts_and_rendering.html#asset-tag-helpers

Rails asset tag helpers:

asset tag helpers don’t check presence of assets at specified locations.

  1. http://stackoverflow.com/a/20211017

images are placed in app/assets/images/ and can be used in:

about mobile-first and responsive design

mobile-first design

  1. http://www.html5rocks.com/en/mobile/responsivedesign/

NOTE: the article contains many tips on how to design for mobile.

advantages of mobile-first design:

ALWAYS CHECK mobile design on mobile phone itself (or at least using device mode of Developer Tools in Chrome)!

responsive vs. adaptive design

  1. https://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

my implementation of mobile-first responsive design

NOTE: container div is parent of both sidebar and main divs.

CSS properties

border

  1. http://stackoverflow.com/a/2922934/3632318

cursor

when using default cursor I couldn’t click search icon at the bottom (1-2 px) - probably the very tip of default cursor is not active (can’t be used for pointing).

position

position: absolute:

width vs. max-width

http://www.w3schools.com/css/css_max-width.asp

z-index

z-index property is used to specify z-order (the stack order) of elements:

avoid using sequential numbers that don’t count from 1 (e.g. 5,6,7..) as it might lead to confusion about where missing z-indexes (1,2,3,4) are.

prefer sequences 1,2,3... (without gaps) or 100,200,300....

z-index property has no effect on SVG elements: first elements are painted first.

CSS recipes

see CSS recipes.

using Ajax requests

views/foos/edit.html.slim:

- form_url = foo_url(@foo)
= simple_form_for @foo, url: form_url do |f|
  = f.input :name, input_html: { data: { 'form-url': form_url } }

assets/javascripts/pages/foos/edit.coffee:

@on 'turbolinks:load', 'c-foos', ->
  $foo_name_input = $('input#foo_name')
  $foo_name_input.on 'blur', ->
    $.ajax
      url: $foo_name_input.data('form-url'),
      type: 'PATCH',
      dataType: 'json',
      data:
        foo:
          name: $foo_name_input.val()
      success: (data) ->
        if data['valid?']
          console.log "foo #{data.id} updated"
          $('span.foo_name').html(data.name)
        else
          errors = JSON.stringify(data.errors)
          console.log "foo #{data.id} not updated: #{errors}"

controllers/foos_controller.rb:

def update
  @foo.update(update_params)

  respond_to do |format|
    format.html { redirect_to(foos_url) }
    format.json
  end
end

views/foos/update.json.jb:

@foo.attributes.merge(
  valid?: @foo.valid?,
  errors: @foo.errors.messages
)