LATEST POSTS

Use blueprintcss the SASS way

As a big fan of both, blueprintcss and SASS I always wanted to have them combined. As these two utilities are my major project dependencies I was looking for a way to shorten the time for an initial project setup and to have a more consistent setup across all projects in general. For this purpose I have created a complete port of blueprintcss to SASS with all advantages SASS offers to the CSS developer.

The most important feature is the possibility to change the grid setup by simply chaning some -blueprint-grid parameters.

/* Grid setup */
$-blueprint-grid-columns:24;
$-blueprint-grid-width:30px;
$-blueprint-grid-gutter:10px;

Continue reading



SASS Mixins

Here are my SASS mixins i am currently using. Maybe someone can use them:

/**
 * CSS3 Border-Radius
 *
 * @param $topLeft Either the top left radius, if no other param provided, this value is applied for all params
 * @param $topRight [optional]
 * @param $bottomRight [optional]
 * @param $bottomLeft [optional]
 */
@mixin border-radius($topLeft, $topRight : null, $bottomRight : null, $bottomLeft : null) {
	@if $topRight == null and $bottomRight == null and $bottomLeft == null {
		$topRight : $topLeft;
		$bottomRight : $topLeft;
		$bottomLeft: $topLeft;
	} @else if $bottomRight == null and $bottomLeft == null {
		$bottomRight : 0;
		$bottomLeft : 0;
	} @else if $bottomLeft == null {
		$bottomLeft : 0;
	}
	-moz-border-radius-topleft: $topLeft;
	-moz-border-radius-topright: $topRight;
	-moz-border-radius-bottomright: $bottomRight;
	-moz-border-radius-bottomleft: $bottomLeft;
	-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
	border-radius: $topLeft $topRight $bottomRight $bottomLeft;
}

/**
 * CSS3 Box-Shadow
 *
 * @param $inset Either true or false
 * @param $x
 * @param $y
 * @param $blur
 * @param $spread
 * @param $color
 */
@mixin box-shadow($inset, $x, $y, $blur, $spread, $color) {
	@if $inset == true {
		$inset : inset;
	} @else {
		$inset :"";
	}
	-webkit-box-shadow: #{$inset} $x $y $blur $spread $color;
	-moz-box-shadow: #{$inset} $x $y $blur $spread $color;
	box-shadow: #{$inset} $x $y $blur $spread $color;
}

/**
 * CSS3 Text-Shadow
 * @param $x
 * @param $y
 * @param $blur
 * @param $color
 */
