Mateusz Stawecki

Personal Site

After months of extremely hard work, brilliant cooperation, risky innovation, it’s done.

This slideshow requires JavaScript.

iTunes Link

We’ve had some excellent reviews as well:

It’s hands down one of the best apps out there for the iPad right now and serves as a banner app for tablet education in general.

Brian Cox’s Wonders of the Universe is literally one of the best iPad apps I’ve ever encountered.

Wonders of the Universe might be one of the best educational apps to date for iOS

Further reviews on: Mashable, Guardian

I’ve never seen such good reviews of an iPad app. I’m absolutely stunned. I’d like to thank everyone who was involved in the project and everyone who gave use this amazing feedback as well. Cheers!

I’d write more, but I need to get some sleep first, so stay tuned and try it out, because there is a lot more to come! ;)

Wonders of the Universe is our first app, which utilises Glide Publisher. A publishing framework, which we’re working on at the moment. Learn more about Glide from @_ChrisHarris, @matt_walton and me:

Leave a comment

I had a little play with different documentation generators recently and it inspired me to write a handy little tool to review all your “//TODO:” comments in code. There’s a lot of criticism around putting “TODO” and “FIXME” etc in code, it does sometimes end up quite badly. However, if you try to grasp it and use it to get a better overview of your progress, it might not be all that bad. As usual… it’s quite cool what you can do with bash.

Very minimalistic shell script, grab it as a Gist: https://gist.github.com/1212539

Leave a comment

I wanted to call this post “Project Cemetery”. Some experiments go bad, some go good. This one went far better than I expected, but besides interesting results, nothing really kicked off. Let me start from the beginning then. Last year (2010) I met a group of awesome people – employees of the OTHER media, who showed off some cool stuff in Mobile. One thing was particularly cool. A 3d app prototype in WebKit showed off by Chris Harris (@_ChrisHarris). Couple months later, I was lucky enough to join the team and work on a web app written with JS and CSS transforms. After that I got really excited about how much rendering power you can squeeze out from a browser on an iPhone, I decided to play a bit more with 3d transforms, see where it takes me.

Experiment #1: 3D Sci-Fi Racing game

(try it on Safari/WebKit nightly)
controls: arrow keys, space, C

I got carried away on this one! It was pretty cool, but runs correctly only on Safari/WebKit nightly. It has a physics engine, collision detection. All graphics using pure CSS3. Some of you may wonder: why not WebGL? Well.. there is one major problem with WebGL – it’s not supported on any mobile devices at the moment! And it might not be for a while, but while experiment no 1 was pretty cool, it failed to run on the iPhone. I’ve tried optimising, but I had to change the concept and do it from scratch. I was scratching my head, if it’s even worth trying, since there isn’t much of a case for such usage of this technology. It couldn’t compete with native 3d games. I finally got convinced by Chris: “iAds. You can use this in iAds.”. It made perfect sense, I then realised that when I saw the iAd keynote, I hated these ads, especially the games. Toy Story 3 puzzle game? :/ Ugh!! Here’s my shot at a game embeddable in iAds:

Experiment #2: 3D Platform game optimised for iOS

(try it on any WebKit browser including iOS)
controls on PC: arrow keys, space.

Boom! By the end of November 2010 it was finished. No-one could believe that this was a Web-app. And it ran on an iPhone 3G! You basically play a penguin who picks up ice cream :D I’ve been looking into selling this piece as a framework, but it didn’t work out. Turns out trying to work with ad agencies is quite hard too. If anyone’s still interested, give us a shout. I enjoyed the “journey” and got some cool demos out of it ;) Gotta keep on trying!

Leave a comment

UPDATE: This is an old piece, you probably want: phantom.js and casper.js

In this post I’ll show you how to remotely control your Google Chrome browser using JavaScript and scrape some data, even if it’s on an AJAX powered website or behind HTTPS authentication. Nice? I LOVE WebKit and now it got even sweeter. Very recently there was a small buzz about a new feature: WebKit Remote Debugging that allows to use Element Inspector remotely! (since it’s essentially just a web page and some javascript + websockets). What’s the real icing on the cake for me, is the ability to plug-in a different interface. I wrote a simple interface that can execute several pieces of JavaScript and return the values back to you. Here’s how to set it up. Open Terminal and find the Google Chrome executable. To use remote debugging, run it with a special parameter:

$ cd /Applications/Google Chrome.app/Contents/MacOS/ $ ./Google Chrome –remote-debugging-port=9222

If you get:

[0513/205852:FATAL:foundation_util.mm(102)] Check failed: bundle. Failed to load the bundle at /Applications/Google Chrome.app/Contents/MacOS/Versions/11.0.696.68/Google Chrome Framework.framework

