Introduction
A web developer with nearly 30 years of experience building fast, resilient, and user-centered websites.
My passion is helping organizations deliver websites that load quickly, perform reliably under real-world conditions, and provide users with excellent experiences.
Projects
-
NoLoJS
Accomplishments:
- Created collection of components that mimic existing JS patterns, with HTML and CSS only.
- Developers can copy/paste into their projects as a jump-start for using less JS.
- Means developers code/maintain less JS, build process creates less JS, user download less JS, and browser has to process and maintain less JS in memory.
Outcome:
- Use of NoLoJS components reduces JS, so improves page load time and reduces INP.
- Received warm welcome from the web performance community and web developers in general.
- Featured on PerformanceObserver, the Web Performance Calendar, the HTMHell Advent Calendar, and Coffee with Developers.
-
Estee Lauder Companies
Monitor performance for 250 e-commerce websites, representing 20 brands, across 150 countries.
Accomplishments:
- Automated lazy load settings for product and editorial images and videos.
- Automated preload links for above-the-fold images.
- Refined preconnect and preload links, including those for custom web fonts.
- Updated JS carousel library to reduce CLS and permit visibility during download and initialization.
- Continuously monitored and tracked video and image size, implementing optimization when necessary.
- Regularly conducted site performance audits and brand education sessions to ensure best practices.
- Worked with global Engineering teams to ensure best practices.
- Worked with DevOps to continuously monitor and adjust CDN cache settings as needed.
Outcome:
- Reduced average LCP: Globally from 3.26s to 1.78s, in key markets (CA, UK, US) from 2.94s to 1.81s.
- Lowered average CLS: Globally from 0.41 to less than 0.10, in key markets (CA, UK, US) from 0.44s to nearly 0.04.
-
AdvantiPro GmbH
Modernize company website: advantipro.de
Accomplishments:
- WordPress, mobile-first, responsive theme, customized child theme.
- Carefully curated catalog of existing and bespoke plugins to provide desired functionality, accessibility and security while still maintaining performance and usability.
- 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 and INP.
.htaccessfile cache controls to reduce browser requests and INP.- Anonymized Google Analytics for site flow tracking.
- GDPR compliance.
- Automated integration attached to customer contact initiates new contact in CRM (FreshSales), which triggers notification to Sales Department.
- Additional automation sends immediate response to contact providing access to requested documents and sales information.
Outcome:
- Improved public appearance of company.
- Improved outreach and conversion.
- Reduced staff hours needed to process
-
AdvantiPro GmbH
Numerous internal and client websites
Accomplishments:
- WordPress, mobile-first, responsive theme, customized child theme.
- Carefully curated catalog of existing and bespoke plugins to provide desired functionality, accessibility and security while still maintaining performance and usability.
- 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 and INP.
.htaccessfile cache controls to reduce browser requests and INP.- Anonymized Google Analytics for site flow tracking.
- GDPR compliance.
Outcome:
- All successful site launches, creating happy customers.
- Providing the website was not only an additional source of income, but also helped create a tighter connection with the customer, helping us better understand their business, including how we could help them grow and succeed.
-
United States Army Garrison (USAG) Bavaria App
(Resource no longer available)
Accomplishments:
- WordPress, custom mobile-first, responsive SPA theme.
- Converted single-site to multi-site.
- Employed
AppCacheto provide offline capabilities for both iOS and Android. - All app content ported to JSON file.
- Page-load checks for fresher content, downloads if necessary, sets up in-page app navigation.
- Content updates add to
historystack, updatetitle, refresh ad, and notify Google Analytics. - SVG icons for scalability and to reduce network requests.
- Ported into a Native WebView, deployed to 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.
Outcome:
- Customer ecstatic with app.
- Able to use existing website installation, single domain, single hosting package, single updates, etc.
- Easy to update because customer was already familiar with WordPress.
- Customer better able inform their users of the latest news and upcoming issues in their remote area.
- Users able to download content and use app offline, critical for their remote area.
-
Personal blog
Accomplishments:
- WordPress-based, custom mobile-first, responsive child theme, optimized for performance.
- Improved First Contentful Paint (FCP) by implementing Grunt for HTML, CSS, JS, and SVG minification.
- Ensured site stability via Git for repo syncing and version control.
- Optimized media assets via Smush-it plugin during upload.
- Reduced Time to First Byte (TTFB) by installing & configuring caching plugin.
- Further improved TTFB by employing Content Delivery Network (CDN).
- Reduced browser requests by customizing cache controls within
.htaccessfile. - Complied with General Data Protection Regulation (GDPR) by anonymizing Google Analytics.
Outcome:
- Highly-performant WordPress website.
- Consistently achieves very fast, stable page loads that react to user interactions promptly.
-
MBSR in English
Accomplishments:
- Mobile-first, responsive single-page site, optimized for performance.
- Hero image uses CSS to fade-in, visualizing the tagline of "Bringing Life into Focus".
- Hero image also has a CSS conical-gradient to serve as a background while the image downloads, improving perceived performance.
- Optimized media assets ensures rapid download.
- Eliminated Cumulative Layout Shift (CLS) by inlining CSS for single-page site.
- Utilize lazy-loading where possible for initially-offscreen assets.
Outcome:
- Highly-performant brochure website.
- Serving the client's needs, to be visible on the web.
- Providing the user with a smooth, stable, very fast experience.
-
Sky Creek Dharma Center
Accomplishments:
- WordPress-based, custom mobile-first, responsive theme, optimized for performance.
- Optimized media assets via Smush-it plugin during upload.
- Reduced Time to First Byte (TTFB) by installing & configuring caching plugin.
- Reduced browser requests by customizing cache controls within
.htaccessfile. - Includes only carefully curated catalog of plugins to provide desired functionality, accessibility and security while still maintaining performance and usability.
Outcome:
- Highly-performant WordPress website.
- Consistently achieves very fast, stable page loads that react to user interactions promptly.
- Serving the client's needs, to be visible on the web.
- Providing the user with a smooth, stable, very fast experience.
-
Netbiscuits GmbH
(Resource no longer available)
Accomplishments:
- WordPress, mobile-first, responsive theme, customized child theme.
- Netbiscuits' Device Detection for server-side adaptive decisions and device-specific modifications.
- Advanced Custom Fields (ACF) WP plugin for custom, reusable 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.
Outcome:
- Delivered a customized, state-of-the-art experience regardless of the user device's capabilities.
- Allowed the marketing team to easily and independently update and maintain the site content.
- Provided users with a fast, reliable experience, and access to the information they sought.
-
Netbisuits Mobile Analytics
(Resource no longer available)
Accomplishments:
- 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.
Outcome:
- Provided the company a fast, reliable SaaS UI.
- Provided our clients with a fast, intuitive UI for monitoring their site performance.
-
Netbiscuits Internal Account Management portal
(Resource no longer available)
Accomplishments:
- 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.
Outcome:
- Provided the company a fast, reliable method for managing customers.
- Provided our customers with a fast, intuitive method for creating and maintaining their accounts.
-
People.com Performance Optimizations
(Optimizations no longer available)
Accomplishments:
- Added HTML5 Boilerplate recommendations, including:
- HTML5 DOCTYPE.
- IE-Conditional Comments around
html. - Custom Modernizr.
- Rewrote all site CSS, including:
- Researched declarations to determine if still needed and where it is used.
- Removed declarations that were no longer used.
- Moved less frequently 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 decorative images with CSS3 declarations, while retaining image declarations for fallback.
- Converted numerous images to sprites.
- Converted remaining GIF sprites to PNGs.
Outcome:
- 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.
- Reduced required storage space on CDN.
- Reduced required download for users.
- Improved page load speed.
- Added HTML5 Boilerplate recommendations, including:
-
People.com Tablet-optimized website
(Resource no longer available)
Accomplishments:
- Incorporated all JS into single file to reduce HTTP Requests.
- Used image sprites to reduce HTTP Requests.
- Implemented object-oriented JS for stability and reliability.
- Transmitted new content as JSON/P for simple, fast self-updating content updates.
- Integrated jQuery + plug-ins to add swipability on touch and desktop devices.
- Tablet-oriented project scope allowed for -webkit-transitions & -transforms in place of JavaScript animations; also worked in desktop WebKit browsers.
- Cached variables and elements for improved performance.
- Ajaxed "next" content & image updates for transitions.
- Used deep-linking for share-ability.
- Included dynamic ad and tracking loading and refreshing on content transitions.
Outcome:
- Helped keep People.com on the cutting edge of technology, and their content at their users' fingertips.
- Kept People.com content consumption at an all-time high, frequently pushing 20-40 million page views per month.
-
People.com Second-Screen Trivia Game
(Resource no longer available)
Accomplishments:
- Incorporated all JS into single file to reduce HTTP Requests.
- Used image sprites to reduce HTTP Requests.
- Implemented object-oriented JS for stability and reliability.
- Transmitted new content as JSON/P for simple, fast self-updating content updates.
- Integrated jQuery + plug-ins to add swipability on touch and desktop devices.
- Tablet-only project scope allowed for -webkit-transitions & -transforms in place of JavaScript animations.
- Cached variables and elements for improved performance.
- Ajaxed "next" content & image updates for transitions.
- Included dynamic ad and tracking loading and refreshing, including video ads during commercials.
- Used cookies to track game status & score in case user left and returned.
- Integrated polling feature to sync app with new content pushes.
- Used CSS classes along with getters and setters to drive the "state" of game, reducing JS/DOM interaction.
- Oversaw development of, and integration with, custom CMS.
Outcome:
- Highly successful integration with live event.
- Helped keep People.com on the cutting edge of technology, and their content at their users' fingertips.
- Video ad revenue more than paid for resources required to create and launch app.
-
People.com Photo Gallery "Ajaxification"
(Resource no longer available)
Accomplishments:
- Initial load functioned without JS, via full page refresh, but progressively-enhanced if JS is available.
- Ajaxed "next" content & image updates for transitions.
- Implemented object-oriented JS for stability and reliability.
- Transmitted new content as JSON/P for simple, fast self-updating content updates.
- Integrated jQuery + plug-ins to add swipability on touch and desktop devices.
- Cached variables and elements for improved performance.
- Used deep-linking for share-ability.
- Included dynamic content recirc and ad units, and tracking for content loading and refreshing.
- Integrated with social media.
- Made use of Tagging Tool (see below).
Outcome:
- Photo gallery content consumption increased by 20%.
- Ad view increased by more than 12%.
-
People.com Photo Gallery Tagging Tool
(Resource no longer available)
Accomplishments:
- Allowed editorial staff to enter gallery slide URL.
- Ajaxed image from specific slide and display in the tagging tool.
- Staff could then drag over image to create hot-spot.
- Once created, could then enter content for that hot-spot to reveal, such as headline, deck, and image URLs.
- Clicking Save created JSON/P file on server.
- Ajax gallery referenced above would then fetch the JSON/P and add interactivity to that gallery slide.
- Implemented object-oriented JS for stability and reliability.
- Transmitted new content as JSON/P for simple, fast self-updating content updates.
- Integrated jQuery + plug-ins to add swipability on touch and desktop devices.
- Cached variables and elements for improved performance.
Outcome:
- Increased user interaction with gallery content.
- Opened sales relationship opportunities.
-
People.com Photo Gallery "stitching"
(Resource no longer available)
Accomplishments:
- Implemented object-oriented JS for stability and reliability.
- Transmitted new content as JSON/P for simple, fast self-updating content updates.
- Integrated jQuery + plug-ins to add swipability on touch and desktop devices.
- Cached variables and elements for improved performance.
- Ajaxed "next" content & image updates for transitions.
- Provided content-aware direction to user regarding upcoming and previous gallery notifications.
Outcome:
- Photo gallery content consumption increased by 15%.
- Ad view increased by more than 8%.
-
Responsive Test Environment
Accomplishments:
- Developed a responsive development testing environment, allowing developers to check pages in multiple breakpoints with a single click.
-
Practical CSS3
Accomplishments:
- 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
- WordPress Theme and Plug-in based on HTML5 Boilerplate:
- WordPress Plug-in that cleans extraneous classes and adds semantic IDs and classes to navigation menus:
- WordPress Plug-in that, when in Admin, adds classes to the
bodytag to reflect which Page or Post type you're viewing in Edit-mode: - WordPress Plug-in that takes a page's URL, chops it into pieces, and adds each "piece" as an additional class to the
bodytag: