2018년 월간 웹 개발 업데이트 8⁄2018: JavaScript 비용, 오픈 소스 윤리 및 QUIC

기술 및 소프트웨어 구축은 매우 책임감 있는 일이 되었습니다. 사람들은 우리가 만드는 제품을 신뢰하며 삶에도 상당한 영향을 미칠 수 있습니다. 이를 고려할 때 우리는 포괄적인 솔루션에 대해 생각할 뿐만 아니라 윤리, 신뢰성 및 보안을 위해 일어서서 옹호해야 합니다. 우리에게 힘을 주는 위치입니다.

Eric Meyer는 HTTPS 전용 웹이 가져오는 문제를 자세히 설명하는 기사를 게시했습니다. 그 보고서에서 그는 개발도상국이 종종 인터넷 연결이 좋지 않고 암호화로 인해 이전보다 더 많은 웹 사이트 오류를 ​​경험하기 때문에 이러한 개발로 인해 많은 고통을 겪고 있음을 밝혔습니다. Ben Werdmuller는 "Stop building for San Francisco"라는 기사를 게시하여 개발자로서 우리가 가진 가장 큰 문제 중 하나를 지적합니다. 바로 특권이 있는 하드웨어와 인프라를 사용합니다. 우리는 최신 iPhone, 기가비트 또는 빠른 4G 연결을 지원하는 Macbook을 사용하여 경험을 구축하지만, 우리가 구축하고 있는 대부분의 사람들이 그렇게 잘 갖추어지지 않은 기기와 인프라를 사용한다는 점을 고려하지 않습니다. 웹을 보다 안전하게 만드는 것은 의심의 여지가 없는 훌륭한 아이디어이지만 최신 기술과 우리의 디자인 결정이 다른 사람들에게 미칠 수 있는 결과도 염두에 두어야 합니다.

소식

• TypeScript 3.0은 몇 가지 편리한 언어 기능과 수정 사항과 함께 출시되었습니다.
• 이미 꽤 오래전부터 Chrome에 구현된 클라이언트 힌트는 놀라운 기능입니다. 개인 정보 보호를 개선하기 위해 반응형 이미지에 대한 클라이언트 힌트의 기능이 Chrome 67에서 변경되었습니다. Colin Bendell이 차이점과 클라이언트 힌트가 성능에 매우 유용한 이유를 설명합니다.
• 개발자들은 Safari의 ITP(Intelligent Tracking Prevention)와 이를 활성화한 상태에서 웹사이트를 디버깅하는 방법에 대해 많은 질문을 해왔습니다. 이제 WebKit 팀은 문제를 추적할 수 있는 훨씬 더 많은 유연성과 도구를 제공하는 ITP 디버그 모드를 공유합니다.
• 10월부터 대부분의 브라우저는 시만텍 TLS 인증서를 완전히 신뢰하지 않으므로 여전히 이를 사용하는 웹사이트에 대한 액세스를 차단합니다. 아직 인증서를 업데이트하지 않았다면 업데이트하십시오.
• 최신 버전의 Chrome(68)은 HTTP 페이지를 방문할 때 새로운 "안전하지 않음" 알림을 제공합니다. 이를 인지하고 그에 따라 사이트를 업그레이드하십시오. 또한 Chrome 68의 새로운 기능은 새로운 Page Lifecycle API, 페이지 이벤트를 위한 새로운 API 및 Payment Handler API입니다. 이제 서비스 워커에 대한 업데이트를 요청할 때 HTTP 캐시가 무시되어 Chrome이 사양 및 기타 브라우저와 일치하도록 합니다. 그 외에도 cursor 값 grab 및 grabbing 은 이제 새 버전에서 접두사가 제거되었습니다.

일반적인

• 오픈 소스용으로 빌드하는 경우 프로젝트에서 사용할 라이선스를 결정해야 합니다. 이제 새로운 옵션인 Just World License가 있습니다. "일반적으로 오픈 소스 소프트웨어의 원칙에 동의하지만 생명, 환경 및 미래를 파괴하려는 노력의 일환으로 소프트웨어를 사용하는 데 불편함을 느끼는" 개발자를 위한 것입니다.
• 딥 러닝 머신은 요즘 큰 화두이지만, 어떤 사람들은 비디오 게임에서 딥 러닝 머신을 쉽게 능가하는 더 나은 알고리즘을 탐색하고 있습니다.
• Drew DeVault의 "간단하고 정확하며 빠름: 순서대로"는 웹 및 소프트웨어 개발의 우선 순위를 바로 설정하라는 훌륭한 알림입니다.
• Jonathan Fulton은 "내가 웹 개발자로 일을 시작할 때 알았더라면 좋았을 기본 아키텍처 개념"이라는 편리한 리소스를 썼습니다. 이것은 우리 업계의 새로운 사람들을 위한 훌륭한 웹 아키텍처 101이자 기초입니다.

