월간 웹 개발 업데이트 6⁄2018: 복잡성, HTTPS를 통한 DNS 및 푸시 알림

게시 됨: 2022-03-10
빠른 요약 ↬ Anselm Hannemann은 새로운 모든 것을 쉽게 따라갈 수 있도록 지난 4주 동안 웹 개발 세계에서 일어난 가장 중요한 일을 요약했습니다.

오늘날 우리는 웹 프로젝트의 모든 구석에서 복잡성을 봅니다. 우리는 특정 기술이 얼마나 복잡해졌는지에 대한 많은 기사를 읽었고 이에 대해 계속해서 논의합니다. FTP를 통해 웹사이트를 업로드하고 git이나 그에 상응하는 것이 없던 시대에서 지금은 가장 작은 프로젝트에 대해서도 빌드 시스템, 트랜스파일러, 프레임워크, 테스트 및 CI가 있는 시대에 살고 있으므로 이해하기 쉽습니다. . 그러나 반면에 웹 개발은 지난 15년 동안 너무 많이 성장하여 더 이상 과거와 오늘날을 비교할 수 없습니다 . 과거에는 어떤 것이 더 쉬웠던 것처럼 보일지 모르지만 우리는 오늘날 우리가 가진 이점과 무수한 가능성을 무시합니다. 그 당시 우리가 테스트를 작성하지 않았을 때, 우리는 단순히 테스트가 없었습니다. 즉, 성공을 테스트할 신뢰할 수 있는 방법이 없었습니다. 배포 프로세스가 없었을 때 새 버전을 업로드하는 것은 쉬웠지만 무언가를 깨뜨리는 것만큼이나 쉬웠습니다. 그리고 지속적인 통합 시스템이 있는 지금보다 훨씬 더 많이 발생했습니다.

제프리 젤드만(Jeffrey Zeldman)은 이 문제에 관해 흥미로운 기사를 썼습니다. “복잡한 숭배”는 우리가 어떻게 불필요한 세부 사항에 빠져 있고 종종 문제 를 지나치게 생각하려고 하는지에 대해 설명합니다. 나는 너무 복잡하지 않지만 상당한 책임(윤리, 개인 정보 보호, 보안, 우수한 사용자 경험 및 성능과 관련하여)을 보여주고 안정적으로 작동하는 시스템(테스트, 배포, 가용성 및 다시 성능). 적절한 균형을 찾는 문제는 조만간 해결되지 않을 것이라고 생각합니다. 복잡성은 어디에나 있습니다. 우리는 그것이 유용한 복잡성인지, 단순히 더 쉬워서 추가되었는지 또는 원래 문제를 과도하게 엔지니어링했기 때문에 추가되었는지 판단하기만 하면 됩니다.

소식

  • 곧 출시될 Safari 버전 12는 Apple의 WWDC에서 공개되었습니다. 새로운 기능은 다음과 같습니다. 탭의 아이콘, 강력한 비밀번호, HTML 속성을 통한 비밀번호 생성기 제어(2단계 인증 제어, 3D 및 AR 모델 뷰어, iPad의 전체 화면 API, font-display 포함) 이전보다 더 제한적이고 기존 웹사이트의 기능에 상당한 영향을 미칠 수 있는 Intelligent Tracking Prevention 2.0.
  • 헤드리스 Chrome 자동화 라이브러리 Puppeteer가 이제 버전 1.5로 출시되었습니다. 브라우저 컨텍스트를 가져와 일반적으로 페이지 간에 공유되는 쿠키 및 기타 데이터를 분리하고 이제 작업자를 사용하여 웹 작업자와 상호 작용할 수도 있습니다.
  • Google은 새로운 보고서 인터페이스, 일부 점수 변경, CSV 내보내기 및 First Contentful Paint 측정을 특징으로 하는 성능 분석 도구의 세 번째 주요 버전인 Lighthouse 3.0을 출시했습니다.
  • Chrome 67이 출시되어 Progressive Web Apps를 데스크톱에 제공하고 Generic Sensor API에 대한 지원을 제공하고 Credential Management API를 확장하여 USB를 통해 U2F 인증자를 지원합니다.
  • 우리는 지난 몇 달 동안 브라우저의 보안 인터페이스에서 상당한 변화를 보았습니다. 첫째, 보안 연결(HTTPS)을 제공하는 사이트를 강조했습니다. 그런 다음 그들은 안전하지 않은 사이트를 표시하기로 결정했고 이제 Chrome은 HTTP 페이지를 "안전하지 않음"으로 표시하여 HTTPS를 기본값으로 만드는 새로운 변경 사항을 가을에 발표했습니다.
