Was having a bit of trouble installing Ubuntu on Virtualbox with my hp dv6. No matter what distro I tried it was horribly slow, wouldn’t connect to the internet, mouse was acting all wonky, etc.

The turning point came when I found that Virtualization is not enabled by default on the hp dv6. It’s a setting you have to change in your BIOS, read how to here: http://www.microsoft.com/windows/virtual-pc/support/configure-bios.aspx

Cool, now Lubuntu installs much more easily than before. However, it’s still pretty slow. Here are the settings I changed to get the performance up to where it needs to be:

System Base Memory: 2048 MB, Enable IO APIC
System Processor: 2 CPUs
Both hardware acceleration boxes are checked off
Display Video Memory 32 MB

The other settings seem irrelevant.

So if you sort a list based on a field, and then want to give users the ability to reorder that list, you have a quandary- it seems they are mutually exclusive requirements in a ListCollectionView.

Anyway the only way I’ve found to solve this problem is somewhat inelegant but it works, basically you apply the sort to your collection and then create a new unsorted collection, and copy the items from the original to this new one in the right order.

An example:

var slidesCopy:ArrayCollection = deck.slides as ArrayCollection;
deck.slides = null;
sortSlidesInDecks(slidesCopy); //Apply the sort
var temp:ArrayCollection = new ArrayCollection();
for each (var slide:SlideVO in slidesCopy)
{
	temp.addItem(slide);
}
deck.slides = temp;

If you know of a better way, let me know in the comments!

So we have successfully dealt with our biggest traffic spike so far. Thousands of unique visitors to RetroGiftsCo today and still climbing.

I almost fainted when I logged into Google analytics at about 10 AM this morning. Well actually, first I thought my eyes were deceiving me. I kind of giggled at my screen, woah, guess I need another cup of coffee. Then I checked the real-time analytics. There were 80 people on the site at that MOMENT.

Elation quickly turned to PANIC when I checked the site. No response. It’s down! Oh no! It didn’t scale after all… OMG what am I going to do now… all these people going to our site and there’s nothing there…

Tried to calm myself. With trembling fingers I managed to remember all my passcodes and logins to get into the rackspace cloud server manager. I’m a bit of a newb sysadmin so I didn’t hold much hope that I could fix this.

Ok… Hosting > Cloud Servers > Server ID …

My finger hovered over the Resize button. What if I screw this up!? What if it wipes my server?! I’m not at home, I can’t deploy another build from this computer… oh geez, well anything is better than a blank screen, even a 404. Shit. Threw some more RAM on there and upped the processor speed. SHIT SHIT. Clicked OK before I could talk myself out of it.

I sweated at my desk for about a minute. The Rackspace dashboard told me everything I needed to know. They were preparing the new server… shutting down my old one (OH JESUS CHRIST)… migrating the data to the new one (HELP ME) and turning it on…

and then it said,

Please verify your new resized server by logging in and making sure everything works.

OK, Rackspace. I really hope you have my back.

I pulled up the site… and it blazed onto the screen! OH YES! OH THANK YOU! OMG THANK YOU!!!!!

So that’s it, that’s my story. But basically, I just want to add some anecdotal evidence to the contention that managing your own servers ain’t such a bad thing. Despite many being in LOVE with Heroku, I’ve also heard a lot of bad stuff, mostly about downtime. While the idea of having your server all set up for you on a server platter sounds really good initially, I really did not have too much difficulty setting up my rackspace cloud server while making sure I have all the control I need. Haven’t had a lick of downtime except once at 2am, and it was for like a minute. Plus, it’s cheap.

And did I mention? My new speedy server is performing admirably. Traffic has died down a little bit but there are currently 33 people on the site as we speak, and they are all clicking around a lot (hows about a <20% bounce rate? Oh yea, average user has 6 pageviews, you like them apples??!) and the site looks pretty damn good.

PHEW.

P.S. Gotta thank the lovely KIM KOMANDO, for featuring us as her “Cool Site of the Day”, which is why we are enjoying this nice spike. Thanks Kim!

I thought pictures would speak louder than words here.

Check out my haXe code. Look familiar? It should if you use Robotlegs to make your code all pretty.

Now get a gander at mah DOM:

Yeah, my HTML is a little outdated, that’s why “HTML5″ is in quote marks above. But there’s nothing to stop you from using whatever newfangled tags you like. Declarative views FTW!

And lastly, what the generated JS looks like in Chrome Developer Tools:

The generated JS is not all as perfectly readable as the above, but it’s quite good enough. Peep the breakpoint you can set to debug your code.

OK, now I know you wanna check out the demo: 101 Icebreakers

I know, it’s corny and cheesy but hey it’s hard to come up with ideas for a weekend project You might have to hit “GET RANDOM ICEBREAKER” a few times before getting another one as there are only 3 in each icebreaker type dataset.

View the source here: At Github (Apology: Wrote and learned this all in a weekend so don’t expect all RL best practices to be followed or for the code to look that great. It’s just a demo meant to show the capabilities here)

PROS

