Interview with a Pornhub Web Developer

By  on  

Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have to be clever to innovate at the bleeding edge of the web.

I was recently lucky enough to interview a Web Developer at the web's largest adult website: Pornhub. I wanted to learn about the tech, how web APIs can improve, and what it's like working on adult websites. Enjoy!

Note: The adult industry is very competitive so there were a few questions they could not answer.  I respect their need to keep their tricks close to the vest.

Adult sites obviously display lots of graphic content.  During the development process, are you using lots of placeholder images and videos?  How far is the development content and experience from the end product?  

We actually don’t use placeholders when we are developing the sites! In the end, what matters is the code and functionality, the interface is something we are very used to at this point. There’s definitely a little bit of a learning curve at first, but we all got used to it pretty quickly. 

When it comes to cam streams and third party ad scripts, how do you mock such important, dynamic resources during site and feature development?

For development, the player is broken into two components.  The basic player implements the core functionality and fires events.  Development is done in a clean room. For integration on the sites, we want those third-party scripts and ads running so we can find problems as early in the process as possible.  For special circumstances we’ll work with advertisers to allow us to manually trigger events that might normally be random.

An average page probably has at least one video, GIF advertisements, a few cam performer previews, and thumbnails of other videos.  How do you measure page performance and how do you keep the page as performant as possible? Any tricks you can share?

We use a few measurement systems. 

  • Our player reports metrics back to us about video playback performance and general usage
  • A third-party RUM system for general site performance.
  • WebpageTest private instances to script tests in the available AWS data centers.  We use this mostly for seeing what might have been going on at a given time. It also allows us to view the “waterfall” from different locations and providers.

I have to assume the most important and complex feature on the front-end is the video player.  From incorporating ads before videos, marking highlight moments of the video, changing video speed, and other features, how do you maintain the performance, functionality, and stability of this asset?

We have a dedicated team working strictly on the video player, their first priority is to constantly monitor for performance and efficiency. To do so we use pretty much everything that is available to us; browsers performance tools, web page tests, metrics  etc. The stability and quality is assured by a solid QA round for any updates we do. 

How many people are on the dedicated video team?  How many front-end developers are on the team?

I’d say given the size of the product the team size is lean to average. 

During your time working on adult websites, how have you seen the front-end landscape change?  What new Web APIs have made your life easier?

I’ve definitely seen a lot of improvements on every single aspect of the frontend world;

  • From plain CSS to finally using LESS and Mixins, to a flexible Grid system with media queries and picture tags to accommodate different resolutions and screen sizes
  • jQuery and jQueryUI are slowly moving away, so we are going back to more efficient object oriented programming in vanilla JS. The frameworks are also very interesting in some cases
  • We love the new IntersectionObserver API, very useful for a more efficient way to load images
  • We started playing with the Picture-in-Picture API  as well, to have that floating video on some of our pages, mainly to get user feedback about the idea.

Looking forward, are there any Web APIs that you’d love changed, improved, or even created?

Some of them that we would like changed or improved; Beacon, WebRTC, Service Workers and Fetch:

  • Beacon: some IOS issues where it doesn’t quite work with pageHide events
  • Fetch:  No download progress and doesn’t provide a way to intercept requests
  • WebRTC:  Simulcast layers are limited even for screenshare, if the resolution is not big enough
  • Service Workers: Making calls to navigator.serviceWorker.register isn't intercepted by any service worker's Fetch event handlers

WebVR is has been improving in the past few years -- how useful is WebVR in its current state and how much of an effort are adult sites putting into support for VR content?  Do haptics have a role in WebVR on your sites?

We’re investigating webXR and how to best adapt to emerging spatial computing use cases, and as the largest distribution platform we need to support creators and users however they want to experience our content. But we’re still exploring what content and platforms should be like in these new mediums.

We were the first major platform to support VR, computer vision, and virtual performers, and will continue to push new technology and the open web. 

With so many different types of media and content on each page, what are the biggest considerations when it comes to desktop vs. mobile, if any? 

Functionality restricted by operating system and browsers type mainly. iOS vs Android is the perfect example when it comes to a completely different set of access and features. 

