Compile all Jade files to a single client-side JavaScript file

Jade is “a high performance template engine heavily influenced by Haml and implemented with JavaScript for node”.

One of it’s nice features is that it lets you compile your Jade templates into JavaScript functions which can be ran client-side. This is particularly useful when you want to pass JSON data back from an AJAX call and render it; it keeps you have from having to pass HTML “over the wire” or from writing complex JavaScript to rebuild your DOM elements. It’s also super fast.

After installing Jade, you can compile a single template via the command-line by running jade -c template.jade. This will generate a *.js file that looks like this:

function anonymous(locals, attrs, escape, rethrow, merge) {
    ...
}

Which is great, except that it’s just about unusable as-is. If you try including that to your page, you now have access to a single function called “anonymous” — not very helpful. The problem gets worse if you want to have access to more than one template.

Wouldn’t it be nicer if all of your templates got compiled to a single object with a sensible name, which you could use the access all your template functions? That’s why I wrote a script to compile all your Jade files into a single .js file that looks like this:

var Templates = {
"login":
  function anonymous(locals, attrs, escape, rethrow, merge) {
      ..
  },
"change_password":
  function anonymous(locals, attrs, escape, rethrow, merge) {
      ..
  }
};

Now you just need to include that Jade runtime plus this file that got generated via:

<script type="text/javascript" src="/js/jade/runtime.js"></script>
<script type="text/javascript" src="/js/templates.js"></script>

You can find runtime.js inside node_modules/jade after you install it.

Here’s the script:

var Jade = require('jade');
var FileSystem = require('fs');
var Path = require('path');
var _ = require('underscore');

var outName = 'public/js/templates.js';
var viewsDir = 'views';

files = FileSystem.readdirSync(viewsDir);
var templates = {};
files.forEach(function(filename) {
    if(/\.jade$/.test(filename)) {
        var name = Path.basename(filename, '.jade');
        var path = Path.join(viewsDir, filename);
        console.log('compiling', path);
        var fileContents = FileSystem.readFileSync(path, {encoding: 'utf8'});
        templates[name] = Jade.compile(fileContents, {
            debug: false,
            compileDebug: true,
            filename: path,
            client: true
        });
    }
});
console.log('writing', outName);

var properties = [];
_.each(templates, function(value, key) {
    properties.push(JSON.stringify(key) + ':\n  ' + value.toString());
});
var sourceCode = 'var Templates = {\n' + properties.join(',\n\n') + '\n};';

FileSystem.writeFile(outName, sourceCode);

I called mine “compile_jade.js”. You run it via “node compile_jade.js”. You will probably need to adjust your paths as necessary (see “outName” and “viewsDir” near the top). I will probably expand on this script in the future, but this should be enough to get you started with client-side Jade!

If you’re using PhpStorm or WebStorm like me, you can set up a File Watcher to watch your Jade files have it automatically re-run this script whenever you edit one of them:

jade-compiler

PHP: Generate a unique filename for a given directory

This function will generate a filename unique to specified directory. If you’re using it to create filenames for uploaded images, for example, you can give it a path to your upload folder an extension such as ‘jpg’.

It will generate the filename using the characters specified in the function, you can modify it as desired. I chose to omit uppercase letters in case you are running this on a Windows system (case insensitive).

/**
 * Converts large hexidecimal numbers into decimal strings.
 *
 * @param string $hex Hexidecimal number
 * @return string Decimal number
 * @see http://stackoverflow.com/a/1273535/65387
 */

function bchexdec($hex)
{
    $dec = 0;
    $len = strlen($hex);
    for ($i = 1; $i <= $len; $i++) {
        $dec = bcadd($dec, bcmul(strval(hexdec($hex[$i - 1])), bcpow('16', strval($len - $i))));
    }
    return $dec;
}

function base_encode($val, $base=62, $chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
    if(!$base) $base = strlen($chars);
    $str = '';
    do {
        $m = bcmod($val, $base);
        $str = $chars[$m] . $str;
        $val = bcdiv(bcsub($val, $m), $base);
    } while(bccomp($val,0)>0);
    return $str;
}

