Brilliant JavaScript file upload function

I’ve seen various attempts to use JavaScript to customise the file upload button. The browsers historically do not lend themselves to making this easy to achieve due to security considerations – the idea is not to make it simple for anyone to upload a file from the PC to a remote website without the user knowing about it. However, the problem is that from a UI perspective, you are stuck with what the browser supplies.

All the attempts I’ve seen to try and hack the browser file upload input tag have been quite bad. They mostly involve trying to put some other element over the browser created button, catching clicks on that element and then forwarding them to the original button. The mileage for this method varies with the browser used and also requires creating your specific image to cover the button, which gets tiresome if you want to change languages or colours.

Enter upload-at-click. A brilliant piece of work that works with every browser (even including IE6 !). Take a look at it and you’ll see why I’m impressed.

Cordova sample running on iOS

When running the project via xCode, the reason there was no access to the device sensors on iOS from JavaScript became apparent from the logs:

ios ERROR: Plugin Compass not found, or is not a CDVPlugin. Check your plugin mapping in config.xml

Of course, the config.xml was just fine, but at least this gave me a lead. A search yielded a similar problem others had been having which was solved by deleting the ./plugins/ios.json file, removing the ./platforms/ios directory, re-adding the cordova ios platform for the project via cordova platform add ios and rebuilding the project.

After this, I could finally see the compass heading on my iPhone.

On ios 7 and higher, the status bar interferes with the top part of the html view of the cordova application. This can be resolved by

cordova plugin add org.apache.cordova.device

an then

    function onDeviceReady() {
        // a few examples that can be returned from device.platform are:
        //   - "Android"
        //   - "BlackBerry"
        //   - "iOS"
        //   - "WinCE"
        //   - "Tizen"
        if (device.platform == "iOS" && parseFloat(device.version) >= 7.0)
            document.body.style.marginTop = "20px";
        
        // your stuff goes here
    }

Trying to get cordova sample running on iPhone

To run our Cordova sample on iOS, I’m using a Mac OS/X Maverics with Xcode 5.02 installed.

To add ios support in our compass application, from within the compass directory, issue:

cordova platform add ios

This went smoothly.

Next, building the project:

cordova build ios

This also went smoothly.

Finally:

cordova run ios

This yielded:

Error: An error occurred while running the ios project.Error: ios-deploy was not found. Please download, build and install version 1.0.4 or greater from https://github.com/phonegap/ios-deploy into your path. Or 'npm install -g ios-deploy' using node.js: http://nodejs.org/

I opted for the 2nd option which seemed to go ok:

npm http GET https://registry.npmjs.org/ios-deploy
npm http 200 https://registry.npmjs.org/ios-deploy
npm http GET https://registry.npmjs.org/ios-deploy/-/ios-deploy-1.0.4.tgz
npm http 200 https://registry.npmjs.org/ios-deploy/-/ios-deploy-1.0.4.tgz

> ios-deploy@1.0.4 preinstall /usr/local/lib/node_modules/ios-deploy
> make ios-deploy

rm -rf *.app demo ios-deploy
gcc -o ios-deploy -framework CoreFoundation -framework MobileDevice -F/System/Library/PrivateFrameworks ios-deploy.c
/usr/local/bin/ios-deploy -> /usr/local/lib/node_modules/ios-deploy/ios-deploy
ios-deploy@1.0.4 /usr/local/lib/node_modules/ios-deploy

running cordova run ios ended with ‘Platform “ios” ran successfully.’ with one minor problem: Nothing happened on my ios device. No application was loaded to the device, let alone launched.

It immediately occurred to me that Apple won’t let you do shit without paying something first (With the iPhone, unlike Windows Phone 8 and Android, I couldn’t even get the phone OS operating without putting in a working SIM card, and also unlike them, you can’t just start uploading applications to your device without coughing up $99/year for a Apple Developer’s ID).

Luckily I had an Apple developer’s id I could use so I imported the certificate by opening the Xcode project that Cordova created and following the directions.

