Eric Muyser

New Library: Moar for LESS (CSS)

Sun, 09 Oct 2011 00:00:00 GMT

Moar is a LESS framework that was created to make slicing different types of websites and applications smoother. Get MOAR for LESS out of your CSS!

You can find it in use here:

Links

Posted in: Programming

Tip: Getting error "unrecognized selector sent to instance"?

Tue, 21 Jun 2011 00:00:00 GMT

So you are developing an Appcelerator app, and you've across this mysterious error. At least, that's what I'm assuming as you've come across this post. From what I can tell, it tends to be predominant on iPhone/iPod. I'm not sure if my solution relates to that, being that I'm developing for the desktop.

Basically, this error will occur when something has gone horribly wrong on the Cocoa side, which in the case of Appcelerator is out of our control. We can however stop it from showing its ugly face. For me, the major cause has been Flash related content. If I try to load a JS library such as SWFobject into my page, it will crash my app. Why? Well, let's just say I'm running Snow Leopard without hardware accelerated graphics right now, which means Flash Player 10 instantly falls on its face. I can kind of understand that from the error pointing me to OpenGL, but not really.

For Google, the exact error I've received (which varies):

2011-06-21 21:01:38.373 utelevision[79434:b07] *** WebKit discarding exception: <NSInvalidArgumentException> -[FP_FPCAOpenGLLayer setBuffer:]: unrecognized selector sent to instance 0x2c8fd0

Posted in: Programming

New Theme: Cocoa for jQuery UI

Sun, 09 Oct 2011 00:00:00 GMT

Cocoa-style theme for jQuery UI.

Links

