Interview with Pornhub Web Developer

Regardless of your attitude to pornography, it would be foolish to deny the enormous impact of the adult site industry on the development of the Internet. From expanding the capabilities of browsers in terms of video playback to showing ads through WebSocket bypassing blockers, in order to work at the forefront of Internet innovation, you need to be extremely smart.



Recently, I was lucky enough to interview the web developer of the world's largest adult site - Pornhub.



Purpose: To learn about technologies and innovations in the field of working with web APIs and, of course, how all this is implemented within the framework of Pornhub. Enjoy it!



Note: the porn industry is a highly competitive environment, so I could not get an answer to several questions. I respect the need for developers to protect their professional secrets.



- Porn sites are expected to display a huge amount of graphic content. During development, do you use placeholders instead of images and videos? How similar is the content of the final site to what you have to deal with during development?



- We almost never use placeholders! Code and functionality are important to us. An interface is something we are all used to. Of course, everyone in the beginning has some period of adaptation, but everyone gets used pretty quickly.



- When it comes to streams or advertising placed by external customers, how do you use such dynamic resources that are important to you?



- On the development side, the player is divided into two parts. On the side of the main part, the main functions and events are implemented, that is, the development is carried out according to the cleanroom methodology. This is done so that in cases of integration with the site, when we want to run third-party scripts and ads, we can identify the problems that have arisen as quickly as possible. In special cases, we can work with advertisers in manual mode, that is, launch events on our own, which in other cases are played randomly.



- On average, as I think, any page contains at least one video, advertising in GIF format, several previews from webcams and announcements of other videos. How do you measure page performance and how do you make it as effective as possible? Tell us about any trick you can share.



- Well, we use several measurement methods at once.

• Our player tells us metrics of video playback performance and overall frequency of use.
• A third-party RUM system tracks the overall performance of the site.
• We use private WebpageTest instances to test scripts in AWS data centers. This is done mainly to see what can happen at a particular moment. It also allows us to evaluate the "flow" of data that "falls" onto us from various points and from suppliers.

- I believe that the most important and complex function of the interface on the site is a video player. From advertising to the video itself, marking the main points of the recording, changing the playback speed and other functions - how do you maintain the performance, functionality and stability of this entire design?



- Specifically, a dedicated team works with a video player, the tasks of which include constant monitoring of performance and efficiency. For this work, we use almost everything we can: browser tools, web page tests, various metrics and so on. Stability and quality are guaranteed thanks to constant monitoring of any updates and changes that we make to the player.



- And how many people are in this special video team? How many frontendors do you have?



- I would say - of course, given the size of our product - that the team is small.



- During your work on Pornhub, what changes have you made to the interface? What web APIs have made your life easier?



- During my work, I definitely found many improvements to every aspect of the site interface.

• We went from just CSS to, finally, LESS and Mixins, switched to a flexible grid system with media queries and image tags, which makes it easier to adapt to different screen resolutions.
• jQuery and jQueryUI are phasing out, so we are returning to more efficient object-oriented programming in vanilla JS. Sometimes some frameworks help us a lot.
• We enjoy working with the new IntersectionObserver API, a very useful and efficient image upload tool.
• We also started to indulge little by little with the Picture-in-Picture API. We use it to place floating videos on some pages. But we are doing it now, mainly in order to collect feedback from the audience regarding this venture.

- If you look into the future, are there any web APIs that you would like to change, improve, or even create from scratch ?



- We would like to change some APIs. These are Beacon, WebRTC, Service Workers and Fetch. Further on the items.

• Beacon: There are some problems when working with iOS when it does not correctly handle pageHide events.
• Fetch: download progress is not displayed and you cannot interrupt the request.
• WebRTC: Simulcast layers have limitations when sharing a screen, if the resolution does not reach a certain size.
• Service Workers: Calling navigator.serviceWorker.register is not intercepted by Fetch event handlers.

- In the past few years, WebVR is growing rapidly. How useful is it in its current state and how much effort do porn sites put into supporting VR content? Does your WebVR section support Haptic content? ( Apparently, “haptic” means porn content that uses not only VR glasses, but also special devices that synchronize with the video sequence and enhance the effect of presence - approx. Per. )



