— React-Native Programmierer . Patrick Tresp

Archive
Allgemein

A Snippet which is very handy, is to determine, if something is above the fold AND also within the viewable area. Above the fold does not necessarily mean – visible.

var element = jQuery("#canvas");
var pageTopValue = element.offset().top + element[0].scrollHeight;
var viewable = jQuery(window).scrollTop()+ jQuery(window).height();
 
if( jQuery(window).scrollTop() > pageTopValue ){
 console.log( "Element hidden (above viewable area)" );
}
else if( viewable < element.offset().top ){
console.log( "Element hidden (below viewable area)" );
 
}
else{
console.log( "Element visible! (within viewable area)" );
}
Read More

 

for i in *; do mv "$i" "$(echo $i|tr A-Z a-z)"; done

Read More

Setting up a webserver is not one of the things i do daily, therefore a reminder:

Case-insensitivity in URLs might be explicit wanted on a specific domain on webserver.

Therefore create a .htaccess file containing those 2 lines

CheckSpelling On
CheckCaseOnly On

also slightly important is to change directorys rights and all containing date to „750“.

The Apache module mod_rewrite needs to be activated!

 

Read More

Just to have a short note, since it can save an evening or two.
If wanting to delete all files e.g. with .mp4 just use MacOSX Terminal and type

find . -name *.mp4 -type f -exec rm -r {} \;

make sure to be in correct directory and maybe you want to doublecheck the results first

find . -name *.mp4 -type f

Read More

Also this time, i want to write a very little summary of btplay in cologne, since i just got back from vacation, a lot is already out of mind.

Luca Sale
– keywords: phonegap, ripple, cloud9

Nico Zimmermann
– keywords: schau, passion project time ( save a month a year to just to passion projects )

Tim Ahrens
– keywords: fontfonter ( try fonts on any website )

Grant Skinner
– keywords: technitone, createjs

Thanks also to the great talks:

– Marcin Wichary
– Seb Lee
– Frank Reitberger
– Joshua Davis ( still cracking somethimes  and thank you for this: „the work you make is the type of work you’ll get hired to do“ )
– Sebastian Golash

Read More

Whithout writing too much about it for today, the best way ( i can always only speak for myself ) to call a function with setTimeout in JavaScript is:


var myTimeout = 400;
setTimeout(function(){ callFunction(parameter[s]) }, myTimeout);

function callFunction( parameter[s] )
{
// Do some Stuff here with the parameter[s]
}

Especially when a Parameter is a „multiple Word – String“ (e.g. „Hello Everyone, i am a multiple word String!“ ), using a „closure“ will be the way that works also in Internet Explorer 🙂

Read More

When working with JQuery, it seems all work is taken over by the library.
Actually it does, unless a client tells you afterwards, Internet Explorer 8 is still his/her weapon of choice, next to the ipad of course.
A really funny combination of technical aspects, but client is king, lets make him feel that way.

A real pain is that IE8 is not able to use event.preventDefault() nor event.stopPropagation().

For this, its helpful to use a function that will end the event, no matter what browser:

Step 01. make sure to stop Events

function stopEvent(e) {
 
	if(!e) var e = window.event;
 
	//e.cancelBubble is supported by IE -
        // this will kill the bubbling process.
	e.cancelBubble = true;
	e.returnValue = false;
 
	//e.stopPropagation works only in Firefox.
	if ( e.stopPropagation ) e.stopPropagation();
	if ( e.preventDefault ) e.preventDefault();		
 
       return false;
}

Step 02: adding and removing the listeners.

Since IE (8) does not support addEventListener or removeEventListener etc. the element needs to be checked, whether it supports addEventListener or attachEvent ( IE )

function addListeners( el )
{// Allow function call without passing parameters
	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
 
	if( el )
	{
		if( el.addEventListener )
		{	
			el.addEventListener('mouseup', onMouseUp, true);
			el.addEventListener('mousemove', onMouseMove, true);
			el.addEventListener('touchstart', onTouchStart, true);
			el.addEventListener('touchmove', onTouchMove, true);
			el.addEventListener('touchend', onTouchEnd, true);			
		}else if( el.attachEvent ) {
                        // make sure mouse events have the prefix <strong>on</strong>
			el.attachEvent('onmouseup',    onMouseUp);		
			el.attachEvent('onmousemove',    onMouseMove);
			el.attachEvent('touchstart',   onTouchStart);
			el.attachEvent('touchmove',    onTouchMove);
			el.attachEvent('touchend', onTouchEnd);				
		}   
	}
}
// also remove the Listeners correctly:
 
function removeListeners( el )
{	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
	if( el )
	{
		if( el.removeEventListener )
		{	
			el.removeEventListener('mouseup', onMouseUp);
			el.removeEventListener('mousemove', onMouseMove);
			el.removeEventListener('touchstart', onTouchStart);
			el.removeEventListener('touchmove', onTouchMove);
			el.removeEventListener('touchend', onTouchEnd);
		}else if( el.detachEvent ) {
			el.detachEvent('onmouseup',    onMouseUp);
			el.detachEvent('onmousemove',    onMouseMove);
			el.detachEvent('touchstart',   onTouchStart);
			el.detachEvent('touchmove',    onTouchMove);
			el.detachEvent('touchend', onTouchEnd);				
		}  
	}
}

Now its just a Matter of Needs, what to do within the handlers:
an Example could be

 function onMouseUp(e) {
	log('-&gt; mouse up');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	removeListeners();
	stopEvent(e);
}
 
function onMouseDown(e) {
	log('-&gt; mouse down');
	addListeners();
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchStart(e);
	stopEvent(e);
}
 
