Ignite Social Media

Examples of my work as Front End Developer at Ignite Social Media

Forward Look - The Official Blog of Chrysler

Forward Look Forward Look

RamZone - The Official Blog of Ram Trucks

RamZone

FIAT Backstage - The Official Blog of FIAT USA

FIAT Backstage FIAT Backstage FIAT Backstage

Redline Dodge - The Official Blog of Dodge

Redline Dodge Redline Dodge

Jeep Blog - The Official Blog of Jeep

Jeep Blog Jeep Blog

Dodge Defiance

Dodge Defiance

FIAT Pack Like L

FIAT Pack Like L FIAT Pack Like L

Playing around with MotionCAPTCHA

Looking through my RSS feeds I saw a post about a new form of CAPTCHA using mouse movements instead of blurred text like normal CAPTCHA services. Considering I don't have such post validation, I decided to try it out.

MotionCAPTCHA uses the HTML5 <canvas> element and jQuery to render the box and read mouse movements. The files involved only consist of a js file, css file, and a jpg containing the patterns, and requires no back-end knowledge. All you need to do is link the css file to you head, change your action to '#' in your form and have your action be a hidden element, add the canvas element  and disable the submit button. Then all you need to do is link jQuery and the js file below your form, and add a call below that using jQuery.

MotionCAPTCHA is in v0.2 right now and does not support touchscreen controls, but they are working on that for future versions. Until then, the current version works fine for current browsers.

You can download the code and view instructions  at the Joss Crowcroft's website.

Google+ and +1 Buttons

I recently joined Google+, and so far I like it. It's a really nice mix of my favorite Facebook feature and my favorite Twitter features. Unlike these features, Google+ allows you to concentrate your posts into specific groups, or circles. I also like how well the mobile app works compared to the Facebook and Twitter apps. This is mostly because the service was created with mobile in mind. At some point I want to try the "Hangout" video chat feature, as well as the "Huddle" mobile chat feature. Since this is still in Trial Beta, however, there are still a few problems, for example showing only first names in the chat, and not showing information when hovering of the name like with GTalk. Like I said, it's still in Limited Trial Beta, so that's where the feedback from comes in handy, and hopefully the fix with when they can.

A nice feature of Google+ is the +1 button, their version of the "Like" button. A unique feature of the "Like" button is its ability to influence search results. Even though Google+ is still in beta, web developers can add the button to their sites though a fancy plugin. Just include the script tag and place the "plusone" tag where you want it. You can find the code and custom options in Google's Webmaster page

As you can see, I've already added this feature to my site. Feel free to give me a +1, and while you're at it, like and tweet me as well.

Rewrites, feeds, and smileys

So after several years of having this site hosted in a shared Windows space, I switched over to a Linux space. In the past it didn't really matter which operating system my site was hosted, but now that my site uses CodeIgniter I wanted to use friendly urls and get rid of the "index.php" that is usually in there. To do this I make a simple rewrite rule in the .htaccess file to send any 404 to the index file, which will make it work as normal.

The script can be found here: http://www.anmsaiful.net/blog/php/remove-codeigniter-index-php.html

Second thing, since my site is a blog, was to create an rss feed.  Based on the documentation I found it was just a matter of adding the xml helper and using "header("Content-Type: application/rss+xml");" to your controller to parse it as an rss feed. After that just make a view file as an xml page and make sure it validates.

You can find the article here: http://net.tutsplus.com/tutorials/php/building-an-rss-2-0-feed-with-codeigniter/

The third change I made was having text smileys convert to images in the comments section. This was the easiest since it is built into Codeigniter with the smiley helper. Just add smiley to your autoload file under helpers and you can use the functions in that file. You also need to add a folder with the smiley images into your directory so there is is a place to choose from. You may be able to add more smiley images and add them to the array at application/config/smileys.php. 

The documentation and link to download the smiley images can be found here: http://codeigniter.com/user_guide/helpers/smiley_helper.html

 

I probably should post on here more

So my blog is still a work in progress. I'm mostly working on browser compatibility and making use of real estate on the right column.

All and all this is an interesting learning experience so far with the new features in HTML5 and CSS3. Some features however don't work on certain browsers, mainly with CSS3. One of which was the use of CSS gradients, which I was able to accomplish with browser-specific tag, which I found with the help of this article:

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

If I think of anything else to say I'll post more, though I'm mainly focused on cleaning things up and adding more features to the site. If you have a suggestion, please feel free to add a comment. I like feedback, as well as knowing people are actually reading this.