New Company Site Launch for Shift8 Web

Hello! We are excited to announce that we have created a brand new website for ourselves! Sometimes its difficult to focus on ourselves when we are so often focused on our clients. With new and exciting projects on the horizon, we thought we would take the opportunity to chip away and eventually launch a new website for ourselves. While previous site was on the Drupal CMS, we decided it would be nice to migrate back to our old friend, WordPress. Though our site may seem kind of simple, there’s a few interesting things that we did that we wanted to share. Mobile Detection with jQuery Why does anyone ever need to detect for mobile devices anymore? Don’t we just use media queries? Well, yes that is the best practice answer. But throw in multiple layers of caching like Memcache, Page caching, Object caching and Varnish caching and you will soon […]

How to create a heatmap layer on Google Maps using JQuery and PHP

Hello! There was a scenario not too long ago where we were required to create a heatmap layer on top of a Google map to plot latitude/longitude coordinates. I thought I’d share the process through which we pull the coordinate data from a MySQL database and plot it into the google map as a heatmap layer. We chose to go with a pre-built jQuery library to handle most of the work interacting with the Google Map api and drawing the heatmap layer itself. For this we chose heatmap.js. From heatmap.js’ website, it is a “lightweight, easy to use JavaScript library to help you visualize your three dimensional data!”. What we’re ultimately trying to do is build a simple PHP page that pulls all the coordinate from a MySQL table, prepares it into a json array and then plots all the points as a heatmap over top a google map location. […]

Pull JSON data from your website to your mobile application with Ajax and PHP

Hello! Making mobile applications is much easier than it used to be. As with previous posts, we have been experimenting with Apache Cordova Framework for easily building mobile applications, leveraging web frameworks like AngularJS. Many mobile applications communicate with a centralized “server” or website that retains all the data that may be useful for the mobile app. For example you might want to have a mobile application that retains a centralized “friends list” that the end-user can modify. You can store this friends list in a database, and access that data by making an Ajax request to pull the data in json format. For the website that retains and manages this data, we have decided (for this example) to use the PHP Slim Framework. We mainly chose this because it makes rolling out a web based application API with a database backend very simple (in under 30-50 lines of code). […]

Detect facial features in your images and modify them in real time with Jquery, Javascript, CSS and PHP

Hello! A few weeks ago we wrote a post that detailed how you could leverage PHP, Javascript and jQuery to detect facial features in images. In this post we will detail how you can take the detection of facial features and modify the image in real time with CSS and jQuery. You can read the original post by clicking here. What we have decided to do is expand on the previous idea to allow the detection of a face in an image, and then subsequent image modifications using CSS and jQuery. The modifications via CSS can then be saved from the canvas. The saving of the image we will reserve for the 3rd part of this series of posts. In the previous post, we used php and a php extension to detect a face, and additionally detect facial features like eyes, nose and mouth (if possible). This is accurate most […]

Detecting faces in your images with PHP , Javascript and jQuery

Hello! In some scenarios with web application development it may be necessary to be able to detect the facial features of a photo. For example an application that detects how many people are in a picture, or perhaps an app that modifies the faces of the people in a photo. Whether you’re making a mobile app or a web application that does this, there are many methods to use. There is 3rd party API services such as Face Recognition API. In our scenario we wanted to build an interface where images could be uploaded via a POST and the X and Y coordinates of the face, eyes nose and mouth regions plotted or returned as a json response. This way if you wanted to build a mobile and web application, they could both use the detection service to return the plot points in a centralized way. We decided to test […]

Convert text to an image with Javascript and HTML5

Hello! Working with frameworks like Django and with CMS’ like Drupal and WordPress we come across a wide variety of requirements for manipulating, sanitizing and importing data from all different sources and formats. Recently we had the requirement to take a text field that was defined in a Django model and convert that text string to an image. There are many reasons for this type of requirement. You could argue that this requirement would be the first (of many) steps towards implementing your own custom captcha solution. Well we did some research and found some solutions out there and implemented it our self in Django and we thought we’d share here as well! I’ll go through each of the components necessary to implement this. This type of implementation can very easily be integrated into WordPress or Drupal through a custom module or custom plugin or function perhaps. Additionally you can […]

Javascript : Inject HTML Into a page without being disruptive

Greetings! Occasionally it comes up in a project, for many different reasons, to utilize javascript or jquery in a user interaction or user interface design scenario. Usually, with javascript, this can be found in the form of an onmouseover() or onmouseclick() query. Sometimes logic has to be maintained where if certain conditions are met such as a language preference or country of origin, that such choices must change elements or change behaviors within a website. In this scenario, where text or html has to be rewritten after said conditions are met, we have found that the best way to non-destructively dynamically update a page with javascript is to merge a CSS identifier and javascript html insert command : First you will want to identify where on the page you want the update (text or otherwise) to happen :     Then , usually in thetag or wherever appropriate, you define […]