CSS

Ruby Warrior!!



Ruby Warrior is a game that teach you how to programming with Ruby, and also how to write AI script.


Install


gem install rubywarrior
rubywarrior


And you will have a player.rb script and README,


sample code for player.rb

def play_turn(warrior)
    if warrior.feel.empty?     
      warrior.attack!
    elsif warrior.health <= 5
      warrior.rest!
    else
      warrior.walk!
    end
  end

follow the instruction to implement player.rb, then run the rubywarrior to start fighting with your warrior!!

Termkit - Graphical Terminal

Termkit is an interesting project that focus on the improvement of terminal.

The UNIX terminal we use right now is established in the time of mainframe.

It is still powerful because it's simplicity and ability to script. The terminal output can be pipelined as input to other programs, and the command can be easily scripted and recognized by programs. Unlike GUI, it's hard to script the simple action like: click this red button and open this file. However, because the command is used by both human and machine. It is pretty unfriendly for beginner and unfriendly in terms of today's UI design. The target of termkit is adding a visual layer for terminal. like we can output the command in different color, the folder and files type with icon, autocomplete with commands and tooltip of command switches.

The structure is like this:

input => process => output for program
||
termkit => output for human

and termkit is using webkit for visual presentation, and node.js for glue the process with webkit.

Install:

install node.js , npm

npm install mime (for webkit to distinguish content type)

git clone https://github.com/unconed/TermKit.git --recursive

run the termkit demean

cd TermKit/Node; node nodekit.js

run client

cd Termkit/Build; unzip Termkit.zip; open Termkit.app


This project is still on an early stage. But it show an different aspect of GUI improvement. Like an different approach of sikuli.
https://github.com/unconed/TermKit

Introduction of SCSS and Compass

Recently, the CSS tool like SCSS,SASS and less have become more popular.
Those framework provide several extra functionality to CSS, also with build in compress option.
take SCSS as example:

install scss using ruby gem:


gem install sass
    sass style.scss style.css 
    sass [INPUT] [OUTPUT]

functions


1. Nesting class

#css{
     padding:5px;
     .tool{
          padding-top:10px;
     }
     //parent reference
     &:hover{
          background-color:#FFF;
     }
}


2.Variables
you can use dollar sign as variable mark in SCSS:
$mid-padding : 5px;

#css{
     padding : $mid-padding;
}

3. Mixins
Mixins means module inheritance in Ruby. It's just like inheritance from abstract class in SCSS. Use @ sign for declare maxin and include in css class.

@mixin block-base($margin){
     margin:$margin;
     padding:$padding;
}

#block{
     @include block-base(10px);
}

4. Inheritance
Also you can use @extend to inheritance from other CSS class.
.error{
     color:#F43;
}

.big-error{
     @extend .error
     font-size: 22px;
}

5. import
Import can let you include library and mixins into current css file, like compass will have lots of library to import.
@import "compass/css3/border-radius";
@import "compass/utilities/general/clearfix";

Compass


Compass is another framework that integrate SCSS and CSS grid framework like blueprint,
that provide you build in CSS layout, ie hack and other support. Compass is well integrated with rails.

using compass:

gem install compass
    compass init (under rails directory)

will create directory in app/stylesheets

compass compile

can compile into public/stylesheets directory

more reference for compass library