For example, some iOS Mobile devices don’t allow us to have a custom video player while in Fullscreen, they force the native QuickTime player. That has to be considered when we develop new ideas. Android on the other hand gives us complete control and we can push our features to the Fullscreen mode.

Adaptive streaming in HLS is also another example, IE and Edge are picky when it comes to HLS streaming quality, in that we need to prevent certain of the higher qualities, otherwise the video would constantly stutter and have artifacts.

What is the current minimum browser support for the adult sites you work on?  Is Internet Explorer phased out?

We supported IE for a very long time but recently dropped support for anything older than IE11. With it we also stopped working with Flash for the video player. We are focusing on Chrome, Firefox and Safari mainly. 

More broadly, can you share a little about the typical adult site’s stack?  Server and/or front-end? Which libraries are you using?

Most of our sites use the following as a base:

  • Nginx
  • PHP
  • MySQL
  • Memcached and/or Redis

Other technologies like Varnish, ElasticSearch, NodeJS, Go, Vertica are used where appropriate.

For frontend, we run mostly vanilla Javascript, we’re slowly getting rid of jQuery and we are just beginning to play with frameworks, mostly Vue.js

From an outsider’s perspective, adult sites generally seem to be very much alike:  lots of video thumbnails, aggregated video content, cam performers, adverts. As someone who works on them, what are the differentiating features that make adult sites unique?

We work very hard to give each brand some uniqueness at different levels; content library, UX and features sets, and across a lot of different algorithms. 

Before applying and interviewing for your current employer, what were your thoughts on potentially working on adult sites?  Did you have any hesitations? If so, how were your fears to put rest?

It never really bothered me, in the end the challenge was so appealing. The idea of millions of people potentially interacting with features I worked on was really motivating. That proved to be true very quickly, the first time something I worked on went live, I was super proud, and I indeed told all my friends to go check it out! The fact that porn will never die is reassuring for job stability as well!

In as far as end product, sharing that you work on adult sites may not be the same as working at a local web agency.  Is there a stigma attached to telling friends, family, and acquaintances you work on adult sites? Is there any hesitance in telling people you work on adult sites?

I’m very proud to work on these products, those close to me are aware and fascinated by it. It’s always an amazing source of conversation, jokes and is genuinely interesting. 

Having worked at agencies outside the adult industry, is there a difference in atmosphere when working on adult sites?

The atmosphere here is very relaxed and friendly. I don’t notice any major differences with respect to work culture at other agencies, other than the fact that it’s much bigger here than anywhere I have worked previously. 

Being a front-end developer, which teams do you work most closely with?  What are the most common daily communication methods?

We work equally with backend developers, QA testers and product managers - most of the time we simply go up to each other’s desk and talk. If not, chat (MS Teams) is very common. Then come emails.

Lastly, is there anything you’d like to share as a front-end developer working on adult sites?

It’s really exciting being a part of creating how users experience such a widely used product. We are generally at the forefront of trends and big changes in tech as they roll out, which keeps it fun and challenging.

Interview end

I found our interview really enlightening. I was a bit surprised they didn't use images while developing features and designs. It's exciting to see that Pornhub continues to push the bleeding edge of the web with WebXR, WebRTC, and Intersection Observer. I was also happy to see that they consider the current set of web APIs sufficient to start dropping jQuery.

I really wish I'd have been able to get more specific tech tips out of them; performance and clever hacks especially. I'm sure there's a wealth of knowledge to be learned behind their source code! What questions would you have asked?

Recent Features

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

