Tag Archive for 'chanlu'

Page 2 of 3

Object Oriented CSS for ChanLu

Published on May 24, 2009 in web design. 6 Comments Tags: , , .

blog-oocOn my workplace, we had one major site that had a redesign, we – the designers, agreed on applying the Object Oriented way on our CSS files. We didn’t want to repeat the same mistakes all over again with our other huge, messy and unmanageable CSS files.  By applying the Object Oriented CSS, the site that we redesigned is more manageable, having cleaner and prettier code.

Using ChanLu Design I will practise on using this method, since during the redesign process, I was not assigned to be one of the coders, I ended up creating mock-ups for the individual pages of the site.

On applying OOC, you can get rid of unnecessary classes and reuse other classes. Here’s a perfect example of a good way in using OOC by Matthew Anderson that was posted on Jeff Croft’s blog post about OOC:

Messaging in applications is a great example. Your success, informational and error messages should have a similar look and feel. Using classes like “success message”, “info message” and “error message” are no less descriptive and no less communicative than “success-message”, “info-message” and “error-message”. However, they are a lot more maintainable and you accomplished it with less code.

This means that the structure of the element would go on the “message” class. Like messages are a block element having a padding of 10px. Their differences would most likely be on font colors, backgrounds and icons. These maybe placed on new classes that will contain their look and design. Usually well-known websites have their success messages as green with a check icon, info/notice messages to indicate something to think about are usually colored yellow with an exclamation icon while red with an X icon for something critical for the error messages.

The basic concept of OOC is separating the structure from the skin.

Sample Code without OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.success-message{
display: block;
padding: 10px;
font-size: 1em;
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info-message{
display: block;
padding: 10px;
font-size: 1em;
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error-message{
display: block;
padding: 10px;
font-size: 1em;
color: red;
background: url('../images/error.gif') no-repeat;
}

Sample Code with OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.message{
display: block;
padding: 10px;
font-size: 1em;
}
 
.success{
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info{
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error{
color: red;
background: url('../images/error.gif') no-repeat;
}

The messages do have the same structure, all they have are different appearances. That’s why one of the designers in my workplace said “It’s just like dressing up”. Whether you put on a hat, or glasses perhaps. Your still clothing a person. Sizes or colors may differ, but they still have the same structure. By separating the structure from the skin/design, we can reuse code and make our css files more maintainable.

DataMapper Problems on DreamHost

Published on May 7, 2009 in anime and manga, art, design and programming. 7 Comments Tags: , , , , , , , , , , .

poutingYes, I do want to pout right now. Here’s a fast drawing done today, even with messy shading. This drawing features a girl drawn in the style of Yuu Watase (creator of Fushigi Yuugi, Ayashi no Ceres, Alice 19th and etc.), I used to like her artworks back then, but now I have my own preferred style. I do love the girl characters of Watase when pouting, since they look so cute!

So, what’s making me pout then? Yesterday, Wayne gave me the code for the config.ru file for the ruby application. The ruby gem path now works in DreamHost! But I still have an error, just one error though, there’s a fastthread installation in DreamHost currently version 1.0.1, but DataMapper requires 1.0.4. The fastthread 1.0.1 is activated by another gem first, so 1.0.4 can’t be activated anymore. I contacted DreamHost about the problem, they won’t upgrade the gem on a server basis. I must add the fastthread upgrade to the suggestions corner and wait for people to vote if they want the upgrade or not.

I’ll try to find other means of using DataMapper for the recoding of ChanLu Design, since I won’t give up on using that wonderful gem. Here’s the code that Wayne gave me, tell me though if there are other better alternatives.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if (ENV['HOME'] =~ /^\/home\//)  ## DREAMHOST
  require "#{ENV['HOME']}/.gems/gems/rack-0.9.1/lib/rack.rb"
  require "#{ENV['HOME']}/.gems/gems/sinatra-0.9.1.1/lib/sinatra.rb"
  ENV['GEM_HOME'] = "#{ENV['HOME']}/.gems"
  ENV['GEM_PATH'] = "#{ENV['HOME']}/.gems:/usr/lib/ruby/gems/1.8"
  require 'rubygems'
  Gem.clear_paths
else
  require 'sinatra'
end
require 'datamapper'
require 'haml'
require 'app'
run Sinatra::Application

The rack and sinatra gems are being required manually because when requiring it by using their names, a lower rack version is activated which is installed default in DreamHost.

haruhi_suzumiya_vector_by_leek128

Besides that, I have been watching The Melancholy of Haruhi Suzumiya. Though I still haven’t been able to finish the series yet due to my personal projects and work. I do like the series, its worth a few laughs and the characters are cute! I also find Itsuki Koizumi quite appealing.

I will be posting more about this series after I watch all the episodes, maybe this weekend if my brother bugs me onto watching this show.

00-cover2Also, I have been reading Japanese comics (manga) – shoujo manga is my current genre of interest, I read Kimi ni Todoke (Reaching You) but sadly there are no more scanlantions for the other chapters. But this manga is really fun! It is about a girl who is really pale having long black hair and is being called as Sadako, encounters the “refreshing” guy – Kazehaya which will open her up to new opportunities such as having friends. This story is a love comedy, which has cute artwork and will hook you up wanting for more.

hana-to-akuma

I am also reading Hana to Akuma, it is about a Demon who decided to live on earth, and adopted a baby human. Though the story focuses when the child is 14 years old already. The artwork of the male characters is awesome, they look cool, handsome and cute, depending on what they want to portray. But the girls in this manga seem like blank looking, it’s only my own opinion though. I do find the story entertaining and it gives me a good amout of laughs. I haven’t finished reading the current chapters of this manga, so I may post later more about this series.

Related Links