This involved creating a responsive animation grid and a combination of CSS and JS animations.
View the animation »
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.
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:
- The app uses local storage. Each return visit in the same browser should show you where you left off last time!
- The app will init with a single portfolio entry if you don’t have any.
- You can inline edit existing entries, or use the form to add a new entry.
- Trash an entry using the trash icon.
Demonstration: http://kentheberling.com/projects/backbone-portfolio/ »
Code: https://bitbucket.org/asinclarkkent/backbone-portfolio »
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.
- 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!
* Sorry, but because this was created for work, the code cannot be shared.
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.
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 »
(Latest release, v1.0 on 01/27/2012)
(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 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 »
(Latest release, v1.1 on 02/09/2011)