function onMouseMove(e) {
	log('-&gt; mouse move');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchMove(e);
	stopEvent(e);
}
 
function onTouchStart(e) {
	log('-&gt; touch start');
	//do something with e.touches[0].clientX or e.touches[0].clientY
   stopEvent(e);
}
 
function onTouchMove(e) {
	log('-&gt; touch move');
	//do something with e.touches[0].clientX or e.touches[0].clientY
	stopEvent(e);
}
 
function onTouchEnd(e) {
	log('-&gt; touch end');
	if( !is_touch_device() ) removeListeners();
}

And to not get any errors, add function log and function is_touch_device…

function log(str) {
	var c;
	c = document.getElementById('console');
	c.innerHTML = str + '
' + c.innerHTML;
}
 
function is_touch_device() {
  return !!('ontouchstart' in window) ? 1 : 0;
}

Finally, if it is an Touch device, you want to add the listeners onLoad of the document, on regular devices on MouseDown. Call this function on documen_ready or onLoad.

function init() {
 
	var el;
    el = document.getElementById('myDiv');
 
	if( el.addEventListener )
	{
		el.addEventListener('mousedown', onMouseDown, false);
	}else if( el.attachEvent ) {
		el.attachEvent('onmousedown',    onMouseDown);
	}
	if( is_touch_device() ) addListeners();
 
 
}

it works so far in IE8/9, FireFox 3.6.1+, Safari and mobile Safari ( ios )

Read More

During a Projekt, i was wondering, why local use of HTML5 Videos was running, but online it failed.

It turned out, that the MIME-Types for .ogg or .webm were not correctly set. The Server served them as plain text-files.

To get the Server to add correct headers to the files, it is helpful to add those lines in your .htacess .

Not all of them are always neccessary.

AddType video/ogg .ogm 
AddType video/ogg .ogv 
AddType video/ogg .ogg 
AddType video/webm .webm 
AddType audio/webm .weba
AddType video/mp4 .mp4 
AddType video/x-m4v .m4v

Sometimes it’s that easy

Read More

or…. how to get back to efficiency.

One of the major issues for me as a developer is how to use my time. Decisions need to be made, what has to be done ( by me ) till when and what needs to be worked on next.

Since i am a very lucky in the fact, that i have lots of jobs, i tended to fuddle up everything and not get anything done stress free.

So what now? I won’t be the one, that will invent a time stretching mechanism in physics, astrology or whatever.

I read an article that came per tweet ( can’t find it of course by now ) that inspired me, coming back to more efficiency.

First, a couple weeks ago a friend reminded me, that i could set my phone to not push e-mails anytime to my phone. Which means, whenever i want or need to receive E-Mails, i simply open the mail-app manually. Whoa what a relief – the phone does not „pling“ all the time which distracts me or wants my attention.

Which leads me to the second point. Event though my phone doesn’t pling that much anymore, i wondered, what distracts my attention to code while programming. The pling… it is still there, cause my mail program of course is checking my mails all the time. Every 10-20 minutes or in even smaller periods the pling comes up. I sat back and read the mails, that needed so much urgent attention:

  • Cheap Flights to London for 29 € ( Oh yeah lets go )
  • Get a Picture framed for 40% off ( right, haven’t done that for a while )
  • Tibet needs help – Donate here ( just phish my account! )
  • etc.
  • etc.

I figured, its not SPAM! I really signed up for those newsletters and surely marked them as read, whenever they came in. So for a couple of weeks i unsubscribed all newsletters which i really do not need to receive, since i look up stuff manually that interests me. Many services are unsubscribed by now and daily E-Mail rate dropped 80%. Still working on more!

Third– Email is no real-time communication, even though we tend to force ourselves to believe that. I do, for example, have a time, where i am very productive in coding, another time for writing Mails, another for doing office stuff. There not the same each day, but when i feel, i am getting ready to code, i close my mail program for at least an hour. no more pling…

Oh, don’t want to forget the other attractors, even though nobody does it while working! Twitter, Skype, Facebook, g+, Online-News, community etc, etc.
Since Skype is the only thing, that connects me to other developers and friends i tend not to switch it off, Facebook kind of killed that totally crazy chatting anyhow. Whenever i really want silence – i am „busy“.
Twitter, Facebook, News and all the other information spreaders i watch first in the morning, before i even start thinking of work, after lunch and sometimes before i leave.
Compact distraction!
This week i did work on 7 different jobs and different clients, usually it would mean, i don’t get home till midnight and i feel worn out, but i didn’t.
It wasn’t a 9-5 week of course but i sure did have the time to come down, think about, what i do and i even found time to write down those lines….

Read More

With the latest Update of OSX Lion and therefore getting the new Webkit, the external Viewer seems to shrink the output swf.

Even though i do like small applications, i love to be able to read an click what i produce.

So whats up?

FDT creates a wrapper to launch the swf when using the external swf viewer. In this wrapper, the embed tag does not include any informations about width and height of the swf, and that causes the swf to shrink. Thanks to FDT support, it is possible to have a workaround on that, besides using the standalone player or the browser ( i kinda got stuck to the external viewer ).

Basically, what you do is:

  • get the generated code from the wrapper FDT created
  • create a HTML-File
  • copy the generated code and insert the width and height attributes in that code
  • change the Debug-Configurations, on what to open after the compile process ( yes, the new HTML-file )

The bug is filed under : http://bugs.powerflasher.com/jira/browse/FDT-2255
Don’t like reading? http://screencast.com/t/lylw8JVrve

Read More