Featured
MattErickson (ME)
Nov 23, 2014
Categories: Development, Featured, PHP, and Web
Tags: google api, google calendar, google calendar api, google php api, and PHP

Google Api v1/v2 is dead, move on

Please note the Google PHP Api changes regularly and none of this code is future proof as the google api client is still in beta

Recently I undertook a php application that was using a ‘zend’ google calendar api. Well as of the 17th of November 2014 the google api v1/2 (used internally by zend) shut down. I used this as a learning opportunity to impl google api v3.

So here is the code that I have come up with that has worked pretty well for me. It is very similar to zend.

First we setup our google client from the client implementation on Google Api Php Client, you will need the client in your application somewhere and will need to require the AutoLoad.php in order to use it. (Not shown below)

Code it out

$user = 'useremail@gmail.com';
   
$gclient = new Google_Client();
$gclient->setApplicationName("My Apps Name");
$gclient->setClientId("**crazy_string_here**apps.googleusercontent.com");

if (isset($_SESSION[$user.'_service_token'])) {
	$gclient->setAccessToken($_SESSION[$user.'_service_token']);
}
$key = file_get_contents($privateKeyLocation);
$auth = new Google_Auth_AssertionCredentials(
	$config->google_email_address, //this is my service account email **crazy_string_here**@developer.gserviceaccount.com
	array('https://www.googleapis.com/auth/calendar'),//Google calendar permissions
	$key //contents of my .p12 file i downloaded from console.developers.google.com
);
$auth->sub = $user;//This is saying our service account will be acting as the sub user
$gclient->setAssertionCredentials($auth);
if ($gclient->getAuth()->isAccessTokenExpired()) {
	$gclient->getAuth()->refreshTokenWithAssertion($auth);
}
$_SESSION[$user.'_service_token'] = $gclient->getAccessToken();

At this point we have setup all of our google_client code so we can add our implemented “add calendar event”. First Instantiate the calendar service.

$cal_service = new Google_Service_Calendar($gclient);

Now we need to set up an event, give it a “summary”, location, and a start and end datetime in format

"YYY-MM-DDTHH:MM:SS.MMM+0001"

or

datetime->format('Y-m-d\TH:i:s.000P')
$event = new Google_Service_Calendar_Event();
	$event->setSummary("Event Title");
	$event->setLocation("123 Fake St. Dover, ME 41426");//Address City, State Zip
	$event->setDescription("You have a new event on your calendar!");
	$endTime = clone $aDateTimeObject;
	$endTime->add(new DateInterval('PT1H'));//1 hour calendar event
	
	$start = new Google_Service_Calendar_EventDateTime();
	$start->setDateTime($aDateTimeObject->format('Y-m-d\TH:i:s.000P'));
	$event->setStart($start);
					
	$end = new Google_Service_Calendar_EventDateTime();
	$end->setDateTime($endTime->format('Y-m-d\TH:i:s.000P'));
	$event->setEnd($end);
					
	$createdEvent = $cal_service->events->insert($user, $event);

At this point we have a calendar event returned to us and can use

$createdEvent->id

to get the event ID if we want to store it so it can be updated/deleted later in similar fashion like so:

$cal_service->events->delete($user, $createdEvent->id);

Hopefully this was enlightening for you and with all the recent changes (and shutdowns) of the google api this can help you transition your application more quickly to the new version.

Jun 5, 2014
Categories: Featured, HTML5/CSS3, and Web
Tags: CSS, Dropdown, HTML, Select, and SelectBox

UI/UX and dev is always a delicate balance. We had a recent request come in to style our dropdowns as the rest of our form fields. We are using bootstrap so our inputs are fairly customized. Here is how I did it, I will discuss the issues and caveats after the basic code for “modern” browsers.

HTML structure

    <select>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
        <option value="4">Value 4</option>
    </select>
</label>

This is all in less.

Style the containing label:

.custom-select {
    position: relative;

    &:after {
        .fa; //Font awesome icon
        .input-group-addon; //bootstrap mixin
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        padding: 10px 13px;
        width: auto;
        height: 100%;
        content: "\f107"; //down arrow
        font-family: FontAwesome;
        position: absolute;
        right: 15px;
        top: 0px;
        pointer-events: none; //Do not block the propagation of the pointer event
    }

Now to style the select box itself which is really just hiding the arrows and coloring it.

select {
        outline: none; //hide the outline
        -webkit-appearance: none; //hide the arrows
        -moz-appearance: none; //hide the arrows
        appearance: none; //hide the arrows
        cursor: pointer; //change the cursor
        .placeholder(); //mixin for placeholder values
        color: @input-color; //theme var
        font-weight: normal;

        option {
            color: @input-color; //background for the options
        }
    }
    /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        select {
            padding-right: 18px;
        }
    }
}

Relatively simple, but there are some key pieces that need to be in place for this to work.

  • pointer-event: none; This is very important or the overlaid addon would catch the pointer even and we wouldn’t “click through” to the underlying select box. This is NOT SUPPORTED by anything less than IE11. (IE10 is still going to cause you fits here).
  • `outline: none; //hide the outline
  • -webkit-appearance: none; //hide the arrows
  • -moz-appearance: none; //hide the arrows
  • appearance: none; //hide the arrows
  • cursor: pointer; //change the cursor Also very important so we don’t see the stupid OS generated select boxes that change from one to the next.

You will probably also notice that I don’t touch any of the nasty hacks that could happen for IE8-10. This is because I used a bit of javascript to grab these boxes and just remove all custom styling. It is much easier than hacking it and we have decided it to be graceful degradation. I will discuss this in a different post.

Your output should look something like this:

Custom_Select

Unlike some examples i’ve seen out on the internet here is an actual WORKING example of how this is supposed to look and behave in modern browsers.

Nov 18, 2012
Categories: Development, Featured, HTML5/CSS3, and Web
Tags: galaga, game, and html5

This project is also available on

GitHub:Mutmatt/Pew-Pew

Special thanks go out to:

Weapon Upgrades: SeongJae Park

Sound Effect: Haebin Yoon

Recover The Original Motion: JongYoon Lim

Boss Stage: Lee WonJae