Jumpstarter.io and WordPress, play nice.

Just discovered a great new service, jumpstarter.io

“Hosting websites has never been this easy
Keep your websites up and running. Zero server hassle.”

One great thing is the ability to clone (or duplicate) an installation of WordPress (like a staging sever), but that is _exactly_ what it is, a copy. That means that the clone has the root installation URL, so when you try to log in at your new clone it points back to your root installation, not cool. A feature request is made, but in the meantime this following method is a poor mans solution to the problem.

Open up wp-config.php and paste this:

define('RELOCATE',true);

1	define('RELOCATE',true);

Then visit http://myclone.xxx/wp-login-php (Not /wp-admin, didn’t work for me at least) (Replace myclone.xxx with your own URL).

You should now be able to access the new (clone) admin.

You should now prob remove the line in wp-config.php

Sending mail with Mandrill & PHP (MailChimp)

Hi there

Short post about sending mail through the Mandrill-system.

“Mandrill is a scalable and affordable email infrastructure service, with all the marketing-friendly analytics tools you’ve come to expect from MailChimp.”

Download the latest release (working 2014-16-04). Grab the /src.

Create an API-key @ https://mandrillapp.com/settings/index

Put for example mail.php (code below) in the root folder (with /src).

Full API docs.

<?php

require_once 'src/Mandrill.php'; 

try {
    $mandrill = new Mandrill('YOUR_API_KEY');
    $message = array(
        'html' => '<p>Example HTML content</p>',
        'text' => 'Example text content',
        'subject' => 'example subject',
        'from_email' => 'sender.email@example.com',
        'from_name' => 'Example Name',
        'to' => array(
            array(
                'email' => 'recipient.email@example.com',
                'name' => 'Recipient Name',
                'type' => 'to'
            )
        ),
        'headers' => array('Reply-To' => 'message.reply@example.com'),
        
       
        
    );
    $async = false;
    $result = $mandrill->messages->send($message, $async);
    print_r($result);
    /*
    Array
    (
        [0] => Array
            (
                [email] => recipient.email@example.com
                [status] => sent
                [reject_reason] => hard-bounce
                [_id] => abc123abc123abc123abc123abc123
            )
    
    )
    */
} catch(Mandrill_Error $e) {
    // Mandrill errors are thrown as exceptions
    echo 'A mandrill error occurred: ' . get_class($e) . ' - ' . $e->getMessage();
    // A mandrill error occurred: Mandrill_Unknown_Subaccount - No subaccount exists with the id 'customer-123'
    throw $e;
}
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<?php

require_once 'src/Mandrill.php';

try {

$mandrill = new Mandrill('YOUR_API_KEY');

$message = array(

'html' => '<p>Example HTML content</p>',

'text' => 'Example text content',

'subject' => 'example subject',

'from_email' => 'sender.email@example.com',

'from_name' => 'Example Name',

'to' => array(

array(

'email' => 'recipient.email@example.com',

'name' => 'Recipient Name',

'type' => 'to'

)

),

'headers' => array('Reply-To' => 'message.reply@example.com'),

);

$async = false;

$result = $mandrill->messages->send($message, $async);

print_r($result);

/*

Array

(

[0] => Array

(

[email] => recipient.email@example.com

[status] => sent

[reject_reason] => hard-bounce

[_id] => abc123abc123abc123abc123abc123

)

*/

} catch(Mandrill_Error $e) {

// Mandrill errors are thrown as exceptions

echo 'A mandrill error occurred: ' . get_class($e) . ' - ' . $e->getMessage();

// A mandrill error occurred: Mandrill_Unknown_Subaccount - No subaccount exists with the id 'customer-123'

throw $e;

}

?>

PHP

| mandrill

A dead crappy simple node.js chat with telnet

Stolen from http://www.youtube.com/watch?v=jo_B4LTHi3I Prerequisite: node.js installed (http://howtonode.org/how-to-install-nodejs)

Usage:

create chat.js (with the code from down under)

type node chat.js in the terminal
open a new terminal-window
telnet 127.0.0.1 8000
chat away

Bonus: on a local company net? get your IP (ifconfig) and telnet into that, share it with your friends.

var net = require('net')

var sockets = [];

