Client-Side JavaScript to Node.js

JS to Node

JavaScript is mostly used on the client-side and in the browser, enabling all kinds of dynamic interactions on the page. When Brendan Eich created the language for Netscape in 1995, there were already server side implementations but node.js made it really popular. Node is a cross-platform runtime environment that is event driven and non-blocking and uses the Google V8 JavaScript engine to execute code. So, if you already know JS, you can now code on the server. There are a ton of use cases that this enables but today I want to focus on a simple concept of moving your client-side JavaScript code to Node.JS so that you can hide or protect your JS functions from being visible to end users.
Read more

HTML5 Photo Browser for Local Files and Directories

Photo Viewer and HTML5 Slideshow

Online Image Browser for Local Files

I was browsing old photo albums yesterday and it made me want to build an image viewer with HTML5. I want it to work with directories that have many files and this raises a question on browser performance. A gallery of pictures can easily consist of hundreds if not thousands of images. Loading all of them at once would probably crash the page or make it terribly slow and unresponsive. The DOM is not built to support so many elements with good speed. Plus, loading everything is wasteful as the screen size can only show a limited amount of images at one time.
Read more

GitHub Gist API with cURL and Ajax

Github API with Curl and XHR

I had seen the GitHub API before but never considered that it extends out to Gists, which I use for code samples on this site. In fact, I use a Gist on the bottom for the Ajax code samples that programmatically interact with GitHub using their API to create and modify Gists. First, I will just use command line cURL and then XHR, or more specifically, jQuery Ajax functions. Since Github supports both JSONP and CORS, you can use client side code to interact with the GitHub API.
Read more

Playing Cards API with Go Lang and JSON

Deck of Cards API with GO Lang

This is a continuation from the previous post on setting up Google App Engine with Go and Martini.

Last week, I showed how you can quickly create and launch a project with Google App Engine and Go. I integrated Martini on GAE and today, I will finish the tutorial by actually designing an API to properly respond to requests with JSON. I will also enable CORS and create some functions in GO that will shuffle an array of objects, split the array according to a user provided number, and reorder the array of objects for multiple keys. If we translate that to playing cards, the API will handle shuffling a deck, dealing out the cards to the amount of players provided, and ordering them by suit and numbers. Any remainder of cards based on provided players will go into the kitty. JSON is a popular content type so I will use that and follow the RESTful style of API design.
Read more

API on Google App Engine with Martini and Go

GAE with Martini and Go

Google App Engine is a great platform for quickly developing and hosting web applications. There are alternatives but today we are going to dig into GAE and show how simple it is to get started. I have previously made a few posts on Go and Martini so today we are going to setup Martini on Google App Engine for the Go Language in order to launch an API in the cloud. Martini is a great framework for building a RESTful API and the workflow below will take you through all the steps, from downloading GoogleAppEngine to deploying our Martini API app:
Read more

Weekly Roundups and Aggregators on Web Development

aggregating weekly roundup

A lot of blogs and sites have a weekly roundup, a collection of articles and links that you might have missed over the week. I have been a big fan of HTML5 Weekly which is an awesome email newsletters with interesting links on web development. Aggregating content in our times of information overload can be helpful and many websites are now built for the purpose of gathering and organizing bookmarks around a topic. Today, I want to aggregate the aggregators, the weekly roundups, and other useful and free resources on web development that you should be following for staying up to date.
Read more

Multiple Domains with Postfix Mail Server

postfix for multiple domains

I am now hosting multiple domains on DigitalOcean and require a solution for email. Before, I was happy with not setting up a mail server on my droplet and just using Gmail but a new project requires domain specific email addresses. Since my domain registrar points my DNS settings to DigitalOcean, I can’t use their mail services. I need to set this up myself and honestly, going through this postfix tutorial was pretty easy. Below, I will cover how to setup postfix for multiple domains and how to read postfix emails.
Read more

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