Hi, my name is Aaron.
Since starting with the web in 1998, I have developed a track record of clean, efficient, reliable work.
After starting my career with carefully crafting mobile-first, responsive HTML, CSS and JavaScript, including jQuery, Ajax and JSON, I grew to become proficient with PHP, MySQL and WordPress, and as of late have focused on the world of performance optimization.
I have an addiction to "what's new" in web technology (key focus on front-end development) and finding better ways to do something. I am highly proficient in researching, testing, implementing, mentoring, and serving as a technology advocate.
I absolutely love a good team environment. It is my belief that the best things in life come when a varied group comes together, pools ideas, shares thoughts, listens to one another and works together. Not just knowledge-sharing, but experience-sharing.
My focus is primarily on user experience and performance. I try to make all browsers happy, but I am not afraid to let something look or behave simpler if that makes the overall experience better for the user.
I typically play pretty well with others, from waterfall to Agile, from stakeholders to sales to managers to designers to scrum masters to team members to support agents to customers. If we can all come together, we all win!
- Mobile-first, responsive HTML
- CSS
- JavaScript
- jQuery
- Ajax
- JSON
- PHP
- MySQL
- WordPress
- Git
- Jira
- Slack
- UX
- CWV
- Performance Optimization
- DevTools
- WebPageTest
- mPulse
- Splunk
- Lighthouse
- Google Analytics
- Freshdesk
- Freshsales
- Mailchimp
- Pandadocs
- Redbooth
- Zapier
-
January 2022 - Present
Senior Performance Architect / UX Advocate
Estée Lauder Companies, New York, NY, USA (remote contractor)
HTML, CSS, JS, Performance Optimization, Google Analytics, Splunk, mPulse, WebPageTest, DevTools, CWVs, Slack
Helping improve the performance of more than 500 international websites, across 30 brands, across 150 countries.
- Coordinate with international, distributed team members
- Setup and monitor synthetic and RUM applications and reports to ensure sites are within performance budget KPIs, including CWVs
- Investigate anomalies using monitoring tools, DevTools, WPT, etc., report to brand with proposed solution
- Perform periodic brand- or regional-focused site audits, document all performance enhancement opportunities, report findings to stakeholders
- Research and document best practices and innovations, propose opportunities for brand adoption (or global if applicable)
- Proposed effort to reduce CLS related to content media components; integrated with international engineer team; reduced average from 0.57 to nearly 0
- Proposed effort to reduce LCP by automating media lazy load settings; integrated with international engineer team; ongoing effort, results undetermined
- Spearheaded effort to replace JS lazy load with native lazy load, reducing need for JS file and overhead
- Conducted ad-hoc performance audits and provide recommendations and reports to engineering teams responsible for converting legacy frontend to modernized framework; reduced average LCP from 3.7s to 1.65s and average CLS from 0.43 to nearly 0
- Assisting with efforts to convert sites to responsive images
-
April 2016 - Present
Chief Technology Officer, Co-Owner
AdvantiPro GmbH, Kaiserslautern, Rhineland-Pfalz, Germany
HTML, CSS, JS, jQuery, WordPress, PHP, MySQL, Google Analytics, WebPageTest, Freshdesk, Freshsales, Google Drive, Mailchimp, Pandadocs, Redbooth, Slack, Zapier
Oversee all aspects of company technology, including internal server, cloud-based services, company & customer products and security.
- End-point for all technology decisions within company
- Research, select & communicate with third-party service vendors to find existing solutions when available, including Freshdesk, Freshsales, Google Drive, Mailchimp, Pandadocs, Redbooth, Slack, Zapier
- Provide in-house solutions when necessary, including custom API interactions between internal & external services
- Automate workflows using event-driven & cron-based automations, including custom API interactions and Zapier
- Develop & maintain mobile-first, responsive customer websites & apps, including WordPress, PHP, MySQL, CSS and JavaScript
- Evaluate customer websites using Dev Console, WebPageTest and Google Analytics, propose & implement solutions for performance optimizations & sales flow improvements
- Communicate with team & customers via support tracking & project management systems
- Support internal technology concerns, including PCs, networking, communication and remote office via VPN & remote desktop software
- Support all company products, including proprietary third-party frameworks and websites that require IE9 support
- Investigate & resolve any internal or external issues
- Research, test and propose new technologies where applicable
-
March 2012 - April 2016
Senior Developer
Netbiscuits GmbH, Kaiserslautern, Rhineland-Pfalz, Germany
HTML, CSS, JS, jQuery, WordPress, PHP, MySQL, Agile, Jira, Node, Grunt, Git, LESS, WebPageTest, Bootstrap, SVG, Thymeleaf
With a lab of 1000s of manually-tested devices, Netbiscuits was the global leader in software solutions for adaptive mobile web experiences, providing hand-curated device detection results and unparalleled analytics information.
- Member of international, Agile team
- Hand-code standards-based, mobile-first, responsive & adaptive HTML, CSS and JavaScript
- Lead front-end developer for Analytics Dashboard, utilizing Bootstrap, jQuery, Ajax, JSON, jQuery DatePicker, Highcharts, Highstock, and dynamic SVG charts
- Lead front-end developer for customer Account Management system, utilizing Thymeleaf framework, Bootstrap, jQuery, Ajax, and jQuery Validate
- Lead developer for company website, built using WordPress, integrating server-side adaptive design and client-side responsive design via a custom theme, third-party plugins and in-house plugins
- Aggressively focus on cross-device performance, including file optimization, minification, concatenation & caching, custom builds, and device-specific mark-up
- Utilize Node, Grunt, and LESS for cross-device builds and continuous integration & deployment
- Coordinate code repos via Git
- Communicate with team and customers via Jira tracking software
- Support legacy proprietary BiscuitML & Tactile frameworks
- Investigate & resolve cross-device issues
- Research, test and propose new technologies where applicable
-
November 2011 - March 2012
Freelance
Kaiserslautern, Rhineland-Pfalz, Germany
HTML, CSS, JS, jQuery, WordPress, PHP, Skype
During transition from NYC to Germany, continued working for Time, Inc. as a freelancer.
- Hand-code HTML, CSS and JavaScript, including jQuery & JSON
- Establish and restrict project scope
- Estimate project time frames, requirements, and costs
- Issue proposals, write contracts, and invoices
- Communicate via Skype, email, phone
- Deliver product on time
-
June 2007 - November 2011
Tech Lead
Time Inc., People.com, New York, NY, USA
HTML, CSS, JS, jQuery, WordPress, PHP
As Time, Inc.’s most-visited website (up to 40 million monthly unique views), People.com constantly challenged performance.
- Develop tablet-optimized, responsive design version of website, including dynamic data retrieval, use of in-browser data storage, and multi-section swipability
- Create second-screen project for 2011 Academy Awards, adding in-synch branded interactivity to the night's events
- Spear-head site-wide optimization projects including:
- Study and recommend server- and client-side performance optimizations
- Cleanse all site CSS files, reduce home page load by 23 objects, 52kb, and 1.3 seconds; these same techniques were then applied site-wide, with consistent, cascading results
- Rewrite of site JS files, improving speed, reliability and portability
- Introduce jQuery to global JS, rewriting functionality when file size or function performance could be improved
- Integrate HTML5 Boilerplate techniques, including customized version of Modernizr and use of CSS3 techniques when possible (and adding reliable fallbacks when not)
- Numerous HTML, CSS, JS projects, often concurrently, in various stages of completion
- Numerous JS projects, many of which have been used cross-brand, including:
- Google Map implementations with custom markers and overlays, driven by multiple JSON feeds
- Ajax galleries using JSON/P
- Hot-spot tagging tool
- Gallery stitching
- Custom Twitter module
- More carousels than I care to remember...
- Converted above Ajax photo gallery JS into iPad in-app browser hot spot, bringing currency to date-specific magazine app
- Served as departmental mentor & team leader
-
June 2005 - June 2007
Web Developer
Bank of America, Prime Brokerage, New York, NY, USA
HTML, CSS, JS, ASP, MS SQL Server
Working for the Prime Brokerage team, providing design, development, hosting, and maintenance for hedge fund clients.
- Develop conference registration website for Capital Introduction team, improving data tracking and customer relations
- Develop, maintain, and host client websites, including secure sections and fund-specific data
- Automate monthly performance page updates, saving up to 10 man-hours per month and ensuring data import accuracy
- Develop dynamic investor statement pages, improving customer client relations
- Implement advanced CSS and JavaScript techniques, migrating client sites from table-based to CSS-based layouts and introducing progressive enhancement techniques to the team, improving page load times and reducing site maintenance time
- Integrate server-side variables to dictate user-based access levels and to trigger page-specific CSS for look and layout control, improving customer client relations
-
May 2002 - June 2006
Web & Software Specialist
National Academies of Science, Transportation Research Board, Washington, DC, USA
HTML, CSS, JS, ASP, MS SQL Server
- Develop conference websites, including interactive site for 10,000+ attendee Annual Meeting, improving attendee data availability, staff efficiency and reporting accuracy & turn-around time
- Convert third-party form-driven registration process into customizable template-based HTML sites and registration process, reducing site stand-up time by nearly 20% and ensuring cross-site consistency
- Create stand-alone ASP/database-driven online registration process for no-fee conferences, reducing per-conference costs by $500, reducing data-conversion time by 50% and ensuring data accuracy
- Overhaul and streamlined Annual Meeting VIP invitation and registration process, reducing man-hours by 25%, ensuring data integrity, and reducing VIP frustration by eliminating duplicate contacts
- Integrate web-based database with MS Office for reporting and distribution of data collected for above-referenced websites
Pace University, New York, NY, USA
- Graduated 2007
- Awarded Bachelor of Science degree in Computer Studies within three semesters with a 3.98 GPA while working 40 hours per week at Bank of America.
- Graduated with Distinction
Montgomery College, Rockville, MD, USA
- Graduated 2007
- Awarded two Associates degrees, Information Systems and Web Technologies, simultaneously with 3.84 and 3.89 GPAs, respectively, while working 20-30 hours per week at the National Academies of Science.
- Member Phi Theta Kappa
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, updatetitle
, 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
filter
ed 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 thehtml
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
- 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
- Added HTML5 Boilerplate recommendations, where possible
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
- Developed and maintain a WordPress Plug-in that cleans extraneous classes and adds semantic IDs and classes to navigation menus
- 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 - 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
- Read voraciously on emerging technologies, blogging about items that inspire me:
- Co-founded and co-direct a nonprofit interactive web agency, UX Test Kitchen, developing websites for other nonprofits, for free:
- (website no longer available)
- While living in NYC, coordinated a monthly social gathering of family, friends and friends-of-friends:
- (website no longer available)
- Beyond technology, I love hiking, biking, movies, reading, traveling, learning, and hanging out with my wife, friends and family.