“We are exploring the WebXR theme and figuring out how to best adapt to emerging spatial computing scenarios.” In addition, as the largest content distribution platform, we need to provide support for content makers and consumers. We are still in the process of finding the answer to what this content should be like within the platform.



We were the first platform to support virtual reality, computer vision and virtual artists, and we will continue to promote these new technologies on the network.



- What do you think is the most important thing in development for both PC and mobile devices, when you have to deal with so many multimedia elements and content on each page?



- As such, the functionality is limited mainly by the operating system and browser type. The situation with iOS against Android is extremely indicative in terms of how feature sets and accesses can differ.



For example, some mobile devices on iOS do not allow us to use our own video player in full-screen mode and force QuickTime to start. Such moments must be taken into account when implementing new features and ideas. On the other hand, Android gives us full control and allows us to use all our chips in full screen mode.



Adaptive streaming in HLS is another example. IE and Edge are extremely demanding on HLS streaming quality. Therefore, we have to exclude the highest image quality settings for them, otherwise the video will constantly stutter and scatter with artifacts.



- What is the minimum period of browser support for adult sites you work on? ( Apparently, this is not only about Pornhub itself, but also about other sites that have different addresses, but belong to a resource - approx. Per. ) Have you already stopped supporting Internet Explorer?



- We supported IE for a very long time, but recently we stopped supporting everything older than IE11, and specifically with it we stopped supporting Flash for the video player. We are mainly focused on support for Chrome, Firefox and Safari.



- Can you tell us more about the stack of a typical porn site? For example, for a back and / or front. What libraries do you use?



- Most of our sites use the following technologies:

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

If necessary, something else is used, for example, Varnish, ElasticSearch, NodeJS, Go, Vertica.



To work with interfaces, we mainly use vanilla Javascript, gradually get rid of jQuery and just try frameworks, for example, now in Vue.js.



- From the point of view of an outsider, all adult sites are very similar: a lot of video thumbnails, aggregated video content, webcam models and advertising. And how do porn sites differ for those who develop them? What unique features can you name as a developer?



- We make every effort to give each of our brand its own unique features at different levels; content library, UX and feature sets, differences in algorithms.



- Before applying for an interview with your current employer, what did you think about the possibility of working in the porn industry? Have you had any doubts? If so, how did you deal with them?



- I was never bothered by these issues, in the end, the tasks were very attractive. The thought that I will work on projects with a multi-million audience, that all these people will use the functions I created, really motivated me. And all my expectations were met. The first time I worked on something that was truly proud! Yes, I told all my friends where I work now! It is also important that porn never dies, which gives me a sense of stability, which is very good.



- As for your final product, the story that you work on porn sites may differ from the story about working in a local web studio. Is there any kind of stigmatization in the process of telling friends, relatives and acquaintances where you work? Do you have any doubts whether it is worth telling people what you are doing?



- I am very proud that I am working on these products, and those who surround me in life know my position and admire it. My work is always a source of amazing topics for exciting conversations and jokes.



Is there a difference between working inside and outside the porn industry? The atmosphere here is very relaxed and friendly. I do not notice any major differences in terms of work culture between my current place of work and other companies. Except that here (in Pornhub) the culture is much higher than in places where I worked before.



- As a front-end developer, with which teams do you interact most closely? What are your main channels of daily interaction within the team?



- We are equally in contact with both the backend team and testers or product managers. Most of the time we just walk up to each other and talk. For electronic communication we mainly use MS Teams chat. Well and of course email.



- And finally, is there anything you would like to share as a front-end vendor that works on adult sites?



- Being part of the team that creates such a popular product among users is truly exciting. As a rule, we are at the forefront of technological fashion and the first to encounter some fundamentally new technologies. This makes my work both challenging and extremely interesting.



End of interview

---

From the author:

I find this interview really instructive. I was a little surprised that the team does not use placeholders during the development of features and design. It’s good to see Pornhub continue to be at the forefront of the Internet in terms of working with WebXR, WebRTC and Intersection Observer. I was also pleased that they consider the current set of web APIs sufficient to start a complete rejection of jQuery.



I really wanted to get more specific answers on technical questions and any tips. For example, in terms of improving performance and some chips. I am sure that in Pornhub sorts there is a huge amount of useful information! What questions would you ask?