function unique_filename($dir, $ext='') {
    do {
        $filename = $dir.'/'.base_encode(bchexdec(uniqid()), null, '0123456789abcdefghijklmnopqrstuvwxyz_-');
        if($ext) $filename .= '.'.$ext;
    }while(file_exists($filename));
    return $filename;
}
Posted in

array_map_recursive

Not much needs to be said here.

function array_map_recursive($callback, $arr) {
    $ret = array();
    foreach($arr as $key => $val) {
        if(is_array($val)) $ret[$key] = array_map_recursive($callback, $val);
        else $ret[$key] = $callback($val);
    }
    return $ret;
}

I wrote this so that I could do this…

$filters = array('htmlspecialchars', 'nl2br');
foreach($filters as $filter) $view_vars = array_map_recursive($filter, $view_vars);

Which just sanitizes my variables before I print them.

Posted in

SQL Injection Safe Queries Redux

function mysql_safe_string($value) {
    if(is_numeric($value))      return $value;
    elseif(empty($value))       return 'NULL';
    elseif(is_string($value))   return '\''.mysql_real_escape_string($value).'\'';
    elseif(is_array($value))    return implode(',',array_map('mysql_safe_string',$value));
}

function mysql_safe_query($format) {
    $args = array_slice(func_get_args(),1);
    $args = array_map('mysql_safe_string',$args);
    $query = vsprintf($format,$args);
    $result = mysql_query($query);
    if($result === false) echo '<div class="mysql-error"><strong>Error: </strong>',mysql_error(),'<br/><strong>Query: </strong>',$query,'</div>';
    return $result;
}

// example
$result = mysql_safe_query('SELECT * FROM users WHERE username=%s', $username);

Just use mysql_safe_query in place of mysql_query and you should be safe from SQL injection attacks. Use %s in place of any variables, and append them as arguments. Don’t quote your strings, it’ll be done for you automatically. Arrays will be flattened for you automatically and concatenated with commas. You can delete the error-echoing line if you want, but I find it useful for development.

Posted in

Facebook PHP API: Get the names of all your friends

If you didn’t already know, Facebook has an API that exposes quite a darn bit information. You can easily query this data using their API, but each request takes a fair bit of time. Typically, to get the names of all your friends, first you have to grab a list of the user ids of all your friends, and then query each and every single one to get their names. For me, that’s about 300 cross-server requests, which will almost certainly cause my server to time out, and probably force Facebook to reject me. Fortunately, Facebook has also created their own MySQL-like language, FQL (I pronounce it feequel), which lets you do some of these “complicated” queries in a single call. Here’s a simple example I wrote:

<?php
require_once 'facebook-platform/php/facebook.php';

$appapikey = 'yourapikeyhere';
$appsecret = 'yoursecretkey';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

$result = fql_query('SELECT name FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=%s)', $user_id);
pr($result);


function fql_query($query) {
    global $facebook;
    $args = array_slice(func_get_args(), 1);
    return $facebook->api_client->fql_query(vsprintf($query, $args));
}

function pr($arr) {
    echo '<pre>';
    print_r($arr);
    echo '</pre>';
}

You’ll notice I’ve included two of my favorite wrapper functions. You can unroll them if you want. Anyway, just thought I’d share :) I prefer writing FQL than trying to remember all their API calls anyway.

Oh… and just FYI, this prints out something like this:

