DEPTH DEVELOPMENT

Web development from the surface–down


































Adam Carson

Adam is the owner of Depth Development. He's a fun, social, corporate front-end web developer. Off the clock he's a freediver and mountain biker. A family man by day and a full-stack dev by night.

Depth Development builds:


































Top

News

  • Suunto Vertical Blue 2016 competition site is live!

    The 2016 Suunto Vertical Blue competition site is live at 2016.verticalblue.net!

    Join us live on the dock at 2016.verticalblue.net April 22nd - May 2nd!

  • New Branding and Look of Clearwave Designs to Depth Development!

    As Clearwave Designs rapidly became more focused on development than design, it became necessary to rebrand it. Depth Dev/Development is about building web site ideas from the visual surface of user interaction and visual branding, to the core engines of JavaScript frameworks, libraries, plugins and many server side technologies.

    DepthDev.com screenshot
  • Suunto Vertical Blue 2015 competition site launched!

    This year's VB2015 competition at Dean's Blue Hole, Bahamas is now posted live at http://2015.verticalblue.net. The 9-day event starts in one week, April 27th, 2015!

    Suunto Vertical Blue 2015 website screenshot
  • BuoyantJS Web App Launched

    The new BuoyantJS web app and documentation is now available at http://depthdev.com/buoyantjs/!

    The BuoyantJS versioning was reset to version 1.0.0. after several major adjustments and major enhancements.

  • BuoyantJS v1.0.3 (Framework & Library) released.

    Code-breaking syntax change on the "css" method.

    You now provide a property and value as two separate parameters (milliseconds as optional third), or provide an object as the first parameter (milliseconds as optional second).

  • BuoyantJS v1.0.2 (Framework & Library) released.

    Added an "off" method to remove listeners (included delegated listeners)

    Fixed scope of event delegation on the "on" method

    Fixed scope of the "find" method

    • 16KB Minified (15.4KB)
    • BuoyantJS Framework (only) 7KB (6.92KB)
    • BuoyantJS Library (only) 9KB (8.59KB)
  • BuoyantJS v1.0.1 (Framework & Library) released!

    BuoyantJS is no longer in beta and was released today on this website and the code editor.

    • BuoyantJS 15.1KB minified
      • BuoyantJS Framework (only) 7.43KB minified
      • BuoyantJS Library (only) 7.85KB minified
    • The BuoyantJS framework has had tremendous changes including:
      • Simplified controller syntax
      • Clean URL on single-page navigation with back-button support
      • Independent controllers including ones outside the view
      • AJAX with two-way data-binding
      • For each data-binding
      • Simplified JSON handling (stringification is automatically performed when AJAXed)
      • Any namespace/prefix can be used in the markup

    BuoyantJS will be fully documented in the next several weeks on the BuoyantJS page.

  • Major Version Update to the BuoyantJS Framework

    BuoyantJS was pushed to production today with some new features:

    • The entire framework (library included) is only 13KB!
    • Minification/uglify proof
    • Simplified Controller and Model/Script integration
    • Ideal handling of views/HTML
    • Routing
      • Instant view & model change using the controller on link click
      • Vanity URLs
      • Support for hash and hash-bang
    • AJAX/HTTP now supports
      • text, HTML, JavaScript, JSON, and XML
      • GET/POST
      • success, error, and finally callbacks
    This version requires a slightly different syntax for adding controllers.
  • BuoyantJS framework handles as many MVC's as you want!

    BuoyantJS was pushed to production today with some new features:

    • Only 9K minified! The entire framework with D.O.M. querying/manipulation and this new MVC two-way data-binding is only 9KB!
    • Supports the full MVC pattern now! (NOTE: You can survive minification if you stringify the MVC property names on the MVC object)
    • You provide your own Model (script), View (markup) and Controller (scope name)
    • Run (and/or re-run) any controller at any time! (NOTE: multiple MVC's on a single page are not allowed, but can be swapped instantly!)
    • Performance enhanced just a tad
    This version requires an implementation change using an object with the MVC properties versus the controller and script arguments only.
  • BuoyantJS Framework w/ Repeating Content (which includes data-binding)!

    BuoyantJS was pushed to production today with repeating content (which includes data-binding)!

  • BuoyantJS Framework w/ Event Listners on Markup!

    BuoyantJS was pushed to production today with attibute listeners of "click," "keyup," and "change"!

  • BuoyantJS Framework w/ Event Delegation

    BuoyantJS was pushed to production today with event delegation!

    Example syntax: $('body').on('click', 'input', function() { $(this).css('background:#08f'); });

    See the BuoyantJS page here for more info.

  • BuoyantJS Framework w/ Two-way Data-binding!

    BuoyantJS was pushed to production today for this site only with the new two-way data-binding features and ability to use endless controllers!

    See the BuoyantJS page here for more info.

  • FlagstoneJS released!

    FlagstoneJS is a reponsive tiling plugin, ordering HTML elements from left to right and filling in where there is the most available space.

    Demo it here or on Github.

    FlagstoneJS screenshot
  • BUOYANT.JS (framework)

    The Buoyant framework (BuoyantJS), is a DOM and data-binding framework originally built for this site.

    See the BuoyantJS page here for more info and try it yourself on the editor!

    This was built last year about the same time and has since been added on to, and cleaned up. Currently, event delegation and data-binding is being added.

    The syntax and method naming conventions mostly match jQuery as to not confuse coding between similar libraries. I've never read the jQuery code, but it appears to work the same way.

    This framework currently has:

    • 30+ methods (including setters/getters)
      • on
      • each
      • find
      • addClass
      • removeClass
      • toggleClass
      • fadeIn
      • fadeOut
      • css
      • parent
      • child
      • children
      • siblings
      • prev
      • next
      • html
      • text
      • val
      • selectedIndex
      • attr
      • removeAttr
      • focus
      • remove
      • width
      • height
      • length
      • exists
    • AJAX
    • Data-binding (in development)
  • WILLIAMTRUBRIDGE.COM LAUNCHED!!

    Updates:

    • The new fully responsive williamtrubridge.com was launched today!
    • Brand new gallery that's mobile friendly now!
    • Huge improvements overall on mobile phones.
  • EVENTS.VERTICALBLUE.NET & ARCHIVE.VERTICALBLUE.NET LAUNCHED!!

    Updates:

    • The new fully responsive events.verticalblue.net was launched today!
    • Brand new gallery that's mobile friendly now!
    • Huge improvements overall on mobile phones.
    • The new archive site for Vertical Blue was launched housing a single location for all archived news.
  • VERTICALBLUE.NET LAUNCHED!!

    Updates:

    • The new fully responsive verticalblue.net was launched today!
    • Fully responsive – so it fits on every device.
    • Huge improvement on mobile phones.
    • Added a wave effect to the page links.
  • SCHOOL.VERTICALBLUE.NET LAUNCHED!!

    Updates:

    • The new fully responsive school.verticalblue.net was launched today!
    • Fully responsive – so it fits on every device.
    • Huge improvement on mobile phones with background and diveline navigation!
  • VERTICAL BLUE TEMPLATE & depthdev.com v3.2

    Updates:

    • The new template framework for the Vertical Blue sites is complete!
    • Added syntax highlighting for the code editor which was incredibly time consuming and crazy complicated.
  • depthdev.com v3.1

    Today's updates:

    • Made the code editor have a dark theme to help eliminate any confusion between that and the blog code editor.
    • Ironed out some of the methods in the depthdev.min.js JavaScript library and also built some new ones.
    • Added some more S.E.O. to this site.
    • A rework on the Vertical Blue websites begins today!
  • depthdev.com v3.0 OFFICIAL PUBLIC LAUNCH!

    Today's updates:

    • Added download functionality for snippets made in the code editor.
    • The website is print-friendly now.
  • depthdev.com v3.0b released

    What seems to be the last major updates, I've fixed a couple bugs and enhanced the sight with a few new features:

    • Blog/tutorials will now have examples via a button that populate a blog code editor for instant viewing and experimenting!
    • Modal for external sites
    • Fun and useful "404 File Not Found" page.
    • Bug fixes on mobile
  • clearwavedesigns.com v3.0a released

    First public beta release of the new version of depthdev.com!

    The blog page is completely under construction, but the rest are very usable.

    Notable features are:

    • Built with a custom made JavaScript library from scratch near identical to jQuery!
    • Live Code Editor which is also responsive!
  • "Live Window Size" Google Chrome Extension development complete!

    This is an awesome extension that will be made available here and on the Google Chrome extensions page when open source approval is given to release it to the general public.

  • VB2013 freediving competition site launched

    The Vertical Blue 2013 freediving competition site was the largest responsive stats site I had made to-date. This site's statistics were dynamic and allowed for instant updating in a very friendly responsive mobile layout for William Trubridge on the diving dock.

    • Fully esponsive stats/website
    • Dynamically updated during the competition
    • Slideable navigation using the "dive line"
    • Animated graphs on the overall results page

    The competition ended suddenly with the most unfortunate death of Nicholas Mevoli whose image and stats can be seen on the site with a simple memorial.

Developer Résumé

I'm Adam Carson, owner/developer of Depth Development—a full stack custom web development & design company; a front-end web developer for The Church of Jesus Christ of Latter-day Saints where I specialize in responsive and dynamic web apps; and formerly, a part-time web development instructor for the Salt Lake Community College.

I'm the author of BuoyantJS– an MVC two-way data-binding framework, and DOM manipulation library.

Highlights

  • This website itself. Though it's simplistic looking by design, here are a few notable features:

    DEPTH DEVELOPMENT

    WORTH NOTING: This site is pretty outdated, so the code won't be exemplary of my best practices.

  • The JustServe website (frontend only with AngularJS), which is an international site for the posting and volunteering of service projects.

    Though not a Depth Development project, I'm the sole front-end developer on this project during my day job.

    JustServe.org
  • 15X world record holder William Trubridge's:

    William Trubridge
    Suunto Vertical Blue 2015 website screenshot
    Vertical Blue
  • The $1 Billion, world-wide Melaleuca®, Inc.'s MELATRACKER for all call centers enabling the tracking and reporting of time on/away from the phones, product knowledge game and many personalizations like custom backgrounds. NOTE: this hyperlink is for the company site of which I did not build, but only included here for business verification.

    MelaTracker
  • The Code Editor. Responsive, live, code editing and exporting.

    The Code Editor
  • JavaScript libraries/plugins on CodePen, here under "plugins," or on Github–made in pure/vanilla JavaScript and jQuery.

    Codepen.io/depthdev
Top

Public Websites:

Top

Private Apps & Websites:

  • Constantly building new responsive–and often heavy–web apps that are limited to administrative access. (This is where I spend most of my time)
  • Several internal or confidential applications/sites
  • DANNEX Pest Control℠
  • Sprite Photography℠
  • Athletic website
  • Production Financial & Goal applications (VBA based)
Top

Coding Languages:

(In order of skill level and preference)

  • JavaScript
    • Building frameworks, APIs, libraries, dynamic web apps, plugins, etc in pure vanilla JavaScript
    • Object-Oriented JavaScript and working early in ES6/7, components, etc
    • AngularJS 1/2 (pure Angular apps and supplemental)
    • jQuery, jQueryUI, jQuery Mobile
    • Babel (for ES6/7)
    • RegEx
    • JSON
    • AJAX
    • 2D Canvas w/ Animations
    • SVG
    • Prefer ternary operations where reasonable
  • CSS
    • Responsive web development (mobile first & all content on all devices)
    • SCSS (SASS)
    • CSS 3, including transitions, transforms and animations
    • Flexbox
    • Typically use a BEM-ish syntax
    • Icon fonts (SVG to glyph)
  • HTML
    • Semantic HTML5
    • Jade
    • SVG
    • S.E.O. (including Schema.org microdata)
    • Accessibility
    • XML
    • Markdown
  • Node.js
    • Front-end
    • Server-side
  • PHP
    • Restful Services
    • Web Apps
  • MySQL
    • Dynamic/database driven content
    • Custom databases & queries
  • VBA
    • Excel-based and compiled applications (partial responsiveness)
  • CLI (Command-line/Batch Files/Registry)
  • JAVA
  • C#
  • VIM (I currently prefer Sublime Text without Vintage Mode)
Top

Workflow

  • Sublime Text code editor
  • HTML5
  • SCSS
  • ES2015/ES6
  • AngularJS 1/2 & jqLite
  • jQuery
  • NodeJS (local and server-side), ExpressJS
  • Gulp
  • Git (previously Subversion)
  • CDN
  • Icon fonts typically used for flat themes
  • Adobe Photoshop
  • Adobe Illustrator only to pull info out for front-end work
  • No longer support IE8, just the latest Chrome, Firefox, Safari, Opera, Edge & IE9+
Top

LinkedIn

My LinkedIn profile.

Intro

BouyantJS is an MVC two-way data-binding framework and DOM manipulation library. It's surface/high-level language approach is geared towards simplicity, as well as what's actually under the hood.

  • Two-way data-binding
  • DOM manipulation
  • AJAX
  • Hash-bang navigation
  • Offline support

Download v1.0.4.20151128:

© 2013-2015 by Depth Development. All rights reserved.

NOTE: Linking to any of these scripts is prohibited. Download a copy with the provided license to host on your own server.

Demo

Demo BuoyantJS here!

NOTE: that only the library will be reasonably usable in that environment.

History

  • BuoyantJS was developed at by Adam Carson in 2013 and received it's most current updates in 2015.
  • Supports single-page web apps via multiple controllers, views and models.
  • Made to develop web apps faster and more simplistically.
  • Encourages a separation of concerns using two-way data-binding and data watching on service calls.
  • BuoyantJS is designed to be used independently of AngularJS and jQuery, though AngularJS may be used with BuoyantJS, and jQuery with the BuoyantJS framework only.
  • Variable "watching" and "expressions" similar to AngularJS would be available, but I have a family and other web apps to attend to. I will likely not develop this feature until ECMAScript 7 with native watching becomes available.
  • BuoyantJS is nearly identical in concept to AngularJS and jQuery, and appears to be written very similarly, so syntactially it will be familiar to most developers. I've never read the code for AngularJS or jQuery; however, from a superficial standpoint it looks nearly identical.
  • There is no intent to compete with AngularJS, nor jQuery. BuoyantJS was made for the fun of the learning and creation process.

Updates

  • The new BuoyantJS web app and documentation is now available at http://depthdev.com/buoyantjs/!

    The BuoyantJS versioning was reset to version 1.0.0. after several major adjustments and major enhancements.

  • Fixed event delegation on/off issues.

  • The new BuoyantJS web app and documentation is now available at http://depthdev.com/buoyantjs/!

  • Code-breaking syntax change on the "css" method.

  • Added an "off" method to remove listeners (included delegated listeners)

    Fixed scope of event delegation on the "on" method

    Fixed scope of the "find" method

    • Simplified controller syntax
    • Clean URL on single-page navigation with back-button support
    • Independent controllers including ones outside the view
    • AJAX with two-way data-binding
    • For each data-binding
    • Simplified JSON handling (stringification is automatically performed when AJAXed)
    • Any namespace/prefix can be used in the markup
  • BuoyantJS was pushed to production today with some new features:

    • The entire framework (library included) is only 13KB!
    • Minification/uglify proof
    • Simplified Controller and Model/Script integration
    • Ideal handling of views/HTML
    • Routing
      • Instant view & model change using the controller on link click
      • Vanity URLs
      • Support for hash and hash-bang
    • AJAX/HTTP now supports
      • text, HTML, JavaScript, JSON, and XML
      • GET/POST
      • success, error, and finally callbacks
    This version requires a slightly different syntax for adding controllers.
  • BuoyantJS was pushed to production today with some new features:

    • Only 9K minified! The entire framework with D.O.M. querying/manipulation and this new MVC two-way data-binding is only 9KB!
    • Supports the full MVC pattern now! (NOTE: You can survive minification if you stringify the MVC property names on the MVC object)
    • You provide your own Model (script), View (markup) and Controller (scope name)
    • Run (and/or re-run) any controller at any time! (NOTE: multiple MVC's on a single page are not allowed, but can be swapped instantly!)
    • Performance enhanced just a tad
    This version requires an implementation change using an object with the MVC properties versus the controller and script arguments only.
  • BuoyantJS was pushed to production today with repeating content (which includes data-binding)!

  • BuoyantJS was pushed to production today with attibute listeners of "click," "keyup," and "change"!

  • BuoyantJS was pushed to production today with event delegation!

    Example syntax: $('body').on('click', 'input', function() { $(this).css('background:#08f'); });

  • BuoyantJS was pushed to production today for this site only with the new two-way data-binding features and ability to use endless controllers!

  • The Buoyant framework (BuoyantJS), is a DOM and data-binding framework originally built for this site.

    This was built last year about the same time and has since been added on to, and cleaned up. Currently, event delegation and data-binding is being added.

    The syntax and method naming conventions mostly match jQuery as to not confuse coding between similar libraries. I've never read the jQuery code, but it appears to work the same way.

    This framework currently has:

    • 30+ methods (including setters/getters)
      • on
      • each
      • find
      • addClass
      • removeClass
      • toggleClass
      • fadeIn
      • fadeOut
      • css
      • parent
      • child
      • children
      • siblings
      • prev
      • next
      • html
      • text
      • val
      • selectedIndex
      • attr
      • removeAttr
      • focus
      • remove
      • width
      • height
      • length
      • exists
    • AJAX
    • Data-binding (in development)
  • Ironed out some of the methods in the BuoyantJS library and also built some new ones.

  • First public beta release of the new version of BuoyantJS!