월간 웹 개발 업데이트 12⁄2018: WebP, UX의 상태 및 스트레스가 적은 실험

올해의 마지막 판이며 2018년이 우리에게 무엇을 가져왔는지, 무슨 일이 일어났는지, 웹이 어떻게 발전했는지 매우 기쁩니다. 그것을 요약하고 우리 각자가 올해 배운 것을 상기시켜 봅시다. 우리가 사용한 가장 유용한 기능, API, 라이브러리는 무엇이었습니까? 그리고 우리는 개인적으로 어떻게 변했습니까?

이번 달의 업데이트를 위해 나는 또 다른 기사 모음을 수집했습니다. 아직 읽을 자료가 충분하지 않다면 아카이브나 웹 개발 읽기 목록 시작 이후 가장 중요한 기사가 포함된 Evergreen 목록에서 더 많은 것을 찾을 수 있습니다. 연말까지 남은 나날들 너무 스트레스 받지 마시고 좋은 일만 가득하시길 바랍니다. 내년에 봐!

소식

• Microsoft는 Edge 전략을 변경할 것이라고 방금 발표했습니다. EdgeHTML 대신 데스크톱용 새 브라우저 엔진으로 Chromium을 사용할 것이며 macOS용 Microsoft Edge를 제공할 수도 있습니다. 그들은 또한 지금부터 Blink 엔진의 개발을 도울 것입니다.
• Chrome 71이 출시되었으며 국제화 API를 통해 상대적 시간 지원을 제공합니다. 또한 음성 합성을 사용하려면 이제 사용자 활성화가 필요합니다.
• Safari Technology Preview 71이 출시되어 CSS에서 supported-color-schemes 를 가져오고 웹 인증을 실험적 기능으로 추가합니다.
• Firefox는 곧 모든 권한 요청을 자동으로 차단하는 브라우저 설정을 사용자에게 제공할 예정입니다. 이것은 자동 재생 비디오, 웹 알림, 지리적 위치 요청, 카메라 및 마이크 액세스 요청에 영향을 미칩니다. 자동 차단 요청의 필요성은 잘못된 개발자가 이러한 기술을 얼마나 사용하고 있는지 보여줍니다. 예를 들어 WebRTC 호출 서비스와 같은 서비스 요청에 의존하는 사람들에게는 슬픈 소식입니다.

일반적인

• 마침내 놀라운 기술로 오프라인에서 웹사이트에 액세스하고 사용할 수 있는 방법을 찾았습니다. 그러나 우리가 잊고 있었던 한 가지는 지난 30년 동안 사람들에게 웹이 온라인이라고 가르쳤기 때문에 대부분의 사람들은 오프라인 사용이 있다는 것조차 알지 못한다는 것입니다. 사용자 경험 디자인에 대한 교훈과 우리가 구축하고 있는 매체의 역사를 상기시키는 것의 중요성.

UI/UX

• 매튜 스트롬(Matthew Strom)은 나중에 문제를 수정하고 완벽해지려고 하지 않는 것의 중요성에 대해 썼습니다.
• 2019년 UX 현황에 대한 다소 풍자적인 자료입니다.
• Erica Hall은 대부분의 'UX 디자인'이 신화인 이유와 디자인이 훌륭한 제품일 뿐만 아니라 올바른 제품 전략과 비즈니스 모델을 만드는 이유에 대한 예를 보여줍니다. 이 글을 읽어야 하는 가장 좋은 예는 에리카가 “Virgin America. 디오. 구글 리더. 컴캐스트. 다음 중 어떤 것이 좋은 경험을 제공했습니까? 이 중 어떤 것이 아직 존재합니까?” 무시할 수 없는 사실은 다행히도 이 기사는 비관적이지 않지만 이러한 지식을 사용하여 제품을 개선할 수 있는 방법에 대한 훌륭한 팁이 포함된 매우 사려 깊은 기사입니다. 전략과 디자인, 적합한 비즈니스 모델이 있습니다.

압형

• Sandip Devarkonda가 Postgres에서 GraphQL 구독으로 실시간 앱을 구축하는 방법을 설명합니다.

HTML 및 SVG

• Michael Scharnagl은 한 가지 코딩 언어를 다른 언어보다 선호한다는 이유로 사람들을 괴롭히는 것을 중단해야 하는 이유에 대해 설명합니다.

접근성

• Scott O'Hara는 사용자 지정 스타일 컨트롤을 위해 노력할 때 많은 사람들이 제공하는 고유한 기능과 접근성을 잊지 않는 것이 얼마나 중요한지 상기시킵니다.

CSS

