Developing Ideas

  • Dynamic Alignment with ResizeObserver

    ❤️ CSS3 We love modern web standards. CSS3 APIs like Flexbox and Grid offer robust tools for layout – adept at cleanly handling common scenarios. Still, special circumstances arise. When they do, JS APIs like ResizeObserver are available to bridge the gap. A Card Problem On entry to a client…


  • Towing Guide

    Mavice launched one of its most sophisticated applications for Ford Motor Company ever: a dynamic towing and payload calculator in June 2022. This product answers the age-old consumer dilemma, “What powertrain, build, and truck model fits my towing and hauling needs?” Previously, choosing the correct combination of truck build parameters…


  • Reimagine Ford Vehicle Homepage 1.0

    Mavice partnered with Ford Motor Company to launch a redesigned vehicle homepage for the all-new, electric, 2022 Ford F-150 Lightning truck. The mission was to execute a content-rich, clean experience that evokes an informative, yet emotional, response to the newest and most innovative member of the Ford portfolio. The release…


  • Ford’s Tier 1 Global Vehicle Configuration System Roll-Out

    Problem Ford needed to change the back-end vehicle data configuration engine and services to handle current and future business needs. The vehicle data configuration engine populates product-correct vehicle data and pricing information to downstream marketing properties. This change impacted the entire Tier 1 consumer-facing application portfolio which would need to…


  • Asking for Help?

    When we ask for help, we run headfirst into the fear that we will be judged for not knowing what we should know.


  • Starting Up

    I recently ran into a bug with my MacBook Pro that caused it to crash every single night. The problem this poses is that I have to start up a number of applications, and open a few terminal windows and issue various commands before I can even start working. While…


  • Extend a Component

    *This article was modeled from the current Adobe React SPA documentation. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Understanding how to extend an existing component is a powerful technique to customize and expand the capabilities of an AEM SPA Editor implementation. Objective…


  • Create a Custom AEM Vue Component

    *This article was modeled from the current Adobe React SPA documentation. Create a Custom WeatherComponent Learn how to create a custom weather component to be used with the AEM SPA Editor. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. The Open…


  • Map SPA components to AEM components

    *This article was modeled from the current Adobe React SPA documentation. Learn how to map Vue components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring….


  • Integrate a SPA

    *This article was modeled from the current Adobe React SPA documentation. Understand how the source code for a Single Page Application (SPA) written in Vue can be integrated with an Adobe Experience Manager (AEM) Project. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA…


  • Create your first Vue SPA in AEM

    *This article was modeled from the current Adobe React SPA documentation. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). This tutorial walks through the implementation of a Vue application for a fictitious lifestyle brand, the WKND. The Vue app will be…


  • Vue SPA Editor Project

    *This article was modeled from the current Adobe React SPA documentation. Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for a Vue application integrated with the AEM SPA Editor. Objective Understand the structure of a new AEM SPA Editor project built from a…


  • Visualizing the Size of your Vue/React/Angular Bundles

    Knowing exactly what and how much each individual bundle in your project is used can help you optimize your project. If your web application is packaged with Webpack, there are a few ways you can analyze your bundles. Analyzing Bundles There is a handful of third-party packages that will allow…


  • Cherry Picking Your Vue JS Application

    Vue JS is a versatile and performant web framework that allows developers to build small or sophisticated web applications. Paired with the Vue CLI, Vuex, and Vue router, Vue is more than capable of handling a production-level environment. Out of the box, Vue presents some pretty impressive numbers, but of…


  • Create a Personal WebXR Gallery

    This series will develop a locally-hosted WebXR gallery experience using Babylonjs. Each entry concludes in a progressively more detailed WebXR gallery that you can access in your headset’s browser. You’ll need both a desktop/laptop computer and a WebXR-enabled headset, which in December of 2020 means a desktop VR rig or…


  • Creating a Kaltura Component for AEM

    Recently we were offered the challenge to integrate an AEM implementation with the Kaltura Media Platform, so we dove in and rose to the challenge.


  • AEM & Syndicated Components: Quick Tips to Avoid Pitfalls

    An increasingly common use-case for enterprise web implementations is the need for components that support the ability to be displayed in context within a site, but also syndicated for consumption by third-party web applications.


  • AEM: Caching with Service Workers and Google’s Workbox Library

    Caching has become a norm in pretty much all modern web applications. Caching static assets improves the load time of web applications by reducing the calls that it needs to make to retrieve resources, and by also reducing network congestion.


  • Mobile Optimization Strategies Collaboration with Google

    Mavice & Google collaborated on mobile optimization strategies for Ford Motor Company earlier this month at the Spruce Goose Hangar.


  • AEM: Auto-Reloading your browser on JS, HTML, and CSS changes using Gulp and BrowserSync

    Live Reloading has become a norm in the day to day development of modern web applications. With the help of Live Reloading, many developers save time and are able to focus more on development by avoiding the build process with each change to a static file that is served.


  • Debugging Your AEM 6.4 Application in IntelliJ

    During development, debugging your application can be very useful in determining the location of defects, evaluating expressions and understanding the overall flow of the application.


  • Ford.com AEM Launch

    In 6 months, Mavice concepted, architected, prototyped, user-tested, developed, QAed and deployed this industry leading AEM Brand Site experience.


  • AEM & AngularJS Build and Price

    In 12 months, Mavice concepted, designed, architected, prototyped, user-tested, developed, QAed and deployed this industry-leading AEM and AngularJS Build and Price solution across all Ford nameplates and segments, including commercial.


  • YP Business Solutions

    YP engaged us to completely reimagine their website from the ground up. Initial CT rates increased by 42%!


  • Custom AEM CMS Vehicle Data Management

    A custom CMS within AEM to support a Global content syndication strategy for Ford.


  • AEM & AngularJS Needs-Based Showroom

    Improved customer experience and maintenance for Ford’s need-based showroom with completely data-driven UI.


  • Global, Reusable AEM Components

    Mavice developed components that can be reused across applications and locations, simplifying authoring across multiple brands.


  • Mavice Hot Ones Challenge

    Can you take the heat?


  • Hi5 Employee Recognition

    Turn recognition into a game! Our Hi5 app makes it easy and fun to build and maintain a positive company culture, increase employee satisfaction and reduce turnover.