{"id":43,"date":"2020-01-31T03:55:41","date_gmt":"2020-01-31T03:55:41","guid":{"rendered":"https:\/\/cebucodesolutions.com\/blog\/?p=43"},"modified":"2020-01-31T03:55:41","modified_gmt":"2020-01-31T03:55:41","slug":"interview-with-a-pornhub-web-developer","status":"publish","type":"post","link":"https:\/\/cebucodesolutions.com\/blog\/2020\/01\/31\/interview-with-a-pornhub-web-developer\/","title":{"rendered":"Interview with a Pornhub Web Developer"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"234\" src=\"https:\/\/cebucodesolutions.com\/blog\/wp-content\/uploads\/2020\/01\/PornHubLogo.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/cebucodesolutions.com\/blog\/wp-content\/uploads\/2020\/01\/PornHubLogo.png 658w, https:\/\/cebucodesolutions.com\/blog\/wp-content\/uploads\/2020\/01\/PornHubLogo-300x107.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<p> 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&#8217;s video limits to <a href=\"https:\/\/medium.com\/thebugreport\/pornhub-bypasses-ad-blockers-with-websockets-cedab35a8323\">pushing ads through WebSocket<\/a> so ad blockers don&#8217;t detect them, you have to be clever to innovate at the bleeding edge of the web. <\/p>\n\n\n\n<p> I was recently lucky enough to interview a Web Developer at the web&#8217;s  largest adult website: Pornhub. I wanted to learn about the tech, how  web APIs can improve, and what it&#8217;s like working on adult websites.   Enjoy! <\/p>\n\n\n\n<p><em>Note:  The\u00a0adult\u00a0industry\u00a0is\u00a0very\u00a0competitive\u00a0so\u00a0there\u00a0were\u00a0a\u00a0few\u00a0questions\u00a0they\u00a0could\u00a0not\u00a0answer.\u00a0\u00a0I  respect\u00a0their\u00a0need\u00a0to\u00a0keep\u00a0their\u00a0tricks\u00a0close\u00a0to\u00a0the\u00a0vest.<\/em><\/p>\n\n\n\n<p><strong>Adult sites obviously display lots of graphic content.\u00a0 During  the development process, are you using lots of placeholder images and  videos?\u00a0 How far is the development content and experience from the end  product?\u00a0\u00a0<\/strong><\/p>\n\n\n\n<p> We actually don\u2019t 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\u2019s definitely a little  bit of a learning curve at first, but we all got used to it pretty  quickly.\u00a0 <\/p>\n\n\n\n<p><strong>When it comes to cam streams and third party ad scripts, how do  you mock such important, dynamic resources during site and feature  development?<\/strong><\/p>\n\n\n\n<p> For development, the player is broken into two components.\u00a0 The basic  player implements the core functionality and fires events.\u00a0 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.\u00a0 For special circumstances we\u2019ll work with  advertisers to allow us to manually trigger events that might normally  be random. <\/p>\n\n\n\n<p><strong>An average page probably has at least one video, GIF  advertisements, a few cam performer previews, and thumbnails of other  videos.\u00a0 How do you measure page performance and how do you keep the  page as performant as possible?  Any tricks you can share?<\/strong><\/p>\n\n\n\n<p>We use a few measurement systems.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Our player reports metrics back to us about video playback performance and general usage<\/li><li>A third-party RUM system for general site performance.<\/li><li>WebpageTest  private instances to script tests in the available AWS data centers.\u00a0  We use this mostly for seeing what might have been going on at a given  time.  It also allows us to view the \u201cwaterfall\u201d from different  locations and providers.<\/li><\/ul>\n\n\n\n<p><strong>I have to assume the most important and complex feature on the  front-end is the video player.\u00a0 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?<\/strong><\/p>\n\n\n\n<p>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\u00a0 etc. The stability and  quality is assured by a solid QA round for any updates we do.\u00a0 <\/p>\n\n\n\n<p><strong>How many people are on the dedicated video team?\u00a0 How many front-end developers are on the team?<\/strong><\/p>\n\n\n\n<p> I\u2019d say given the size of the product the team size is lean to average.\u00a0 <\/p>\n\n\n\n<p><strong>During your time working on adult websites, how have you seen  the front-end landscape change?\u00a0 What new Web APIs have made your life  easier?<\/strong><\/p>\n\n\n\n<p>I\u2019ve definitely seen a lot of improvements on every single aspect of the frontend world;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>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<\/li><li>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<\/li><li>We love the new IntersectionObserver API, very useful for a more efficient way to load images <\/li><li>We  started playing with the Picture-in-Picture API\u00a0 as well, to have that  floating video on some of our pages, mainly to get user feedback about  the idea.<\/li><\/ul>\n\n\n\n<p><strong>Looking forward, are there any Web APIs that you\u2019d love changed, improved, or even created?<\/strong><\/p>\n\n\n\n<p>Some of them that we would like changed or improved; Beacon, WebRTC, Service Workers and Fetch:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Beacon: some IOS issues where it doesn\u2019t quite work with pageHide events<\/li><li>Fetch:\u00a0 No download progress and doesn\u2019t provide a way to intercept requests<\/li><li>WebRTC:\u00a0 Simulcast layers are limited even for screenshare, if the resolution is not big enough<\/li><li>Service Workers: Making calls to navigator.serviceWorker.register isn&#8217;t intercepted by any service worker&#8217;s Fetch event handlers<\/li><\/ul>\n\n\n\n<p><strong>WebVR is has been improving in the past few years &#8212; how useful  is WebVR in its current state and how much of an effort are adult sites  putting into support for VR content?\u00a0 Do haptics have a role in WebVR on  your sites?<\/strong><\/p>\n\n\n\n<p>We\u2019re investigating webXR and how to best adapt to emerging spatial \ncomputing use cases, and as the largest distribution platform we need to\n support creators and users however they want to experience our content.\n But we\u2019re still exploring what content and platforms should be like in \nthese new mediums.<\/p>\n\n\n\n<p>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.\u00a0<\/p>\n\n\n\n<p><strong>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?\u00a0<\/strong><\/p>\n\n\n\n<p>Functionality restricted by operating system and browsers type \nmainly. iOS vs Android is the perfect example when it comes to a \ncompletely different set of access and features.&nbsp;<\/p>\n\n\n\n<p>For example, some iOS Mobile devices don\u2019t allow us to have a custom \nvideo player while in Fullscreen, they force the native QuickTime \nplayer. That has to be considered when we develop new ideas. Android on \nthe other hand gives us complete control and we can push our features to\n the Fullscreen mode.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>What is the current minimum browser support for the adult sites you work on?\u00a0 Is Internet Explorer phased out?<\/strong><\/p>\n\n\n\n<p> 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.\u00a0 <\/p>\n\n\n\n<p><strong>More broadly, can you share a little about the typical adult  site\u2019s stack?\u00a0 Server and\/or front-end?  Which libraries are you using?<\/strong><\/p>\n\n\n\n<p>Most of our sites use the following as a base:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Nginx<\/li><li>PHP<\/li><li>MySQL<\/li><li>Memcached and\/or Redis<\/li><\/ul>\n\n\n\n<p>Other technologies like Varnish, ElasticSearch, NodeJS, Go, Vertica are used where appropriate.<\/p>\n\n\n\n<p>For frontend, we run mostly vanilla Javascript, we\u2019re slowly getting \nrid of jQuery and we are just beginning to play with frameworks, mostly \nVue.js<br><\/p>\n\n\n\n<p><strong>From an outsider\u2019s perspective, adult sites generally seem to\n be very much alike:&nbsp; lots of video thumbnails, aggregated video \ncontent, cam performers, adverts.  As someone who works on them, what \nare the differentiating features that make adult sites unique?<\/strong><\/p>\n\n\n\n<p>We work very hard to give each brand some uniqueness at different \nlevels; content library, UX and features sets, and across a lot of \ndifferent algorithms.&nbsp;<br><\/p>\n\n\n\n<p><strong>Before applying and interviewing for your current employer,  what were your thoughts on potentially working on adult sites?\u00a0 Did you  have any hesitations?  If so, how were your fears to put rest?<\/strong><\/p>\n\n\n\n<p>It never really bothered me, in the end the challenge was so \nappealing. The idea of millions of people potentially interacting with \nfeatures I worked on was really motivating. That proved to be true very \nquickly, the first time something I worked on went live, I was super \nproud, and I indeed told all my friends to go check it out! The fact \nthat porn will never die is reassuring for job stability as well!<\/p>\n\n\n\n<p><strong>In as far as end product, sharing that you work on adult \nsites may not be the same as working at a local web agency.&nbsp; Is there a \nstigma attached to telling friends, family, and acquaintances you work \non adult sites?  Is there any hesitance in telling people you work on \nadult sites?<\/strong><\/p>\n\n\n\n<p>I\u2019m very proud to work on these products, those close to me are aware\n and fascinated by it. It\u2019s always an amazing source of conversation, \njokes and is genuinely interesting.&nbsp;<\/p>\n\n\n\n<p><strong>Having worked at agencies outside the adult industry, is there a difference in atmosphere when working on adult sites?<\/strong><br><\/p>\n\n\n\n<p>The atmosphere here is very relaxed and friendly. I don\u2019t notice any \nmajor differences with respect to work culture at other agencies, other \nthan the fact that it\u2019s much bigger here than anywhere I have worked \npreviously.&nbsp;<br><\/p>\n\n\n\n<p><strong>Being a front-end developer, which teams do you work most closely with?&nbsp; What are the most common daily communication methods?<\/strong><\/p>\n\n\n\n<p>We work equally with backend developers, QA testers and product \nmanagers &#8211; most of the time we simply go up to each other\u2019s desk and \ntalk. If not, chat (MS Teams) is very common. Then come emails.<br><\/p>\n\n\n\n<p><strong>Lastly, is there anything you\u2019d like to share as a front-end developer working on adult sites?<\/strong><\/p>\n\n\n\n<p>It\u2019s really exciting being a part of creating how users experience \nsuch a widely used product. We are generally at the forefront of trends \nand big changes in tech as they roll out, which keeps it fun and \nchallenging.<\/p>\n\n\n\n<p><em>Interview&nbsp;end<\/em><\/p>\n\n\n\n<p>I found our interview really enlightening. I was a bit surprised they\n didn&#8217;t use images while developing features and designs. It&#8217;s exciting \nto see that Pornhub continues to push the bleeding edge of the web with \nWebXR, WebRTC, and Intersection Observer. I was also happy to see that \nthey consider the current set of web APIs sufficient to start dropping \njQuery.<\/p>\n\n\n\n<p>I really wish I&#8217;d have been able to get more specific tech tips out \nof them; performance and clever hacks especially. I&#8217;m sure there&#8217;s a \nwealth of knowledge to be learned behind their source code!  What \nquestions would you have asked?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s video limits to pushing ads through WebSocket so ad blockers don&#8217;t detect them, you have to be clever to innovate at the bleeding edge of &hellip; <a href=\"https:\/\/cebucodesolutions.com\/blog\/2020\/01\/31\/interview-with-a-pornhub-web-developer\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Interview with a Pornhub Web Developer&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-updates"],"_links":{"self":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":1,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}