Array
(
    [0] => Array
        (
            [name] => Mark Zuckerberg
        )

    [1] => Array
        (
            [name] => Tom Riddle
        )

I hate it when people leave it a mystery what exactly their example is doing!

Posted in

Get Domain & Subdomain from URL

preg_match('/^(?:www\.)?(?:(.+)\.)?(.+\..+)$/i', $_SERVER['HTTP_HOST'], $matches);

define('PROTOCOL', strtolower(substr($_SERVER['SERVER_PROTOCOL'],0,strpos($_SERVER['SERVER_PROTOCOL'],'/'))).'://');
define('SUBDOMAIN', $matches[1]);
define('DOMAIN', $matches[2]);
define('HERE', $_SERVER['REQUEST_URI']);

If you’re at http://www.sub.domain.com/page, then:

PROTOCOL = http://
SUBDOMAIN = sub
DOMAIN = domain.com
HERE = /page

Posted in

PHP code for handling recursive categories/hierarchical data

I’m just going to paste the code I wrote here… you can read some other tutorial to understand what it’s doing, but for some reason they have really incomplete examples, so here’s the whole shabang. It will even keep your nodes in alphabetical order. It has a function for displaying a drop down list too; wrap it in <select> tags.

<?php
class Category {
    function getParent($id) {
        return mysql_safe_query('SELECT parent.* FROM categories AS child, categories AS parent WHERE parent.id = child.parent_id AND child.id = %s LIMIT 1', $id);
    }

    function getChildren($id, $direct = false) {
        if($direct) {
            return mysql_safe_query('SELECT * FROM categories WHERE parent_id = %s ORDER BY left_val ASC', $id);
        } else {
            return mysql_safe_query('SELECT child.* FROM categories AS child, categories AS parent WHERE child.left_val >= parent.left_val AND child.right_val <= parent.right_val AND parent.id = %s ORDER BY child.left_val ASC', $id);
        }
    }

    function insert($name, $parent_id) {
        $result = mysql_safe_query('SELECT * FROM categories WHERE parent_id <=> %s AND name < %s ORDER BY name DESC LIMIT 1', $parent_id, $name);
        if(mysql_num_rows($result) > 0) {
            // insert between children
            $row = mysql_fetch_assoc($result);
            mysql_safe_query('UPDATE categories SET left_val = left_val + 2 WHERE left_val > %s', $row['right_val']);
            mysql_safe_query('UPDATE categories SET right_val = right_val + 2 WHERE right_val > %s', $row['right_val']);
            mysql_safe_query('INSERT INTO categories (parent_id, left_val, right_val, name) VALUES (%s, %s, %s, %s)',
                $parent_id, $row['right_val'] + 1, $row['right_val'] + 2, $name);
        } else {
            $result = mysql_safe_query('SELECT * FROM categories WHERE id <=> %s LIMIT 1', $parent_id);
            if(mysql_num_rows($result) > 0) {
                // insert first child
                $row = mysql_fetch_assoc($result);
                mysql_safe_query('UPDATE categories SET left_val = left_val + 2 WHERE left_val > %s', $row['left_val']);
                mysql_safe_query('UPDATE categories SET right_val = right_val + 2 WHERE right_val > %s', $row['left_val']);
                mysql_safe_query('INSERT INTO categories (parent_id, left_val, right_val, name) VALUES (%s, %s, %s, %s)',
                    $parent_id, $row['left_val'] + 1, $row['left_val'] + 2, $name);
            } else {
                // insert at beginning of tree
                mysql_safe_query('UPDATE categories SET left_val = left_val + 2, right_val = right_val + 2');
                mysql_safe_query('INSERT INTO categories (parent_id, left_val, right_val, name) VALUES (%s, %s, %s, %s)',
                    null, 1, 2, $name);
            }
        }
    }

    function delete($id) {
        $result = mysql_safe_query('SELECT * FROM categories WHERE id = %s LIMIT 1', $id);
        $row = mysql_fetch_assoc($result);
        mysql_safe_query('DELETE FROM categories WHERE id = %s LIMIT 1', $id);
        mysql_safe_query('UPDATE categories SET parent_id = %s WHERE categories.parent_id = %s', $row['parent_id'], $id); // relink parent
        mysql_safe_query('UPDATE categories SET left_val = left_val - 1, right_val = right_val - 1 WHERE left_val > %s AND right_val < %s', $row['left_val'], $row['right_val']); // update children
        mysql_safe_query('UPDATE categories SET left_val = left_val - 2 WHERE left_val > %s', $row['right_val']); // update left values of nodes to right
        mysql_safe_query('UPDATE categories SET right_val = right_val - 2 WHERE right_val > %s', $row['right_val']); // update right values of encompassing nodes and nodes to right
    }

    function incPostCount($id, $amount=1) {
        $result = mysql_safe_query('SELECT * FROM categories WHERE id = %s', $id);
        $row = mysql_fetch_assoc($result);
        return mysql_safe_query('UPDATE categories SET num_posts = num_posts + %s WHERE left_val <= %s AND right_val >= %s',
            $amount, $row['left_val'], $row['right_val']);
    }

    function decPostCount($id, $amount=1) {
        return self::incPostCount($id, -$amount);
    }

    function getPath($id) {
        $result = mysql_safe_query('SELECT * FROM categories WHERE id = %s', $id);
        $row = mysql_fetch_assoc($result);
        return mysql_safe_query('SELECT * FROM categories WHERE left_val <= %s AND right_val >= %s ORDER BY left_val ASC',
            $row['left_val'], $row['right_val']);
    }

    function printOptions($selected=null, $format=null, $mult=null, $add=null) {
        if(!isset($format)) $format = '<option value="%s" style="padding-left:%spx"%s>%s</option>';
        if(!isset($mult))   $mult = 15;
        if(!isset($add))    $add = 3;
        $depth = 0;
        $result = mysql_safe_query('SELECT * FROM categories ORDER BY categories.left_val ASC');
        while($row = mysql_fetch_assoc($result)) {
            if(isset($last)) {
                if($row['left_val'] == $last['left_val'] + 1) {
                    ++$depth;
                    $next_right = $last_right + 1;
                } elseif($row['left_val'] > $last['right_val'] + 1) {
                    $levels = $row['left_val'] - $last['right_val'] - 1;
                    $depth -= $levels;
                }
            }
            $last = $row;
            if($row['id'] == $selected) $selected_str = ' selected="selected"';
            else $selected_str = '';
            echo sprintf($format, $row['id'], $depth*$mult+$add, $selected_str, $row['name'], $row['num_posts'], $depth);
        }
    }

    function printTree($format=null) {
        if(!isset($format)) $format = '<li><a href="index.php?cat=%s">%s</a> (%s)';
        $depth = 0;
        $result = mysql_safe_query('SELECT * FROM categories ORDER BY categories.left_val ASC');
        echo '<ul>';
        while($row = mysql_fetch_assoc($result)) {
            if(isset($last)) {
                if($row['left_val'] == $last['left_val'] + 1) {
                    echo '<ul>';
                    ++$depth;
                    $next_right = $last_right + 1;
                } elseif($row['left_val'] > $last['right_val'] + 1) {
                    $levels = $row['left_val'] - $last['right_val'] - 1;
                    echo str_repeat('</li></ul></li>', $levels);
                    $depth -= $levels;
                } else {
                    echo '</li>';
                }
            }
            $last = $row;
            echo sprintf($format, $row['id'], $row['name'], $row['num_posts'], $depth);
        }
        echo str_repeat('</li></ul>', $depth+1);
    }

    function printAdminTree() {
        self::printTree('<li><a href="index.php?cat=%s">%s</a> (<a href="category_delete.php?id=%1$s">Delete</a>)');
    }
}

Please leave a comment if you found this useful!

Posted in

Hash/unhash HTML

Here’s a little class I wrote that lets you hash HTML and other things so that you can do some processing on just the text, and then unhash the HTML again.

class ht
{
        static $hashes = array();

        # hashes everything that matches $pattern and saves matches for later unhashing
       function hash($text, $pattern) {
                return preg_replace_callback($pattern, array(self,'push'), $text);
        }

        # hashes all html tags and saves them
       function hash_html($html) {
                return self::hash($html, '`<[^>]+>`');
        }

        # hashes and saves $value, returns key
       function push($value) {
                if(is_array($value)) $value = $value[0];
                static $i = 0;
                $key = "\x05".++$i."\x06";
                self::$hashes[$key] = $value;
                return $key;
        }

        # unhashes all saved values found in $text
       function unhash($text) {
                return str_replace(array_keys(self::$hashes), self::$hashes, $text);
        }

        function get($key) {
                return self::$hashes[$key];
        }

        function clear() {
                self::$hashes = array();
        }
}
Posted in

PHP string ends with

There’s a hundred ways to do this, but here’s the one I came up with. It doesn’t use regex’s so it should be pretty quick.

function ends_with($str, $suffix) {
    return substr($str, -strlen($suffix)) == $suffix;
}

function starts_with($str, $prefix) {
    return substr($str, 0, strlen($prefix)) == $prefix;
}

For completeness, I added the corresponding starts_with function.

Posted in