UI/UX

• Ethics for Design은 유럽 8개 도시의 12명의 디자이너와 연구원이 디자인이 우리 사회에 미치는 때로는 해로운 영향과 디자이너가 소수가 아닌 모두의 이익을 위해 일할 수 있는 것에 대해 토론하는 프로젝트입니다.

압형

• Prashant Palikhe는 Chrome의 개발자 도구를 사용한 디버깅 기술에 대한 긴 이야기를 썼습니다. 이 도구는 브라우저의 개발자 도구를 이해하는 데 매우 완벽한 참조 자료이므로 강력히 추천합니다. 다른 브라우저를 사용하는 경우 대부분의 도구가 매우 유사하므로 큰 문제는 아닙니다.
• WebP는 몇 가지 멋진 기능을 갖춘 이미지 형식이며 일반적인 JPEG/PNG 형식 외에 가장 잘 알려진 새로운 형식 중 하나일 것입니다. 그러나 WebP 이미지를 만드는 것은 여전히 ​​어려울 수 있으므로 Jeremy Wagner는 이미지를 WebP로 변환하는 방법에 대한 가이드를 작성했습니다.
• Douglas Creager는 사용자 에이전트가 서버 로그에 나타날 동일한 정보 집합을 수집하도록 지시할 수 있는 새로운 네트워크 오류 로깅을 도입했습니다.
• 우리 중 많은 사람들이 Slack과 같은 커뮤니케이션 도구에 중독되어 있습니다. Wildbit의 사람들은 Slack의 작동 방식에 상당한 영향을 미치면서 일주일 동안 Slack을 종료하기로 결정했습니다. 유용한 도구에 너무 익숙해져 더 이상 사용하지 않는 경향이 있다는 흥미로운 사례 연구입니다. 때때로 마음을 재설정하는 것이 중요합니다.
• Dennis Reimann은 UI 기반 개발을 위한 워크벤치인 UIEngine의 첫 번째 안정적인 버전을 발표했습니다.

보안

• 새로운 Observer가 등장했습니다. ReportingObserver API를 사용하면 사이트에서 더 이상 사용되지 않는 API를 사용하거나 브라우저 개입이 발생할 때 이를 알 수 있습니다. 지금까지는 Chrome 69에서 사용할 수 있습니다. 이전에는 콘솔에서만 사용할 수 있었던 오류를 백엔드 또는 오류 처리 서비스로 보내는 데 쉽게 사용할 수 있습니다.

웹 성능

• QUIC(빠른 UDP 인터넷 연결)를 기억하십니까? 내부적으로 사용하고 더 큰 사용을 위해 잘 형성되고 있는 Google에서 설계한 프로토콜은 무엇입니까? IETF는 현재 연말을 향해 형식을 표준화하고 있지만 Cloudflare 엔지니어는 이제 테스트 경험을 공유합니다.

• 사용자 생성 콘텐츠가 있는 경우 출력할 요소가 하나뿐인지 아니면 요소 목록이 있는지 잘 모르는 경우가 많습니다. Colloq에서 우리는 의미론을 올바르게 수행하기를 원했고 컨테이너에 하나의 요소만 있을 때 p 태그를 출력할 수 있는 시스템을 구축했습니다. 그렇지 않으면 다양한 목록 항목이 있는 ol / ul 목록을 출력할 수 있습니다.

접근성

• Dave Rupert는 구성 요소 작성과 관련하여 접근성 기대치를 소화하고 단순화하려는 프로젝트인 A11Y Nutrition Cards를 공유합니다.
• 링크 건너뛰기는 매우 일반적인 접근성 기능입니다. Hampus Sethfors는 이제 왜 많은 링크가 여전히 깨지고 올바르게 수정하는 방법에 대한 기사를 작성했습니다.

자바스크립트

