Instagram Image Filters with HTML5 Canvas

instagram filters with CANVAS

Preset photo filters are nothing new but Instagram has certainly made them very popular in recent times. While Instagram and it’s many clones are manipulating pixels with native technologies, the web has HTML5 CANVAS which enables all kinds of image editing with JavaScript. There are many image processing libraries today that could be used to recreate Instagram photo effects in the browser. Today, I am going to explore some of these scripts, evaluate how they can be used to recreate the actual Instagram filters, and create a demo that combines HTML5 drag and drop, webcam photo capture, and lots of various preset photo effects.
Read more

HeartBleed Vulnerable Websites

websites affected by heartbleed

Yesterday, the internet was buzzing with articles about the Heart Bleed Bug which is a serious vulnerability in OpenSSL that allows stealing data (passwords, credit cards, etc) that should be secured over SSL. Some sources say that as many as 2 out of 3 servers in the world use OpenSSL which means that a lot of websites have been affected. Large websites like Yahoo, Flickr, Imgur, and Lastpass have already confirmed that they have been affected and they have also updated their servers to fix the security bug. But, what websites are still vulnerable to the heart bleed bug?
Read more

Image Zoom, Drag, and Crop with HTML5

html5 canvas image zoom and crop

I am on a mission to create an amazing HTML5 image editor and want to write a little about zoom, crop, and drag or pan. These are 3 features with a lot of overlap, depending on the design choice and implementation, so I would like to first consider the user experience. Panning or dragging the image, or a selection of the image, is going to be a clear need that is shared by both zoom and crop. If I click on an image and drag, am I moving the image or selecting an area to crop? One way to fix this dilemma is to only allow one of these operations at a time, but that requires extra user clicks. An alternative is to drop a special “crop selection area” on the image at all times and allow resize or drag of that element while dragging outside of that area moves the image. What is the best user experience?

Zoom could be implemented with plus or minus buttons that change the scale of an image or a canvas object. I have also seen dropdowns that let you set a zoom level in percentages but both of these implementation require extra unnecessary clicks. They also require shifting the mouse between clicking and dragging of the image, so the act of zooming in and out seems to have a better user experience with a mousewheel implementation. Cropping an image, in my opinion, should also work using a mouse selection and personally, I would vote for enable/disable action instead of keeping a persistent selection area on the image at all times. So, you can use zoom at all times but cropping an image requires selecting the crop tool. Finally, how do you zoom to a mouse cursor and does the zoom actually change image data via html5 CANVAS or should it just manipulate the CSS transform property and if so, how would the CSS change affect cropping?
Read more

Load Large Files in Slices with HTML5

Manage huge files with Ace

Sometimes you have to parse and search through some really large files and this is where bash tools and scripts work best. A little perl script, grep, awk, or sed can help you quickly read a portion of a file, do a search and replace, etc. Since I often code on a Mac, I have covered some simple OSX command-line one liners that I find helpful. But what about managing huge files in the browser? I noticed that Ace Editor can handle a file of few megabytes without any issues in a browser, and it comes with Regex search. It actually works faster on big files that my SublimeText for some strange reason.
Read more

Making Money from Most Expensive Keywords

top high cpc keywords on google

Since I am really interested in Search Engine Optimization, Analytics, and have recently tried Google Adwords on this site, I wanted to dedicate a post to these high CPC Keywords lists that are all over the internet. I’m not going to lie, when I first saw a list of most expensive Google keywords a few years ago, I got excited at the idea of monetizing that content. I expected high competition for these keywords but having a good understanding of SEO, I still thought that I could compete and make some money using these lists. Ofcourse, I was wrong, simply because a list of high CPC keywords in Adwords does not translate to money made from impressions and clicks on a web page.
Read more

Mapping Town Boundaries with D3

D3 Town Boundaries

I have seen a lot of cool D3 maps of US states, counties, and even zipcodes but what about cities or towns? I don’t mean plotting geo coordinates of a particular city but actually drawing the city or town boundary on the map. A population choropleth is a good use case for this but I have only seen one example of Vermont that shows town specific information. The initial problem is where do we even get the specific town boundary geospatial data?
Read more

HTML5 Video Streaming with Blob Urls

HTML5 Video Streaming

I have written a few demos on using the HTML5 video tag, showing how you can make screenshots from movies or create animated GIFs, but last night I noticed some major issues with loading a large local video file. It basically crashed my Chrome tab and after looking at my code again, this makes sense. When the user dropped or selected a local video file, I read that entire file using the FileReader API and then created a Blob URL out of it so that it can be used in the HTML5 video tag. But, reading the entire file is not necessary as both the video and audio tag support a file stream.
Read more

Go Examples and GoLang Resources

Go Language Demos and Examples

I have been working on a pretty large project with Go in the last few weeks and wanted to dedicate a blog post to various GoLang examples, demos, and resources. A tour of Go was certainly helpful in getting started and the Go Playground is very useful for quick code examples, but there are more blogs, forums, and resources that can really help when developing with the Go Language. Here is what I found helpful:
Read more

Martini App with Ajax, JSON, and User Sessions

Go language application

Previously, I have created a really simple web app with Go Lang and Martini that communicated with MySQL to retrieve a list of posts, an individual post, and allowed creation of a post. Now, we are going to handle updates and deletion, transform responses to use JSON for client side Ajax requests, and implement the user relation: user login, logout, managing sessions and authentication, as well as, retrieving posts by user. Supporting PUT (update) and delete requests with Ajax and JSON was pretty trivial (thanks to Martini) but evolving the app to handle users properly with good validation was much more work then I originally expected. Still, Go does make the code easy to understand and Martini contributed utilities have been a great help. Lets start.

GoLang and Martini Web Application
Read more

Simple App with Go, Martini, Gorp and MySQL

app in go lang

Last week I saw a video on the Martini web framework for Go and it inspired me to check it out. Looking at the performance of Go is even more inspiring and today I decided to learn the Go language and write a really simple app with Go, Martini, and MySQL. I started using the native SQL package for Go but quickly adopted gorp as it looks like a really clean API to talk to the database. I have also leveraged the binding and render Martini utilities to abstract more of the code out of my main go file. The app will create a table in mysql, create some sample posts, show a homepage with these posts, show an individual post view, and allow the end user to create their own post. I will also dig into error handling, validation, converting timestamps, and properly using layout template in the render utility for good SEO.

Sample Martini App

Read more