Friday 23 January 2015

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

Default with the right dimensions










Advanced Image

  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


Tada!!

Wednesday 14 January 2015

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!

Saturday 10 January 2015

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! :)

Saturday 3 January 2015

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.

Tuesday 30 December 2014

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 :).