Projects

Peak Components

March 26th, 2017

Well, another year, another technology stack. The focus of the year is Salesforce, specifically Community Cloud, and even more specifically, Lightning Components. I started full-stack Lightning Component development around Thanksgiving last year and have been eating it up ever since. Once I wrapped my head around the basics I instantly started to see the potential and flexibility of these components. This led to developing dozens of small, utility components that rearrange and stack into large, beautiful tools for quickly building Salesforce communities.

To collect and demo these components, my team and I created Peak Components »

I now serve as the lead developer, salesman, and merge master for this repository of intellectual property and collaborative development.

Backbone Portfolio

March 26th, 2016

A few weeks ago I decided to dive into Backbone.js by rewriting my pretty static web portfolio page as a Backbone app. The first stage of this was to create a static, JSON-powered app which is now successfully being used at http://web.kentheberling.com/. A weekend later, I decided to have a bit more fun and tinker with the app to make the list of entries editable. Now, of course, I don’t want y’all editing my portfolio directly, so I instead forked the main portfolio to use local storage.

The app hopefully is well designed enough to not need much instruction, but the basics are:

  1. The app uses local storage. Each return visit in the same browser should show you where you left off last time!
  2. The app will init with a single portfolio entry if you don’t have any.
  3. You can inline edit existing entries, or use the form to add a new entry.
  4. Trash an entry using the trash icon.

Demonstration: http://kentheberling.com/projects/backbone-portfolio/ »

Code: https://bitbucket.org/asinclarkkent/backbone-portfolio »

Angular Application Form

February 25th, 2016

Ahh, my first truly full-scale Angular project. I built a form engine for reuse across products and projects at 7Summits. The engine provides several Directives for input types, validation messages, and other UI elements like tag pickers. Services provide the ability to receive and send JSON packets of form information, and the Controller tracks progress and provides feedback in real time. All of this can be broken into several steps in a single-page web-app approach, and field information like validation, default values, and more is entirely dictated by incoming JSON.

angular-form

Key Features:

  • Optional multi-part or single-step form
  • Field validation including required, conditionally required, standard HTML5 input validation, and flexible regex options
  • Inline editing for several grouped field objects like User, which is made of the typical email, name, etc contact fields
  • Several grouped or Object-structured values like preferred course selection
  • Tag pickers and on-screen filters for guiding user input
  • And all of this is configured through the incoming JSON and displayed through simple directives!

angular-form-code

* Sorry, but because this was created for work, the code cannot be shared.

Jive Angular Tiles

December 26th, 2015

Tiles are Jive’s preferred method of adding functionality to cloud, and even hosted environments. Each Tile is essentially a single-page web app that an administrator can drop onto overview pages. Tiles interact with the parent Jive environment through a special OSAPI protocol to pull or push JSON-formatted user and content data.

Picking up the amazing Peak JS Angular framework developed by coworkers, I consolidated and refactored our most reusable Tiles from across dozens of client projects. I normalized the coding styles of the various contributors to neatly arrange each Tile into clean Services, Routes, Filters, and Controllers. I also refactored the Tiles’ styles so that a single set of LESS variables will update the tiles en masse.

The value of the library is proving itself project after project as our team is able to drop readily-available Tiles into environments. When creating new Tiles, there is now a clean template and approach to follow. Without a doubt, it’s been a fun and useful project.

Sorry, but because this was built for work, I cannot share the code.

YouTube Widget

October 19th, 2012

Originally developed as a list of thumbnails that display in a Lightbox when clicked, I expanded this plugin to also include an inline video player. The player and thumbnail list use the same set of easy-to-use settings for maximum flexibility and minimum effort. Read the rest of this entry »

Image Scale – jQuery Plugin

January 27th, 2012

(Latest release, v1.0 on 01/27/2012)

ImageScale scales and repositions images into the center of a container div using JavaScript. The plugin aims to reduce maintenance issues when dealing with a fixed content area that needs to handle multiple image sizes.  While JavaScript image resizing isn’t always ideal, this plugin should do the trick when batch image processing is not an available option. Read the rest of this entry »

Instant Validation jQuery Plugin

September 21st, 2010

(Latest release, v2.0 on 10/07/2010)

Instant validation provides users with immediate form validation errors, correcting user input as soon as it’s entered rather than waiting for form submission. The appearance and position of the validation error messages are easily styled through CSS and plugin options. Currently available validation types include required fields, email addresses, phone numbers, zip codes, and numbers, but more will be added!

Read the rest of this entry »

Points of Interest jQuery Plugin

September 9th, 2010

Points of Interest is a jQuery plugin written to replace the once commonplace interactive maps implemented with Flash. Using one image and two unordered lists, the plugin creates over the image clickable areas which display overlay panels of detailed information. Read the rest of this entry »

Vertical Tabs – A jQuery Plugin

June 29th, 2010

(Latest release, v1.1 on 02/09/2011)

VerticalTabs organizes images or blocks of markup into a simple, attractive, and easily styled tab layout. The markup only requires a div and two unordered lists so the plugin degrades gracefully when JavaScript is disabled. This extraordinarily lightweight plugin is ideal for maximizing the content’s impact on the user when screen real estate is at a minimum. Read the rest of this entry »