A little backstory to how this project came about. When I began development for some Appcelerator apps a few months back, I weighed the possible UI options. If you're not familiar, Appcelerator is an cross-platform application which runs your web coding as a native app on your operating system. In my case, it's essentially running my HTML/CSS/JavaScript in a WebKit frame. That meant I would need to choose 1) a CSS framework (I created my own LESS framework: moar), a JavaScript framework (I created my own CoffeeScript Node.js framework, of sorts: node-std that's cross-compatible both on the server and client side, thanks to node-browserify), and a JavaScript UI framework to lay on top of it. Being that I was using my own JS framework, I wanted something I could simply drop in and just work.

I explored Sproutcore, Cappuccino, and the like, but personally found them to be too much overhead for what I needed. I was fairly familiar with jQuery UI, but found creating the theme to be slightly tedious due to the raw unstructured CSS. I immediately converted the core CSS to LESS (jquery-ui-less-theme on GitHub), clearing up some of the bloat. Although it is developed in LESS, it is compiled down into raw CSS and perfectly usable in that state.

Having used Mac OS X for a year now, I've become quite fond of the native Cocoa UI. If you go through the official jQuery UI themes, almost none of them would be suitable as a base for a Mac-style theme, but I remembered having seen Aristo by Tait Brown, which was an excellent theme to start with. After having finished the first version of uTelevision.app, we have the first version of jquery-ui-theme-cocoa panned out.

For those that have been paying attention, you'll notice the breakdown:

uTelevision.app uses jquery-ui-theme-cocoa
jquery-ui-theme-cocoa uses jquery-ui-less-theme and moar

I'm continuing to use this theme in some currently unreleased apps, and so expect to continue to see improvements as time goes on. If you have any comments, suggestions, please let me know below. Thank you.

More of my jQuery work can be found here.

Posted in: Programming

Tip: Fix Screen Tearing in Vindictus

Wed, 23 Feb 2011 00:00:00 GMT

Incase anyone out there encountered this issue: Vindictus is running in windowed mode w/ no border. With my monitor, the Dell UltraSharp U2311H (E-IPS), that resulted in extreme horizontal tearing. In order to fix it you need to manually override the "default" settings in your Graphic Options to use fullscreen. However, and this may explain why they are doing that, that caused the Auction House and all other inline iframe-like areas to glitch initially. It appears what they are doing to embed inline websites (probably webkit too) into the game is causing an issue in fullscreen, and it's either causing a glitch or temporarily switching to windowed mode when you initiate the AH, etc.

Interesting, anyway, happy gaming!

Posted in: Gaming

Getting started with Nginx, PHP5, and MySQL

Tue, 22 Feb 2011 00:00:00 GMT

Today I'm going to do a quick run down from start to finish successfully installing and running PHP applications on LAMP. We'll be using Nginx, PHP5, and MySQL. My OS of choice is a Debian VPS; your experience may be differ on other distros. My host of choice is Rackspace Cloud Servers. By the end, we should be able to run web apps such as WordPress, LemonStand, Joomla, etc.

First, we need to create our VPS. That is extremely easy on Rackspace, Linode, etc. Simply log into your backend UI and create a new server. You should be given or mailed credentials.

You will need to point a DNS A record to the provided IP address.

Next, we need to SSH into our box (or use a provided backend console). So we open up our command-line Console. I will assume you are using root, if not, you will need to sudo or su before each command.

Run this command: ssh myusername@mydomain.com and login.

Currently, the offered Debian version is Lenny (with Squeeze coming soon I imagine). So, in order to simplify things, we're actually going to upgrade to Squeeze.

When I mention to edit a file, you can do so simply like this in command-line: nano /path/to/file/name.ext

If you use nano, then simply use ctrl+o to save and ctrl+x to exit.

First, open nano /etc/apt/sources.list in your favorite editor (vi, nano, etc), change instances of lenny to squeeze, and add dotdeb's repositories, like this:

deb http://http.us.debian.org/debian/ squeeze main contrib non-free
deb-src http://http.us.debian.org/debian/ squeeze main contrib non-free
deb http://security.debian.org/ squeeze/updates main contrib
deb-src http://security.debian.org/ squeeze/updates main contrib
deb http://php53.dotdeb.org stable all
deb http://packages.dotdeb.org stable all
deb-src http://php53.dotdeb.org stable all
deb-src http://packages.dotdeb.org stable all

Then run this command: apt-get update

Did you get a GPG error? Check the key after the NO_PUBKEY and run this command:

gpg --keyserver keys.gnupg.net --recv-key PASTE_HERE_KEY

gpg -a --export PASTE_HERE_KEY | sudo apt-key add -

If there are two keys you may need to add two. Then run this command again: apt-get update (to manually update keys: apt-key update)

We need to create a file that will let the system know we want it to upgrade next startup: touch /etc/udev/kernel-upgrade

Then type reboot, and let the system shutdown. Give it a minute, and reconnect via SSH.

Now, run this command: aptitude full-upgrade

To install Nginx we run this command: aptitude install nginx

To setup MySQL we run this command: aptitude install mysql-server mysql-client

To install PHP we run this command: aptitude install php5-fpm php5-cgi php5-dev php5-curl php5-gd php5-idn php-pear php5-imagick php5-imap php5-mcrypt php5-memcache php5-ps php5-pspell php5-recode php5-snmp php5-tidy php5-xmlrpc php5-xsl php5-common php5-mysql

We should enable PHP short tags, so edit /etc/php5/fpm/php.ini and change short_open_tag to On.

Now, let's try restarting Nginx and PHP FPM to test, run these commands:

/etc/init.d/php5-fpm restart

/etc/init.d/nginx restart

Did yours throw a warning and 2 errors as well? If so,

1) Remove the line that starts with # hash from this file: /etc/php5/fpm/conf.d/ps.ini

2) Delete the extension mentioned in there error, idn.ini from the conf.d folder: /etc/php5/conf.d/idn.ini

Retry restarting the services again.

In order to get a site up and running we need to edit /etc/nginx/sites-available/default. When you've created your website directory, edit that file.