After than again cordova run ios, and now finally I saw the icon of the cordova compass application. Launching the application showed the basic html but the heading and geolocation were not displayed.

Looking at the cordova documentation for iOS for the compass, I saw that the following was needed in the config.xml file:

<feature name="Compass">
    <param name="ios-package" value="CDVLocation" />
</feature>

so I added it. At the same opportunity I also added the following for the geolocation access:

<feature name="Geolocation">
    <param name="ios-package" value="CDVLocation" />
</feature>

and repeated:

cordova build ios
corova run ios

and again, nothing. Tomorrow we go back to basics and try to make a minimal cordova sample of reading the compass.

By the way, to run the iOS emulator from the command line (at least on Cordova 3.2.0):

cordova run --emulator ios

Various Linux tips

Just some notes that have accumulated:


when trying to mount a remote windows NTFS system via:

sudo mount -t cifs //192.168.0.112/E -o username=Administrator,password=mypass /home/me/mybackup/

and receiving:
wrong fs type bad option bad superblock on …
this is because the cifs flag requires:
$ sudo apt-get install smbfs

more info here


Adding a program to unity launcher:

$ gnome-desktop-item-edit --create-new ~/Desktop

fill in the details, then drag the created icon from the desktop to the unity launcher


Changing icon in unity launcher
$ gksu nautilus /usr/share/applications


color console output in git:
$ git config --global color.ui auto


In ubuntu – use the ALT+mouse drag to drag a window when for some reason you can’t click on it’s title in order to drag it. When using ALT+mouse drag you can drag the window by clicking on any part of it and moving the mouse.


Install PHP-FPM and MySQL on nginx in OS/X Mountain Lion

I found a good walkthrough the easy way at this page

I’m replicating the text here in case it’s gets lost but the credit goes to Matthew Holt

_______________

What follows is the text taken from Mathew’s blog:

Install Homebrew

In case you haven’t already, install Homebrew by following the instructions at the bottom of this page.

Homebrew’s most legit PHP “tap” (package source) is by Jose Gonzalez. Make sure to install it:

$ brew tap josegonzalez/homebrew-php

We also need a tap for a PHP 5.4 dependency, zlib:

$ brew tap homebrew/dupes

Install MySQL

$ brew install mysql

It’ll chew on that for a few minutes, then we need to get it to run as our user account:

$ unset TMPDIR
$ mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

I got a “Warning” during this operation, and while I don’t think it’s critical, I did this and things have seemed to work fine… if you got a warning during the last step, then you could do this:

$ sudo mv /usr/local/opt/mysql/my-new.cnf /usr/local/opt/mysql/my.cnf

Then, to launch MySQL at startup:

$ cp `brew --prefix mysql`/homebrew.mxcl.mysql.plist ~/Library/LaunchAgents/
$ launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist

Done! Next: the web server.

Install nginx

$ brew install nginx

Let that stew, then run these commands to have nginx run as root at startup (so we can listen on port 80, the default, instead of 8080 which is less convenient for development):

$ sudo cp `brew --prefix nginx`/homebrew.mxcl.nginx.plist /Library/LaunchDaemons/
$ sudo sed -i -e 's/`whoami`/root/g' `brew --prefix nginx`/homebrew.mxcl.nginx.plist

(Okay, to be honest, this didn’t work for me to load nginx right away on start; I had to edit the /Library/LaunchDaemons/homebrew.mxcl.nginx.plist file and remove the two lines that specify the UserName key and value (one line specifies the key, the other the value). Then it worked.)

Then create a log file… this allows us to view server logs in the Mac Console, which is really convenient, but isn’t required:

$ sudo mkdir /var/log/nginx/

(Don’t forget to tell nginx to put the log file there in nginx.conf: error_log /var/log/nginx/error.log;)

Done! Next up: PHP.

Install PHP

$ brew install --without-apache --with-fpm --with-mysql php54