@mixin text-shadow($x, $y, $blur, $color) {
	text-shadow: $x $y $blur $color;
	filter: dropshadow(color=#{$color}, offx=#{$x}, offy=#{$y});
}

/**
 * CSS3 Multi-Column Layout
 * @param $columns
 * @param $gap
 */
@mixin columns($columns, $gap) {
	-moz-column-count: $columns;
	-moz-column-gap: $gap;
	-webkit-column-count: $columns;
	-webkit-column-gap: $gap;
	column-count: $columns;
	column-gap: $gap;
}

/**
 * CSS3 Outline
 * @param $thickness
 * @param $style
 * @param $color
 * @param $offset [optional]
 */
@mixin outline($thickness, $style, $color, $offset : null) {
	outline: $thickness $style $color;
	@if $offset != null {
		outline-offset: $offset; /*Delete if you don't want an offset*/
	}
}

/**
 * CSS3 Transition
 * @param $property
 * @param $duration
 * @param $function [optional]
 */
@mixin transition($property, $duration, $function : ease) {
	-webkit-transition: $property $duration $function;
	-moz-transition: $property $duration $function;
	-o-transition: $property $duration $function;
	transition: $property $duration $function;
}

/**
 * CSS3 Transformation
 * @param $scale
 * @param $rotate
 * @param $translate
 * @param $skew
 */
@mixin transform($scale, $rotate, $translateX, $translateY, $skewX, $skewY) {
	-moz-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-webkit-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-o-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-ms-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
}

/**
 * CSS3 Background Gradient
 * @param $color1
 * @param $color2
 */
@mixin gradient($color1, $color2) {
	background: -moz-linear-gradient(top, $color1 0%, $color2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, $color1 0%,$color2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, $color1 0%,$color2 100%); /* IE10+ */
	background: linear-gradient(top, $color1 0%,$color2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0 ); /* IE6-9 */
}


PHP Enums: The not so bad way!

As the topic of this post already mentions, this is about Enums in PHP. Like some other script languages (f.e. ActionScript) PHP does not support the declaration of enums out of the box. There is a PECL extension, that provides a basic enum implementation called SplTypes. The related class is called SPLEnum and as you can see in the SplTypes documentation it gives you some kind of basic enum behavior. But if you try to install this extension (i tried with Ubuntu 10.10 and all updates) you will have no luck. I got some wired messages about a duplicate “static” definition.

There are also a lot of other enum implementations available for PHP, but most of the time they suck, either they are to complicated to use or they simply suck. The solution i want to provide is far away from perfect, but there will never be a perfect solution until enums become an integrated type within PHP. My basic usage scenario for enums in php includes the comparison of object states.

class MyEnum {
const SUCCESS = 'success';
const ERROR = 'error';
}

Its easy and most of the time it will do the trick. But if i work on bigger projects, comparison of constants sometimes lead to strange issues which are hard to debug. What i need is a more stable comparison that avoid conflicts by design. Have a look at my example and let me know what you think.
Continue reading



CSS3 Select (Dropdown) input element

For a current project i made some prototypes for UI elements that should give a consisten look for UI elements across different platforms/browsers. Not everything made it into the project, but imho the select element is quite convinient and maybe useable. It should work on IE8/9, Firefox 3.x, Opera 10, Safari 3/4 (also on iOS 3/4 Safari) and Chrome 6 or higher. For sure the main focus was on webkit browsers and all features are only available there.
Continue reading



Diploma

I want to share some basic information about my diploma, i haven’t had much time last year to avoid the big void here, so here is a little update. Beyond you find a little summary from the thesis and for sure some pics.

Games are an essentiel part of our society. Since ages we like to play and nothing has changed since the new-media-revolution arrived. Games became one of the most important parts of the media-industry.
One scheme in context of videogames is especially successful: the simulation of virtual worlds and their interactivity. The foundation of this success is a constant development of the technology behind the games. Parts of this technology are a visual, a sound and an interactive component. The evolution in terms of technology is heavily linked to hardware-development. The applications are simply following the hardware-enhancements.
In the past, nobody thought it would be possible to have volumetric clouds rendered in real-time, or that you can have an exorbitant count of polygons in one scene. There is a nice side-effect of this strong link between hardware- and application-enhancements. Gamers are able to enjoy innovations all the time.
In context of videogames, the main improvements that have been made where related to graphic and interactive components. When we talk about interactivity, we are talking about physical simulation and how we are able to achieve realistic behaviour in a virtual environment.
Just think about simple things like open a door or a ball that is falling down to the floor or even more complex things like steering a car in a realistic manner. Physic-simulation is a very important part for video-games.
The simulation of complex physical behaviour is usually only limited by the available hardware. A major target of this paper is to have a proof of concept for typical end-user hardware like a game-console.
Microsoft is offering the XNA framework for their game-console Xbox 360. So it is possible for every developer to have their applications run on the console.
The area of research i have chosen, is the realistic simulation and visualization of fluids in context of real-time environments. A fluid can be a gas or a liquid. Fluids are not very commonly used in nowadays computer-games, but there is a particular interest into this topic. Fluid-simulation cannot be replaced by a more simple approximation. The reason is the good quality of the results produced by a fluid-simulation. New hardware, especially massiv-parallel systems like the GPU, allows us to have realtime simulation implemented into interactive environments. This paper should give a comprehensive overview about fluid-simulation and visualization.
Continue reading


#twittercoding: 140 char crazyness

Quick start (AS3, strict-mode:disabled)

g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

I am so addicted, i can’t stop…

My 140 chars of legend…. wait for it -dary.

#tweetcoding – “Pipes” http://twitter.com/eliias/statuses/1228303442

m=.05;if(!o.r)o.r={x:r()*m,y:r()*m,z:r()*m};w=20+s(i*o.r.y);l=2500/w;ls(1);g.drawCircle(200+s(++i*o.r.x)*l,200+s(i*o.r.y*2)*l,l/l*w);

Can’t stop #tweetcoding – “Shorty” http://twitter.com/eliias/statuses/1228042430

mt(200,200);g.lineStyle(1,0);lt(s(i+=0.1)*i/0.1,m.cos(i)*i/0.1);lt(s(i+5)*i/0.1,m.cos(i+5)*i/0.1);

#tweetcoding – “Crazy” http://twitter.com/eliias/status/1227884420

g.clear();g.beginFill(0);if(!o.s)o.s=[];o.s[o.i=i%440]={x:o.i%11*40,y:i++%440};while(t=o.s[o.i--])g.drawCircle(t.x,t.y,s(i/40+o.i)*30)



Fireworks: Font and Text-Rendering

One thing i never understand was why a lot of people prefer Photoshop instead of Fireworks for prototyping and building up a layout for a webapp or site.

For me it was always clear, that the basic vector tools, some bitmap effects(live-effect) and the ability to handle the file-export easily are enough to setup a layout. At least the pixel-perfect positioning threw input fields of vector-forms is a main, maybe the biggest reason for me to use Fireworks.
Continue reading




© 2006 - 2012 Hannes Wolfgang Moser