In that file, duplicate the "server" definition, change the server_name to your host, like this (I've included rewrites which should work with some web software):

server {
     listen   80; ## listen for ipv4
     server_name  mysite.com;
     access_log  /var/log/nginx/localhost.access.log;
     location / {
          root   /home/myuser/mysite/www;
          index  index.php;
         
          if (-e $request_filename) {
               break;
          }
          set $test_var true;
         
          if ($request_method = POST) { set $test_var false; }
          if ($http_X_Requested_With !~ XMLHttpRequest) { set $test_var false; }
         
          if ($test_var = true) {
               rewrite ^([^.|]*[^/])$ $1/ permanent;
          }
         
          rewrite ^(.*)$ /index.php?q=$1 last;
     }
    
     location ~ \.php$ {
          fastcgi_pass   127.0.0.1:9000;
          fastcgi_index  index.php;
          fastcgi_param  SCRIPT_FILENAME  /home/myuser/mysite/www$fastcgi_script_name;
          include fastcgi_params;
     }
}

Now reboot Nginx.

Note: Nginx configuration files are touchy. Spaces are used as part of the syntax (the one between if and bracket for example). Use nginx -t to validate config syntax.
Note: A quick way to give full permissions when installing a web application (from within it's directory): chmod -R 0777 ./
Note: As far as I can tell, minify has trouble converting relative URI's to absolute URI's, so you may have to hardcode the absolute path.
Note: You will likely want to take security precautions, run PHP under a different username, only give cache folders write permission, etc. That is out of the breadth of this guide; maybe in future posts or comments.

Thanks for reading. Good luck and have fun!

Posted in: General

Made with Lemon-Aid

Sat, 29 Jan 2011 00:00:00 GMT

Welcome to the new site! I've switched from WordPress to LemonStand (with Blog module). As you can see, I'm still under construction here, but I couldn't help but make the switch!

In the coming months I'll be coding up some quick modules to improve blog functionality, such as syntax highlighting, tags, shortcodes, comment login (OpenID, Google, Twitter), and social network integration. I'll throw those up at GitHub.

This theme is called Persona, and it's an unobstrusive JavaScript-based theme for LemonStand. It seems to function properly in IE and degrade gracefully with JavaScript disabled (happy coincidence).

Links

Shout outs to @pmeissner and @woothemes for the inspiration. I'm not a designer. Those fellas are #great #designers.

Want to report a bug? Please post here, GitHub, Twitter, eric@muyser.com, or whatever you please. Thank you!

Known compatibility: Firefox 3.6+, Google Chrome, Safari. Update: IE7+
Technology used: CSS3, HTML5, jQuery/UI, jScrollPane, scrollTo, Address, and of course custom code.
Fonts used: Ubuntu (Google Font Directory).

Are you still here? Have you actually read this entire post? Amazing, you should be following me on Twitter! Go, now! :P

Posted in: General

Tip: Fix AjaxQueue (jQuery Plugin)

Sat, 28 Aug 2010 00:00:00 GMT

As noted by Mark Gibson in the .queue() docs, and the AjaxQueue tickets, the functionality of fn.queue changed and it is no longer working by default. In order to fix it, you need to manually call dequeue(). Simply add it after it sets up queue (line 47):

	jQuery([ jQuery.ajaxQueue ]).queue("ajax", function(){
		jQuery.ajax( o );
	});

to

	jQuery([ jQuery.ajaxQueue ]).queue("ajax", function(){
		jQuery.ajax( o );
	}).dequeue("ajax");

That's it! Great plugin.. simple and effective. I may try a more robust solution in the future.

Posted in: General

New Class: Process

Mon, 02 Aug 2010 00:00:00 GMT

Here's another quick release. I remember working on this a few years ago. The idea is instead of forking processes, or calling blocking processes (with system, exec, passthru), we spawn children processes. Originally I would communicate with the actual process object, but I found a service with a process pool to be more effective (this way it can handle creation, handling, re-use, destruction, etc) - but a wrapper class could possibly be implemented. Disclaimer: I'm releasing it somewhat unfinished since I'm mostly using Python for my services these days. Feel free to fork it.

Some examples would be handling DNS (since it's blocking) or encoding video/audio (which can take minutes) or some other command that isn't non-blocking.

Here's a quick example that "asynchronously" downloads and prints HTML from list of URLs. Keeping your main process non-blocking and free to do other stuff.

<?php

	require_once("../src/process.php");

	$process_service = new process_service();

	$url_list = array(
		"http://google.com/",
		"http://facebook.com/",
		"http://twitter.com/"
	);

	foreach($url_list as $url)
		$process_service->run(
		function() use($url)
		{
			$html = file_get_contents($url);

			return $html;
		},
		function($html)
		{
			var_dump($html);
		});

	while(true)
	{
		$process_service->update();

		echo "."; // testing
		usleep(10000);
	}
?>

1) We instantiate our process_service
2) We have a standard array of URL's
3) We loop over those URL's, and call run() with 2 arguments: what you want to run in the process (anything you want from the current process in the child process must be passed with the use feature from PHP 5.3, and this works thanks to lambda serialization - credits to Jeremy Lindblom's super_closure), and the callback for when it's finished (arguments are whatever you returned in the first function).
4) Lastly we have a main loop which calls process_service's update function, which handles IO from the children processes, and such.

