Starting with Heroku and node.js on Windows: tips , tricks and tutorial comments

It seems like Heroku is one of the few "cloud hostings" out there giving support to Windows. I'm trying to start programming something with node.js and websockets, so that's why I played with it today. However, working on Windows and the toolbelt is not so easy.

Here are some tips:

• Once you have your Heroku account, you will find the basic tutorial for node.js here.
• Before doing anything install the Heroko toolbelt AND the Node.js installer for Windows. Node.js can be found here. RESTART windows so the PATH variable is set correctly. Save yourself a headache!
• Very important: Install both toolbelt and the node.js in a directory without spaces on it's path (avoid Program Files and similar). I installed them on c:\Heroku and c:\nodejs. This will save you trouble.
• Follow the tutorial. You will have to learn a bit of GIT usage if you don't know about it. Don't worry, the tutorial explains the basics.
• The toolbelt installs some basic GUI client for windows, so you can commit more easily. However the guy on the videos uses TortoiseGIT. I guess it's even more practical to use, take a look at it.
• You don't need to install GIT, it's included in the toolbelt (at least at present).
• You don't need to open the Node.js console to work with it.
• Here is a great video explaining some hidden tricks about the tutorial and Heroku. Follow it if you need to. Stop it also if you need to, because it's quite fast.
• Running "npm install" in your working directory is needed to copy the dependencies locally.
• Remember to create the other files stated on the tutorial, you need them all.
• Foreman is your friend: you can test your app locally without commiting or deploying it to Heroku. Use it!
• Once started with foreman ("foreman start" command in your work dir) you can see your app by
  typing this in your web browser: 127.0.0.1:5000 or localhost:5000. If you don't need much fancy graphics you can open a terminal an type curl 127.0.0.1:5000 or curl localhost:5000 (curl is included in the toolbelt).
• Common problems with Foreman: 
• Bad file descriptor: it seems that there is a problem with latest versions of foreman you must run:
• gem uninstall foreman 
• gem install foreman -v 0.61
• node command unknown: You forgot to install node.js maybe? 

Well I hope to save someone some trouble with this info. In case of doubt look at the video, although it doesn't show the use of foreman, it's quite good at everything else.

References: thanks to the guys on Stack Overflow for some of the info contained here, and also thanks to mescalito2 for his great video.

Prestashop 1.5.x Smarty Magic : Constants

Prestashop's Smarty has some hidden tricks. These constants are poorly documented. I found out the first of the list by googling, but no explanation appeared anywhere. So I decided to put this list here and maybe help other fellow programmers that are also struggling with Prestashop :-)
I will post more info about the missing ones as soon as I know about them.

• {$smarty.const._CUSTOMIZE_TEXTFIELD_}: ???
• {$smarty.const._CUSTOMIZE_FILE_}: ???
• {$smarty.const._MODULE_DIR_} : will give you the module directory inside your /modules/ directory: Example of usage in the module "Homeslider" (.tpl):
• <img src="{$smarty.const._MODULE_DIR_}/homeslider/images/{$slide.image|escape:'htmlall':'UTF-8'}" alt="{$slide.legend|escape:'htmlall':'UTF-8'}" height="{$homeslider.height|intval}" width="{$homeslider.width|intval}" /> 
• {$smarty.const._THEME_PROD_DIR_}: Unknown.
• {$smarty.const._THEME_PROD_PIC_DIR_}: ???
• {$smarty.const._THEME_CSS_DIR_}: CSS dir of your theme.
• {$smarty.const._THEME_DIR_} : will give tou the theme directory in your template (useful if you want to access your "img" folder, for example).
• {$smarty.const._PS_THEME_MOBILE_DIR_}: Theme mobile directory: themes/yourtheme/mobile.
• {$smarty.const._PS_ADMIN_IMG_}: /img/admin path.
• {$smarty.const._PS_VERSION_}: Get the version number of the Prestashop installation.
• {$smarty.const._PS_ROOT_DIR_}: Root PS installation dir. Example of usage:
• {if file_exists($smarty.const._PS_ROOT_DIR_|cat:"/img/co/$id_value.jpg")}
• {$smarty.const._PS_JS_DIR_}: Javascript dir inside base PS directory: /js/
• {$smarty.const._PS_IMG_}: Prestashop /img/ folder.
• {$smarty.const.PS_TAX_EXC}: Tax excluded?
• {$smarty.const.PS_TAX_INC}: Tax included?
• {$smarty.const.PHP_URL_HOST}: Base URL?
• {$smarty.const.NULL}: NULL value, example: 
• {assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL, 2)}

