AaronTGrogg.com

• Personal blog: aarontgrogg.com

  Place to catalog and share findings from around the web and personal "tricks".

  • WordPress-based, custom mobile-first, responsive theme
  • Primary focus is on UX, especially web performance
  • Grunt for HTML, CSS, JS, and SVG minification to improve FCP
  • Grunticon for SVG optimization and PNG fallbacks
  • Git for repo syncing and version control
  • Smush-it plugin to optimize media assets as uploaded
  • <img srcset> to reduce download bandwidth for the user
  • Site caching plugin installed & configured to reduce TTFB
  • DNS pre-fetch to reduce external asset latency
  • .htaccess cache controls to reduce browser requests
  • Anonymized Google Analytics for site flow tracking
  • GDPR compliance

AdvantiPro GmbH

• Company website: advantipro.de

  Our company's first impression, utilizes WordPress, a responsive theme and customized child theme. We went for a fast-loading, light feel, highlighting our products, guiding the user to our MediaKit, initiating our automated sales workflow.

  • WordPress, mobile-first, responsive theme, customized child theme
  • Smush-it plugin to optimize media assets as uploaded
  • Site caching plugin installed & configured to reduce TTFB
  • DNS pre-fetch to reduce external asset latency
  • .htaccess cache controls to reduce browser requests
  • Anonymized Google Analytics for site flow tracking
  • GDPR compliance

• USAG Bavaria App: bavariannews.com/app

  Custom headless SPA built onto existing WordPress, after converting to multisite, ported into a Native WebView, deployed to Apple & Google app stores. Employs AppCache because project scope required both iOS support and offline capabilities.

  • WordPress, custom mobile-first, responsive SPA theme
  • All app content ported to JSON file
  • AppCache used to download and store static assets, including content JSON
  • Page-load checks for fresher content, downloads if necessary, sets up in-page app navigation
  • Content updates add to history stack, update title, refresh ad, and notify Google Analytics
  • SVG icons for scalability and to reduce network requests
  • Site ported to GoNative app builder for inclusion into Apple & Google app stores
  • Google Analytics tracks in-page events, such as menu opening, Setting updates
  • Anonymized Google Analytics for site flow tracking
  • GDPR compliance

Netbiscuits GmbH

• Company website: netbiscuits.com

  The company's first venture into responsive design, and WordPress, for its company website, we created an adaptive site by incorporating the company's Device Detection product to make server-side decisions such as: whether users should receive SVGs, PNGs or filtered PNGs; whether to link the company's telephone number, and which telephone number to link to, based on geographic location; which video format and quality to offer based on the user's bandwidth; what size images to embed into the page based on the user's screensize; and apply device-specific CSS and JS fixes based on the data-attributes we added to the html element.
  (resource no longer available)

  • WordPress-based
  • Mobile-first, Responsive / Adaptive Design techniques for a cross-device, single site
  • Netbiscuits' Device Detection for server-side adaptive decisions and device-specific modifications
  • Advanced Custom Form WP plugin for custom content types & layouts
  • jQuery & plug-ins for custom navigation menu and parallax effects
  • LESS for easy, maintainable CSS
  • Grunt for CSS, JS, and SVG minification
  • Grunticon for SVG optimization and PNG fallbacks
  • Git for repo syncing and version control
  • Jenkins for Continuous Integration and Deployment

• Mobile Analytics product website: (resource no longer available)

  This site does require that you create an account; it is free and quick to do so. Once inside, you can see not only the power of the Netbiscuits Analytics product, but also the dynamic SVG charts and interactivity that was created to allow our customers to see who their visitors are, what device, OS, browser and version they used, where and when they visited their site, what they did while they were there, and more.

  • Single-page app
  • Responsive Design techniques for a cross-device, single site
  • jQuery & plug-ins for customized date picker
  • Bootstrap for quick start and consistent UI
  • Customized Highcharts libraries for SVG charts
  • LESS for easy, maintainable CSS
  • Grunt for CSS, JS, and SVG minification
  • Git for repo syncing and version control
  • Jenkins for Continuous Integration and Deployment

