image

Independentemente de sua posição sobre pornografia, seria impossível negar o enorme impacto que a indústria de sites adultos teve ao impulsionar a web. Desde empurrar os limites de vídeo do navegador até empurrar anúncios através do WebSocket para que os bloqueadores de anúncios não os detectem, você tem que ser inteligente para inovar na borda sangrenta da web.

Recentemente tive a sorte de entrevistar um Web Developer no maior site adulto da web: o Pornhub. Eu queria aprender sobre a tecnologia, como as APIs da web podem melhorar e como é trabalhar em sites adultos. Desfrutar!

Nota: A indústria adulta é muito competitiva, então houve algumas perguntas que eles não puderam responder. Respeito a necessidade deles de manter seus truques perto do colete.

Sites adultos obviamente exibem muito conteúdo gráfico. Durante o processo de desenvolvimento, você está usando muitas imagens e vídeos reservados? Qual é a distância do conteúdo de desenvolvimento e experiência do produto final?

Na verdade, não usamos espaços reservados quando estamos desenvolvendo os sites! No final, o que importa é o código e a funcionalidade, a interface é algo que estamos muito acostumados neste momento. Há definitivamente um pouco de uma curva de aprendizado no início, mas todos nós nos acostumamos muito rapidamente.

Quando se trata de fluxos de cam e scripts de anúncios de terceiros, como você zomba de recursos dinâmicos tão importantes durante o desenvolvimento do site e do recurso?

Para o desenvolvimento, o jogador é dividido em dois componentes. O jogador básico implementa a funcionalidade principal e dispara eventos. O desenvolvimento é feito em uma sala limpa. Para integração nos sites, queremos que esses scripts e anúncios de terceiros sejam executados para que possamos encontrar problemas o mais cedo possível no processo. Para circunstâncias especiais, trabalharemos com anunciantes para nos permitir acionar manualmente eventos que normalmente podem ser aleatórios.

Uma página média provavelmente tem pelo menos um vídeo, anúncios GIF, algumas visualizações de artistas de câmera e miniaturas de outros vídeos. Como você mede o desempenho da página e como você mantém a página o mais executante possível? Algum truque que possa compartilhar?

Usamos alguns sistemas de medição.

  • Nosso jogador relata métricas de volta para nós sobre o desempenho de reprodução de vídeo e uso geral
  • Um third-party RUM system para desempenho geral do site.
  • WebpageTest em instâncias privadas para testes de script nos data centers AWS disponíveis. Usamos isso principalmente para ver o que poderia estar acontecendo em um dado momento. Também nos permite ver a “waterfall” de diferentes locais e provedores.

Eu tenho que assumir que a característica mais importante e complexa na parte frontal é o player de vídeo. Desde a incorporação de anúncios antes dos vídeos, marcação de momentos de destaque do vídeo, mudança de velocidade de vídeo e outros recursos, como você mantém o desempenho, funcionalidade e estabilidade desse ativo?

Temos uma equipe dedicada trabalhando estritamente no player de vídeo, sua prioridade é monitorar constantemente o desempenho e a eficiência. Para isso, usamos praticamente tudo o que está disponível para nós; ferramentas de desempenho de navegadores, testes de páginas da Web, métricas etc. A estabilidade e a qualidade são asseguradas por uma rodada de QA sólida para quaisquer atualizações que fizermos.

Quantas pessoas estão na equipe de vídeo dedicada? Quantos desenvolvedores front-end estão na equipe?

Eu diria que dado o tamanho do produto o tamanho da equipe é magro para a média.

Durante seu tempo trabalhando em sites adultos, como você viu a mudança de paisagem frontal? Que novas APIs da Web tornaram sua vida mais fácil?

Eu definitivamente vi um monte de melhorias em todos os aspectos do mundo frontend;

  • Desde CSS simples até finalmente usando LESS e Mixins, até um sistema de Grid flexível com media queries e picture tags para acomodar diferentes resoluções e tamanhos de tela
  • jQuery e jQueryUI estão lentamente se afastando, então estamos voltando à programação mais eficiente orientada a objetos em vanilla JS. Os frameworks também são muito interessantes em alguns casos
  • Adoramos a nova IntersectionObserver API, muito útil para uma maneira mais eficiente de carregar imagens
  • Começamos a jogar com a Picture-in-Picture API também, para ter esse floating video em algumas de nossas páginas, principalmente para obter feedback do usuário sobre a ideia.

Olhando para a frente, há alguma APIs web que você adoraria mudou, melhorou ou mesmo criou?

Alguns deles que gostaríamos de mudar ou melhorar; Beacon, WebRTC, Service Workers e Fetch:

  • Beacon: alguns problemas do IOS onde ele não funciona muito bem com pageHide events
  • Fetch: Sem progresso no download e não fornece uma maneira de interceptar pedidos
  • WebRTC: As camadas do Simulcast são limitadas mesmo para screenshare, se a resolução não for grande o suficiente
  • Service Workers: Fazer chamadas para navigator.serviceWorker.register não é interceptado por Fetch event handlers de qualquer service worker’s

O WebVR vem melhorando nos últimos anos – quão útil é o WebVR em seu estado atual e quanto esforço os sites adultos estão colocando em suporte para conteúdo VR? Os hápticos têm um papel no WebVR em seus sites?

Estamos investigando o webXR e como se adaptar melhor aos casos emergentes de uso de computação espacial, e como a maior plataforma de distribuição, precisamos apoiar criadores e usuários no entanto eles querem experimentar nosso conteúdo. Mas ainda estamos explorando como deve ser o conteúdo e as plataformas nesses novos meios.

