16. December 2015

Angular 2.0 Beta goes live

Angular reaches BETA status. Time to start playing with it … Perfect for the holidays :)

With NativeScript und React Native you will be able to build native Android- und iOS-Apps as well.

Tutorial / GitHub

Enjoy coding …

20. November 2015

My Javascript Stack

Some time ago I said: “My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony”.

Here is a list of some of my core components, that I use in combination or standalone.

CORE

jQuery – jquery.com
Underscore – underscorejs.org
Directives – github.com/mennovanslooten/jquery.directive.js

LAYOUT

Bootstrap – getbootstrap.com

TEMPLATING

jQuery loadTemplate – github.com/codepb/jquery-template
OR
jsViews / jsRender – jsviews.com/#jsrender

OBSERVABLES

jsViews Observable – jsviews.com/#jsoapi

ROUTER

Director – github.com/flatiron/director

STORAGE

simpleStorage – github.com/andris9/simpleStorage

DEPENDENCY MANAGER

RequireJS – requirejs.org
jQuery Tweak: If you have already loaded jQuery before RequireJS, you can not use define([“jquery”], …) in your module defines. Add this to your main RequireJS config before doing anything else …

define('jquery', [], function() { return jQuery; });

1
2
3

define('jquery', [], function() {
return jQuery;
});

NOW you can live happily ever after :)
OR
Loadrunner – github.com/danwrong/loadrunner

This is basically the core stack that I use to build out ideas :) While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures ;)

“

19. November 2015

Hybridauth 3.0 Remake – social logins made easy

“Hybridauth enables developers to easily build social applications and tools to engage websites visitors and customers on a social level by implementing social sign-in, social sharing, users profiles, friends list, activities stream, status updates and more.

The main goal of Hybridauth is to act as an abstract API between your application and various social apis and identities providers such as Facebook, Twitter and Google.”

Hybridauth 2.x was the best option for nicely aggregated social logins so far, but some of the social “Providers” are outdated or no longer working. Version 3.0 is still in development, but providing a complete rewrite.

  require 'vendor/autoload.php';

    $config = [
        'callback' => 'http://localhost/hybridauth/examples/twitter.php',

        'keys' => [ 'key'    => 'your-consumer-key', 'secret' => 'your-consumer-secret' ]
    ];

    $twitter = new Hybridauth\Provider\Twitter( $config );

    try {
        $twitter->authenticate();

        $userProfile = $twitter->getUserProfile();

        $accessToken = $twitter->getAccessToken();

        $apiResponse = $twitter->apiRequest( 'statuses/home_timeline.json' );
    }
    catch( Exception $e ){
        echo "Ooophs, we ran into an issue! " . $e->getMessage();
    }

require 'vendor/autoload.php';

$config = [

'callback' => 'http://localhost/hybridauth/examples/twitter.php',

'keys' => [ 'key' => 'your-consumer-key', 'secret' => 'your-consumer-secret' ]

];

$twitter = new Hybridauth\Provider\Twitter( $config );

try {

$twitter->authenticate();

$userProfile = $twitter->getUserProfile();

$accessToken = $twitter->getAccessToken();

$apiResponse = $twitter->apiRequest( 'statuses/home_timeline.json' );

}

catch( Exception $e ){

echo "Ooophs, we ran into an issue! " . $e->getMessage();

}

Hybridauth 3.0 Remake @ Github

For Facebook , Twitter and Google+ I still use my own little wrappers, but if you want more this is the way to go in the future :)

Enjoy coding …

18. November 2015

PHP & API Documentation

Currently refreshing my list of options to document projects and APIs.

I will use this page to keep a list of possible tools & solutions.

PHP DOCUMENTATION

PHPDocumentor
phpDox – The PHP Documentation Generator
Sami: an API documentation generator
apigen (PHP 5.4+)
Doxygen
Dexy

API DOCUMENTATION

JSDoc
API Blueprint
Swagger.io
apiary – API Design Stack
APIDOC – RESTful web APIs
ESDoc – JavaScript(ES6)
doxx – Generic, template based, HTML output for Dox documentation generator
documentation.js – raw documentation as JSON, beautiful, customizable HTML, or Markdown that fits perfectly into an API.md or README.md

Enjoy coding …

16. November 2015

RegEx101 – Online regex tester and debugger: JavaScript, Python, PHP

Really cool interface to test and debug Regex. The website also includes a nice regex library.

regex101.com

12. November 2015

AjarnOnline E-Learning for Thailand

E-Learning platform for Thailand

WPLMS (Learning Management System) setup / tweaks / fixes
WooCommerce tweaks / fixes / optimization
Language setup / localization cleanup / changes
Optimization
BuddyPress tweaks / changes / addons
Custom Teacher commission dashboard (MyCred integration / teacher payout)
Messaging changes and tweaks

AjarnOnline

11. November 2015

WP-CLI the command-line for WordPress

“WP-CLI is a set of command-line tools for managing WordPress installations”

Available commands:
    wp blog create|delete
    wp cache add|decr|delete|flush|get|incr|replace|set|type
    wp comment create|delete|trash|untrash|spam|unspam|approve|unapprove|count|status|last
    wp core download|config|is-installed|install|install-network|version|update|update-db
    wp db create|drop|reset|optimize|repair|connect|cli|query|export|import
    wp eval-file
    ...