Links:
PHP Process Class Source
PHP Process Class Download

More found on the work page, and more to come!

Posted in: General

New Class: Lambda

Sun, 23 May 2010 00:00:00 GMT

At the moment PHP doesn't allow serializing closures. I needed a unobtrusive solution to passing closures to child processes, which are invoked later when the child process has completed the task.

I came across an informational article Jeremy Lindblom wrote on closures in PHP 5 over at HTMList which helped me come up with a solution to my problem. I didn't end up needing to save the serialized closure for a different process (or HTTP request), but it looks like a very interesting solution.

For my purposes I can keep references to actual closures in the main process, and they will function exactly as they should later (including use references). An example is a cron which goes through a list of videos, spawns an FFMPEG encoding process, sends a job off to it with a lambda callback. It's all very smooth and asynchronous. Another example is a DNS checking service (since IIRC, DNS requests are not currently asynchronous in PHP).

Example:

$a1 = array();

$some_function_called_later(new lambda(function() use(&$a1)
{
	var_dump($a1); // will contain "info" added later below
}));

$a1[] = "info";

Source:

<?php

class resource_service
{
	public static function register(&$resource)
	{
		$id = rand(0, 32768);

		while(isset(self::$registry[$id]))
			$id = rand(0, 32768);

		self::$registry[$id] = &$resource;

		return $id;
	}

	public static function unregister($id)
	{
		$resource = &self::$registry[$id];

		unset(self::$registry[$id]);

		return $resource;
	}

	private static $registry;
}

class lambda
{
	public function __construct(Closure $closure)
	{
		$this->closure = $closure;
	}

	public function __invoke()
	{
		return call_user_func_array($this->closure, func_get_args());
	}

	public function __sleep()
	{
		$this->resource_id = resource_service::register($this->closure);

		return array("resource_id");
	}

	public function __wakeup()
	{
		$this->closure = &resource_service::unregister($this->resource_id);
	}

	private $closure;
}

?>

More found on the work page, and more to come!

Posted in: General

New Class: cURL

Fri, 07 May 2010 00:00:00 GMT

Here's a quick release. I've been doing a lot of scraping work lately and of course use a cURL class. There's plenty of cURL classes out there, and here's another. I plan on evolving the class (joining multicurl into curl) and taking advantage of PHP 5.3 lambdas.

<?php

require_once("../src/curl.php");

$session = new curl();

$m1 = new curl_request();
$m1->set_url("http://google.com/");

$r1 = $session->run($m1); // returns a curl_response object

echo $r1->status_code;

?>

[Mar 8, 2010] I've merged multicurl into the curl class. Now if you specify a callback it will assume you want asynchronous results, if you don't it will return the results synchronously as normal. I've also added the curl_request/curl_response classes which wrap common functionality. I added an example of multicurl downloading multiple pages at once. This example also uses PHP 5.3 lambda's, but isn't required (defaults to call_user_func_array in versions below 5.3).

<?php

require_once("../src/curl.php");

$session = new curl();

$m1 = new curl_request();
$m1->set_url("http://www.youtube.com/");

$session->run($m1, function($r1) use(&$session, &$m1)
{
	print "[youtube] Loaded home page.\n";

	for($i = 1; $i <= 5; ++$i)
	{
		$m1->set_url("http://www.youtube.com/videos?p=" . $i);

		$session->run($m1, function($r1) use($i)
		{
			print "[youtube] Loaded video page {$i} ({$r1->status_code}).\n";
		});
	}
});

while(true)
{
	$session->update();
	echo "."; // debug
	usleep(20000);
}

?>

Links:
PHP cURL Class Source
PHP cURL Class Download

More found on the work page, and more to come!

Posted in: General

New Theme: Stoke Games

Sat, 16 Jan 2010 00:00:00 GMT

Here's a minimalistic WordPress theme I've been working on. I still have to get around to the final touches (padding, margins, widgets, etc).

Links:
Stoke Games Demo
Stoke Games Download
Stoke Games Source

More Wordpress themes can be found on the work page.