• Pinterest 엔지니어링 팀의 Zack Argyle이 Progressive Web App을 도입한 지 1년이 지난 후를 되돌아봅니다. 그들이 PWA를 구축하기로 결정한 이유에 주목하는 것이 중요합니다. "저대역폭 환경과 제한된 데이터 요금제에 있는 사람들을 위한 모바일 웹 경험은 좋지 않았습니다." 그러나 그들에 대한 결과는 보기에 놀랍습니다.
• 필립 월튼(Philip Walton)은 페이지가 백그라운드(보이지 않음), 활성, 정지 또는 종료와 같은 이벤트를 통해 브라우저의 페이지 상태를 보다 쉽게 ​​결정할 수 있도록 도와주는 새로운 Page Lifecycle API를 도입했습니다.
• 웁, JavaScript의 eval() 이 나쁘다는 것을 모두 알고 있습니까? 이것이 콘텐츠 보안 정책에서 일반적으로 사용을 금지하는 이유입니다. 그러나 Remy Sharp는 보안에 똑같이 나쁜 코드 줄이 있음을 상기시킵니다.
• Addy Osmani는 2018년 JavaScript 비용을 조사했으며 이제 JavaScript의 모든 바이트가 상호 작용을 크게 지연시킬 수 있기 때문에 여전히 휴대폰에 보낼 수 있는 가장 비싼 리소스라는 증거를 공유합니다. 이것은 특히 기술 산업 외부에서 널리 사용되는 유능하지 않은 전화기의 경우 문제입니다.
• Hidde de Vries가 JavaScript 단일 페이지 애플리케이션에서 페이지 제목에 액세스할 수 있는 방법을 설명합니다.

CSS

• Max Bock은 비교적 간단한 코드로 미래의 레이아웃을 구축하기 위해 몇 가지 CSS 그리드 기술을 탐구했습니다.
• Sara Soueidan이 최신 HTML 및 CSS를 사용하여 포괄적인 토글 스위치를 구축하는 방법을 설명합니다.
• Jen Simmons가 일반적인 CSS 그리드 실수와 해결 방법을 공유합니다.
• Ethan Marcotte는 우리가 CSS 그리드에 주로 사용하는 비교적 새로운 fr 단위를 설명합니다.

직장 생활

• 파리 마르크스는 디지털 노마드가 미래가 아니라고 생각하는 이유에 대해 썼습니다. 그는 공적 자금으로 구축된 통신 인프라가 있기 때문에 위치 독립이 가능하며 이를 남용하는 것은 공정하지 않다고 주장합니다.
• 이번 주에 저는 고정관념에서 벗어나 생각하는 것이 얼마나 유용한지, 원격 근무와 취미 생활이 기술적인 문제를 해결하는 데 어떻게 도움이 될 수 있는지 배웠습니다.
• 회사가 주 4일 근무제를 테스트한 것은 이번이 처음이 아닙니다. 그러나 개념이 어떻게 성공적으로 수립될 수 있고 직원 과 작업 완료 모두에게 이익이 될 수 있는지 보는 것은 좋습니다.

넘어…

• Tobias van Schneider는 Sagmeister-Walsh 스튜디오가 작게 유지함으로써 그토록 성공적인 이유와 큰 꿈을 꾸되 작게 유지하는 것이 창의적 사고에 왜 그렇게 중요한지에 대해 썼습니다.
• Ben Werdmuller는 예를 들어 샌프란시스코에 있을 때 사업을 시작하는 것이 얼마나 달라졌는지에 대한 자신의 생각을 공유합니다. 이것은 샌프란시스코에서 $117,000가 "저소득"으로 간주되고 이것이 아이디어를 제한하는 이야기입니다.
• Jeremy Nagel은 오픈 소스 코드의 영향에 대해 생각하게 합니다. 개발자로서 우리는 코드를 무료로 사용할 수 있도록 하는 것이 놀라운 일이라고 생각하는 경향이 있지만 나쁜 플레이어, 즉 석탄 광부, 공해에 기여하는 회사, 사람들을 학대하면서 부자가 되기 위해 이용하는 사람들, 간접적으로 당신을 갈취하는 사람들. 당신이 그것에 대해 아무것도 할 수 없다는 것이 아닙니다. 이러한 문제를 인식하고 더 나은 라이선스를 적용하거나 코드에 전용 설명을 추가해야 합니다.
• 인도는 큰 플라스틱 폐기물 문제가 있습니다. 몇 달이 지난 지금, 몇 명의 어부들은 플라스틱 문제를 더 이상 무시하지 않고 대신 그물에 모든 쓰레기를 모아 도로를 건설하는 데 사용되는 해안으로 가져옵니다. 쓰레기를 효율적으로 사용하는 좋은 아이디어.