Try symlinking Versions:

$ ln -s ../Versions/ ./Versions

The browser should start normally. Now go to a different browser, e.g. Safari and check out: http://localhost:9222 Select a page and you should see the Inspector. That’s all nice and neat. But let’s see my remote script: http://gist.github.com/972742 – To connect to the debugger, we’re using WebSockets. Change the page number based on the link from http://localhost:9222 . Every “Tab” has a different “Page” number.

	// Set page number!
	var host = "ws://localhost:9222/devtools/page/5";
	socket = new WebSocket(host);

– To execute JavaScript I wrapped a JSON-RPC-like command into a method with callback. More protocol schema here.

function remoteEval(scriptString,callback) {
	seqCallback[seqNo] = callback;
	socket.send('{"seq":'+seqNo+',"domain":"Runtime",'+
	'"command":"evaluate","arguments":{"expression":"'+
	scriptString.replace(/["]/g,'\"')
	+'","objectGroup":"console","includeCommandLineAPI":false}}');
	seqNo++;
}

– And this is how a sample script works:

remoteOnLoad = function(result) {

// We might've ended up on the login page, so let's log in!
if (remoteURL.indexOf("ServiceLogin") > 0 )
remoteEval( " document.getElementById('Email').value = 'username'; "+
	" document.getElementById('Passwd').value = 'password'; "+
	" document.getElementsByTagName('form')[0].submit(); "
	, function(result) { alert(result); } );

	// We're home!
	if (remoteURL.indexOf("mail.google.com/mail/") > 0 )
	remoteEval( " try { document.getElementById('canvas_frame')"+
".contentWindow.document.getElementsByClassName( 'md' )[0].innerText } catch(e) { -1 }"
	, function(result) {  // Waiting for AJAX. Try again in 2 sec.
	if (result == -1) { setTimeout(remoteOnLoad,2000); }
				else { alert(result); } } );
				// This should return scraped information
				// about your data usage on gmail!
				// E.g. You're currently using 150MB out of 7000MB
			} ;

// This happenes first:
remoteEval(" location.href = 'http://gmail.com' ");
//Let's go to Gmail!

Don’t know how about you, but I just wanna wrap it in Node.js, run it somewhere on Linux with a dummy X11 server for Chrome and write lot’s of crazy tasks, so it does it all for me! Imagine e.g. that instead of that alert(result) you make it a WebHook or a service?

1 Comment

Name: Web Form Analyzer
Motto: Simple form analyzer from URL

Link: http://formanalyzer.net/

Summary:
A very simple web form analyzer! Just enter the form’s URL or HTML code and you’ll see a nice print out of different forms and values submitted on the website.

Had a bit of time and need for a simple tool like that. Dead simple, very clear to read. Nicer than ‘view source’, if you’re just interested in what and where is being posted from a website or piece of code. Enjoy.

Leave a comment

Ever had this problem? You were so excited to see, if some piece of code works on your live system, that you forgot to change database access configuration and file paths? Probably not, because we’re all respected professionals here *wink* and the case is usually: it’s 10pm, still at the office and x product is launching tomorrow and you accidentally overwritten the configuration, because you didn’t have time to finish the deployment script :P. Or maybe you have to deploy your application to even more than two machines? Well, here’s a small cheat sheet.

The lazy way


switch (php_uname('n')) {
    case 'livedevhost04':
		$dbhost = 'sql.example.com'; $dbuser = 'myapp_user';
		$dbpass = 's7d6y3726ye86'; $db = 'myappdb';
		break;
    case 'Mateusz-Laptop.local':
		$dbhost = 'localhost'; $dbuser = 'root';
		$dbpass = ''; $db = 'testdb';
    	break;
    default:
       echo 'No configuration found for host: '.php_uname('n'); exit;
}

This way is quite nice for most scenarios. Very convenient. Get the machine’s hostname, add a “case” to the switch with server’s configuration and you’re good! If you’re deploying through some sort of SFTP/WebDAV protocol, you can easily upload files without any additional modification before running the script. The same with deployment techniques like Deploy using Git.
The only problem is that you’re slightly exposing configuration settings for all your boxes. If you don’t feel comfortable with this, try a different technique like symlinks to a local configuration file.
Personally, I use it quite often. It’s better and way less annoying than swapping commented settings.

The ‘bash’ way

This can be used for many different scenarios. Not just files, but also directories. Here’s a very nice and readable script for symlinking stuff based on local hostname:

#!/bin/bash

targetfile=webroot/config.php
fromscheme=webroot/config._HOST_.php

fromfile=${fromscheme/_HOST_/`hostname`};

if [ -e $fromfile ]
then
 rm $targetfile
 ln -s $fromfile $targetfile
 echo $fromfile == $targetfile
else
 echo [ERROR] Local configuration file not found: $fromfile
fi

Additionally, you might want to execute a custom script that will do something for you after retrieving a configuration set.
Notice the “webroot/”, please keep sensitive scripts outside your document root, mkaay? Maybe even clean them up after deploy and keep them in repo!

You’re only in trouble, if you don’t have access to a bash shell on your hosting server (use first method) or you’re running Windows (you can try cygwin if you’re mad enough ;] )

A JavaScript Bonus

You’d be surprised how many times, I almost did something very silly on a deployed version of an ajax based application. As a bonus, here’s a script you can put in your app, to help you identify, which build you’re currently working on. Especially useful, when running on iOS in web app mode.

<div style='display:none;color:red;' id='devnotification'>TEST SERVER</div>


var currentHost = location.href.split('/')[2];
if (currentHost == 'localhost' || currentHost == 'dev.example.com')
document.getElementById('devnotification').style.display = 'block';

Enjoy! And remember to run your tests kids!

1 Comment

Getting cross-site content with JavaScript is cool, since it usually requires a tiny bit of extra effort when designing the feeds or deploying a callback proxy. Thanks to Yahoo Pipes it has now become very easy to get any content, even a whole web page and crunch it in your JavaScript web app.
First go to pipes.yahoo.com and Create a new Pipe. You’re going to have to log in.
Drag “URL Input” from “User inputs” to your pipe diagram. Now get back to “Sources”. If you’re planning on fetching a website, drag “Fetch Page”. If it’s a JSON or XML feed “Fetch Data” (all data will be automatically transformed ).
The next step is linking the elements together. Drag a link from the “URL Input” into you source’s URL Attribute and from sources output to Pipe Output.
Your pipe should look something like this:

Click “Save” and “Run Pipe…”. You’ll be taken to the pipe information page, where you can enter the URL which you want to proxy. Submit with “Run Pipe”, after it has loaded, select “Get as JSON”.
You should see some nice JSON with the transformed content. The URL to such pipe looks like this:
http://pipes.yahoo.com/pipes/pipe.run?_id=d53d0d4793aa292d3e02885ba9b22cba&_render=json&fromurl=http://stawecki.com
Now guess how to add a callback ;)
http://pipes.yahoo.com/pipes/pipe.run?_id=d53d0d4793aa292d3e02885ba9b22cba&_render=json&fromurl=http://stawecki.com&_callback=test
Surprise ;) There is an underscore before “callback” attribute name. (weirrrd) For anyone who is new to XSS, “callback” is basically the name of a JavaScript function that receives the content. To show how it works, here’s a simple script that downloads a website and returns the response’s character length:


	function test(response) {
		try {
			alert( 'Content size: '+
			response.value.items[0].content.length );
			} catch(err) { alert('Invalid response'+err); }
		}

	function getURL(urlstr) {
		var ka = document.createElement('script');
		ka.type = 'text/javascript';
		ka.src =
'http://pipes.yahoo.com/pipes/pipe.run?_id=d53d0d4793aa292d3e02885ba9b22cba&_render=json&fromurl='+
		escape(urlstr) + '&_callback=test';
		var ks = document.getElementsByTagName('script')[0];
		ks.parentNode.insertBefore(ka, ks);
	}

