Lướt thấy trên diễn đàn có bác chia sẻ bài phỏng vấn một Web developer từng làm ở P..nh.b – Phim không dành cho người bé =))).
Nên mình mới dịch lại để chia sẻ cho anh em tuy không phải chuyên môn DevOps nhưng có những câu hỏi về hiệu suất, quy trình phát triển, công nghệ sử dụng, có thể liên quan đến vai trò DevOps – Đại đại đi đọc học hỏi hoặc cho vui cũng được =)))
Tổng quan bài phỏng vấn
| Chủ Đề | Chi Tiết |
|---|---|
| Quy Trình Phát Triển | Không dùng placeholder, tập trung vào mã và chức năng. |
| Phát Triển Player | Chia thành hai thành phần: player cơ bản và tích hợp script bên thứ ba để phát hiện lỗi sớm. |
| Đo Lường Hiệu Suất | Sử dụng WebpageTest, RUM, và báo cáo từ player về lượt xem video. |
| Đội Ngũ Player | Đội ngũ nhỏ gọn, ưu tiên hiệu suất, có QA vững chắc, không tiết lộ số lượng cụ thể. |
| Xu Hướng Front-End | Từ CSS thuần đến LESS, giảm jQuery, dùng API mới như IntersectionObserver. |
| Cải Thiện API Mong Muốn | Vấn đề với Beacon, Fetch, WebRTC, và Service Workers. |
| WebVR và Haptics | Đang nghiên cứu WebXR, hỗ trợ VR, nhưng không chi tiết về haptics. |
| Desktop vs Mobile | iOS buộc dùng player QuickTime, Android linh hoạt hơn, HLS adaptive streaming. |
| Hỗ Trợ Trình Duyệt | Bỏ IE cũ, không dùng Flash, tập trung vào Chrome, Firefox, Safari. |
| Tech Stack | Server: Nginx, PHP, MySQL; Front-end: JavaScript thuần, bắt đầu dùng Vue.js. |
| Đặc Điểm Nổi Bật | Thư viện nội dung độc đáo, UX, thuật toán, và sự ổn định công việc. |
| Kinh Nghiệm Làm Việc | Tự hào với sản phẩm được nhiều người dùng, không ngại ngần, môi trường thân thiện. |
Chi tiết bài phỏng vấn
| Câu hỏi | Trả lời |
|---|---|
| Trong quá trình phát triển, bạn có sử dụng nhiều hình ảnh và video placeholder không? Nội dung và trải nghiệm phát triển cách xa sản phẩm cuối cùng đến mức nào? | Thực ra chúng tôi không sử dụng placeholder khi phát triển các trang web! Cuối cùng, điều quan trọng là mã và chức năng, giao diện là thứ chúng tôi rất quen thuộc đến thời điểm này. Chắc chắn có một chút đường cong học tập ban đầu, nhưng chúng tôi đều làm quen với nó khá nhanh chóng. |
| Khi nói đến các luồng cam và các script quảng cáo bên thứ ba, bạn làm thế nào để mock các tài nguyên động quan trọng như vậy trong quá trình phát triển trang và tính năng? | Đối với phát triển, player được chia thành hai thành phần. Player cơ bản triển khai chức năng cốt lõi và kích hoạt các sự kiện. Phát triển được thực hiện trong một “phòng sạch.” Đối với việc tích hợp trên các trang web, chúng tôi muốn các script bên thứ ba và quảng cáo chạy để có thể phát hiện các vấn đề sớm nhất có thể trong quá trình. Đối với các trường hợp đặc biệt, chúng tôi sẽ làm việc với các nhà quảng cáo để cho phép chúng tôi kích hoạt thủ công các sự kiện có thể thường là ngẫu nhiên. |
| Một trang trung bình có lẽ có ít nhất một video, quảng cáo GIF, một vài preview của người biểu diễn cam, và các thumbnail của các video khác. Bạn đo lường hiệu suất trang như thế nào và bạn làm thế nào để giữ cho trang hoạt động tốt nhất có thể? Có bí quyết nào bạn có thể chia sẻ không? | Chúng tôi sử dụng một số hệ thống đo lường: Player của chúng tôi báo cáo các metric về hiệu suất phát video và sử dụng chung; Một hệ thống RUM bên thứ ba cho hiệu suất trang web chung; Các instance riêng tư của WebpageTest để script các bài kiểm tra trong các trung tâm dữ liệu AWS có sẵn. Chúng tôi sử dụng điều này chủ yếu để xem điều gì có thể đã xảy ra vào một thời điểm nhất định. Nó cũng cho phép chúng tôi xem “waterfall” từ các vị trí và nhà cung cấp khác nhau. |
| Tôi phải giả định rằng tính năng quan trọng và phức tạp nhất trên front-end là player video. Từ việc tích hợp quảng cáo trước video, đánh dấu các khoảnh khắc nổi bật của video, thay đổi tốc độ video, và các tính năng khác, bạn duy trì hiệu suất, chức năng, và độ ổn định của tài sản này như thế nào? | Chúng tôi có một đội ngũ chuyên biệt làm việc chỉ trên player video, ưu tiên hàng đầu của họ là liên tục giám sát hiệu suất và hiệu quả. Để làm điều đó, chúng tôi sử dụng gần như mọi thứ có sẵn cho chúng tôi; các công cụ hiệu suất của trình duyệt, các bài kiểm tra trang web, metric, v.v. Độ ổn định và chất lượng được đảm bảo bởi một vòng QA vững chắc cho bất kỳ bản cập nhật nào chúng tôi thực hiện. |
| Có bao nhiêu người trong đội ngũ video chuyên biệt? Có bao nhiêu nhà phát triển front-end trong đội? | Tôi nghĩ với quy mô của sản phẩm thì kích thước đội ngũ là từ nhỏ gọn đến trung bình. (Không có số lượng cụ thể được cung cấp) |
| Trong thời gian làm việc trên các trang web người lớn, bạn đã thấy cảnh quan front-end thay đổi như thế nào? Các Web API mới nào đã làm cuộc sống của bạn dễ dàng hơn? | Tôi chắc chắn đã thấy rất nhiều cải tiến trên mọi khía cạnh của thế giới front-end; Từ CSS thuần đến cuối cùng sử dụng LESS và Mixins, đến hệ thống Grid linh hoạt với media queries và picture tags để thích ứng với các độ phân giải và kích thước màn hình khác nhau; jQuery và jQueryUI đang dần dần biến mất, vì vậy chúng tôi đang quay lại với lập trình hướng đối tượng hiệu quả hơn trong vanilla JS. Các framework cũng rất thú vị trong một số trường hợp; Chúng tôi rất thích API IntersectionObserver mới, rất hữu ích cho cách tải hình ảnh hiệu quả hơn; Chúng tôi cũng bắt đầu thử nghiệm với API Picture-in-Picture để có video nổi trên một số trang của chúng tôi, chủ yếu để lấy phản hồi từ người dùng về ý tưởng này. |
| Nhìn về phía trước, có bất kỳ Web API nào mà bạn muốn thay đổi, cải thiện, hoặc thậm chí tạo ra không? | Một số trong số chúng mà chúng tôi muốn thay đổi hoặc cải thiện; Beacon: một số vấn đề trên iOS nơi nó không hoạt động tốt với các sự kiện pageHide; Fetch: Không có tiến trình tải xuống và không cung cấp cách để chặn các yêu cầu; WebRTC: Các lớp Simulcast bị giới hạn ngay cả cho chia sẻ màn hình, nếu độ phân giải không đủ lớn; Service Workers: Việc gọi đến navigator.serviceWorker.register không được chặn bởi bất kỳ service worker’s Fetch event handlers nào. |
| WebVR đã được cải thiện trong vài năm qua — WebVR hữu ích đến mức nào ở trạng thái hiện tại và các trang web người lớn đang bỏ công sức để hỗ trợ nội dung VR đến mức nào? Haptics có vai trò gì trong WebVR trên các trang web của bạn không? | Chúng tôi đang điều tra webXR và cách thích ứng tốt nhất với các trường hợp sử dụng tính toán không gian mới nổi, và với tư cách là nền tảng phân phối lớn nhất, chúng tôi cần hỗ trợ các nhà tạo nội dung và người dùng theo cách họ muốn trải nghiệm nội dung của chúng tôi. Nhưng chúng tôi vẫn đang khám phá nội dung và các nền tảng nên như thế nào trong các phương tiện mới này. Chúng tôi là nền tảng lớn đầu tiên hỗ trợ VR, thị giác máy tính, và các nhà biểu diễn ảo, và chúng tôi sẽ tiếp tục thúc đẩy công nghệ mới và web mở. |
| Với nhiều loại phương tiện và nội dung khác nhau trên mỗi trang, những cân nhắc lớn nhất khi nói đến desktop so với mobile là gì, nếu có? | Chức năng bị hạn chế bởi hệ điều hành và loại trình duyệt chủ yếu. iOS so với Android là ví dụ hoàn hảo khi nói đến một bộ truy cập và tính năng hoàn toàn khác nhau. Ví dụ, một số thiết bị di động iOS không cho phép chúng tôi có player video tùy chỉnh khi ở chế độ Fullscreen, chúng buộc phải sử dụng player QuickTime gốc. Điều đó phải được xem xét khi chúng tôi phát triển các ý tưởng mới. Ngược lại, Android cho phép chúng tôi kiểm soát hoàn toàn và chúng tôi có thể đẩy các tính năng của mình lên chế độ Fullscreen. Adaptive streaming trong HLS cũng là một ví dụ khác, IE và Edge rất khó tính khi nói đến chất lượng streaming HLS, trong đó chúng tôi cần ngăn chặn một số chất lượng cao hơn, nếu không video sẽ liên tục bị giật và có hiện tượng nhiễu. |
| Hỗ trợ trình duyệt tối thiểu hiện tại cho các trang web người lớn mà bạn làm việc là gì? Internet Explorer đã bị loại bỏ chưa? | Chúng tôi đã hỗ trợ IE trong một thời gian rất dài nhưng gần đây đã ngừng hỗ trợ bất cứ thứ gì cũ hơn IE11. Cùng với nó, chúng tôi cũng ngừng sử dụng Flash cho player video. Chúng tôi tập trung chủ yếu vào Chrome, Firefox và Safari. |
| Rộng hơn, bạn có thể chia sẻ một chút về stack điển hình của một trang web người lớn không? Server và/or front-end? Bạn đang sử dụng thư viện nào? | Hầu hết các trang web của chúng tôi sử dụng các công nghệ sau làm nền tảng: Nginx, PHP, MySQL, Memcached và/or Redis. Các công nghệ khác như Varnish, ElasticSearch, NodeJS, Go, Vertica được sử dụng khi phù hợp. Đối với front-end, chúng tôi chạy chủ yếu là Javascript thuần, chúng tôi đang dần dần loại bỏ jQuery và chúng tôi mới bắt đầu thử nghiệm với các framework, chủ yếu là Vue.js. |
| Từ góc nhìn của một người ngoài cuộc, các trang web người lớn nói chung có vẻ rất giống nhau: nhiều thumbnail video, nội dung video tổng hợp, người biểu diễn cam, quảng cáo. Là người làm việc trên chúng, những tính năng khác biệt nào làm cho các trang web người lớn trở nên độc đáo? | Chúng tôi làm việc rất chăm chỉ để mang lại một số sự độc đáo cho từng thương hiệu ở các cấp độ khác nhau; thư viện nội dung, UX và bộ tính năng, và qua rất nhiều thuật toán khác nhau. |
| Trước khi nộp đơn và phỏng vấn cho nhà tuyển dụng hiện tại của bạn, bạn nghĩ gì về khả năng làm việc trên các trang web người lớn? Bạn có ngần ngại gì không? Nếu có, những nỗi sợ của bạn đã được giảm bớt như thế nào? | Thực ra nó không làm tôi phiền lòng, cuối cùng thách thức lại rất hấp dẫn. Ý tưởng rằng hàng triệu người có thể tương tác với các tính năng mà tôi làm việc thực sự rất thúc đẩy. Điều đó đã được chứng minh là đúng rất nhanh chóng, lần đầu tiên điều gì đó tôi làm việc được đưa lên live, tôi rất tự hào, và tôi thực sự đã bảo tất cả bạn bè của mình đi kiểm tra nó! Việc p..n sẽ không bao giờ chết cũng rất yên tâm cho sự ổn định việc làm! |
| Về sản phẩm cuối cùng, việc chia sẻ rằng bạn làm việc trên các trang web người lớn có thể không giống như làm việc tại một agency web địa phương. Có stigma nào gắn liền với việc nói cho bạn bè, gia đình, và người quen rằng bạn làm việc trên các trang web người lớn không? Có ngần ngại gì khi nói với mọi người rằng bạn làm việc trên các trang web người lớn không? | Tôi rất tự hào khi làm việc trên các sản phẩm này, những người thân thiết với tôi biết và rất say mê về nó. Nó luôn là nguồn của những cuộc trò chuyện tuyệt vời, những câu đùa và thực sự rất thú vị. |
| Đã từng làm việc tại các agency bên ngoài ngành công nghiệp người lớn, có sự khác biệt về không khí khi làm việc trên các trang web người lớn không? | Không khí ở đây rất thoải mái và thân thiện. Tôi không nhận thấy sự khác biệt lớn nào về văn hóa làm việc so với các agency khác, ngoại trừ việc nó lớn hơn nhiều so với bất kỳ nơi nào tôi đã từng làm việc trước đây. |
| Là một nhà phát triển front-end, bạn làm việc gần gũi nhất với những đội nào? Phương thức giao tiếp hàng ngày phổ biến nhất là gì? | Chúng tôi làm việc ngang bằng với các nhà phát triển backend, tester QA và product managers – hầu hết thời gian chúng tôi chỉ đến bàn làm việc của nhau và nói chuyện. Nếu không, chat (MS Teams) rất phổ biến. Sau đó đến emails. |
| Cuối cùng, có điều gì bạn muốn chia sẻ với tư cách là một nhà phát triển front-end làm việc trên các trang web người lớn không? | Thực sự rất thú vị khi là một phần của việc tạo ra cách người dùng trải nghiệm một sản phẩm được sử dụng rộng rãi như vậy. Chúng tôi thường dẫn đầu xu hướng và những thay đổi lớn trong công nghệ khi chúng được triển khai, điều này giữ cho công việc luôn vui vẻ và thử thách. |
Bài viết gốc
Dành cho anh em nào thích đọc tiếng anh hoặc không ngửi được cái bản tiếng Việt của mình nhé hihi: Interview with a P..nhu.b Web Developer long title for citation