Archive for the ‘ DEVELOPMENT ’ Category

Elgg Community 1.8.2 rewrite rules for Nginx

Today i’m trying out the Elgg Community in version 1.8.2
The Elgg Community is an OpenSource Community Software written in PHP/MySQL.

Because i’m using the Nginx Webserver instead of the Apache Webserver, i have to convert the rewrite-rules from htaccess to the Nginx rewrite-rules.
The most difficult part was to convert these condition:

# Everything else that isn't a file gets routed through the page handler
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([A-Za-z0-9\_\-]+)$ engine/handlers/page_handler.php?handler=$1 [QSA]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([A-Za-z0-9\_\-]+)\/(.*)$ engine/handlers/page_handler.php?handler=$1&page=$2 [QSA]

 
This conditions can be solved with the following Nginx rules:

if (!-d $request_filename){
	set $rule_11 1$rule_11;
}
if (!-f $request_filename){
	set $rule_11 2$rule_11;
}
if ($rule_11 = "21"){
	rewrite ^/([A-Za-z0-9\_\-]+)$ /engine/handlers/page_handler.php?handler=$1;
}
if (!-d $request_filename){
	set $rule_12 1$rule_12;
}
if (!-f $request_filename){
	set $rule_12 2$rule_12;
}
if ($rule_12 = "21"){
	rewrite ^/([A-Za-z0-9\_\-]+)\/(.*)$ /engine/handlers/page_handler.php?handler=$1&page=$2;
}

 
The complete nginx.conf could look like this:

server {
	listen	    80;
	server_name	elgg.domain.com;
	root        /var/www-nginx/elgg/htdocs/;

	error_log	/var/log/nginx/error.log;
	access_log	/var/log/nginx/access.log;

	index         index.php index.html;
	fastcgi_index index.php;
	
	client_max_body_size      8M;
	client_body_buffer_size 256K;

	rewrite ^/pg\/([A-Za-z0-9\_\-]+)$ /engine/handlers/page_handler.php?handler=$1&$args;
	rewrite ^/pg\/([A-Za-z0-9\_\-]+)\/(.*)$ /engine/handlers/page_handler.php?handler=$1&page=$2&$args;
	rewrite ^/tag\/(.+)\/?$ /engine/handlers/page_handler.php?handler=search&page=$1;
	rewrite ^/action\/([A-Za-z0-9\_\-\/]+)$ /engine/handlers/action_handler.php?action=$1&$args;
	rewrite ^/cache\/(.*)$ /engine/handlers/cache_handler.php?request=$1&$args;
	rewrite ^/services\/api\/([A-Za-z0-9\_\-]+)\/(.*)$ /engine/handlers/service_handler.php?handler=$1&request=$2&$args;
	rewrite ^/export\/([A-Za-z]+)\/([0-9]+)\/?$ /engine/handlers/export_handler.php?view=$1&guid=$2;
	rewrite ^/export\/([A-Za-z]+)\/([0-9]+)\/([A-Za-z]+)\/([A-Za-z0-9\_]+)\/$ /engine/handlers/export_handler.php?view=$1&guid=$2&type=$3&idname=$4;
	rewrite /xml-rpc.php /engine/handlers/xml-rpc_handler.php;
	rewrite /mt/mt-xmlrpc.cgi /engine/handlers/xml-rpc_handler.php;
	rewrite ^/rewrite.php$ /install.php;
	if (!-d $request_filename){
		set $rule_11 1$rule_11;
	}
	if (!-f $request_filename){
		set $rule_11 2$rule_11;
	}
	if ($rule_11 = "21"){
		rewrite ^/([A-Za-z0-9\_\-]+)$ /engine/handlers/page_handler.php?handler=$1;
	}
	if (!-d $request_filename){
		set $rule_12 1$rule_12;
	}
	if (!-f $request_filename){
		set $rule_12 2$rule_12;
	}
	if ($rule_12 = "21"){
		rewrite ^/([A-Za-z0-9\_\-]+)\/(.*)$ /engine/handlers/page_handler.php?handler=$1&page=$2;
	}
	
	location ~ \.php$ {
		include fastcgi_params;

		# Assuming php-fastcgi running on localhost port 9000
		fastcgi_pass 127.0.0.1:9000;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

		fastcgi_connect_timeout 60;
		fastcgi_send_timeout 180;
		fastcgi_read_timeout 180;
		fastcgi_buffer_size 128k;
		fastcgi_buffers 4 256k;
		fastcgi_busy_buffers_size 256k;
		fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;
	}
	
	# Do not put CSS there or it will break simplecache
	location ~* \.(bmp|js|gif|ico|jpg|jpeg|png)$ {
		expires max;
		# log_not_found off;
	}

}

