Here are some examples of media query mixins i use to generate the media queries needed for different viewport sizes:
@mixin respond-min($width) {
// If we're outputting for a fixed media query set...
@if $fixViewport {
// ...and if we should apply these rules...
@if $fixViewport >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (min-width: $width) {
@content;
}
}
}
@mixin respond-max($width) {
// If we're outputting for a fixed media query set...
@if $fixViewport {
// ...and if we should apply these rules...
@if $fixViewport < $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (max-width: $width) {
@content;
}
}
}
// mixins Styles for Old IE:
$oldIE: false !default;
@mixin oldIE {
// Only use this content if we're dealing with old IE
@if $oldIE {
@content;
}
}
// Only use this content if we're NOT dealing with old IE
@mixin modern{
@if $oldIE == false{
@content;
}
}
Dreamweaver has some preference settings to rewrite your code on opening but even when you uncheck all and expect to view the original content then be warned..
example:
<test>
<!--<node1>
<node2>
<!- - Explanation:
this is some html comment
- ->
</node2>
</node1>-->
</test>
When you want comments nested inside other comments temporary changed and set a space between the two “-” character  in Dreamweaver the xml becomes this and your xml becomes corrupt:
<!--<node1>
<node2>
<!- - Explanation:
this is some html comment
- ->
</test>
-->
I came up to a difference between firing events in internet explorer and firefox, Chrome, safari etc.
In Internet explorer 8 you can fire events like onclick, onmouseover etc with the method fireEvent with javascript. In other browsers you can use dispatchEvent for this and in some other libraries like Prototype you can use triggerEvent or trigger in jQuery.
When you fire an event in the standard browsers (FF,CHR etc) a submit on a form is triggered and a document.location change is triggered when an “click” event is called. And when you don’t want this to happen you should call preventDefault() to cancel the default action of the button or anchor (submitting or redirecting to an other page). But…. in IE8 I see that when calling fireEvent(‘onclick’) only the onclick listeners that are added to the buttons or anchors are triggered but NOT the default actions. So there will be no submitting or redirection when calling fireEvent(‘onclick’). But when you call the general click() function all the onclick event listeners will be triggered INCLUDING the default action. So try it yourself in this example with internet explorer.
First look on safari on Lion is great. Especially the new features for developers when you choose Inspect Element.
But then searched for the window/download folder menu option but it wasn’t there anymore.. but looked further and there it was in the corner of the safari window.. (look for the arrow down icon). But when you have removed the icon from the toolbar by customize toolbar.. than you have to set it back first or else you are not able to view the download progress.
When the fireEvent method is called in the prototype.js library I sometimes get an “unspecified” error in internet explorer 8. The reason I get this error is because I have replaced some elements with an AJAX call and on these elements I have attached some eventHandlers. In IE8 somehow these replaced elements are still alive and react on events fired. If this element doesn’t exist anymore in the DOM tree the “unspecified” error is shown in IE8. The solution we have made:
Cache the eventlisteners in Array
Add destroy function to remove these eventlisteners from this object
When an event is called check if this element has parents. if not call destroy function
We had the following code:
setListener : function(targetId, eventName){
targetId = targetId.replace(/^#/,"");
if (this.listeners[targetId]){
return;
}
this.listeners[targetId] = true;
var targetElement = $(targetId);
if (!targetElement) return;
targetElement.observe(eventName || "element:afterUpdate",function(event){
var elementId = event.element().identify();
if (event && targetId == elementId) {
var url = event.memo.url;
this.showActive(url, 1);
}
}.bindAsEventListener(this));
},
and changed it to:
var targetElement = $(targetId);
if (!targetElement) return;
// cache all listener data so it can be removed later on
this.listeners[targetId] = {
handler: function(event){
var elementId = event.element().identify();
if (event && targetId == elementId) {
var url = event.memo.url;
this.showActive(url, 1);
}
}.bindAsEventListener(this),
eventName: eventName || "element:afterUpdate",
element: targetElement
};
targetElement.observe(this.listeners[targetId].eventName, this.listeners[targetId].handler);
and added in the eventhandler:
// stop if behaviour is destroyed or element is no longer part of DOM
if (this.destroyed) return;
if (!this.element.hasDocumentAncestor()){
this._destroy();
return;
}
added this extra method:
/*
Property: _destroy
Destroy behaviour of this component if element is no longer part of the DOM
*/
_destroy : function(){
// remove event observers
for (var key in this.listeners){
var listener = this.listeners[key];
if (listener.element) listener.element.stopObserving(listener.eventName, listener.handler);
}
this.destroyed = true;
}
for the game platform editor from  ffilmation I edited my previous flash swf which calculated the average pixel color in an image. Now create an image in black and white color and the swf creates xml based on the average black color in the image.
or load the source it here (its not so clean.. there are more functions in it which I don’t use for this example but maybe you can have some use of it)
Made this controller for a walkcycle in an educational flash game.
See:willie webwijs website
Took me a while to think about how I could do it. So made the walkcycle with 90 degree turn and stand and start in four directions put the frames after each other and marked every part (walkcycle, turn, stand, stopping, starting). Made an excel sheet with on one axe the animation cycle I needed to go and the other axe the current animation cycle. And converted this table into a two dimensional array in flash.
And on the cross I put the cycle I needed to jump to first after the current cycle has ended. Every time after I reached the end of the animationpart I look what the next part must be and jump to that. I will end at the target animation. and stop jumping. see: the animation controller here
