{5} Setfive - Talking to the World

Internet Explorer Extension Quickstart and Skeleton

Ashish Datta — Wed, 02 May 2012 04:27:48 +0000

Recently, one of our clients was looking to build a prototype/proof of concept browser extension for Firefox, Chrome, and Internet Explorer. We were basically looking to inject a script, run it in user space, and modify some of the page’s DOM – like a trimmed down Greasemonkey script.

Doing this in Chrome and Firefox is pretty straightforward since the extensions are built Javascript, this is actually how I built the prototype tru.ly extensions. Unsurprisingly, the “odd man out” is Internet Explorer, this is my first time looking into writing an IE extension and the experience was pretty jarring so hopefully this synopsis can save you some time and frustration.

The first sign of trouble was that there doesn’t seem to be an official Microsoft guide on writing IE extensions. There’s just a bunch of ad-hoc tutorials, some MSDN articles, and then code samples built against every possible combination of language and library.

As it turns out, Internet Explorer has actually supported extensions since IE5 using a technology called Browser Help Objects and continues to support them via BHOs through IE9. In contrast to Chrome and Firefox’s Javascript based extensions, a BHO is a Windows DLL and consequently must be written and compiled using your choice of a Win32 compatible programming language. Given this and from the discussions I saw, the most popular choice seems to be to use C++/ATL to create a COM DLL. Being that I’m deathly afraid of C++ and that this approach was described as “COM DLL hell” I decided to see what else was possible.

After a bit more poking around I found out that it’s possible to use C# and .NET’s Interop libraries to scaffold enough to get the DLL loading into IE. This Code Project article walks through the process but it has several typos and the download containing the files seems to have gone missing. I fixed the typos and built it successfully – you can grab the files from GitHub here.

From my extremely rough understanding of C#, what the code does is create an interface from C# managed code to the unmanaged COM code that IE uses to communicate with extensions. Then, the code registers an event handler to be called once the DOM has finished rendering.

In order to actually build the project, you’ll need to do the following:

Install a copy of Visual Studio – I used VS Express 2010 which is free.
You’ll then need to import my VS project and build your DLL. If it complains about references to SHDocVw or IHTMLDocument2 you’ll just need to make sure that references to the two DLLs in Greyhound/ exist in your VS project.
Once the DLL is built, you’ll need to register it with RegAsm – this is a bit tricky since you need to use the correct version of RegAsm available on your system. This article explains where it should be located. Once you locate it, run the following:

C:\[path to your .NET library]\RegAsm.exe /codebase bin\Release\Greyhound.dll

Thats it. Now start Internet Explorer and once the DOM on a page finishes loading you should see an alert box being generated via Javascript that your DLL is injecting.

The magic is all happening in the following function:

public void OnDocumentComplete(object pDisp, ref object URL)
{
   IHTMLDocument2 doc = (IHTMLDocument2)webBrowser.Document;
   doc.parentWindow.execScript("var d=window.document,s=d.createElement('script'),h=d.getElementsByTagName('body')[0];s.src='http://twitlabs.net/sayhello.js.php';h.appendChild(s);");
}

You’ll just need to edit that script tag to load your own Javascript.

Anyway, pretty gnarly stuff. It’s also extremely frightening that IE extensions are basically full fledged programs that have full reign over your entire system. No sandboxed, no permission limitations, just a fully integrated program that people “casually” download off the Internet.

MetaForce: A MetaTrader4 Integration, Opening MT4 to the Web

Matt Daum — Wed, 11 Apr 2012 14:51:00 +0000

We know we’ve been silent here lately, however we are happy to announce our full revamp of one of our products: MetaForce. MetaForce is a product we’ve had around for a while and have several clients using.

What is MetaForce? MetaForce allows MetaTrader4 data to be extracted to numerous CRMs, support systems, and custom client areas. With MetaForce brokers can do things they never have been able, a few highlights are:

Process deposits automatically to MT4 via their payment processors
Manage MT4 accounts from their CRM, support system, or client area
Allow clients to reset their MT4 passwords from the web