Chrome 67의 데스크톱 PWA
Desktop Progressive Web Apps는 이제 Chrome OS 67에서 지원되며 Chrome 팀은 이미 Mac 및 Windows 지원 작업을 시작했습니다. (이미지 크레디트)

일반적인

  • "Cult of the Complex"에서 Jeffrey Zeldman은 단순함이 우리가 하는 모든 것의 핵심이자 목표, 프로젝트와 삶의 전반적인 목표라는 사실을 얼마나 자주 잊는지에 대해 씁니다. 그는 달성하기 어려운 이유와 복잡한 시스템을 개발하는 것이 훨씬 쉽고 유혹적인 이유를 설명합니다. 아주 잘 읽었고 확실히 내 '에버그린' 목록에 추가할 작품입니다.
  • Heydon Pickering은 웹 구성 요소를 올바르게 구축하는 방법을 알려주는 새롭고 매우 흥미로운 기사를 공유했습니다. 이번에는 포괄적이고 반응이 빠른 "카드" 모듈을 구축하는 방법을 설명합니다.

UI/UX

  • Cool Backgrounds는 Moe Amaya의 멋진 사이드 프로젝트입니다. 다양한 변형과 ​​모양을 생성할 수 있는 그라디언트가 있는 다각형 배경용 온라인 생성기입니다. 단순히 아름답습니다.

압형

  • Ben Frain은 거의 모든 최신 코드 편집기에서 사용할 수 있는 몇 가지 유용한 텍스트 편집 기술을 공유합니다.

보안

  • DNS를 통한 보안 공격이 인기를 얻으면서 HTTPS를 통한 DNS의 중요성이 점점 더 커지고 있습니다. Lin Clark은 이해하기 쉽도록 만화로 기술을 설명합니다.
  • Windows Edge는 이제 same-site 쿠키에 대한 지원을 미리 봅니다. 쿠키를 더 많이 잠그는 속성은 이미 Firefox 및 Chrome에서 사용할 수 있으므로 Safari는 여전히 이를 구현해야 하는 유일한 주요 브라우저이지만 곧 Tech Preview 빌드에도 포함될 것입니다.
HTTPS를 통한 DNS
Lin Clark은 HTTPS를 통한 DNS로 사용자의 개인 정보를 더 잘 보호할 수 있는 방법을 설명하는 만화를 만들었습니다. (이미지 크레디트)

은둔

  • ACLU는 Amazon이 이제 공식적으로 법 집행 기관과 협력하여 전 세계 도시에서 이미 사용되는 대량 얼굴 인식 기술을 제공한다는 사실을 발견했습니다.

웹 성능

  • KeyCDN은 웹 성능에 대해 많이 알고 있는 15명에게 최고의 조언을 독자와 공유하도록 요청했습니다. 이제 그들은 2018년에 유용한 성능 팁이 포함된 이 기사를 공유했습니다. 여기에는 제가 직접 쓴 몇 마디가 포함되어 있습니다.
  • Stefan Judis는 HTML 헤더 태그 link rel="modulepreload" 를 추가하여 Chrome 66에서 ECMA 스크립트 모듈을 미리 로드할 수 있다는 것을 발견했습니다.

접근성

  • 예를 들어 로드 중 단일 페이지 응용 프로그램에 대한 로딩 스피너를 구축하는 것은 상대적으로 쉽지만 액세스 가능하게 만드는 것에 대해서는 거의 생각하지 않습니다. 이제 Stuart Nelson이 그 방법을 설명합니다.
  • Paul Stanton은 최상의 결과를 얻기 위해 사용해야 하는 접근성 도구를 공유합니다.

