praktikantenblog

I have implemented a small fix to center vertically a div in the browser window

here the link

 

lab.synoptx.net

The people from thoughbot are known for releasing, what they use.

https://github.com/thoughtbot/bourbon

may be worth a look, when you start working with sass / scss and are just about to create simple mixins, that help you during day and night.

Some examples from the readme page at github.

Animations

 

@include animation-name(slideup, fadein);
@include animation-duration(1.0s, 1.2s);
@include animation-timing-function(ease-in-out, ease-out);

# Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
@include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);

 

 

Golden Ratio

div {
                    Increment Up GR with positive value
  font-size:        golden-ratio(14px,  1);    // returns: 22.652px

                    Increment Down GR with negative value
  font-size:        golden-ratio(14px, -1);    // returns: 8.653px

                    Can be used with ceil(round up) or floor(round down)
  font-size: floor( golden-ratio(14px,  1) );  // returns: 22px
  font-size:  ceil( golden-ratio(14px,  1) );  // returns: 23px
}

While making the layout for a mobile app with the help of jquerymobile, I have questioned myself about the gradient background, for web and mobile. Looks like the mostly used mobile browser is  Opera Mobile - Opera mini,that since the end of 2010 replace "Web (mobile) Browser for S60" the default browser for the mostly sold operative system Symbian OS (originally Nokia propertary made after Open Source!), with "29.2% of worldwide smartphone market share in 2011" (Wikipedia) ,  on the 2nd place is Android that is increasing users! 3rd place for Iphone with iOS and Safari. The mobile browsers are born around 1996, in text only mode, around 2006 start the usage of CSS2.1, but the hardware developed so fast that there is no old browser engine to fight with, but just a choice or they cannot show a graphic layout or the can and better then your others monitor . So the list can be restricted to:

/* Safari, Chrome, Skyfire, Nokia Series 60, Polaris, BlackBerry, Android*/

background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Portable Firefox, Firefox Mobile Fennec 1.0 Alpha 3, SeaMonkey Portable 2.0.14*/

background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99%);

/*Opera Mini & Opera Mobile*/

background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE mobile */

-msfilter:"progid:DXImageTransform.Microsoft.gradient (startColorStr='#81aea7', EndColorStr='#81aea7')"

---

For the computers Windows XP is always on the top usage, also if Windows 7 is increasing, but with a luck windows user start to leave Internet Explorer that is on the top but decreasing, followed from Firefox and an increasing number of Chrome users. The fact that IE6 is still there, brrrrr, is going down but is anyway counting almost the same users like Safari. The CSS code for the computer web compatibility is really long:

---

/* W3C Standard */

background:linear-gradient(bottom, #81aea7, #c7dad6);

/* Safari 4-5, Chrome 1-9 */

background-image: -webkit-gradient( linear,left bottom,left top, color-stop(0.5, rgb(0,98,83)), color-stop(0.99, rgb(199,218,214)) );

/* Safari 5.1+, Chrome 10+ */

background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Mozilla/Gecko (Firefox >= 3.6 etc) */

background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99% );

/* Opera 11.10+ */

background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE 5.5 - 7*/

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006353', EndColorStr='#c7dad6', GradientType=0);

/*IE 8+*/

-msfilter:"progid:DXImageTransform.Microsoft.gradient (startColorStr='#81aea7', EndColorStr='#81aea7')" You could add even one more exception, for a while Opera used an external svg to create the gradient, but the work is not worth.

---

So many lines that makes me nostalgic about the old way to do it, that now can be used as fallback in emergency:

/* fallback, Opera <=10 */

background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x;

---

Linkography

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers http://en.wikipedia.org/wiki/Mobile_browser thanks for the great work: http://www.normansblog.de/demos/browser-support-checklist-css3

 

* 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!

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

Quick notes to get you started with Rails 3 and stop repeating the same tasks over and over again (sounds a lot like a memo for me...) more...

While CSS does allow you to set a custom list-style-type for ul/ol’s with the list-style-image attribute, you can also easily do this by using a background-image with no-repeat and an appropriate padding. This can be useful when list-style-position (allows you to choose whether the list-style-image is IN our OUT of the list-element) is not sufficient for your needs of placing the list-style-image.

In SASS this could look something like this:

<typo:code> ul.teaser_list li

list-style-type: none
padding-left: 35px
background-image: url('/images/icn_check.gif')
background-repeat: no-repeat
background-position: 5px

</type:code>

Well supercool plugins for designer are arrived fresh on Firefox

Pixel Perfect Add in alpha transparency the layout design directly over the website on the browser.

CSS usage Check witch css properties are actually call from the code and applied. NOTICE: not all is not active is not used, it analyze only the corrent page

(I love Firebug!)

Lately I’ve been playing with a wide variety of different approaches to build convenient, desktop-like UIs using JavaScript, CSS & HTML only. Coming from the rails world my first steps where very much built upon the idea that code generation is going to save me a lot of time and complex helper methods soon were born. That seemed to work out pretty well. After only a few days I had working ajax trees, data grids with multiple selection, context menus, table filtering, searching and other nifty features. All with ~350 lines of code. There was only one problem: it was ruby code. How does one debug bugs in the JavaScript when the code itself is never written, but dynamically generated with all the data mixed in already?

I had to face it: code generation – at least my awkward ways of doing it – sucks. So, what else is out there? Flash of course, but no! Let me take that back. Yes, there’s JavaScript. I’ve heard about that. Doesn’t it have something to do with this peachy little peace of code in that “prototype.js” file? So, I had a chat with google and they came up with a few options: YUI, Closure and jQuery(UI). All seemed promising, but after a bit of playing around I decided to stick with jQuery for various reasons, including the fact that it wasn’t labeled by some big data mining conspiracy. Also a lot of smart people have come up with a lot of smart plugins (within the ocean of crap that’s undoubtably out there as well). Having said all that, I’d like to share my mental notes on what works, what is best for which goals and what one better doesn’t even try.

Going outside in, first comes the layout. Layouts are tricky. Masochistic as web developers seem to be, their main concept of art is to use a language designed for text markup plus some questionable feature called hyperlinking to reinvent the wheel when attempting to (more or less) mimic the style of the applications that “text” is eventually rendered in. There are a few different techniques, some CSS based (g r i d s), some JS based. As I was going to build a JS-driven UI anyway and also because of bad experience with the former (people tend to do pretty weird shit with CSS grids that make them virtually unmaintainable) I went with the latter. Having chosen a JS Framework already I thought my choice was already set, but I was mistaken.

mb.containerPlus is doing overlays optionally with the conventional hide / maximize / close controls, that may form a solid base for apps that require many floating windows. I fell for the futuristic Apple effect of jQueryTools, which is a pretty nice collection of tools. Be careful though when downloading it to deselect the tabs feature, which looks pretty nice at first, but fails miserably when trying to add tabs dynamically (for which the tabs plugin from stilbuero is much more suitable). The choice of the right layout solution was more challenging, but long story short: I ended up with UI.Layout which uses a border-layout approach and is capable of really complex, nested layouts which work surprisingly well with other jQuery magic, such as the forementioned tabs.

More later.