Wow, too many to count really. A few to highlight: I am able to write clientside JS code and not have it be a nightmare. I can confidently write my code using RL’s clean architecture and know that it will work as designed. And, best yet, I can use any JS library out there, provided an extern has been written for it. jQuery comes with haXe JS, and there are externs already written for ExtJS, even node. I can use as much or as little JS as I want. There’s some really exciting stuff out there and I’m drooling, for example, at the thought of an Angular extern bringing in databinding capabilities (not sure if its possible) Really, it’s fun peoples.

CONS

Currently with cube automatic creation of mediators is not supported. So in addition to your mapping code, you have to do this for example:

agent.mediatorMap.createMediator( menuView );

whenever you create a view. This can be tricky as you will need a reference to “agent” in order to do this.

“Declarative Views”, as I call them above, is a bit misleading. At least the way I chose to take care of views for this example, it’s more like when you create Symbols in the flash IDE and write classes to control their behavior- inside the class, you have to tell it what DOM elements belong to it and what to use. There’s no protection here — you could access a div that doesn’t belong to the View you are writing — so you do have to be your own nanny a bit.

I preferred to write the views the way I did, inside the HTML, because I can clearly see what I’m creating; it feels like MXML to me. You could instead, as in the Cube Demo above, create your views directly from within view classes in haXe JS.

But I can definitely envision writing some sort of wrapper that cycles through your HTML and creates classes based on the elements it finds inside… perhaps it would be too slow… but someone will just have to write it and see!

main.js is pretty large. 215KB… though I haven’t run it through a minifier or even googled anything about how to make it smaller.

This isn’t really a con, but just as in writing real JS, use the jQuery library provided for you in haXe, otherwise you will be asking for a world of IE pain.

CONCLUSION

OK, I haven’t felt this excited in a while. I don’t claim to be an expert on language or compiler design, framework implementations, browser quirks, etc etc but I really can’t see a reason why I would NOT write my client-side code this way now and in the future. If you can, let me know in the comments… Otherwise, haXe JS – it’s you and me baby.

Lastly, this was a really rushed piece. I have a lot of work to do for my day job right now but was too excited not to get this out there. If you find any inconsistencies or inaccuracies don’t hesitate to smack me upside the head in the comments and I’ll update this post tout de suite.

—————————————-
Alright here’s the dilly, for those who want to try it out:

I used Flash Develop as my haXe IDE, it’s definitely the best way to go. Really worth booting up Virtualbox or Parallels for those of you with Macs.

I got great code-completion. You can jump to declaration (place your cursor and press F4) and there are a lot of other awesome shortcuts FD has that I don’t know about. But basically, haXe has static typing so your IDE experience is pretty close to perfect. The only thing is AFAIK no one has built refactoring support for FD yet.

You will need to install haXe and install xirsys_cube to get the demo source to build. After haXe is installed, you just go:

haxelib install xirsys_cube

from a command prompt.

There may be other libraries you need to install and I’ve forgotten, if so haXe will prompt you when you try to run the code.

After you get the example project into FD, right-click on src/build.hxml and select Execute. This will build your main.js file, which is in bin/ . That’s where index.html is also in, so you can view your work.

I used Cube, one of two Robotlegs ports that exist for haXe. Here is the demo that I used to get me going. The other port is RobotHaXe, but Cube had better examples for my use case so I went with that.

I’m taking my first forays into Angular.js, which I’m extremely impressed by. One of Angular’s best features is its templating, with which you can specify separate html files (called “partials”) and load them in only when your application requires.

I ran into a stumbling block with partials, which is how to apply jQuery to a partial. I was having no trouble applying jQuery to anything in index.html, but it did not seem to work for my partials.

I realized I would have to try applying the jQuery only after the external HTML has been loaded in. The default widget we have in index.html (which the partial will be loaded into) is:

Unfortunately, ng:view does not have an onload attribute, but its cousin ng:include does. Replace

with

as you can see, when the partial finishes loading in, the “addjQuerytoPartial()” method will run. But where do you define this method?

The ng:include widget does not have access to global context (Thanks Vojta Jina), but only to the scope defined in the controller of its parent. I’ve been working with the tutorial files, so that parent is the body tag, and the controller is “PhoneCatCtrl”.

So open up controllers.js and in the function body of PhoneCatCtrl($route) add:

 this.addjQueryToPartial = function()
  {
    angular.element('a').click(function() //angular way of accessing jQuery
    {
      alert('yo');
    });
  }

And there you have it! Would like to further modularize adding jQuery to partials, at the moment whatever is defined on addjQuerytoPartial() runs on every single partial that’s loaded in, but we will have to leave that for another post

You may have an awesome app that would benefit from hands-free control, and this ANE will let you provide that to your users. No button push is required, there is no Android dialog, and the voice recognition runs in the background similar to a Android service.

You can watch a video demo for Simmer, a hands-free recipe app I’m working on, to see the ANE in action. Also you can download the app and give me some feedback. Check it out y’all!

This ANE has been tested on the Samsung Galaxy Tab 10.1 and the Asus Transformer EeePad TF101, both with Android version 3.2.1 and AIR 3.1.