자바스크립트

  • JavaScript는 최근 Elm, Rust, TypeScript, Babel 또는 Dart를 선호하는 사람들에게 괴롭힘을 당했습니다. 그러나 Andrea Giammarchi가 훌륭한 예를 들어 설명하듯이 JavaScript는 확실히 더 나쁘지 않습니다. 이 기사는 또한 우리가 알아야 할 몇 가지 함정을 보여주기 때문에 이러한 다른 언어 중 하나를 사용하는 모든 사람이 읽을 수 있는 좋은 책입니다.
  • 많은 프로젝트에서 개인 정보를 수집하는 분석 또는 기타 스크립트를 사용하려고 합니다. GDPR이 시행되면서 이것은 훨씬 더 어려워졌습니다. Yett는 사용자가 동의할 때까지 이러한 리소스의 실행을 차단할 수 있는 훌륭한 JavaScript 도구입니다.
  • Ryan Miller는 "Frontendian"이라는 새 간행물을 만들었으며 지금까지 내가 본 CORS에 대한 최고의 설명과 가이드 중 하나를 제공합니다.
  • Microsoft의 사람들은 웹 푸시 알림의 기능과 모양을 보여주기 위해 멋진 대화형 데모 페이지를 만들었습니다. 아직 기술을 이해하지 못했다면 모든 작동 방식과 사용자를 방해하지 않는 인터페이스를 구축하는 방법에 대한 훌륭한 입문서입니다.
  • Filepond는 파일 업로드를 위한 JavaScript 라이브러리입니다. 그것은 멋지게 보이고 React, Vue, Angular 및 jQuery를 위한 많은 어댑터와 함께 제공됩니다.
  • React 16.4가 출시되어 라이브러리에 포인터 이벤트라는 기능을 제공합니다. 사용자 상호 작용을 더 쉽게 처리할 수 있으며 이미 오랫동안 요청되어 왔습니다.
프론텐디언
기본적인 점성술 아이디어와 푸시 알림 아키텍처 사이의 유사점에서 영감을 받아 Microsoft 팀은 브라우저나 앱을 열지 않고도 사용자에게 푸시 알림을 보내는 방법을 설명합니다. (이미지 크레디트)

CSS

  • Oliver Schondorfer가 웹에서 가변 글꼴로 시작하는 방법과 CSS로 글꼴 스타일을 지정하는 방법을 공유합니다. 가능한 함정과 함께 고려해야 할 사항에 대한 매우 완전한 요약입니다.
  • '다크 모드'를 지원하는 곧 출시될 macOS Mojave와 함께 Safari는 background-color 이 명시적으로 설정되지 않은 경우 웹사이트의 배경색을 자동으로 검은색으로 설정하기 시작합니다. 이는 브라우저가 기본 스타일을 설정 및 변경할 수 있으며 사이트 기본값을 신중하게 설정해야 함을 상기시켜줍니다. 나는 여전히 '다크 모드'가 CSS 미디어 쿼리에 노출되어 공식적으로 지원을 추가할 수 있기를 바랍니다.
  • Rafaela Ferro가 CSS 그리드를 사용하여 보기에 좋을 뿐만 아니라 실제로도 멋진 사진 갤러리를 만드는 방법을 공유합니다. 이 기사에는 그리드 레이아웃에 대해 이야기할 때 정기적으로 받는 많은 질문에 대한 답변이 있습니다.
  • Marcin Wichary가 최신 CSS 사용자 정의 속성을 사용하여 짧은 시간에 어두운 테마를 만드는 방법을 설명합니다.

직장 생활

  • Anton Sten은 우리 앱의 도덕적 의미에 대해 썼습니다. 우리가 인공 지능, 사람들의 삶에 영향을 미치는 소셜 네트워크, GDPR에 의해 시행되는 개인 정보 문제를 다룰 때 "빨리 움직이고 깨는" 시대가 확실히 끝난 이유에 대한 의미 있는 설명입니다.
  • Basecamp에는 이제 프로젝트의 상태를 표시하는 새로운 차트 유형이 있습니다. 소위 "힐 차트"는 단순한 진행률 표시줄이 할 수 있는 것보다 더 나은 컨텍스트를 추가합니다.
  • Ben Werdmuller가 이력서에 대한 자신의 생각과 이력서가 당신이 누구인지, 무엇을 하는지, 왜 채용되어야 하는지를 항상 반영하지 못하는 이유를 공유합니다.

이번 월간 업데이트가 마음에 드셨기를 바랍니다. 다음 방송은 7월 13일 예정이니 많은 관심 부탁드립니다. 그동안 제가 하는 일이 마음에 들면 웹 개발 읽기 목록에 재정적으로 자금을 지원하는 것을 고려해 주십시오.

좋은 하루 되세요!

— 안셀름