Discussion

  1. I’ve always wondered about the people working behind those giant porn sites. Interesting read.

  2. “Development is done in a clean room.” LOL

    • LMFAO nice catch haha! Man I found that line funny too.

  3. Arkay

    Thank you for this! Ignoring the content for a moment and focusing on the technical – I was always amazed at visiting a adult site and seeing how quickly it loaded with all the elements popping in.

    The ‘show a gif/segment of video’ on hover feature was was even taken by youtube!

  4. Shahawy

    Interesting read

  5. Why is dropping jQuery a good thing? Seems to me that it overcomes a LOT of browser incompatibilities, or at least used to. Is that not the case anymore?

    • The biggest reason why I’ve seen a large push to move away from jQuery is that it removes an extra dependency for a library that adds page weight since browsers are becoming more modern.
      I think that jQuery was great for what it needed to be; a fast and easy way to manipulate things _after_ the fact versus writing larger amounts of JS. But since we are able to accomplish more and more with CSS in modern browsers, the reliability for need jQuery has been waning. And in the end you’re loading in a larger library to basically shorthand some lines of JS.
      Don’t get me wrong, I still use jQuery if I know it’s going to be there already (e.g. – WordPress), but there have been some projects that I’ve worked on recently where it’s been strictly vanilla JS. And the more I look into it, the more I see that future projects are moving towards a vanilla JS setup.
      Anyways, that’s my short, two-cents version of it.

    • It’s not that jQuery is or was bad, it’s become redundant, jQuery was so successful on what it aimed to achieve that it basically forced itself onto the core of Javascript

    • Conrad

      jQuery while still widely can result in a site needing a lot more code then needed. Personally I still use it when needed for third-party controls but avoid it over basic JS for simple DOM. I would recommend the following sites for why you might want to drop jQuery and use plan JS.

      http://youmightnotneedjquery.com/

      https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

    • I’m pretty sure jQuery’s drop in popularity and usage is due to native JavaScript/ES constantly evolving to where it is now and developing core features (not to mention the huge lead in browser features and compatibilities). Evolution of CSS also removes some needs for it and React/Angular/Vue coming onto the scene handle all the heavy lifting that needs to be done in JS. So you have native JS/ES and CSS constantly improving to their current states which would replace most of what jQuery “could” do better on the lower complexity scale. The modern JavaScript libraries and frameworks will do all the advanced stuff, that really only leaves niche areas for jQuery to survive in at this point.

  6. Joe C.

    I would have asked if the recent innovations around JAMStack and static sites have gotten them to reconsider their CMS strategies.

  7. Gabriel

    Great read. Would also be interesting interviewing some backend devs or systems folks for a more complete view on their systems.

  8. Sarah

    Hey who is the developing company for porn hub?

  9. What tcp congestion control algorithms and qdiscs they use to combat bufferbloat would have been my question.

  10. When you go on one of those websites, last thing you think about are developers who created it :) But surely someone has to code them. Very interesting interview.

  11. Dmone

    No questions. Just wanted to say that I read this while I was on Pornhub.

  12. We can say this is one of the best interview. lol

  13. The culture is like many other companies. Interesting.

    • Quixote

      I could say that they probably have an unusual NSFW policy

  14. Monk

    If as an end user, if you are intuitively enabled for a site’s business content, that you don’t have to think of why this could’ve developed, is the greatest achievement of the developers. Well done, bro’s (interviewer and dev)!

  15. Jack

    Great read. Would also be interesting interviewing some backend devs or systems folks for a more complete view of their systems.

  16. OOOOOOOOO MY GOD. There are so many technical questions on here. Not really my cup of tea. It’s cool that you were able to track down a PornHub Engineer though. I felt like the questions about relationships could have been a little better researched.

  17. jmn

    How do you feel about the distribution of content that continuers the victimization of rape victims and the human trafficked? Would have been a good 1 imo

  18. Pornhub developed from a sketchy porn site to a big tech company. I like the interview, thanks for the insights. I would love to know if they considered JAMstack. 

  19. Mikko Rantalainen

    I would have liked to know about their architecture in whole:

    – Do they already have no-single-point-of-failure in production? Is there any part of the system that’s still centralized (e.g. database handling the user sessions, payment backend, internal interconnect network)? In my experience even the big companies often have *something* that they’ve found hard to distribute over multiple independent locations and fully redundant hardware on all levels.

    – What kind of caches do they use? I’d expect at least caching reverse proxies and some kind of CDN. Do they have their own CDN or do they use services maintained by other CDN vendors?

    – Do they optimize for the first page load or for continued session? (For example, for continued sessions it would be better to use one centralized CSS file for the whole site and maybe use one big centralized JS library that’s loaded on first page and cached forever. Both would slow down the first page load, though.)

  20. John

    i worked for them. Everything he said is correct.

  21. Nicolas

    You work for Pornhub? Disgusting.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!