Please let me know if you know the usage or values of the ones that I don't know via comments.

I hope it helps you a bit!

See you!

Wordpress: Page permalink without page number, when showing paged posts

If you need to get the page permalink and you don't want to have /page/2 or whatever on your URL, you can use this function
                    global $post;
                    $theurl  = get_permalink( $post->ID );
Cheers.

Working custom menu in Wordpress with submenu

Recently I had to create a custom menu in Wordpress. Searching how to do it, I stumbled with the wp_get_nav_menu_items function. However, the example shown there does not work in my Wordpress installation. A nice koala-ish guy called ricoh solved this problem in the Wordpress.org forums. But I needed more than that. I needed to place a sub-menu for the children pages of a certain page, and that wasn't made in the solution ricoh provided. So I took his solution and extended it to make this possible.

Please also note that I added an extra DIV to contain it all and make it easily customizable via CSS. Also note that I added some standard Wordpress classes to the items of the lists, so it matches closely the output of the menu provided by Wordpress. 

 <?  $menu_name = 'your_menu';   
    ?><div class="menu-container menu-custom-<?echo $menu_name?>-container"><?
   
    if ( ($menu = wp_get_nav_menu_object( $menu_name ) ) && ( isset($menu) ) ) {

        $menu_items = wp_get_nav_menu_items($menu->term_id);
        $menu_list = '<ul id="menu-' . $menu_name . '" class="menu">';
        $children = false;
        $pos = 0;
        foreach ( (array) $menu_items as $key => $menu_item ) {           
            $children = $menu_items[$pos+1]->post_parent!=0;
            $parent = $menu_item->post_parent;
            if($parent=='0'){
                $title = $menu_item->title;
                $url = $menu_item->url;               
                $menu_list .= '<li class="menu-item"><a href="' . $url . '">' . $title . '</a>';//</li>';
            }else{
                $menu_list .= '<ul class="sub-menu">';               
                    foreach ( (array) $menu_items as $key2 => $menu_item2 ) {               
                        $parent2 = $menu_item2->post_parent;
                        if($parent==$parent2){
                            $title = $menu_item2->title;
                            $url = $menu_item2->url;
                            $menu_list .= '<li class="menu-item"><a href="' . $url . '">' . $title . '</a></li>';                       
                        }
                    }
                $menu_list .= '</ul>';       
                $menu_list .= '</li>';        //del nivell superior       
            }
           
            if (!$children) $menu_list .= '</li>';
            $pos ++;
        }
        $menu_list .= '</ul>';
    } else {
        $menu_list = '<ul><li>Menu "' . $menu_name . '" not defined.</li></ul>';
    }
    echo $menu_list;
    ?></div>

Extra tip 1: I placed this code in my sidebar.php file, after commenting the dynamic_sidebar(...) function, disabling the menu I placed there on the backend.

Extra tip 2: if you want your sub-menu items to hide or show on parent's hover, add this CSS:

li.menu-item ul li {display:none;}
li.menu-item:hover ul li {display:block;}

 Have fun and hope this helps you with your custom Wordpress menus!

Reading and parsing a JSON file with LibGDX

There are many reasons why you would need to read a JSON file in your libgdx (android or desktop) application. For example, you could store the configuration of your app, or maybe data stored about some game configuration you need.

If you need to read a JSON file, you can go and read the official LibGDX guide. I've done so and after a lot of trial and error I made it work. I also include here the code needed to read a plain text JSON file using LibGDX, which is also very useful for many other tasks.

First, you must know what kind of data you want to read, and therefore you must create the JSON file accordingly. I have taken the official LibGDX documentation about JSON parsing, and twisted the example to fit my needs. Here is my JSON file:

{
enemies: [
        {
                type: "billy",
                x: 10,
                y: 15
        },
        {
                type: "sammy",
                x: 11,
                y: 13
        }
],
name: Lab
}

The example is supposed to be the configuration of a certain map. You can see that I have a list of enemies first, with three fields: type, x, and y (position of the enemy on the map). Finally I have the name of the map where the enemies are located.