Posted in: General

New Website: Battle.net Database

Mon, 18 Feb 2008 00:00:00 GMT

As I've grown tired of Battle.net's game list feature, I've developed a web-based replacement. It only shows a fraction of the current games (at least, if there's more than 10 or so). It's very limited, and game's which you know exist either will not show up or will disappear from the list within a few seconds. To my surprise no one had come up with an improved game search. The project idea came to me when I was doing similar web development work in 2008. I wasn't aware at the time, but there did exist d2loader and Redvex plugins that allowed game filtering. This is very similar, but it keeps track of past and present games via an online interface. BNDB is a fancy name for a few very simple scripts.

I started with a Python proxy script that monitored packets from my Diablo 2 client. Unfortunately, that made it difficult to have D2 up and running 24/7, let alone multiple instances for each realm, difficulty, etc. I have since moved over to a slightly modified version of the clientless library, heroin glands. Now I can have my *nix server run a very low resource application that updates all the game lists.

In total there are 144 different game lists for Diablo 2. Each realm, difficulty, ladder/non-ladder, softcore/hardcore has it's own list of games. In order for each one to work, I need a character which can access the chosen list. Normal difficulty characters are easy, but I don't have time to get rushed to Nightmare/Hell on 100 different settings. For this reason, plugins and desktop applications seem a more logical solution than BNDB, however this was an interesting project none-the-less.

Enabled Lists:
D2 LoD USWSCL Normal

143 Disabled Lists

If you want a list enabled, please leave a comment. If you want to donate a character for a certain game list, please send me the account name and password to eric.muyser@gmail.com and I will see about enabling that game list.

Example Searches:

baal
free
pk
bring ist
brg
duel
d u e l
scr
shako
mal

Anyone that wants to use it, hope it's helpful. :) A modern browser such as Firefox is recommended.

Feedback, bugs, requests, etc. appreciated.

I may or may not create a Redvex plugin that works together with a Qt application to filter the game list using the BNDB API, so it would come up as shown on the website. It really depends.

The images are copyright Blizzard Entertainment, modified from Diablo 2 screenshots.

Links:
Battle.net Database Website
Battle.net Database Source

Todo:
- Enable more game lists. I have to convert some heroin to my own asynchronous library before-hand.
- Improve the site JS and add features such as dates and player lists.
- Cookies to save UI positions.

Posted in: General

New Script: jDrawer

Mon, 18 Feb 2008 00:00:00 GMT

This jQuery plugin is based on the JavaScript "drawer" module that appeared on Apple and YooTheme. I figured it deserved a jQuery equivalent.

Links:

Sites Using jDrawer:

Meylan Fitness

More of my jQuery work can be found here.

Posted in: General

New Template: Generic #1

Sun, 02 Dec 2007 00:00:00 GMT

When I was young, I would imagine a template that when moving my mouse over an element, a description would show in a completely different section of the template (perhaps inside a crystal ball). It's slightly impractical, but at that age it sounded interesting. These days, I code more impressive scripts all the time with simple JavaScript or Flash. Now, this has nothing to do with Facebook, but I threw it together as a demonstration.

This is a basic tableless layout based on Facebook's layout back in 2007. When you move your mouse over an HTML element, that element is highlighted in the HTML text on the bottom of the screen. This could possibly be integrated into a layout quite nicely (think matrix effect), perhaps a smaller block with a medium opacity, but few people (ala geeks) would know what's going on when they saw it.

Links:
Generic #1 Layout Demo

Generic #1 Layout Download

I hope someone out there finds it helpful as a base for their own template.

Posted in: General

New Template: Guild #1

Tue, 18 May 2004 00:00:00 GMT

In 2004 I was co-leader of the Remnants of Ascalon guild, for Guild Wars. I was accepted to the alpha stage but unfortunately due to my age and location (issues with NDA) could not attend. Thus, I spent my time creating this dual fansite/guildsite for a while.

Perhaps other guilds out there might find this template useful. Remember, it's old code, but it works. If anyone wants I still have the pages, avatars, signatures, wallpaper, etc. I developed for Guild Wars. :)

Version 1

Version 2

Links:
Guild #1 v2 Demo
Guild #1 v2 Download
Guild #1 v1 Demo
Guild #1 v1 Download

Posted in: General