• CSS 환경 변수가 출시될 예정이며 사용자 정의 속성에 추가로 필요한 이유가 여기에 있습니다.
• Andy Bell은 CSS 사용자 정의 속성을 사용하여 레이아웃의 흐름과 리듬을 관리하는 방법을 설명합니다. 색상 값에 대해 사용자 정의 속성을 사용하는 것 이상의 훌륭한 예입니다.

자바스크립트

• Google은 또 다른 API를 제공할 예정입니다. Badging API를 사용하면 Web Desktop Apps에서 새 알림 등을 표시할 수 있습니다. 사양은 아직 논의 중이며 이에 대한 귀하의 생각을 기꺼이 들을 것입니다.
• Hidde de Vries가 최신 JavaScript API를 사용하여 요소를 뷰포트 중앙으로 스크롤하는 방법을 설명합니다.
• Chrome 71의 플래그 뒤에서 사용할 수 있는 새로운 Background Fetch 를 사용하면 백그라운드에서 로드하는 데 시간이 걸리는 리소스(예: 영화)를 가져올 수 있습니다.
• Pete LePage는 Web Share Target API를 사용하여 서비스를 Share Target으로 등록하는 방법을 설명합니다.
• 웹 글꼴을 로드하기 위해 JavaScript를 사용하는 것이 여전히 좋은 생각입니까? Zach Leatherman이 사례별로 결정해야 하는 이유와 최신 CSS 및 font-display: swap; .
• Doka는 염두에 둘 가치가 있는 새로운 독립형 JavaScript 이미지 편집기입니다. 무료 제품은 아니지만 쾌적한 사용자 경험으로 매우 편리한 편집 방법을 제공하며 연회비를 지불하면 버그 수정 및 지원을 받을 수 있습니다.
• "웹 구성 요소의 힘"은 기본 개념, 사용 시작 방법, HTML, 관련 CSS 클래스 및 JavaScript 트리거를 함께 붙이는 대신 고유한 HTML 요소를 사용하여 작업을 훨씬 단순화할 수 있는 이유를 공유합니다.

보안

• Scott Helme는 우리가 사용할 수 있는 새로운 보안 헤더에 대한 정보를 공유합니다. Clear Site Data 를 사용하면 사이트 소유자가 캐시, (로컬/세션/영구) 저장소 또는 쿠키에서 데이터를 지울 수 있습니다. 이것은 localStorage 또는 인증 쿠키에 저장된 민감한 개인 데이터를 쉽게 삭제하는 데 유용할 수 있습니다.
• 이제 rel=noopener 를 사용하는 것이 target=_blank 링크 요소에 좋은 아이디어라는 것을 알고 있습니다. 이제 Firefox는 브라우저에서 rel=noopener 를 자동으로 대체하여 보안 공격이 남용되지 않도록 실험합니다.
• Terence Eden은 지불을 제공하는 많은 대형 사이트에 제3자의 인증되지 않은 검증되지 않은 JavaScript가 포함되어 있는 방법을 살펴봅니다. 그는 이것이 의미하는 바, 왜 그렇게 해로운지, 그리고 우리가 이 문제를 해결할 수 있는 방법을 자세히 설명합니다. 즉, 포함해야 하는 Stripe JavaScript 번들은 하위 리소스 무결성도 제공하지 않습니다.
• 매우 인기 있는 npm 패키지에서 또 다른 보안 사고가 발생했습니다. event-stream 은 컴퓨터에서 특정 비트코인 ​​지갑을 훔치는 악성 코드와 함께 게시되었습니다. 컴퓨터의 종속성을 확인하고 최신 패키지 버전으로 업데이트하십시오. npm audit 는 이러한 문제를 식별하는 데도 도움이 됩니다.

은둔

• 남편이나 아내가 있습니까? 어린이? 다른 친척? 그렇다면 가족 데이터를 보호하기 위한 이 필수 가이드를 읽고 행동으로 옮겨야 합니다. 인터넷은 안전한 곳이 아니므로 친척이 자신이 하는 일을 이해하도록 하고 싶습니다. 그리고 친척을 가르치거나 더 나은 기본 설정을 지정하여 보호할 수 있는 사람은 바로 귀하입니다.

웹 성능

• WebP 이미지 파일 크기는 최고의 JPEG 최적화와 어떻게 비교됩니까? Daniel Aleksandersen은 수치를 제시하고 WebP가 거의 매번 다른 최적화된 형식을 능가하는 환상적인 작업을 수행한다고 결론지었습니다.
• Ire Aderinokun은 오늘날 WebP 이미지를 사용하는 방법을 보여줍니다. 이것은 Firefox가 Nightly 빌드에서 WebP 지원을 제공하고 Edge도 마지막 릴리스 이후 형식을 지원하기 때문에 더욱 관련성이 있습니다.
• Amazon의 클라우드 부서는 Arm 기반 서버 칩을 출시하고 이를 통해 비용을 약 45% 절감할 수 있습니다(예: 웹 서버의 경우). 이것은 에너지 소비가 훨씬 더 낮고 전반적인 효율성이 더 높다는 것을 의미하며 이는 지구에도 좋은 신호입니다. 우리는 기후에 대한 기술의 영향을 낮추는 이러한 진화적인 인프라 업그레이드가 더 필요합니다.