And here’s a live version to try:
Simple Pipes Callback

Here’s a slightly more complicated example. I’m getting HTML content, parsing it internally and listing all links on the website (NICE!):
Link Scraper Demo

These examples used “Fetch Page” in pipes. Here’s an example of reading an RSS feed using “Fetch Data”. This script alerts the most recent news item from an external RSS feed. Notice that Yahoo Pipes conveniently transforms any feed to JSON (or XML if you really really want).


	function test(response) {
		try {
			var newsItem = response.value.items[0].channel.item[0];
			alert( newsItem.pubDate +" - " + newsItem.title +" - " + newsItem.description );
			} catch(err) { alert('Invalid response'+err); }
	}

	function getURL(urlstr) {
		var ka = document.createElement('script');
		ka.type = 'text/javascript';
		ka.src =
		'http://pipes.yahoo.com/pipes/pipe.run?_id=4d625dfe6977e71acb45db4aa51726a6&_render=json&feedurl='+
		escape(urlstr) + '&_callback=test';
		var ks = document.getElementsByTagName('script')[0];
		ks.parentNode.insertBefore(ka, ks);
	}

And here’s a live version to try with BBC News RSS feed:
Simple RSS Callback

Now go and cross site the hell out of the internetz! Soon slightly more practical examples.

1 Comment
Follow

Get every new post delivered to your Inbox.