• Internal Account Management portal: (resource no longer available)

  This site does require that you create an account; it is free and quick to do so. To allow our customers to create and maintain their own account users, profiles, settings and code bases, we created a customer-facing account management portal. Based in Thymeleaf and using Bootstrap for quick stand-up, customers can: create accounts; add users; set authorization levels; upgrade their accounts, including payment; configure and customize their tracking code; and gain access to, and copy, their customized tracking code base.

  • Thymeleaf-based
  • Responsive Design techniques for a cross-device, single site
  • jQuery & plug-ins for customized form validation and copy-to-clipboard capability
  • Bootstrap for quick start and consistent UI
  • LESS for easy, maintainable CSS
  • Grunt for SVG optimization and CSS, JS, and SVG minification
  • Git for repo syncing and version control
  • Jenkins for Continuous Integration and Deployment

People.com

• Tablet-optimized website: (resource no longer available)

  A new version of People.com, optimized for touch-devices, including page-like sections, swiping from section-to-section, interactive content, rich media, and curated search. The goal of this is to improve the user experience on touch devices and hopefully integrate such interactivity in the full website.

  • Incorporate all JS into single file to reduce HTTP Requests
  • Use of image sprites to reduce HTTP Requests
  • Object-oriented JS
  • JSON/P
  • jQuery + plug-ins to integrate custom swipability on touch and desktop devices
  • Tablet-oriented project scope allowed for -webkit-transitions & -transforms in place of JavaScript animations, but also works in desktop WebKit browsers
  • Caching of variables/elements for improved performance
  • Ajax content & images for fast page load
  • Use of "#" for deep-linking
  • Dynamic ad and tracking loading and refreshing on content transitions

• 2011 Academy Awards interactive second-screen trivia game: (resource no longer available)

  During the Awards show, users on their tablet device would received "Fun Facts" and trivia questions in-synch with the show, as it happened. The goal was to improve brand exposure and increase user-base tie-in with event. Traffic was fair, but suffered from the limited browser scope; functionality has since been added to open it to all browsers.

  • Incorporate all JS into single file to reduce HTTP Requests
  • Use of image sprites to reduce HTTP Requests
  • Object-oriented JS
  • JSON/P
  • jQuery
  • WebKit-only project scope allowed for -web-kit transitions & -transforms in place of JavaScript animations
  • Caching of variables/elements for improved performance
  • Use of cookies to track game status & score
  • Polling feature for syncing of content publishing
  • Use of CSS classes to drive "state" of game, reducing JS/DOM interaction
  • Ajax content
  • Dynamic ad and tracking loading and refreshing, including video ads during commercials
  • Oversaw development of, and integration with, custom CMS

• Photo gallery "Ajaxification": (resource no longer available)

  Converted page-refresh gallery into Ajax-refreshed gallery. The goal was to increase page views and improve user experience. This project has been dramatically successful, increasing page views by a whopping 40%, and has since been adopted by other Time, Inc. sites.

  • Object-oriented JS
  • JSON/P
  • jQuery
  • Caching of variables/elements for improved performance
  • Galleries are build to function without JS, via full page refresh, but progressively-enhanced if JS is available
  • Ajax content & images for fast page refresh
  • Use of "#" for deep-linking
  • Dynamic recirc, ad and tracking loading and refreshing
  • Integration with social linking
  • Implementation of Tagging Tool (see below)

• Photo gallery Tagging Tool: (resource no longer available)

  Built custom CMS to allow editorial staff to create "hot spots" & images zooms for gallery images. Also created JS retrieval and implementation of the hot spot tags. The goal was to improve user immersion and, with limited editorial use, it has been successful. This work has since been adopted by other Time, Inc. sites.

  • Object-oriented JS
  • JSON/P
  • jQuery
  • Caching of variables/elements for improved performance
  • Allow editorial staff to entire gallery slide URL
  • Ajax image from specific slide, displaying in-page
  • Staff can drag over image to create hot-spot
  • Then enter content for that hot-spot to reveal, such as headline, deck, and image URLs
  • Clicking Save creates JSON/P file on server
  • Above gallery JS fetches JSON/P and adds interactivity to page