var server = net.createServer(function(socket) {
 
  sockets.push(socket); 
    
  socket.on('data', function(d) {
    for (var i = 0; i < sockets.length; i++) {
      if (sockets[i] == socket) continue;
      sockets[i].write(d);   
    }
   
  });
  
  socket.on('end', function(d) {
    var i = sockets.indexOf(socket);
    sockets.splice(i,1);
  });
  
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var net = require('net')

var sockets = [];

var server = net.createServer(function(socket) {

sockets.push(socket);

socket.on('data', function(d) {

for (var i = 0; i < sockets.length; i++) {

if (sockets[i] == socket) continue;

sockets[i].write(d);

}

});

socket.on('end', function(d) {

var i = sockets.indexOf(socket);

sockets.splice(i,1);

});

JavaScript

| node.js nodejs

Move a WordPress Multisite installation to single installation

From the multisite installation

Download export-file from Tools -> Export
Download the theme
Download any dependent plugins

The single installation

Install a clean WordPress single installation.
Activate theme and any dependent plugins
Import the xml (choose to download attachments if so)
Go

WordPress

Website Facebook feed, take 2 a more robust way!?

In a previous post we walked through a way to get a Facebook feed onto your site.

This post is about a more robust(?) way to get the work done!

This solution always provides you with a valid access token. You don’t have to create one yourself.

First the code and the walkthrough below.

$app_id = 'APP_ID';
$app_secret = 'APP_SECRET';
$my_url = 'http://localhost:8888/Facebook/FQL';
$page_id = '164076286984711';

$token_url = 'https://graph.facebook.com/oauth/access_token?client_id='
  . $app_id . '&redirect_uri=' . urlencode($my_url) 
  . '&client_secret=' . $app_secret 
  . '&grant_type=client_credentials';

$access_token = substr(file_get_contents($token_url), 13);

$fql_query_url = 'https://graph.facebook.com/'
  . 'fql?q=SELECT+message,attachment+FROM+stream+WHERE+source_id=' . $page_id
  . '&access_token=' . $access_token;
$fql_query_result = file_get_contents($fql_query_url);
$fql_query_obj = json_decode($fql_query_result, true);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$app_id = 'APP_ID';

$app_secret = 'APP_SECRET';

$my_url = 'http://localhost:8888/Facebook/FQL';

$page_id = '164076286984711';

$token_url = 'https://graph.facebook.com/oauth/access_token?client_id='

. $app_id . '&redirect_uri=' . urlencode($my_url)

. '&client_secret=' . $app_secret

. '&grant_type=client_credentials';

$access_token = substr(file_get_contents($token_url), 13);

$fql_query_url = 'https://graph.facebook.com/'

. 'fql?q=SELECT+message,attachment+FROM+stream+WHERE+source_id=' . $page_id

. '&access_token=' . $access_token;

$fql_query_result = file_get_contents($fql_query_url);

$fql_query_obj = json_decode($fql_query_result, true);

Line 1 – 4: Fill in your app id, app secret, the redirect url and the page id you want the feed from.

Line 6 – 9: Here we get an access token (app token) with grant type of client_credentials. Read more about Facebook access tokens.

On line 13 – 16 we query the Facebook graph API to get the data from our page. We use FQL to fetch the result. Read more about FQL and what data to get from the tables.

Line 17 then JSON-decodes the response in an array.

Output the data

<?php foreach ( $fql_query_obj['data'] as $data ) : ?>
  <div class="message">
    <p><?php echo $data['message']; ?></p>
    <?php $images = @$data['attachment']['media']; ?>
    <?php if ( $images ) : ?>
      <?php foreach ( $images as $image ) : ?>
        <p><img src="<?php echo $image['photo']['images'][1]['src']; ?>" /></p>
      <?php endforeach; ?>
    <?php endif; ?>
  </div>
<?php endforeach; ?>

1

2

3

4

5

6

7

8

9

10

11

<?php foreach ( $fql_query_obj['data'] as $data ) : ?>

<?php $images = @$data['attachment']['media']; ?>

<?php if ( $images ) : ?>

<?php foreach ( $images as $image ) : ?>

<?php endforeach; ?>

<?php endif; ?>

</div>

<?php endforeach; ?>

We run through the data with foreach.

On line 4 we get any attachments and suppress any warnings/notices with the @-sign (@$data).

We then run a inline foreach to get all the attachments (only photos in this case) and echos out the src for the image. Note that the [1] on line 7 gets the second element in the array. Without any deeper investigation I believe you get the largest image. The first element is the small (_s), thumb. (See below for an alternative solution).

Alternative image solution

In the $image object there is ‘src’ ($image['src']), where you get the small source (_s). You can then use the same replace-method in the previous post to get the normal (_n) one.

Source on git

PHP

| facebook

Website Facebook feed

A twitter friend asked me about creating a custom feed for a Facebook wall. Pretty easy with the php sdk, but when I looked at the source it turns out I made it another way. Better or worse? You tell me.

The dirty secret

PHP’s file_get_contents. Here goes.

$content = file_get_contents('https://graph.facebook.com/galleriaduvan/posts?access_token=ACCESS_TOKEN');

1	$content = file_get_contents('https://graph.facebook.com/galleriaduvan/posts?access_token=ACCESS_TOKEN');

You need an access token for this, get one like this (small warning, it may expire). Create a Facebook app and add the client_id and client_secret like below.

https://graph.facebook.com/oauth/access_token?client_id=6410********7221&client_secret=b4a761c0a6************9692ffd58&grant_type=client_credentials

This will return the access token needed to get the content of the Facebook page.

Now your variable $content (from above) will contain a JSON-feed.

Decode it with

$content = json_decode($content, true);

1	$content = json_decode($content, true);

Then run a foreach to output the array (see below for code explanation).

<?php foreach ( $content['data'] as $fb ) : ?>
  <?php if ( $fb['message'] ) : ?>
    <div>
     <?php echo wpautop($fb['message']) ?>
     <?php $replace = array('_s.jpg', '_s.png') ?>
     <?php if ( $fb['picture'] ) : ?>
      <p><img src="<?php echo str_replace($replace, '_n.jpg', $fb['picture']) ?>" /></p>
     <?php endif ?>
     <time datetime="<?php echo $fb['updated_time'] ?>"><?php echo nicetime($fb['updated_time']) ?></time>
    </div>
  <?php endif ?>
<?php endforeach ?>

1

2

3

4

5

6

7

8

9

10

11

12

<?php foreach ( $content['data'] as $fb ) : ?>

<?php if ( $fb['message'] ) : ?>

<div>

<?php echo wpautop($fb['message']) ?>

<?php $replace = array('_s.jpg', '_s.png') ?>

<?php if ( $fb['picture'] ) : ?>

<?php endif ?>

</div>

<?php endif ?>

<?php endforeach ?>

Line 2: If there is Facebook wall posts (called messages in the JSON) then on line 4 output the message with the WordPress wpautop-function

If there is a image (line 6) then print the image but replace the small feed image with a bigger one (from _s (small) to _n (normal).

On line 9 output the updated time with a custom time ago-function. Tho you could use WordPress built in function for this: human_diff_time

Download source/example-file

PHP

| facebook json

The dive into Handlebars and Ember.js

It is time! Time to talk Handlebars and how to use them in Ember.js or how Ember uses Handlebars.

If you want to follow along, get a copy of the Ember Starter Kit.

Open up the app.js and add the following code right before the App.Router.

App.personController = Ember.ArrayController.create({
  content: [{name: 'Adam'}, {name: 'James'}]
});

1

2

3

App.personController = Ember.ArrayController.create({

content: [{name: 'Adam'}, {name: 'James'}]

});

(we are creating (create();) an instance of a class, therefor we use a lower case – personController, while when extending (extend();) a class we use a capital letter)

Here we are creating a controller naming it personController, and setting its content to some static content.

In your index.html put the following right after the body.

&lt;script type="text/x-handlebars"&gt;
  {{#each App.personController}}
    &lt;p&gt;{{name}}&lt;/p&gt;
  {{/each}}
&lt;/script&gt;

1

2

3

4

5

</script>

The ‘each’ loops through the content in the personController and outputs each name. The ‘#’ means start of the handlebar view and ‘/’ is the end point.

Run the app and it should output:

Adam
James

The Bonus part

To enhance the app somewhat we add a model. Right before the personController add:

App.Person = Em.Object.extend({
  name: null	
});

1

2

3

App.Person = Em.Object.extend({

});

This adds a new model, class (whatever you want to call it). Setting a name and setting it to null is not necessary but it can help to remember what properties the model exists of(f)(?) <- (hey I'm swedish).

Add this to your personController:

init: function() {
  this._super();
  var person = App.Person.create({
   name: 'Linda'
  });
  this.pushObject(person);	
}

1

2

3

4

5

6

7

init: function() {

this._super();

var person = App.Person.create({

});

this.pushObject(person);

}

this._super(); calls the parent class (super is a reserved to JavaScript hence the underscore _ ) and you need to do this inside the init so the init method will be called all the way up the prototype chain. (source Cerebris)

Then we create a instance (person) of the class Person and set its name property to ‘Linda’ and finally push (add) this to the content array.

Running the app should yield the following result:

Adam
James
Linda

Get the source files.

Unsolved issue

Doing a console.log() last in init reveals the following:

The first two are objects but the last one is ‘c’, the one we created from a class, stand s for class?

ember.js

| ember emberjs handlebars javascript

Diggin’ deeper into Ember.js

I guess with Ember 1.0.0-PRE.2 the smallest application is.

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/'
    })
  })
});

App.initialize();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({

templateName: 'application'

});

App.ApplicationController = Ember.Controller.extend();

App.Router = Ember.Router.extend({

root: Ember.Route.extend({

index: Ember.Route.extend({

route: '/'

})

});

App.initialize();

An Ember-app MUST have the ApplicationView and the ApplicationController. It must be named exactly like that and without it the root view could not render any content.

The Router

The router is keeping track of your app’s state. The router must have two routes. The first must be named root and the second (index) is where Ember looks at the init, must have ‘/’ as path.

~~Next we are going to check out a more hands on example. Building a small app with some Ember outlets and look at how the template system (Handlebars) is working.~~

A bonus video

This guy is a lot smarter than me, check out the video

ember.js

| 1.0.0-PRE.2 ember emberjs javascript

The Ember MVC

Model, View, Controller. That spells M V C.

The model is where the data is kept. It’s the blueprint. For example: Model describes a Person. A Person has a name and an age. In Ember.js we create a model like this.

App.Person = Ember.Object.extend({
  name: null,
  age: null
});

1

2

3

4

App.Person = Ember.Object.extend({

age: null

});

The view is the visual layer. It’s what you see and interact with. A form, a bullet list etc. To define a view type:

App.PersonView = Ember.View.extend();

1	App.PersonView = Ember.View.extend();

And last but not least the controller. The controller is the bridge between the model and the view. When someone, for example, clicks a button the controller gets input from the view and preforms actions on the model (CRUD).

App.PersonController = Ember.Controller.extend();

1	App.PersonController = Ember.Controller.extend();

In the controller the information about your (in this case) Person(s) will be stored.

And that wraps it up for this time.

ember.js

| ember emberjs javascript mvc

Hello Ember.js (world), goodbye sanity!?

Every Ember.js app needs to have:

window.App = Ember.Application.create();

1	window.App = Ember.Application.create();

where App is the name of your application. You could call it Whatever, but it should probably have a name that relates to the app you’re building. It has to start with a capital letter tho, in order for bindings (huh?, more on this later) to find it.

Then to start your app add:

App.initialize();

1	App.initialize();

Congrats! You have created your first Ember-app. Totally useless, but hey hang on!

A bonus part

Like jQuery, Ember.js has a ready-function that fires when the DOM is ready. Add this to your Ember.Application.create();

ready: function(){
  alert("Hello Ember.js (world), goodbye sanity!?");
}

1

2

3

ready: function(){

alert("Hello Ember.js (world), goodbye sanity!?");

}

Now our finished application looks lite this:

window.App = Ember.Application.create({
  ready: function(){
    alert("Hello Ember.js (world), goodbye sanity!?");
  }
});
App.initialize();

1

2

3

4

5

6

window.App = Ember.Application.create({

ready: function(){

alert("Hello Ember.js (world), goodbye sanity!?");

}

});

App.initialize();

ember.js

| ember emberjs javascript mvc