You need to create two classes: one for the enemies data (with the three members: type, x and y, it's better to use the same name you used on your JSON but you can change that too). And the root class. In my example I called them Config (for the root) and Position (for the enemy positions):

    public static class Config{
         private ArrayList enemies;
         private String name;
    }
   

    public static class Position {
        private String type;
        private int x;
        private int y;
    }

Please note that these two classes are static! Otherwise the compiler will throw an error. Note also that I made this two classes internal for my Map class, and therefore it seems Java wants them to be static also.
Also note that we use ArrayList in order to store several elements, though we don't tell their type.

 Finally, here is the code to load and deserialize the JSON file you created some steps before (called "map.json" in my example). Please note also that there are many ways to set the FileHandle object, in my case I made the file internal and located it into the "assets" folder, since it's meant to be an android project someday:

    public void loadJson(){       
        FileHandle handle = Gdx.files.internal("assets/map.json");
        String fileContent = handle.readString();                  
        Json  json = new Json();
        json.setElementType(Config.class, "enemies", Position.class);
        Config data = new Config();
        data = json.fromJson(Config.class, fileContent);
        Gdx.app.log(GameManager.LOG, "Data name = " + data.name);
        for(Object e :data.enemies){  
            Position p = (Position)e;
            Gdx.app.log(GameManager.LOG, "type = " + p.type + "x = " + p.x + "y =" + p.y);
        }
    }   

The explanation is simple. Firstly, we create a FileHandle with the file name and the correct location of the JSON file. After that, we read it's contents and put them into a String object. After that, we create a JSON object and we tell it that there is some element into Config class that it's of Position class, and it's marked by the tag "enemies". Then we create a Config object, which will hold the deserialized data. With the call to "json.fromJson" we deserialize the fileContent string and turn it into a Config object.
After that, we can print happily the contents of our object, in this case the Object returned by the ArrayList must be casted to Position in order to get the correct data to print.
    
I hope this helps the LibGDX community in some way, since the documentation is a bit scarce and examples of usage are not that easy to find on the net. Just let me know in the comments if you know how to improve this code, your impressions or problems with this stuff.

Wordpress: easy way to have colum shortcodes

Sometimes you have to create a new Wordpress template that requires columns. The hard way to achieve this is via CSS: you can somehow add HTML code to your posts and pages and then set the rules in your CSS files so they show as the columns.

The easyest way I found to achieve this is via a cool Wordpress plugin called Column Shortcodes. It lets you use a series of shortcodes so you can put many different column sizes in your pages with simply copying a shortcode. This way your posts are less messy and you don't have to touch it's HTML code.

Just download the plugin, install it and then you will be able to use all these shortcodes:

[full_width][/full_width]
[one_half][/one_half]
[one_half_last][/one_half_last]
[one_third][/one_third]
[one_third_last][/one_third_last]
[two_third][/two_third]
[two_third_last][/two_third_last]
[one_fourth][/one_fourth]
[one_fourth_last][/one_fourth_last]
[three_fourth][/three_fourth]
[three_fourth_last][/three_fourth_last]
[one_fifth][/one_fifth]
[one_fifth_last][/one_fifth_last]
[two_fifth][/two_fifth]
[two_fifth_last][/two_fifth_last]
[three_fifth][/three_fifth]
[three_fifth_last][/three_fifth_last]
[four_fifth][/four_fifth]
[four_fifth_last][/four_fifth_last]
[one_sixth][/one_sixth]
[one_sixth_last][/one_sixth_last]

Remember to put your text between the tags. For example if you want a left text that is in a 2/3 column and a right column that has 1/3 your post should look like:

[two_third]This is my left column text[/two_third]

[two_third]This is my right column text[/two_third] 

Just make sure you use the corresponding tags: if you use one_third then you should use two_thirds if you want to put something in the remaining text. Of course you could nest another column set inside a column set like:

[two_third][one_half]Hello world[/one_half][one_half_last]Lorem ipsum[/one_half_last] [/two_third] 

[one_third_last]Just another text[/one_third_last]

...

By the way, the "_last" word at the end of the tag just makes the column stick to the right, or that's what I guess looking at the CSS provided by the plugin.

Have fun with the columns :D

Wordpress: Add a slider the easy way

If you need to add a slider to your wordpress theme you can do many things. You can hardcode it into your page template, but that's the hard way and not very flexible.

You can make it quickly and easily using the Meta Slider plugin. It's a very well made plugin for Wordpress that let's you easily put a slider into a post, page or even in all your pages if you wish.

The steps to do it are:

1. Download the plugin and install as stated in the link above (check Installation).
2. Activate your plugin in your admin panel.
3. Look to the bottom of the control column, you should see a green button tagged "MetaSlider".
4. Press the "+" sign on top left of the screen to add a new slider.
5. Configure your slider with the images you want to show. Test it before you go to the next step (there is a button to save and test it).
6. Copy the shortcode (in case you want to put it into a post or page in your Wordpress) or the PHP code also provided by the plugin, and paste it where you need it.
7. Enjoy :-D

Hope it helps you!