직장 생활

• Shana Lynch는 무엇이 누군가를 윤리적인 비즈니스 리더로 만드는지, 어떤 가치가 중요한지, 상황이 어려울 때 똑바로 설 수 있는 방법, 불편한 상황에 미리 대비하는 방법을 알려줍니다.
• Ozoemena Nonso는 우리가 종종 행복하지 않은 이유를 설명하려고 합니다. 우리의 행복을 훔치는 도둑은 우리 자신을 다른 사람과 비교하는 것이 아닙니다. 그것은 우리가 비교 모델을 올바르게 얻기 위해 고군분투하고 있다는 것입니다. 자신을 다른 사람과 자주 비교하고 행복이 고통받는다고 느낀다면 믿을 수 없을 정도로 좋은 삶의 조언입니다.
• 다소 드문 조언: 다른 사람들이 안락한 영역을 떠나도록 강요하는 것은 나쁜 생각일 수 있습니다.
• Sandor Dargo는 근무 시간 동안 주의를 산만하게 하는 것을 피하고 자신의 일을 다시 제대로 수행한 방법에 대해 설명합니다.
• Paul Robert Lloyd는 Cennydd Bowles의 책 "Future Ethics"에 대해 글을 쓰고 있으며 그 내용을 설명하면서 간단한 예를 들어 윤리의 과제도 지적합니다.
• Jeffrey Silverstein은 교사이며 풀타임으로 일하는 동안 부수적인 프로젝트를 위한 시간을 찾는 데 많은 어려움을 겪고 있습니다. 이제 그는 "전일제 작업과 창의적인 프로젝트의 균형을 맞추는 방법"에 대한 이 훌륭한 기사에서 우리와 공유하는 솔루션을 찾았습니다. 완전히 공감할 수 있는 감동적인 글.
• Ben Werdmuller가 라이프스타일 비즈니스가 엄청나게 과소평가되는 이유에 대한 자신의 생각을 공유합니다. 하지만 라이프스타일 비즈니스는 무엇입니까? 그는 이를 소유주가 일정 수준의 소득을 유지할 수 있도록 허용하지만 그 이상은 유지할 수 없는 벤처 자금을 지원하지 않는 기업으로 정의합니다. 재미있는 부가설명으로, 이 기사는 미국 서부 해안에서 얼마나 미친 렌탈 상품이 되었는지 보여줍니다.
• Jake Knapp이 이메일도 알림도 없는 산만함 없는 스마트폰으로 6년을 어떻게 버텼는지 이야기합니다. 그리고 그는 우리를 위한 몇 가지 훌륭한 팁과 시도해 볼 운동을 가지고 있습니다. 나는 최근에 모든 앱을 두 번째 화면의 한 폴더로 이동하여 앱을 검색해야 한다는 것을 확인했습니다. 이는 일반적으로 내가 정말로 그것을 열고 싶고 나 자신을 산만하게 하기 위해 하지 않는다는 것을 의미합니다.
• Ryan Avent는 우리가 왜 그렇게 열심히 하는지에 대해 썼습니다. 이 에세이는 잘 조사되었으며 왜 우리가 일이 중요하다고 생각하는지, 왜 그것을 사랑에 빠지는지, 왜 우리의 생활 방식과 사회가 항상 더 열심히 일하도록 포용하는지 설명합니다.

넘어…

• "디자이너는 누구를 위해 일하는가"는 책임에 대한 걸작입니다.
• Maryanne Wolf는 우리의 뇌가 글을 읽을 때 복잡성을 파악하거나 감정을 이해하거나 아름다움을 인지할 시간이 없다는 연구 결과를 공유합니다. 지난 수십 년 동안 악화된 추세입니다.
• 32조 달러를 관리하는 글로벌 투자자들은 유엔 기후 정상 회담에서 각국 정부에 긴급한 탄소 배출량 감축과 모든 석탄 연소의 단계적 중단을 요구하는 엄중한 경고를 발표했습니다. 이것이 없다면 세계는 2008년 위기보다 몇 배나 더 심각한 금융 위기에 직면하게 될 것이라고 그들은 말했습니다.
• 어떤 면에서는 지구 최악의 대멸종(2억 5천만 년 전, 페름기 말)이 오늘날의 기후 변화와 병행할 수 있습니다.