See 'wp help <command>' for more information on a specific command.

Available commands:

wp blog create|delete

wp eval-file

...

See 'wp help <command>' for more information on a specific command.

WP-CLI

8. November 2015

Headless WordPress with the HTTP REST API 2.0+

Using WordPress as a headless system, is nothing new. You can easily build out your own REST API or use the long available HTTP REST API 1.0+ for WordPress.

But with the new HTTP REST API 2.0+ its getting really easy to build out your own REST API Namespace and assign routes for all your JSON needs.

The new REST API will make its appearance in WordPress 4.4, but you can start now by adding the plugin to your system. When the plugin detects 4.4+ it will only load functionality not already present in the core.

A ROUTE

A route tells the API to respond to a given request with a specific function (endpoint). This adds the permalink structure to WordPress so that your functionality can be accessed via an url like this: http://yourdoman.com/wp-json/yourplugin/v1/myfunction/your_parameter

add_action( 'rest_api_init', function () {
    register_rest_route( 'your_namespace/v1', '/your_endpoint/(?P<your_parameter>\d+)', array(
        'methods' => 'GET',
        'callback' => 'your_endpoint',
    ) );
} );

add_action( 'rest_api_init', function () {

register_rest_route( 'your_namespace/v1', '/your_endpoint/(?P<your_parameter>\d+)', array(

'methods' => 'GET',

'callback' => 'your_endpoint',

) );

} );

THE ENDPOINT

The Endpoint is the callback handled by the route. Each endpoint can have additional parameters attached:

custom permissions
default values
sanitization callback
validation callback
field requirements and more

RETURN VALUE

The return values from the endpoint are converted into JSON. You can use the WP_REST_Response object , this wraps normal body data and allows you to return a custom status code.

function your_endpoint( $data ) {
    $posts = get_posts( array(
         'author' => $data['your_parameter'],
    ) );

    if ( empty( $posts ) ) {
        return new WP_Error( 'your_endpoint_no_data', 'No Data', array( 'status' => 404 ) );
    }

    return new WP_REST_Response( $posts, 200 );
}

function your_endpoint( $data ) {

$posts = get_posts( array(

'author' => $data['your_parameter'],

) );

if ( empty( $posts ) ) {

return new WP_Error( 'your_endpoint_no_data', 'No Data', array( 'status' => 404 ) );

}

return new WP_REST_Response( $posts, 200 );

}

Really powerful stuff, that makes it easy to detach WordPress and the actual client using the data provided by it.

You can read more about it here.

Enjoy coding …

30. October 2015

UTF-8 CSV files that Excel likes

Excel needs to know that you are using non-ASCII characters in your CSV or it will not display them correctly :)

Add the BOM(Byte Order Mark) to the first line, notifying Excel that you are offering a UTF-8 encoded file.

//headers
header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Content-Description: File Transfer');
header('Content-Type: text/csv');
header('Content-Disposition: attachment; filename=your.csv;');
header('Content-Transfer-Encoding: binary'); 

//open file pointer to standard output
$fp = fopen('php://output', 'w');

//add BOM to fix UTF-8 in Excel
fputs($fp, $bom =( chr(0xEF) . chr(0xBB) . chr(0xBF) ));

//headers

header('Pragma: public');

header('Expires: 0');

header('Cache-Control: must-revalidate, post-check=0, pre-check=0');

header('Content-Description: File Transfer');

header('Content-Type: text/csv');

header('Content-Disposition: attachment; filename=your.csv;');

header('Content-Transfer-Encoding: binary');

//open file pointer to standard output

$fp = fopen('php://output', 'w');

//add BOM to fix UTF-8 in Excel

fputs($fp, $bom =( chr(0xEF) . chr(0xBB) . chr(0xBF) ));

Enjoy coding …

30. October 2015

WPLMS + MyCred Points + Instructor Commission Points payout

I am currently working on a WPLMS enhancement for a customer, that allows to simplify the payout of instructor commissions. The whole system runs on the MyCred Points System and students pay for courses with Points. The problem is how to easily payout the instructor commissions via PayPal.

There is currently no addon for MyCred available that does that magic, so I build one myself.

At the moment the payment process via PayPal is completely manual, due to budget constraints. I am basically generating a custom “Send Money” link that prefills the PayPal email and amount to send.

The interface itself handles the payout sessions, tracks the instructor balance, paid and unpaid points.

Here some images to illustrate the admin dashboard:

This list the instructors and their point balance and allows to start the payment process.

Payout sessions make sure, that only one session can be started per instructor, as the instructor could earn new points during the process. The points converted can be changed, allowing you to payout a fixed amount of points.

Its a 3 step process. Login at PayPal. Open the “Send money” dialog and send money to instructor. Confirm that you manually send the money and than register the payment and payout points in the system.

The session can be cancelled at any point. You can also leave the session open and continue at a later point.

On the frontend I added an interface to the BuddyPress Profile, that allows the instructor to track his payouts and balance.

The whole setup could be updated using PayPal Adaptive Payments, to make the whole process completely automated. Something to consider for the future :) Pretty happy with the manual process so far and it will be a great help for my customer to keep track of the commission payouts.

The whole setup is currently targeted for WPLMS, but can easily be adapted to other setups using the MyCred Points System.