praktikantenblog

* Now talking on #compass

<suung> hey everyone

<suung> is this about sass/compass or something else ? :)

<suung> ok got it davemo is in both

<suung> hey, my question is this:

<davemo> hehe

<suung> i am calling compass from the console with command line options

<suung> ther is --sass-dir and -css-dir

<suung> but no -name

<davemo> name?

<suung> so compass compile bla.css will result in .css

<suung> that sucks

<suung> sorry compile bla.scss

<davemo> what's the behavior you expect?

<suung> wtf

<suung> now i added the --sass-dir

<suung> and now i have a.css

<suung> i wanted bla.css davemo

* barraponto has quit (Ping timeout: 250 seconds)

<suung> davemo http://edit.0xb5.org:9000/1l5BVWlngl

<davemo> hmm

<davemo> that's weird

<davemo> what version of compass?

<davemo> can you show me your config.rb ?

<suung> davemo i am doing that out of any rails

<suung> but i got it

<suung> the logic seems to be:

<davemo> yeah i don't use compass in rails either

<suung> there is sass-dir and css-dir

<davemo> there's still a config.rb :)

<suung> if you say

<suung> i didnt generate it

<davemo> oh, you should

<suung> if you say compass compile bla.scss and bla.css it works

<suung> its just he wants something.css

<davemo> right

<suung> no i shouldnt, its on the fly and then i will destroy the css again :)

<suung> but hey thanks!

If you have a resource (in my case that's Document and want to add or create a related resource (in my case Style) and you use Inherited Resources, your controller may look like this:

class DocumentController < InheritedResources::Base

  respond_to :html, :pdf

end

There is nothing going on, because InheritedResources will do the job for you: providing 'automatically' scaffold functionality.

Okay, in most cases you will not want that, you want to add something.

In my case that is, as I mentioned, to add or create a related 'Style' in the create-action

To override the create action, you could

def create
  super do
    @style=Style.create(params[:style])
    ...
  end
end

- in general.

Inherited Resources skips the 'super' giving you \create!' which can take the block.

Anyway, to really add a new style to the @document (that is used by the magic), i would have to do something like this:

  def create

    if params[:style]

      @style = Style.create(params[:style])

      @document = Document.new(params[:document])

      @document.style_id = @style.id if @style

    end

    create!

  end

1. params[:style] and the if condition (because inherited resources could already check that)
2. @document = Document.new (because inherited resources already did that in fact

To get rid of it, we use a other trick:

class Document < ActiveRecord::Base

  belongs_to :style  

  accepts_nested_attributes_for(:style)

end

This will let the style-attribute take a Hash that can lead to a full create, which is nice.
It's an Rails3 Feature.

With IR again, you can 

class DocumentsController < InheritedResources::Base



    protected



    def begin_of_association_chain

      case

      when params[:style_id]

        Style.find(params[:style_id]).try(:documents)

      when params[:style]

        Style.create!(params[:style]).try(:documents)

      else

        Document

      end

    end

  end

from the page:

Since Inherited Resources 1.0, has_scope is not part of its core anymore. However, if you are using has_scope in your application, Inherited Resources will handle all the required hooks automatically.

has_scope gem is available at:

  http://github.com/plataformatec/has_scope

And can be installed as:

  sudo gem install has_scope

Because no one in my team ever wrote it down, i will do that now for you:

It's pretty easy:

compass create myproject
mate myproject
compass watch myproject

compass init rails /path/to/myrailsproject

with blueprint 

compass init rails /path/to/myrailsproject --using blueprint/semantic

I think this article is useful, where the main part is:

File.join(File.expand_path(File.dirname(__FILE__)), "..", "spec_helper")

Because I am in such a mood, i will give this great software published under the terms of AGPL as follows:

require 'rubygems'

require 'erubis'

class WebsiteMaker

  def initialize(source,target)

    File.open(target,'w') do |f| f.write(WebsiteMaker.convert(File.read(source))) end

  end  

  def WebsiteMaker.convert(syntax)

    Erubis::Eruby.new(syntax).result()

  end

end

I found with http://refactormycode.com/codes/491-very-simple-rack-framework a nice little Rack application example - on refactor my code.

Basically you see, if you are used to Rails or Symphony or Sinatra or some other web framework: This is kind of what it boils down to.

Didn't dive into it yet and honestly: I don't really use IE8, but wanted to share this little info

It is originally from an article about mixing transparency with gradients in CSS3, which is possible using RGBA - values.

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

http://confreaks.net/videos/305-lsrc2010-components-in-a-monolithic-world

If you set up a layout with blueprint (and compass) you’re usually amazed about how quick everything is set up, and how good your page looks with almost no effort. But once you go into detail, and start implementing a strict design (usually based on something like a corporate identity / styleguide), you will need to overwrite the default behavior compass displays. If you don’t know how to figure out where in compass a particular css-rule is defined, this can be pretty annoying.

Let’s have a look at a simple example: You want to overwrite the color of links.

First you will optimistically add something like

a {
  color: #3f4;
}

to one of your .scss partials. You open your browser, you see no change. As you will probably use firebug, chrome, or some other browser equipped with debugging tools, you will inspect the element, and see that your color definition is there, but crossed out. This means that a prior css rule is already active, and your’s get ignored.

Now you could simply add the !important flag to your rule, and it would work out, but in css-school they taught you, that you should avoid !important wherever possible. (Why? Later, when you have more specific types of links, it will come back to you and annoy you, promised!) Luckily, your dom-inspector makes it easy to see that there is a the following rule:

body a {
color: #009;
text-decoration: underline;
}

It also says that it is in screen.css and tells you in which line to find it. Dawm you say, i didn’t add it there, but as you know that it is a generated file, and that blueprint comes with default behaviour you open up your _page.scss partial, and see something like this:

// Import the non-default scaffolding module to help us get started.
@import "blueprint/scaffolding";

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction; }

// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
@include blueprint-scaffolding("body.bp");

body { @include blueprint; }

You see the @includes in the body.bp rule definition? Right, one of this must be the troublemaker, but which? Okay, i admit in this case it’s easy to guess, but the point is:

If you have a look in to your screen.scss there’s a comment, telling you from which file it is included. It even tells you where to find it on your file system. If you use chrome, you can directly click on the line number in the inspector, and it will take you directly to this line, and you… know everything.

Great, can save some time, but still: We need to think about our own default blueprint styles!