← back to work
Oracle
2017-2019

Front End Web Developer

Oracle Bozeman, Montana

Interactive Architecture

  • OCOM Framework provides a centralized point for component Javascript execution. This increases performance by reducing the amount of scripting and event listeners on any given web page by only executing those discovered in the markup. An additional advantage is the ability to run component code within a specified context (eg. after ajaxing a component into the page, or generating markup via Handlebars) without affecting other on page elements or leaking out of scope.
  • SVG Animation Container is a framework for dynamically loading SVG assets and executing Javascript animations written in TweenLite. The framework provides for specifying alternate SVGs for responsive viewports and handling translation of live text on the fly with a JSON translation file, thereby greatly reducing the work of deployment of custom SVG assets across international sites.
  • Oracle Performance is a script to gather real-user metrics across oracle.com codebases and pages. By tapping into the window.performance API, it aggregates page load, resource, component code execution, and hero image paint timings to send statistics to Analytics.
  • Home Page 4.0 brought notable performance improvements to the main entrance page to oracle.com across all international sites. By using a combination of non-blocking assets and concise inline Javascript, time to first paint for the main hero section drastically improved.

Components

  • Global Nav Unification is an overhaul of existing U02 header navigational component, which integrates a new Local Nav layer for use across oracle.com subdomains. A major rewrite of Javascript creates a more modular system that can be extended more easily to Local Nav functionality. CSS was audited and updated to use a more efficient flexbox model, and more performant selectors and transitions. Keyboard navigation, better touch handling and RTL compatibility were improved.
  • Dynamic Components consume JSON feeds for blogs, with intelligent content parsing to standardize synopses from a variety of content; customer stories and marketing resources which take advantage of Handlebars' efficient templating system to render fresh content without additional publisher intervention.
  • Core Forms normalizes Oracle forms across browsers and devices with a robust container framework, intuitive required and pattern matching notices, accessibility improvements, dependent select controls, and custom control elements and animations.
  • Global Promo Banner allows for injection of a site wide announcement across oracle.com pages via a centrally managed JSON file. Publishing can set multiple announcements ahead of time, to be shown in order of expiration (eg. pre-event, event, post-event). To reduce network requests and improve performance, the data is stored in browser storage.
  • Lightbox updates included the ability to run ajaxed components within the container, thanks to OCOM framework integration. Dynamic sizing of iframe content is handled with MutationObserver. Additionally, a lightbox-gallery can be generated on the fly from a container of images by simply adding a classname to the container.

Code Services

  • Styles Loaded is a Promise based callback interface to wait until non-blocking CSS assets have loaded before executing a callback. When using non-blocking (async) web page asset resources, it is often necessary for Javascript code to wait until CSS rules have been applied, before doing any calculation/manipulation on those styles.
  • WordmapIds, PDITLocaleMap are utility frameworks for fetching JSON files and creating lookup objects for dynamic assignment of content text. These also leverage browser storage for improved performance, and can be utilized across other component code.

Utilities

  • Publishing Guidelines project provides a simple, GUI-based way for UX-Ops members to interact with the Web Standards SVN repository to write and update component guidelines in Markdown syntax, which Web Standards consumes and integrates into component documentation.
  • Various jQuery Plugins more easily and consistently accomplish routine tasks like equalizing heights of elements, using CSS transitions for height instead of Javascript, and checking if an element is within the viewport.
  • Flexbox Mixin creates a standardized way to use flexbox across all browsers, including the non-standard implementation by IE10. By using a simple SASS mixin, developers can be confident that their CSS will work in older browsers.