Placehold.it - The awesome online image placeholder

Ever wanted to use a default image while developing? It was always time consuming to jump into Photoshop to create a sample image with the right dimensions, save and then use it for development.

Until some freaking awesome genius created placehold.it!!

If you want a default image all you need to do is pass a custom URL to your image "src" attribute to create a default image. With the parameters defined more in detail below.

Simple Image

http://placehold.it/1220x470

Default with the right dimensions

Advanced Image

http://placehold.it/1220x470/3299CC/ffffff&text=Example

1. First parameter (1220x470) is the dimensions
2. Second parameter (3299CC) is the hex of the background
3. Third parameter (FFFFFF) is the hex of the text displayed
4. Fourth parameter ($text=Event) is the actual text displayed

Example Usage

<img src=”http://placehold.it/1220x470/3299CC/ffffff&text=Example"/>

Tada!!

How to retrieve data using Drupal_http_response

Ever wanted to access an API using Drupal. It’s dead easy using drupal_http_response().

 <?php  
  // Construct parameters to pass to URL  
  $data   = 'param_name=value&'param_name1=value1';  
  $options = array(  
   'method' => 'POST', // HTTP Request  
   'data'    => $data,  // Params  
   'headers' => array('Content-Type' => 'application/json'), // Data retrieved type  
  );  
  // Get result  
  $result = drupal_http_request('http://test.com', $options);  
 ?>  

Tada! This syntax be used for your AJAX requests or API calls in Drupal. Easy peezy!

Adding a custom styles format to TinyMCE plugin on Drupal 7

Ever had to create a custom style for the Wysiwyg/TinyMCE plugin on Drupal 7? Well I came across this very niche issue at work earlier this week and it did my head in for a couple of hours. I decided to post this solution in the nil chance someone else comes across a similar issue.

The solution I came up with is to create a custom module and place it in sites/all/modules/custom directory. It is recommended to save all custom modules in a 'custom' directory and drupal standard modules in a ‘contrib’ directory.

Add the following block of code into your mycustommodule.module file in your custom module and edit as you please. For more custom settings have a look at the hook_wysiwyg_editor_settings_alter drupal hook.

 function mycustommodule_wysiwyg_editor_settings_alter(&$settings, $context) {  
   // Each editor has its own collection of native settings that may be extended  
   // or overridden. Please consult the respective official vendor documentation  
   // for details.  
   if ($context['profile']->editor == 'tinymce') {  
     $settings['style_formats'] = array(  
       array(  
         'title'  => 'Black 25%',  
         'selector' => 'a',  
         'classes' => 'btn-small btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
       array(  
         'title'  => 'Black 50%',  
         'selector' => 'a',  
         'classes' => 'btn-medium btn-black',  
         'block' => 'a',  
         'styles' => array (  
           'color' => 'black'  
         )  
       ),  
     )  
   }  
 }  

Voila!!

As always feel free to leave a comment or contribution below! :)

My implemented example of a simple REST API

I'll first of all briefly explain what an API is and what its main purpose is. An API (Application Programming Interface) is in layman terms a way to gain access to data without having any knowledge of the code or technology behind the generation of that data. 

The data is either in JSON or XML format with JSON being the preferable option because it’s more lightweight and puts less stress on resources.

For example the BBC have a few APIs (which you can read about here)  through which you can access their radio programmes and other data. As a consumer of their API you have no idea how that data is being generated or how and where it is being stored. That's the beauty of it!

A REST API uses four main HTTP protocols to access/manipulate data: GET, POST, PUT and DELETE.

HTTP Protocol	Use	Example
GET	To retrieve data	Get list of all radio schedules
POST	To insert a new data entry	Add a new radio schedule to the existing list
PUT	Update existing data	Update a radio schedule entry
DELETE	Delete data entry	Delete a radio schedule entry

You can read more about the HTTP protocols here. There is also a directory of APIs you can have access to here.

In my previous post on "How to build an Android or iOS mobile app from scratch using just basic web skills" I explained that to make your app dynamic it has to make ajax requests to an API to get data.

I have built a lightweight sample API using the Slim MVC framework which you can download or pull from this GitHub URL.

Setup instructions can be found in the README.md file.

Good luck and you can comment or ask any questions here.

How to build an Android or iOS mobile app from scratch using just basic web skills

Have you ever tried to build a native iOS or Android app? I have and it’s a bloody nightmare. Or was. Until now. Gone are the days when a developer would need to be able to interpret sdk’s and read thesaurus-sized books in order to get one line of code working.

In order to build a local webapp now all you need is three main things:

1. Basic web skills
2. Learn basic Git and create a github account
3. Adobe phonegap build account

Basic Html Skills

You need to be able to build a basic mobile site using the standard HTML, CSS, jQuery skills you need. If you have more complex needs for a dynamic site however you need to be able to build an API that your device will communicate with using AJAX. I will be talking about building a basic API in my next article.

Add a config.xml file to the root of your web application similar to that found here https://github.com/phonegap/phonegap-start/blob/master/www/config.xml.

Add your application icon as icon.png to the root of your web app and tweak the config.xml file as suitable.

Github Account

It’s free! Sign up on http://github.com for a free account.

If you have never used git before you can learn the basics at this link http://git-scm.com/book/en/v2/Getting-Started-Git-Basics.

Create a repository for your web app.

Add, commit and push all your web files including the config.xml file to your github repository.

Adobe build account

This is also free for your first build so it’s a good platform to test your app building skills before you purchase the ability to build more apps at an affordable $9.99/month. You can sign up here http://build.phonegap.com.

Once you have completed these steps set up your build app on your free account remembering to add in your github account to the webapp page.

Once that’s done just click the ‘update code’ button and watch the magic happen.

For iOS apps you require a developer key before it will even compile the app but for Android and Windows you can get the debug file before signing up for a developer key for testing.

That’s that then! Watch out for my next tutorial on how to build an API to communicate with your app :).