지난 몇 주 동안 저는 임대 가구 회사 인 Pabio에서 선임 풀 스택 JavaScript 엔지니어를 고용했습니다. 우리는 원격 팀이기 때문에 Zoom에 대한 인터뷰를 수행하고 있으며, 일부 개발자는 직장에 능숙하더라도 라이브 코딩 또는 화이트 보드 인터뷰에 능숙하지 않다는 것을 관찰했습니다. 대신, 우리는 웹 생명, 접근성, 브라우저 전쟁 및 웹에 대한 기타 유사한 주제에 대한 질문을하는 한 시간 동안의 기술 토론이 있습니다. 내가 항상 묻고 싶은 질문 중 하나는 다음과 같습니다. “트위터 소스 코드의 첫 10 개 줄을 설명하십시오.”
나는 그것이 기본적인 프론트 엔드 지식의 깊이에 대해 많은 것을 알려주는 간단한 테스트라고 생각하며,이 기사는 최고의 답변을 나열합니다.
컨텍스트를 위해 화면을 공유하고 Twitter.com을 열고 소스보기를 클릭합니다. 그런 다음 나는 그들에게 HTML을 이해하는 데 도움이되도록 라인을 가리라고 요청하며, 그들이 원하는만큼 말할 수 있습니다. 나는 또한 텍스트를보다 읽기 쉽게 만들기 위해 확대하기 때문에 전체 줄을 볼 수 없지만 아이디어를 얻습니다. 다음은 다음과 같습니다.
기술 토론은 대화이기 때문에 주목하십시오. 나는 누구의 완벽한 대답을 기대하지 않습니다. 올바른 키워드를 들으면 후보자가 개념을 알고 있다는 것을 알고 있으며 올바른 방향으로 밀어 붙이려고 노력합니다.
모든 문서의 소스 코드의 첫 번째 줄은이 인터뷰에 적합합니다. 후보자가 DocType 선언에 대해 얼마나 많은 시간을 알고 있는지에 대해 얼마나 많은 경험을 가지고 있었는지와 매우 유사하기 때문입니다. 나는 2009 년부터 그의 기사“The Common Doctypes”에 나열된 Chris와 같이 Long XHTML DocType 라인으로 DreamWeaver 시절을 여전히 기억합니다.
완벽한 답변 : 이것은 우리가 항상 HTML 파일의 첫 번째 줄로 넣은 문서 유형 (doc-type) 선언입니다. 브라우저는 응답의 마임 유형이 텍스트/html이라는 것을 이미 알고 있기 때문에이 정보는 중복되었다고 생각할 수 있습니다. 그러나 Netscape/Internet Explorer Days에서 브라우저는 여러 경쟁 버전에서 페이지를 렌더링하는 데 사용하는 HTML 표준을 파악하는 데 어려움을 겪었습니다.
각 표준이 다른 레이아웃을 생성했기 때문에이 태그가 쉽게 브라우저를 쉽게 사용할 수 있도록이 태그가 채택 되었기 때문에 특히 성가신 일이었습니다. 이전에는 DocType 태그가 길었고 심지어 사양 링크 (오늘 SVGS와 같은 것들)가 포함되었지만 운 좋게도 간단하게 은 html5에서 표준화되었으며 여전히 계속되었습니다.
또한 허용 : 이것은 브라우저에 HTML5 페이지임을 알리는 DocType 태그입니다.
소스 코드 의이 줄은 응시자가 접근성 및 현지화에 대해 알고 있는지 알려줍니다. 놀랍게도, 소수의 사람들만이 내 인터뷰에서 DIR 속성에 대해 알고 있었지만 스크린 리더에 대한 토론에 큰 도움이됩니다. 거의 모든 사람들이 이전에 사용하지 않았더라도 lang = "en"속성을 알아낼 수있었습니다.
완벽한 답변 : 이것은 HTML 문서의 루트 요소이며 다른 모든 요소는이 내부에 있습니다. 여기에는 두 가지 속성, 방향과 언어가 있습니다. 방향 속성은 사용자 에이전트에게 컨텐츠가 어떤 방향에 있는지 알려주는 값을 가지고 있습니다. 다른 값은 아랍어와 같은 언어의 경우 오른쪽에서 왼쪽으로 또는 자동으로 브라우저에 남겨 두어 파악합니다.
언어 속성은이 태그 내의 모든 컨텐츠가 영어로되어 있음을 알려줍니다. 예를 들어 EN-US 및 EN-GB를 구별하기 위해이 값을 모든 언어 태그로 설정할 수 있습니다. 이것은 또한 스크린 리더가 어떤 언어를 발표 해야하는지 아는 데 유용합니다.
완벽한 답변 : 소스 코드의 메타 태그는이 문서에 대한 메타 데이터를 제공하기위한 것입니다. 문자 세트 (char-set) 속성은 브라우저에 어떤 문자 인코딩을 사용하고, Twitter는 표준 UTF-8 인코딩을 사용합니다. UTF-8은 문자 포인트가 많기 때문에 훌륭하므로 소스 코드에서 모든 종류의 기호와 이모티콘을 사용할 수 있습니다. 브라우저 가이 줄을 가로 질러 텍스트를 너무 많이 구문 분석하기 시작하지 않으 므로이 태그를 코드의 시작 부분 근처에 놓는 것이 중요합니다. 나는이 규칙이 문서의 첫 번째 킬로바이트에 넣는 것이지만, 모범 사례는
상단에 바로 넣는 것입니다.참고로, 트위터는 성능 이유 (로드 할 코드가 적음)에 대한
태그를 생략하는 것처럼 보이지만 모든 메타 데이터, 스타일 등의 명확한 집이기 때문에 여전히 명시 적으로 만들고 싶습니다.완벽한 답변 : 소스 코드 의이 메타 태그는 스마트 폰과 같은 작은 화면에서 웹 페이지를 올바르게 크기를 조정하기위한 것입니다. 원래 iPhone 기조 연설을 기억한다면 Steve Jobs는 4.5 인치 화면에서 New York Times 전체 웹 사이트를 보여주었습니다. 당시에는 실제로 읽을 수 있도록 확대하기 위해 꼬집어 야하는 놀라운 기능이었습니다.
이제 웹 사이트는 디자인별로 반응합니다. 너비 = Device-width는 브라우저에 장치 너비의 100%를 뷰포트로 사용하므로 수평 스크롤이 없지만 너비에 대한 특정 픽셀 값을 지정할 수도 있습니다. 표준 모범 사례는 초기 스케일을 1로, 너비에서 장치 범위에서 사람들이 원하는 경우 여전히 확대 할 수 있도록하는 것입니다.
소스 코드의 스크린 샷에는 이러한 값이 표시되지 않지만 알아 두는 것이 좋습니다. 트위터는 또한 이름에서 알 수 있듯이 use-scalable = 0을 적용합니다. 이것은 접근성에 좋지 않지만 웹 페이지를 기본 앱처럼 느끼게합니다. 또한 동일한 이유로 최대 규모 = 1을 설정합니다 (최소 및 최대 스케일을 사용하여 이러한 값 사이의 줌 아일리티를 클램핑 할 수 있습니다). 일반적으로 전체 너비와 초기 스케일을 설정하는 것으로 충분합니다.
모든 후보자의 약 50%가 열린 그래프 태그에 대해 알고 있었고이 질문에 대한 좋은 답변은 그들이 SEO에 대해 알고 있음을 보여줍니다.
완벽한 답변 : 이 태그는 사이트 이름 인 Twitter에 대한 열린 그래프 (OG) 메타 태그입니다. Open Graph 프로토콜은 Facebook에서 링크를 더 쉽게 풀고 멋진 카드 레이아웃으로 미리보기를 표시 할 수 있도록 만들었습니다. 개발자는 모든 종류의 저자 세부 사항을 추가하고 멋진 공유를 위해 이미지를 커버 할 수 있습니다. 실제로, 요즘에는 인형극과 같은 것을 사용하여 열린 그래프 이미지를 자동 생성하는 것이 일반적입니다. (CSS- 트릭은 워드 프레스 플러그인을 사용합니다.)
또 다른 흥미로운 참고 사항은 메타 태그에 일반적으로 이름 속성이 있지만 OG는 비표준 속성 속성을 사용한다는 것입니다. 페이스 북이 페이스 북 인 것 같아요? 제목, URL 및 설명 오픈 그래프 태그는 이미 정기적 인 메타 태그가 있기 때문에 중복됩니다. 그러나 사람들은 안전하기 위해 추가합니다. 요즘 대부분의 사이트는 열린 그래프와 기타 메타 태그와 페이지의 내용을 사용하여 풍부한 미리보기를 생성합니다.
대부분의 응시자는 이것에 대해 알지 못했지만 숙련 된 개발자는 Apple-Touch-Icons 및 Safari 고정 탭 SVG와 같은 Apple 장치 용 웹 사이트를 최적화하는 방법에 대해 이야기 할 수 있습니다.
완벽한 답변 : iPhone 홈 화면에서 웹 사이트를 고정하여 기본 앱처럼 느낄 수 있습니다. Safari는 프로그레시브 웹 앱을 지원하지 않으며 iOS에서 다른 브라우저 엔진을 실제로 사용할 수 없으므로 트위터가 좋아하는 기본 경험을 원할 경우 다른 옵션이 없습니다. 그래서 그들은 이것을 추가하여 Safari 에게이 앱의 제목이 트위터라고 말합니다. 다음 줄은 비슷하며 앱이 시작될 때 상태 표시 줄의 모양을 제어합니다.
완벽한 답변 : 이것은 Apple 상태 바 색상 메타 태그와 적절한 웹 표준과 같은 적절한 웹 표준입니다. 브라우저에 주변 UI를 테마로 알려줍니다. 안드로이드의 크롬과 데스크탑의 용감한 사람은 둘 다 꽤 잘합니다. 컨텐츠에 CSS 색상을 넣을 수 있으며 미디어 속성을 사용하여 예를 들어 어두운 테마를 지원하기 위해 특정 미디어 쿼리에 대해이 색상 만 표시 할 수도 있습니다. 웹 앱 에서이 특성과 추가 속성을 정의 할 수도 있습니다.
내가 인터뷰 한 사람은 아무도 이것에 대해 알지 못했습니다. 표준 트랙에서 일어나고있는 모든 새로운 일에 대한 심층적 인 지식이있는 경우에만 이것을 알고 있다고 가정합니다.
완벽한 답변 : Origin Trials는 당사 사이트에서 새롭고 실험적인 기능을 사용할 수 있으며 피드백은 사용자 에이전트가 추적하고 사용자가 기능 플래그를 선택하지 않고 웹 표준 커뮤니티에보고합니다. 예를 들어, Edge는 듀얼 스크린 및 접이식 장치 프리미티브에 대한 원점 시험을 가지고 있으며, 접이식 전화가 열리거나 닫혀 있는지 여부를 기반으로 흥미로운 레이아웃을 만들 수 있기 때문에 매우 멋지다.
또한 받아 들여졌다 : 나는 이것에 대해 모른다.
거의 아무도 이것에 대해 알지 못했습니다. CSS 에지 케이스 및 최적화에 대해 알고있는 경우에만이 라인을 파악할 수 있습니다.
완벽한 답변 : 모바일 반응 형 사이트가없고 작은 화면에서 열어서 브라우저가 텍스트를 크기로 조정하여 읽기 쉽도록 쉽게 읽을 수 있다고 상상해보십시오. CSS 텍스트 크기 조정 속성은 값이 없음 으로이 기능을 비활성화하거나 브라우저가 텍스트를 더 크게 만들 수있는 백분율을 지정할 수 있습니다.
이 경우 트위터는 최대 값이 100%이므로 텍스트는 실제 크기보다 더 크지 않아야한다고 말합니다. 그들은 사이트가 이미 반응이 좋고 글꼴 크기가 더 큰 브라우저를 손상시키는 위험을 감수하고 싶지 않기 때문에 그렇게합니다. 이것은 루트 HTML 태그에 적용되므로 내부의 모든 것에 적용됩니다. 이것은 실험적인 CSS 속성이므로 공급 업체 접두사가 필요합니다. 또한이 CS에는 누락 된
또한 받아 들여진다 : 나는이 속성에 대해 구체적으로 알지 못하지만 -MS와 -webKit-는 비표준 특성에 대해 인터넷 익스플로러와 웹 키트 기반 브라우저가 각각 필요한 공급 업체 접두사이다. 우리는 CSS3이 나왔을 때 이러한 접두사를 요구했지만, 속성이 실험에서 안정으로 이동하거나 표준 트랙으로 채택되면 이러한 접두사는 표준화 된 특성을 선호합니다.
Twitter의 소스 코드 의이 줄은 웹 페이지를 재설정하고 정규화하는 것의 차이점에 대한 질문으로 후속 조치를 취할 수 있기 때문에 특히 재미 있습니다. 거의 모든 사람들이 정답의 버전을 알고있었습니다.
완벽한 답변 : 다른 브라우저마다 기본 스타일이 다르기 때문에 (사용자 에이전트 스타일 시트), 속성을 재설정하여 사이트를 덮어 쓰려고하여 사이트에서 사이트에서 동일하게 보이도록합니다. 이 경우 Twitter는 브라우저에 Body Tag의 기본 마진을 제거하도록 지시합니다. 이것은 단지 브라우저 불일치를 줄이기위한 것이지만, 스타일을 재설정하는 대신 정규화하는 것이 좋습니다. 즉, 브라우저에서 동일한 기본값을 완전히 제거하는 대신 적용합니다. 사람들은 심지어 * {margin : 0}을 사용했지만 완전히 과잉 성능이 좋지는 않지만 이제는 Normalize.css 또는 Reset.css (또는 더 새로운 것을 가져 오는 것과 같은 것을 가져 와서 시작하는 것이 일반적입니다.
나는 항상 브라우저 검사관 도구를 사용하여 사이트가 어떻게 만들어 졌는지 확인하는 것을 좋아합니다. 이것이 제가이 아이디어를 생각해 낸 방법입니다. Semantic HTML에 대한 전문가라고 생각하지만이 연습을 할 때마다 새로운 것을 배웁니다.
트위터는 대부분 클라이언트 측 REAT 앱이므로 소스 코드에는 수십 줄만 있습니다. 그 조에도 배울 것이 너무 많습니다! 트위터 소스 코드에는 독자를 위해 운동으로 남겨 두는 몇 가지 흥미로운 줄이 있습니다. 인터뷰에서 몇 명을 설명 할 수 있습니까?
<link rel="search" type="application/opensearchdescription xml" href="/opensearch.xml" title="twitter">
… 브라우저에 사용자가 검색 엔진으로 트위터를 추가 할 수 있다고합니다.
<link rel="preload" as="script" crossorigin="익명" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="mguyztiyn2itmdmdm1zc00mze5lwe2mymmymmymmymmymmymmytutu5ntg
… 특히 논의 할 수있는 많은 흥미로운 속성이 있습니다.
<link rel="대체" hreflang="x-default" href="https://twitter.com/">
… 국제 방문 페이지.
: 초점 : NOT ([Data-PocusVisible-PolyFill]) {개요 : 없음;}… 키보드 내비게이션을 사용할 때 초점 개요를 제거하기 위해 (CSS : 포커스 가시 가능한 선택기는 여기에서 폴리 채식).
위 내용은 Twitter의 첫 10 줄을 설명하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
