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 […]

WordPress plugin for a mobile friendly sticky navigation menu

Hello! Creating a unique, original and flexible navigation menu in WordPress can be challenging. There are many commercial and free plugins out there to establish navigation systems, however many of the commercial options seem to be “overkill” providing many bloated options with embedded CSS that can be difficult to adjust by a novice user. What we wanted to do is put together a very simple and clean navigation menu that sticks to the top of the screen and is mobile friendly in a simple yet flexible way. We created a plugin, which you can view by clicking here, to do just that! The plugin utilizes FontAwesome, Modernizr, Google Fonts and CSS from Codyhouse to put together a simple and clean navigation menu solution. Below I’ll walk through the different components that went into this plugin in order to tie everything together in an easy to use solution. Register settings to […]

WordPress plugin to integrate your Facebook page feed

Hello! We have created yet another WordPress plugin! We are highly motivated to roll out any and all WordPress custom development as a neatly packaged plugin for the general public to use. We have many more ideas and many more plugins in the works. Check out the plugin hereThis latest plugin, recently approved by the WordPress plugin auditing community, pulls your Facebook page’s feed and injects it into your site anywhere (by use of a simple shortcode). As with other similar Facebook plugins, this plugin requires you to generate a simple Facebook app with API key/secrets in order to connect and pull the data. The plugin utilizes the PHP Facebook SDK in order to connect and pull the data. I’ll walk you through the different parts of the plugin’s code, however if you’re interested click the SDK link to read more about how the Facebook SDK works. Load Facebook’s SDK […]

WordPress plugin to create animated full screen modal flyouts

Hello! We have recently created & submitted our first official WordPress plugin : Shift8 Modal. This is a relatively straightforward plugin that integrates the animatedModal jQuery library into WordPress as an easy-to-use shortcode. Submitting our plugin to the WordPress plugin directyl took roughly 7 days to complete. WordPress has pretty straightforward (though sometimes changing) development policies, standards and best practices to follow. Once approved, a WordPress team member provides SVN access to submit / commit your code to the plugin directory. This plugin is pretty simple in terms of what it does, but I’ll break down what it does. Load animatedModal.js and Animate.css The animatedModal library makes use of the (popular) Animate.css library as well. So we’ll need to load both as an enqueue within the plugin : // Load Animated Modal function shift8_modal_scripts() { wp_enqueue_script( ‘animate-js’, plugin_dir_url( __FILE__ ) . ‘js/animatedModal.min.js’, array(), true ); wp_enqueue_style( ‘animate’, plugin_dir_url( __FILE__ ) […]

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. […]

Create a custom mobile and tablet friendly dropdown menu in WordPress

Hello! In our many instances where we are developing, designing and deploying a WordPress site for a client, it is a constant necessity to implement a mobile / tablet friendly dropdown menu. Because this happens often, we have developed a “starter” mobile menu for our WordPress implementations. We prefer to create a CSS based responsive mobile menu from scratch instead of using an out-of-the-box plugin because although the commercial (or free) WordPress menu plugin may make it much easier to roll out a mobile menu, as soon as the client comes to us with requests for customization, changes, positioning and styling it can become problematic. This is because often times a WordPress plugin such as Superfly or Uber Menu will have their own stylesheets that are prioritized and sometimes difficult to override. This is also true with the built in jQuery effects such as slideouts, fade-ins and anything along those […]

Create self-populating ajax drop-down forms in Drupal with the Form API

Hello! At risk of making the title of this post a mouth full, I thought I’d share some of our experience with interacting with Drupal’s Form API (Specficially Drupal 7.x). There is a lot of documentation on different ways you can interact with the Form API to accomplish a wide range of tasks from collecting information, processing information or building complex search queries. The latter is where we ventured in our most recent work interacting with Drupal’s Form API. We worked on a project where the requirement was to build a drop-down based filtration system where content category choices in the drop-down boxes would auto populate dependent taxonomies based on the relationship of the taxonomies , content fields and content in general. After choosing all the drop-down boxes, the end-user would then be able to click a “Go” button to build a list of results that apply the selected filters. […]

Use jQuery and CSS to make a sticky navigation menu

Hello! Some may argue that sticky navigation menus (menus that are fixed at the top or bottom of the page as you scroll) are a fashionable web design style. Whether or not its a “fad”, having a navigation bar that is fixed as you scroll throughout the the site is advantageous. This is especially so when you have a page that has a lot of content to scroll through. Keeping the navigation front-and-center as the end-user browses throughout a site will ensure a smooth user experience. Having elements “stick” as you scroll doesn’t have to be just within the context of navigation. You might want to have a sticky newsletter signup, sales chat window or even an e-commerce “cart” block or widget. We thought we would share a simple example that can be injected into any CMS or flat file template. The example includes HTML to generate the menu content […]

Ajax Long Polling to your RESTful API

Hello! Whether your developing a mobile or web based application, keeping on top of constantly changing data is a challenge on its own. Sometimes its necessary to make repeated calls to your API to pull updates at regular intervals. We wrote a previous blog post describing how to use Ajax to pull JSON data via a RESTful web API (click here to read it). Somewhat extending that sentiment a bit, we would like to walk through the process of creating an Ajax “polling” process that repeatedly polls the API to pull data over and over again. This will allow you to receive, process and manipulate or display the data as it changes. The context through which we are using this process is to display changes made to a google map via geo-location updates to a centralized API server that processes updates and returns them to the end users. This particular […]

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). […]