Fomos a primeira grande plataforma a suportar vr, visão computacional e artistas virtuais, e continuaremos a empurrar novas tecnologias e a web aberta.

Com tantos tipos diferentes de mídia e conteúdo em cada página, quais são as maiores considerações quando se trata de desktop vs. mobile, se houver?

Funcionalidade restrita pelo sistema operacional e navegadores digitam principalmente. iOS vs Android é o exemplo perfeito quando se trata de um conjunto completamente diferente de acesso e recursos.

Por exemplo, alguns dispositivos móveis iOS não nos permitem ter um player de vídeo personalizado enquanto estiver no Fullscreen, eles forçam o jogador nativo quicktime. Isso tem que ser considerado quando desenvolvemos novas ideias. O Android, por outro lado, nos dá controle completo e podemos empurrar nossos recursos para o modo Fullscreen.

O streaming adaptativo no HLS também é outro exemplo, IE e Edge são exigentes quando se trata de qualidade de streaming HLS, na qual precisamos evitar certas das qualidades mais altas, caso contrário o vídeo gaguejaria constantemente e teria artefatos.

Qual é o suporte mínimo atual do navegador para os sites adultos em que você trabalha? O Internet Explorer foi eliminado gradualmente?

Apoiamos o IE por muito tempo, mas recentemente deixamos de apoiar qualquer coisa mais antiga que o IE11. Com ele também paramos de trabalhar com flash para o player de vídeo. Estamos focando no Chrome, Firefox e Safari principalmente.

De forma mais ampla, você pode compartilhar um pouco sobre a stack típica do site adulto? Servidor e/ou front-end? Que bibliotecas você está usando?

A maioria dos nossos sites usa o seguinte como base:

  • Nginx
  • PHP
  • MySQL
  • Memcached e/ou Redis

Outras tecnologias como Verniz, ElasticSearch, NodeJS, Go, Vertica são usadas quando apropriado.

Para frontend, executamos principalmente baunilha Javascript, estamos lentamente nos livrando do jQuery e estamos apenas começando a jogar com frameworks, principalmente Vue.js

Do ponto de vista de um estranho, sites adultos geralmente parecem ser muito parecidos: muitas miniaturas de vídeo, conteúdo de vídeo agregado, artistas de câmeras, anúncios. Como alguém que trabalha neles, quais são os recursos diferenciais que tornam sites adultos únicos?

Trabalhamos muito duro para dar a cada marca alguma singularidade em diferentes níveis; biblioteca de conteúdo, UX e conjuntos de recursos, e através de um monte de algoritmos diferentes.

Antes de se candidatar e entrevistar para o seu empregador atual, quais eram seus pensamentos sobre potencialmente trabalhar em sites adultos? Você teve alguma hesitação? Se sim, como foram seus medos para descansar?

Nunca me incomodou, no final o desafio foi tão atraente. A ideia de milhões de pessoas potencialmente interagindo com recursos em que trabalhei foi realmente motivadora. Isso provou ser verdade muito rapidamente, a primeira vez que algo em que trabalhei foi ao vivo, fiquei super orgulhoso, e eu realmente disse a todos os meus amigos para ir em frente! O fato de que a pornografia nunca vai morrer é reconfortante para a estabilidade do emprego também!

No que diz respeito ao produto final, compartilhar que você trabalha em sites adultos pode não ser o mesmo que trabalhar em uma agência web local. Existe um estigma ligado a dizer a amigos, familiares e conhecidos que você trabalha em sites adultos? Há alguma hesitação em dizer às pessoas que você trabalha em sites adultos?

Tenho muito orgulho de trabalhar nesses produtos, aqueles próximos a mim estão cientes e fascinados por ele. É sempre uma fonte incrível de conversa, piadas e é genuinamente interessante.

Tendo trabalhado em agências fora da indústria adulta, há diferença de atmosfera ao trabalhar em sites adultos?

O ambiente aqui é muito descontraído e amigável. Não percebo grandes diferenças em relação à cultura do trabalho em outras agências, além do fato de que é muito maior aqui do que em qualquer lugar que eu tenha trabalhado anteriormente.

Sendo um desenvolvedor front-end, com quais equipes você trabalha mais de perto? Quais são os métodos de comunicação diários mais comuns?

Trabalhamos igualmente com desenvolvedores backend, testadores de QA e gerentes de produtos - na maioria das vezes simplesmente vamos até a mesa um do outro e conversamos. Se não, o chat (Ms Teams) é muito comum. Então vêm e-mails.

Por fim, há algo que você gostaria de compartilhar como um desenvolvedor front-end trabalhando em sites adultos?

É realmente emocionante fazer parte da criação de como os usuários experimentam um produto tão amplamente utilizado. Estamos geralmente na vanguarda das tendências e grandes mudanças na tecnologia à medida que elas se lançam, o que a mantém divertida e desafiadora.

Fim da entrevista

Achei nossa entrevista muito esclarecedora. Fiquei um pouco surpreso que eles não usaram imagens enquanto desenvolvevam recursos e designs. É emocionante ver que o Pornhub continua a empurrar a borda sangrenta da web com WebXR, WebRTC e Intersection Observer. Também fiquei feliz em ver que eles consideram o conjunto atual de APIs web suficientes para começar a soltar jQuery.

Eu realmente gostaria de ter sido capaz de obter dicas técnicas mais específicas deles; desempenho e hacks inteligentes especialmente. Tenho certeza que há uma riqueza de conhecimento a ser aprendido por trás de seu código fonte! Que perguntas você teria feito?

Autor: David Walsh

Artigo Original