Richard Dillman, Staff Engineer / Tech Lead at The Muse

github

devto

Richard Dillman  • Peerlist

This site was rebuilt as a responsive layout using HTML5, CSS3 and JavaScript with just a bit of jQuery on the front end. We also utilized MVC3 and build scripts on the back end to help streamline the process. We took great care to build each module independently so they could be re-purposed.

South Beach Diet

We found that while spinning up a new Front end heavy project, we were constantly reinventing the wheel, so my team and I collaboratively generated a front-end template repo. We incorporated the setup for Docker, Typescript, WebPack, NextJs, ESLint, StyleLint, Jest, VSCode, DataDog, Github, CircleCI, and others.  This project took project setup from 2-3 weeks down to 2-3 days.

Front-End Template Generator

Rebuilt a customer-facing dashboard using Docker, Python, Django, Node, TypeScript, and React. A new project with all-new rules for everyone involved was a great introduction to the team’s processes and skill levels. Along the way, I picked up Python and Django.

Brand-Builder

Replatformed our job search page into microservice using React, NextJs, FastAPI, and Koa.  Here we were trying to reduce bloat in the original monolith. The rebuild resulted in a 300% increase in page speed (<3 seconds) and Web Vitals scores above 90 across the board.

Job-Search

I lead a team in rewriting the homepage Renderer as a microservice. This reduced page speed by more than 400%. We also increased the Web Vitals performance score from 39 to 99

Homepage

An event based system written with the intention to streamline usage within React and allow some ads to render naturally and others to be injected later by React as needed.  This project also increased viewability from 50% to 85% in most cases. The goals of this project were:
• Increase viewability
• Render ads as early as possible
• Reduce JavaScript footprint
• Improve Time to first meaningful paint.
Tools we used were Node.js, AWS, Fastdom, Rollup, Babel, Eslint, Jest, Prettier, and of course JSDoc.

Event Based Ads Library

Installed and standardized linting across all The Muse client-facing projects that include Python, SCSS, Javascript, or TypeScript.

Standards

Took over a complete re-platform of the CMS, which had languished in planning and contract work for more than a year, bringing it to final release. Languages include Docker, Nginx, PHP, Postgres, and CraftCMS. At the same time, I was learning Craft, dusting off PHP, and managing a 3rd party contract team. This application sees roughly 260k requests per day.

Advice CMS

Upgrade to Google Publisher Tags and VAST3 by building an enterprise level framework with a minimal API. I coordinated with multiple front end teams and collected approval from several key stakeholders.
 - Increased by one full second the speed with which ads appear
 - Dramatically reduced developer ramp up time on ad integration
 - Supports the new viewable impressions standards of the IAB and MMMS
 - Reduced expensive HTTP requests
 - Decreased code complexity and removed the jQuery dependency

Google Publisher Tags

This was a 1 month project to re-deploy the site (while being ravaged by hurricane Sandy) as a responsive layout using the latest standards, methods, and cool things we learned in the last few projects.

Denise Austin

Replatform the job detail page as a Server-side Rendered React microservice using Nextjs, Koa, Typescript, JavaScript, SCSS, Docker, AWS ECS, and CircleCI. This project had a focus on both page speed and SEO. This project was a transform from a very old monolith project using CoffeeScript, Python, and Tornado templates.

Pushing Mobile Lighthouse scores:
Performance from 28 to 89
Accessibility from 77 to 91
Best Practices from 86 to 93
SEO frim 89 to 99

Job Detail

This ad delivery system enables registering an impression only when an ad is within the viewport, which supports the IAB’s 2014 “Ad Impression Measurement Guidelines” http://www.iab.net/guidelines/508676/guidelines/campaign_measurement_audit and the Media Ratings Council’s “Viewable Ad Impression Measurement Guidelines” http://www.mediaratingcouncil.org/063014%20Viewable%20Ad%20Impression%20Guideline_Final.pdf

In-view Ads

Create a drop in replacement for jQuery's selector engine to reduce page weight.  While some might say just use Sizzle, Sizzle still supports IE6 and many older browsers.  The compressed file size is 7k! My rewrite is only 1.8.

DOM Selector Engine

The Ads Service is the official client-side API for ad lifecycle management across all Condé Nast publishers. It streamlines the how, when, and why of ad rendering with four main goals as its focus:

- Optimizing the revenue potential (ORP) of every brand's content and user base.
- Making ad rendering and ad creatives as web performant (WPA) as possible through modern web practices.
- Gaining operational efficiency (OEG) for all teams through ad tech tooling designed for humans.
- Empowering all ad-related teams with the tools for data-driven decision (DDD) making.

Modular ads library

Envisioned and constructed a Puppeteer based acceptance testing system for advertisements.  This system covers:
• rendering
• placement
• targeting
• refreshing

Automated acceptance testing (ads)

Revamped a decade old XML/XSLT site into a modern responsive corporate flagship.

Everyday Health

Proposed and drove an initiative to launch dashboards that track changes in overall advertisement impressions and viewable impressions, allowing the team to dig deep into monetization drivers, and correct problems quickly. Tools we used were Presto, Liquid, and D3, integrating datasets from DFP, Moat, Google Analytics, and Omniture.

Ad-Tech Dashboards

I extracted the article front-end out of a monolith into a microservice. I converted this from Python, Tornado, Golang, and jQuery into a React server-side rendered project. Replatforming resulted in a 300% increase in page speed (<3 seconds) and web vitals scores above 90 across the board.

Advice Renderer

Lead a team in updating The Muse’s cross-product Design System based on Storybook. This initiative included the latest versions and standards, including code linting, test coverage and limits, and CSS Modules.  In the end, we reduced build time by 50% and reduced the consumed package size by 60%.

Design System

This site was rebuit as a modular/responsive layout using HTML5, CSS3, core JavaScript and jQuery. We used build scripts on the back end for JS/CSSconcatenation and re-used a lot of what we discovered in our previous projects.