Thursday, October 8, 2015

LaMetric Python App

Creating a personal stock app for LaMetric is super simple, all you need is create an account at and have an url with your data. Depending on how you want the data to appear, the format should be in json and how it appears in the creation process.

I used appengine to host my data and used the metric data format

Here is the python code
import urllib2
import json

# get stocks data using yahoo finance
stocks = ['0002.HK', '0005.HK', '0011.HK', '0992.HK', '0066.HK']
url = "*" + ("%22%2C%22".join(stocks)) + "%22)%0A%09%09&"
result = urllib2.urlopen(url)
data = json.loads(

# create frames based on the metric data format
frames = []
for stock in data['query']['results']['quote']:
        "index": len(frames),
        "text": '%s - %s' % (stock['Symbol'], stock['LastTradePriceOnly']),
        'icon': 'i124' if float(stock['Change']) < 0 else 'i120' if float(stock['Change']) > 0 else 'i401'

self.response.headers['Content-Type'] = "text/javascript"
    "frames": frames
The output would look like this

As of writing, you need to create the same number of frames on the developer site with your data, as if you have more then what you specify on the site, it wont show on your device.

Thursday, January 15, 2015

Laravel 4.2 and App Engine

Was trying to make Laravel work with App Engine when i saw this post Laravel 4 on Google AppEngine for PHP, have tried to make it work but it seems there are some things that needs to be updated to make it work.

First off follow everything the blog until THE MCRYPT PHP EXTENSION then on that part we have to change
"require": {
     "laravel/framework": "4.2.*",
     "neoxia/laravel-openssl-encryption-42": "dev-master"

Then continue to follow the blog again. Then on THE LARAVEL 4 LOGGER, change
$monolog->pushHandler(new Monolog\Handler\SyslogHandler('intranet', 'user', Monolog\Logger::DEBUG, false, LOG_PID));

Then before executing ./artisan optimize     open LaravelOpensslEncryptionServiceProvider.php, add to the top
use Illuminate\Encryption\Encrypter;

Then lasty the part of UNIX_SOCKET, you could ignore it, it seems fixed for 4.2

Saturday, November 29, 2014

CSS relative absolute positioning

Over my course of being a frontend web programmer, I realised that a lot of web developers dont understand how css position works. If you're a new web developer, after mobile webkit, firefox or chrome became bigger than IE, then everything is way easier to understand. The most simple explanation is this Basically if the position is static(default), the children with different position (relative, absolute) will follow the first non static position parent it has (which on the site was the body).
So for example
    <div style="position:absolute;top:10px">
        this div parent(body) is static so make that our bounds 

        <div style="position:absolute;top:10px">
            this div parent(div) is static and so its parent(body) so make body our bounds

    <div style="position:relative">
        <div style="position:absolute;top:10px">
            this div parent(div) has a non static so stop there and make it our bounds

Back when I build widgets for client site, would experience something like
    <div id="left-sidebar" />
    <div id="main-content" />
    <div id="right-content" style="position:relative;overflow:hidden">
            Some basic requirements include
            * our widget sometimes could be bigger then the right-content size of the site like expanding ads
            * we cant change the style (we cant just flip the position relative or overflow hidden of client style)
            * and a lot more

One solution (probably the only solution) for this is to attach the widget to body and position it absolute to the same spot where it originated, an advantage of that is that no matter the structure of the site is, the widget will always be relative to the body and will always be on top of the any content. That was the short solution, the longer one involves injecting a placeholder for tracking where the widget will reference to, resizing the placeholder same as the widget so that the content below will adjust accordingly, listening to window resize, listening/constant tracking of the location of the placeholder incase the items on top expands, and a lot more.

But to what I said easier, earlier I said that everything is way easier to understand right now because back when I think IE5 or IE6 days you could set position absolute plus change the z-index to super high and it will ignore the non static position and you achieved what you want (almost as if everything is bound to body). But then everything changed when mozilla and others embraced the standards and this made position more confusing, but this is good news, the only bad news is that older IE like IE7 and IE8 has bugs on different stuff like z-index or layout bugs which sometimes make you think you had everything wrong. So to end things up, like the lightbulb moment statement from the site, css position once you understand it everything is way simpler :)