Here’s how to use the ANE:

1. Download the Voice Commands ANE and the sample project.
2. Start a new Flex Mobile Project.
3. Name your project TestANEProject. Make sure the SDK is Flex 4.6.0.
4. Under Mobile Settings, leave only Android checked as the Target Platform.
5. Leave the default settings for Server Settings.
6. In Build Paths, click the Native Extensions tab. Click Add ANE, browse to the location where you downloaded my ANE, select it and click OK. Click Finish to see your new project.
7. The first thing you have to do is set the permissions for your new project, or Android won’t let the ANE function. Open TestANEProject-app.xml. Right-click it and open it with a text editor.
8. The two permissions you need are INTERNET and AUDIO. Scroll down until you see this:

16bit
        
			    
			    
			    
			    
			    
			    
			    
			    
			    
			    
			    
			    
			    
			    
			

		]]>
    

9. Internet permissions are provided by default, so all you have to do is uncomment the RECORD_AUDIO permission. If it isn’t there, just add this line to the rest of the permissions:

   Close TestANEProject-app.xml.

10. Right-click TestANEProject inside the Project Explorer to open the context menu, and click Properties. Expand Flex Build Packaging and select Google Android.
11. Click the Native Extensions tab and in the “Package” column make sure that checkbox is selected. If not, select it. It may tell you the ANE is not used in the application, and ask you if you want to include it anyway, say Yes. Click Apply, then OK.
12. Almost there! Now you just have to add something to your app so you can see the ANE in action Replace the contents of TestANEProjectHomeView.mxml with the following:

13. Go ahead and run your app on any Android device running AIR 3.1. You will see that after you’ve spoken to the app, the ANE spits a comma-delimited string containing Google’s 5 best guesses as to what was said. Split the string and cycle through the resultant array of strings to evaluate the speech.

    Tada! All done. Enjoy controlling your app with Voice Commands

14. P.S.! With great power yada yada. Make sure you call stopListening() any time your app loses focus, or when you have no need for voice commands, otherwise Google’s voice recognition will continue in a loop in the background! We don’t want to eat up your precious device’s resources like that so turn the lights off when you’re not using em!

    P.P.S. If you have any problems, just leave em in the comments section here. But do me a favor and use Logcat to see what might be going wrong and try to give me as much information as possible. You can email me the info at ruedaminute at gmail.

Please get in touch on Twitter (@ruedaminute) if you like the ANE, Simmer, or whatever. I’d love to collaborate and create some apps for fun and profit

In my next post I’ll talk all about the ANE that is used in this demo, and step-by-step instructions for you all to use it.

Here is an app I’ve been working on, it’s still really rough around the edges but it’s good enough now for you to be able to see how the ANE works (click on the image to view a video demo):

You can also download the apk here and let me know how it works on your device Best viewed in landscape mode. It’s buggy as all get out, and the only working recipe is Kimchi tacos. But I would love to know what you think about the app idea, design, and functionality.

Lastly, I’ve just gotta state again how awesome developing mobile apps using Flex & AIR is. The turnaround time for a prototype like this probably could not be shorter.

Follow the instructions here.

(Additionally, I got Eclipse all set up to create Android apps as well by following the steps here. That may be some extra steps to take if you are having trouble)

I ran into a couple snags. If you get “adb: command not found” when trying to run adb in Terminal or trying to run an Android app in Eclipse, that means you have to add your android SDK path to your system path. Follow the incredibly patient instructions by bftb0 in post #9 on this thread.

Afterwards, adb should be able to detect your Kindle Fire. Good stuff.

But now, you launch Flash Builder, set up a new Debug Configuration with Google Android, launch on device, Select Debug with USB, and Flash Builder doesn’t see your Kindle Fire!

No worries, just restart your computer. That did it for me.

It weighs in at a whopping 9.9 GB.

Gonna have to trim a lot of fat on my Mac if I want to keep it around…

The following assumes you have root access to a server running Apache 2.2.

1. First, create a user, let’s say “code_monkey”, and give them a password.
   htpasswd -c .htpasswd code_monkey
2. Next, edit your httpd.conf (/etc/apache2/httpd.conf) to only allow this user. Here is a template for you:

   
   	        ServerName djangosite.yourdomain.com
   	        ServerAlias djangosite.*
   	        DocumentRoot /var/www/djangosite/
   	        WSGIScriptAlias / /home/username/python_envs/djangosite/path/to/project.wsgi
   	        
   	                AllowOverride AuthConfig
   	                AuthName "Please Login"
   	                AuthType Basic
   	                AuthUserFile /home/username/.htpasswd
   	                AuthGroupFile /dev/null
   	                require user code_monkey
   	        
   	
   

   The stuff in between the Directory tags is what does the auth magic. Make sure AuthUserFile points to the location of the .htpasswd file created by what you ran in step one.

   As you know by now I’m sure, the stuff before the Directory tag is what tells Apache where your django site is. You wouldn’t be able to do Basic Auth with .htaccess due to the mod_wsgi needed by Django, so this is a simple saving grace