Make sure to change “php54” to whatever version you want. At time of writing, PHP 5.4 is the latest stable, but PHP 5.5 is in alpha. I assume 5.5 would be php55, etc. Be sure to adjust any following commands with the proper version number.

Quick note: Yes, OS X does come with PHP pre-installed. But we don’t want to use that. We need an install we can use with nginx and FastCGI Process Manager (fpm). Plus, we want the latest version, and I’m just not that into compiling from source.

To run php-fpm at startup:

$ sudo cp `brew --prefix php54`/homebrew-php.josegonzalez.php54.plist  /Library/LaunchAgents/
$ sudo launchctl load -w /Library/LaunchAgents/homebrew-php.josegonzalez.php54.plist

Done! Next up: configuration.

Finishing up

I want all php commands to be using the latest version, not the default PHP binary. So I use this little trick to create a symlink from the default PHP binary to the new one… I do this for both php and php-fpm. If you’re confused about which versions are where, use the “whereis” command, like: “whereis php”.

$ php-fpm -v
$ sudo mv /usr/sbin/php-fpm /usr/sbin/php-fpm.bak
$ sudo ln -s /usr/local/Cellar/php54/5.4.11/sbin/php-fpm /usr/sbin/php-fpm
$ php-fpm -v

Notice that the version went from 5.3 to 5.4 (in my case). Now for the php binary:

$ php -v
$ sudo mv /usr/bin/php /usr/bin/php.bak
$ sudo ln -s /usr/local/bin/php /usr/bin/php
$ php -v

I also added /usr/local/sbin to the PATH by adding that directory to the /etc/paths file, then restarting Terminal. You can see your current PATH by typing echo $PATH.

Important config files:

/usr/local/etc/nginx/nginx.conf
/usr/local/etc/php/5.4/php.ini
/usr/local/etc/nginx/fastcgi_params

You’ll probably want to change these for your

The nice thing about Homebrew installations is that you generally don’t need sudo to use or manage these services, since they’re in /usr/local.

Alright. Well that did it for me. Enjoy your new dev environment!

You can stop nginx with nginx -s stop, and start it again with just nginx. You can also just reload the conf file with nginx -s reload.

I installed MySQL Workbench and was able to make a connection to the localhost MySQL server by adding a connection to host “localhost” with no password. The only thing I typed was that hostname and everything worked like a charm.

I did use my nginx.conf file from my previous install; you can view a sample conf file if you need it, in my other post about using Macports to do this (link at top of this post).

End of Mathew’s text

_______________

In my case, I skipped the homebrew nginx installation because I require openresty (i.e compile nginx with the Lua module support)

A year since I quit

So, I was wondering what have I actually spent my time on and was it wisely spent ?

  • About of month writing software to simulate forex trading. Downloaded and cleaned years of 15 minute resolution forex data – put it all in a database (sqlite) created software in C++ to test various plug-in algorithms (in Lua) to try and predict market trends. Looked really cool but number of products in this space caused me to abandon it. No, I didn’t find an algorithm that would miraculously guess the forex trends.

  • Joined a cyber-security startup for four months. Great founder, great idea. I know I’ll be hearing of them in the news, but my path goes elsewhere…

  • Another two months – Created a system for automating work assignments. Created a working solution for two hospitals (on call/on duty posts for Doctors) but realized that at least in the departments I was working with, there are other considerations in addition to efficiency and correctness of the solution, such as “now the computer will be in control – this is bad…”. In addition, here too I noticed that the competition has established itself in this market and the investment was just not worth it.

  • Another two months writing a blazing fast, unbeatable, multilingual Scrabble game against the computer with animations, drag & drop and other cool stuff entirely running on JavaScript in the browser – was about to market it in various ways when…

  • Now three months into a new startup with 3 other great founders.

Conclusions:
I had hoped to have had some revenue streams by this time based on various products. As it stands, time really goes by quickly and I could have probably have spent the time more wisely by sticking to some carefully selected e-commerce applications and following through – but at this point I still have no regrets – it is fun, educating and still far from over 🙂