There are two levels of MetaForce. One which syncs data from the MT4 platform into a CRM, support system, or client area. The second which does the data sync, but also allows interactions back from the CRM, support system, or client area into the MT4, such as creating accounts, deposits, etc.

MetaForce is the first product of its kind. No longer are brokers required to use the MT4 programs to manually process account applications, deposits, and other business processes; brokers can now use their own platforms to do these actions. With MetaForce brokers can streamline their processes and cut down on training time.

For more information on solutions please visit the product’s site.

Be Responsive: A History of Responsive Design

Ashish Datta — Mon, 12 Mar 2012 22:04:05 +0000

During the last two years the number of mobile devices has grown at an exponential pace, with one Cisco estimate (http://bit.ly/zVdFJD) predicting more mobile connected devices than people by the end of 2012. Due to this growth, providing a first class mobile web experience has become increasingly important and is now a paramount concern for websites. Union Square Ventures’ Fred Wilson went as far as to point out that new web apps are commonly designed “mobile first web second” (http://bit.ly/gQTtBp)

Within the last year a technique known as “responsive design” has become an increasingly popular way to tackle “mobile vs. desktop” web design issues. There have been several reasons for this rise in popularity which we’ll talk about after an abridged history of the mobile web.

How did we get here? Well it all started with WAP… Back in the dark days of the mobile web, well before the average consumer was accessing the Internet from a cellphone the majority of web content was served via a technology called the Wireless Application Protocol. Even I am to young to really have experienced it in all of its glory but the “Criticisms” page on Wikpedia should convey just how awful it was – http://bit.ly/wWxY2c Big takeaways? Imagine writing websites in XML, oh and it has to validate.

Anyway, fast forward a couple of years and vaguely recognizable devices are slowly starting to come online. From the Nokia Symbians, to Palm, and of course the venerable Blackberry mobile devices are beginning to access the nascent mobile web (yay!). The problem? The browsers on these devices were severely limited in terms of CSS and Javascript support, standards compatibility, and available bandwidth. As a result of these limitations, developers chose to basically develop “stripped down” basic HTML versions of sites to present on mobile devices.

One last trip in the DeLorean and we’re zooming from the initial release of the iPhone during the summer of 2007 to today with thousands of smart phone and tablet models and billions of connected devices. During this period, developers tended to build specific “mobile” sites which were usually an entirely separate HTML/CSS/JS(kinda?) code base from their desktop sites. Understandably, this situation was less than ideal since at the minimum it meant maintaining two code bases and the mobile site often lacked the full functionality of the desktop site. Additionally, as both desktop and mobile browser development rapidly progressed consumers began to expect a consistent experience across their devices.

So how do we address these issues and improve mobile user experience? Enter, “responsive design”. The central tenant of responsive design is that you (the designer/developer) should be able to use the same HTML, CSS, and Javascript to serve devices with different screen sizes and resolutions. The idea is that your layout should be able to respond by adapting the it’s presentation layer depending on any number of factors.

The key technology this process relies upon are Media Queries. Fully adopted by CSS3, media queries allow CSS directives to be conditionally applied depending on the result of a boolean query. In practice, this means a single CSS stylesheet can contain one set of directives for a 480px screen as well as different directives for a 1200px screen. Lets look at an example. If you open http://www.agentvita.com/ and then progressively shrink your browser window you’ll see that the elements dynamically adjust depending on the size of the screen.

Well that’s some history and a quick demonstration, now for some nitty implementation gritty details. Unfortunately, there’s no “magic bullet” to automatically take a standard desktop layout and responsively adapt it for different screen sizes. In my opinion the best approach is to start with a solid framework, keep your markup clean, and of course be cognizant that you’re planning to adapt the layout for different screen sizes. Or if you’re feeling brave, start with the mobile layout first and then progressively enhance the layout as your screen size increases.

Here are some specific resources to get started:

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://twitter.github.com/bootstrap/ – Bootstrap 2.0 ships with some responsive defaults
http://drupal.org/project/omega – THE responsive Drupal theme, makes a great base theme for any project
http://www.quora.com/Responsive-Design – Ask and you shall receive

Symfony2 – Getting All Errors From a Form in a Controller

Matt Daum — Thu, 09 Feb 2012 22:09:25 +0000

Recently I was working on an API call which uses a form to validate the data you are passing in. I ran into the issue of getting all the errors for a form in Symfony2 is not as straight forward as you would think. At first I tried `$form->getErrors()` and then looped through the errors. That didn’t get all of them. After looking around I found:

    public function getAllErrors($children, $template = true) {
    	$this->getAllFormErrors($children);
    	return $this->allErrors;
    }

    private function getAllFormErrors($children, $template = true) {
    	foreach ($children as $child) {
    		if ($child->hasErrors()) {
    			$vars = $child->createView()->getVars();
    			$errors = $child->getErrors();
    			foreach ($errors as $error) {
    				$this->allErrors[$vars["name"]][] = $this->convertFormErrorObjToString($error);
    			}
    		}

    		if ($child->hasChildren()) {
    			$this->getAllErrors($child);
    		}
    	}
    }

    private function convertFormErrorObjToString($error) {
    	$errorMessageTemplate = $error->getMessageTemplate();
    	foreach ($error->getMessageParameters() as $key => $value) {
    		$errorMessageTemplate = str_replace($key, $value, $errorMessageTemplate);
    	}
    	return $errorMessageTemplate;
    }

This works really well for any errors which are bound to a field. However it will not catch global errors such as a unique validator. It should probably be renamed from getAllErrors(). In order to get those you need to also loop through $form->getErrors(). This was returning the global errors only for me. Here is my code in the end:

        foreach($form->getErrors() as $e)
            $errors[]=$translator->trans($this->convertFormErrorObjToString($e), array(), 'validators');

        foreach($this->getAllErrors($children) as $key=>$error)
            $errors[]=$key.': '.$translator->trans($error[0], array(), 'validators');

There may be a better way, just wanted to shoot this out as not many people had good solutions on it.

Bonus: If you are using the translator service on validators and you get an error which is the ‘validators’ translation files, make sure you use the proper domain, ie: $translator->trans(‘key’,array(),’validators’).

AJAX Request Slow With PHP? Here’s Why

Matt Daum — Wed, 18 Jan 2012 21:09:19 +0000

Recently I was working on a project where we had a page which loads tons of data from numerous sources. I decided after a while that we wanted to AJAX each section of data so that the page would load a bit quicker. After splitting up the requests and sending them asyncronously, there was little improvement. I thought at first it may be due to the fact we were pinging a single API for most of the data multiple times, that wasn’t it. Maybe it was a browser limit? Nope was still far below the 6 requests most allow. I setup xdebug and kcachegrind and to my surprise it was the session_start() that was taking the most time on the requests.

I looked around the web for a while trying to figure out what in the world was going on. It turns out that PHP’s default session_start will block future session_starts for the same session until the session is closed. This is because the default method uses a file on the filesystem which it locks until you close it. If you want more information on this and how to close it you can read a bit more here.

We switched over to database based sessions and it fixed it. In symfony 1.4 the default session storage uses the file system, however switching over to sfPDOSessionStorage is very easy and quick.

Red Wings & Michigan Lottery cross promo launched!

Ashish Datta — Fri, 06 Jan 2012 22:29:13 +0000

Hope everyone survived the first week of 2012 unscathed. Just wanted to announce that we helped the Detroit Red Wings and the Michigan State Lottery launch a Facebook promotion. It’s a pretty neat deal, all you have to do is LIKE the MI Lottery page and submit your information to be entered to win a Zamboni ride. And honestly, who doesn’t love a Zamboni ride.

The promo is live here https://www.facebook.com/MichiganLottery

Unfortunately, its only open to Michigan residents.

Boomerang via @fredwilson and @cdixon

Ashish Datta — Fri, 30 Dec 2011 19:16:21 +0000

Hope everyone had a great Christmas and that you’re gearing up for a great New Years!

Anyway, I picked up a Kindle Fire for Christmas and decided to use it as an eReader at least once in its life. I had remembered seeing Boomerang by Michael Lewis recommended by both Fred Wilson and Chris Dixon so I figured it must be worth checking out.

The book is a short, easy read but it offers a fascinating perspective on the global financial crisis through several different viewpoints. As Chris pointed out, theres also a couple of funny anecdotes and bizarre cultural highlights. If you have some time to kill, I’d definitely recommend picking up Boomerang and giving it a once over.

Toggle non-consecutive checkboxes with jQuery UI

Ashish Datta — Tue, 27 Dec 2011 16:19:38 +0000

You’re all probably familiar with the UI convention of allowing users to select ALL or NONE for a list of checkboxes (like in Gmail). Recently I was working on a project that had a large table full of checkboxes (imagine a 10×10 grid) where the user would need to toggle some but not all of the checkboxes in a given row. And to make matters more complex, they would need to toggle groups of non-consecutive checkboxes (say 15, skip 10, 5, etc.). I threw on the thinking cap but couldn’t think of any similar interactions I’d seen and couldn’t think of a particularly good way to achieve this.

Enter jQuery UI. I happened to stumble across the jQuery UI Selectable documentation and realized it would provide a good UI experience to toggle some but not all of the checkboxes. The code to implement this is surprisingly simple:

Note: You don’t actually need the div container – that was just for JSFiddle.

And then the Javascript (jQuery + jQuery UI):

$("#checkboxes").selectable( {filter: "input:checkbox",
            stop: function(event, ui) {

                $(".ui-selected").each( function(){

                    $(this).each( function(){
                        var val = $(this).attr("checked") ? null : "checked";
                        $(this).attr("checked", val);
                    });

                });
}});

You can check out a live demo at http://jsfiddle.net/whMyQ/3/

As always, questions and comments are welcome!

Happy Holidays!

Matt Daum — Fri, 23 Dec 2011 22:25:24 +0000

We just wanted to wish everyone a great holiday season. We hope everyone brings in the new year with a bang!

See you next year,
Setfive

Facebook: How-to force users to LIKE page

Ashish Datta — Fri, 16 Dec 2011 20:39:41 +0000

With Facebook’s move to deprecate FBML for tabs the documentation around how to make a “please Like! before…” has become much more choppy and inconsistent. Anyway, I recently found myself in a position where I needed to make this happen so here goes.

With in-line FBML deprecated, the only way to accomplish this without using a third party branded solution is to create a Facebook iframe app. Here are the steps you need to take to get something up using PHP and the Facebook PHP SDK.

1. Create a new Facebook Application at https://developers.facebook.com/apps

2. Configure your new Facebook App the enable “Website” and “Page Tab”. You’ll need to enter a valid URL for the following fields:

Site URL
Page Tab URL
Secure Page Tab URL

You’ll also want to use a HTTPs URL since Facebook sessions default to HTTPs by default and your iframe will be marked insecure if its over vanilla HTTP. For this walk through, lets assume were using https://www.setfive.com/fb/index.php? as the URL.

3. Now, you’ll want to add your new App to a Facebook Page. The easiest way to do this is to use this URL https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL replacing YOUR_APP_ID and YOUR_URL with your App ID and then a URL that is derived from your endpoint (or even just your endpoint). When you load that URL, you’ll be prompted to add your app to a page – select the page you want and submit the form.

4. The final piece is throwing together the actual PHP script. You’ll need the Facebook PHP SDK available on GitHub – https://github.com/facebook/php-sdk. Clone that and then this is the PHP script you’ll need:


 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
));

$req = $facebook->getSignedRequest();
?>





    
    






	Content for users that have LIKED the page.



	Content for users that HAVE NOT LIKED the page.

And thats it! Now you’ll be able to gate content from non-fans while growing the fanbase of your Facebook Page.

Drop any questions in the comments.