• Photo gallery "stitching": (resource no longer available)

  Allows editorial staff to "stitch together" several galleries, so, as a user gets to the end of one gallery, the "Next" button takes them straight to another editorially-associated gallery. The goal was to increase page views and improve user immersion. This work is used frequently and has since been adopted by other Time, Inc. sites.

  • Object-oriented JS
  • JSON/P
  • jQuery
  • Caching of variables/elements for improved performance
  • Ajax content
  • Provide content-aware direction to user regarding upcoming and previous gallery notifications

• Twitter widget: (resource no longer available)

  Dynamic widget that can be placed on any page, fed various feed parameters, and display the desired number of tweets from various people followed by People.com. To get around Twitter's max-hits-per-hour, created an in-house fetch-and-cache system (details below). The goal was to increase user immersion. This widget has been successful and has since been adopted by other Time, Inc. sites.

  • Object-oriented JS
  • JSON/P
  • jQuery
  • Caching of variables/elements for improved performance
  • Allow editorial staff to create Lists of Followers within Twitter
  • Built WordPress interface that fetches the feeds from Twitter and creates JSON/P files
  • JSON/P files are cached every 10-15 minutes from WordPress onto People.com servers
  • Cached JSON/P files are Ajaxed into page

• Performance optimizations and site enhancements: (resource no longer available)

  • Added HTML5 Boilerplate recommendations, where possible
    • HTML5 DOCTYPE
    • IE-Conditional Comments around html
    • Custom Modernizr
  • Rewrote all site CSS
    Global CSS: (resource no longer available)
    Home-page CSS: (resource no longer available)
    • Researched declarations to determine if still needed and where it is used
    • Removed no-longer-used declarations
    • Moved lesser-used declarations to unique files
    • Introduced CSS reset to global CSS file
    • Rewrote remaining declarations to reduce selector specificity and removed declarations made obsolete by reset
    • Replaced numerous images with CSS3 declarations, retaining image declarations for fallback
    • Converted numerous images to sprites, storing as PNG8s
    • Converted existing GIF sprites to PNG8s
    Sample Results:
    • Reduced Global CSS file size from 70.3kb to 19.6kb
    • Reduced Home-page CSS file size from 43.4kb to 26.4kb
    • Above results were relatively consistent throughout other site CSS files

Responsive Test Environment: https://aarontgrogg.com/rte/

• Developed a responsive development testing environment, allowing developers to check pages in multiple breakpoints with a single click

Practical CSS3: https://aarontgrogg.com/practicalcss3/

• Researched, developed and maintain Practical CSS3, a guide for which CSS3 features you can use today and how to implement them, cross-browser

WordPress Themes & Plugins:

• Developed and maintain a WordPress Theme and Plug-in based on HTML5 Boilerplate
  • https://github.com/aarontgrogg/wp-theme-html5-boilerplate
  • https://wordpress.org/extend/plugins/html5-boilerplate/
• Developed and maintain a WordPress Plug-in that cleans extraneous classes and adds semantic IDs and classes to navigation menus
  • https://wordpress.org/extend/plugins/navigation-menu-ids-classes/
• Developed and maintain a WordPress Plug-in that, when in Admin, adds classes to the body tag to reflect which Page or Post type you're viewing in Edit-mode
  • https://wordpress.org/extend/plugins/add-custom-post-type-slugs-to-admin-body-class/
• Developed and maintain a WordPress Plug-in that takes a page's URL, chops it into pieces, and adds each "piece" as an additional class to the body tag
  • https://wordpress.org/extend/plugins/add-url-slugs-as-body-classes/

⇪