Code-Snippet: Cross-Browser CSS3 Box-Shadow

How to create a cross-browser CSS3 Box-Shadow.
Use -moz for Mozilla, -webkit for Chrome and Safari and -o for Opera:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  -o-box-shadow: 10px 10px 10px #000; /* Opera */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

How to create combined AND / OR Conditions with TypoScript

Sorry, this entry is only available in Deutsch.

How to make the TypoScript pageID in Typo3 available for JavaScript

Sometimes it is necessary to have the current pageID from Typo3 available within you website for JavaScript actions and so on.
You are able to do this with a little wrap like this:

page.bodyTagCObject = HTML
page.bodyTagCObject.value.field = uid
#page.bodyTagCObject.value.wrap = <body id="pageID_|">
#page.bodyTagCObject.value.wrap = <body onload="sendPageIdToAnyFunction(|)">
page.bodyTagCObject.value.wrap = <body onload="alert(|)">

How to integrate Dojo Toolkit with TypoScript into Typo3

If you need the Dojo Toolkit within Typo3, you only need the following few lines TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
 
  # Dojo-Libraries
  file3 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js
  file3.external = 1
  file3.type = text/javascript
}

 
In this case i’ve the Dojo configuration within a separate JavaScript file:

var djConfig = {
  parseOnLoad: true,
  locale: 'de'
};

 
But attention, as you know the configuration must be included before the Dojo-Library. Therefore the ‘file’-variable have a lower number.. ๐Ÿ˜‰

In the next step we need to integrate all required CSS:

page.includeCSS {
  file2 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css
  file2.external = 1
  file2.media = all
}

 
Attention: The included CSS must be external=1 and media=all!

Finally we have to include the Dojo-Theme class ‘nihilo’ into the Body-Tag. This can be done with the next TypoScript:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class="nihilo">

 
And that’s it.. Now you should be able to use Dojo within your Typo3 site. ๐Ÿ™‚

How to use Google Web Fonts with Typo3/TypoScript

For integrating Google Web Fonts into Typo3 you need the following TypoScript:

page.includeCSS {  
  file5 = http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic
  file5.external = 1
  file5.media = all
}

 
Attention: The included CSS must be external=1 and media=all!
 
After that, you are able to declare your font by using CSS as usual:

.webFont {
  font-family: 'Marvel',Arial,Helvetica,sans-serif;
}

The walking man from Andrew Hoyer – Using only CSS3 & HTML5

That’s hot! ๐Ÿ™‚

The walking man (Andrew Hoyer) at this Page:ย http://andrew-hoyer.com/experiments/walking/ , is implemented using only CSS3 animations and simple HTML. You can read more about how it was implemented here. Be sure to view this experiment on an iPhone, iPod or iPad (or android device). ๐Ÿ˜‰

Climbing up and down the ladder of abstraction

..a systematic approach to interactive visualization.

Read more on http://worrydream.com/#!/LadderOfAbstraction from Bret Victor.

That’s a really great article, and pure JavaScript and HTML5: Read!! ๐Ÿ˜‰

Flow3, the new Framework that is also used for developing Typo3 5

Wow, that’s nice ..

Just now I watched a video introduction to Flow3, and I must say I really like it. Absolute new technology, methodologies and programming paradigms. Everything is completely object-oriented and it is for example Aspect Oriented Programming, Domain-Driven Design and much more is applied. So it must be, then makes developing fun ๐Ÿ™‚

So, I’m finished here now and going to create my first Flow3 project. So stay tuned and read my next article here about Flow3 that are definitely coming ๐Ÿ˜‰

My favorite 500 Internal Server Error Page ;)

That’s my favorite 500 Internal Server Error Page ๐Ÿ˜‰