월간 웹 개발 업데이트 10⁄2018: 허리케인 웹, 종단 간 무결성 및 RAIL

게시 됨: 2022-03-10
간략한 요약 ↬ 지난 4주 동안 웹 개발 세계에서 무슨 일이 일어났습니까? Anselm은 월간 읽기 목록에서 브라우저 뉴스에서 귀중한 기술, 도구 및 교훈에 이르기까지 알아야 할 모든 것을 요약했습니다.

이번 주에 최신 연구와 공식 보고서가 발표됨에 따라 지구에서 돌이킬 수 없는 기후 변화를 피하기 위해 우리는 향후 10년 이내에 과감하게 행동해야 할 것으로 보입니다. 이것은 내가 쓸 가치가 있다고 생각하는 몇 가지 의심과 가정을 불러일으켰습니다.

내가 자주 듣는 주장 중 하나는 우리 개인은 영향을 미칠 수 없으며 기후 변화는 "대기업의 잘못"이라는 것입니다. 그러나 소비자인 우리는 우리가 무엇을 사고 누구에게서, 누구의 제품을 사용하고 어떤 제품을 피하는지 결정하는 사람입니다. 그리고 현명하게 선택함으로써 변화를 일으킬 수 있습니다 . 예를 들어 주변 사람들과 이야기하고 회사 소유주에게 재생 가능 에너지로 전환하도록 설득함으로써 우리는 우리 사회와 경제를 지구에 해를 끼치지 않는 보다 지속 가능한 사회로 변화시킬 수 있습니다. 물론 어려운 일이겠지만 개인의 책임을 부정할 수는 없습니다.

어쩌면 우리는 이것을 우리에게 정말로 필요한 것이 얼마나 필요한지 다시 생각해보는 기회로 삼아야 합니다. 자연으로 나가는 것은 우리가 환경과 다시 연결하는 데 도움이 될 수 있습니다. 재료와 그 속성을 이해하기 위해 손으로 무언가를 천천히 그리고 천천히 구축하는 것은 현재 우리가 가진 자원이 얼마나 소중한지, 그리고 지금 지구를 돌보지 않는다면 무엇을 잃게 될지 이해하는 데 도움이 될 수 있습니다.

소식

  • Chrome 70은 Windows 및 Linux의 Desktop Progressive Web Apps, Credential Management API의 공개 키 자격 증명, 이름이 지정된 작업자와 함께 제공됩니다.
  • Postgres 11이 출시되었으며 파티셔닝을 위한 더욱 강력하고 성능이 향상되었으며 쿼리 병렬 처리를 위한 향상된 기능, 표현식을 위한 JIT(Just-in-Time) 컴파일 및 기타 유용하고 편리한 몇 가지 변경 사항이 제공됩니다.
  • 새로운 macOS Mojave 및 iOS 12가 출시됨에 따라 Safari 12도 출시되었습니다. 이 버전의 새로운 기능은 무엇입니까? 내장 암호 생성기, 3D 및 AR 모델 뷰어, 탭의 아이콘, 최신 watch OS의 웹 페이지, 새 양식 필드 속성 값, iPad의 iOS용 전체 화면 API, WOFF2의 글꼴 모음 지원, font-display CSS 속성 로드, Intelligent Tracking Prevention 2.0 및 몇 가지 보안 개선 사항.
  • 사용자가 Gmail과 같은 서비스에 액세스할 수 있도록 브라우저에서 Google 계정에 로그인하도록 강제하기로 한 Google의 결정은 많은 토론을 불러일으켰습니다. 부정적인 피드백으로 인해 Google은 v70의 변경 사항을 즉시 발표했습니다. 그럼에도 불구하고 이것은 회사의 이익과 그들이 앱을 추진하는 방향을 분명히 보여줍니다. Chrome과 해당 프로젝트에 참여하는 사람들이 지난 몇 년 동안 웹을 많이 형성하고 생태계 "웹"을 완전히 새로운 수준으로 끌어 올렸기 때문에 이는 불행한 일입니다.
  • Microsoft Edge 18은 웹 인증 API, 새로운 자동 재생 정책, 서비스 워커 업데이트, CSS 마스킹, 배경 혼합 및 오버스크롤을 제공합니다.
점프 후 더! 아래에서 계속 읽기 ↓

일반적인

  • Max Bock은 Hurricane Web과 대역폭과 배터리가 제한된 경우에도 사용자를 최신 상태로 유지하기 위해 우리가 할 수 있는 일에 대해 썼습니다. 흥미롭게도 CNN과 NPR은 허리케인 플로렌스 동안 배터리를 소모하지 않는 낮은 트래픽을 제공하기 위해 텍스트 전용 페이지를 제공했습니다. 성능과 로드 시간을 개선할 뿐만 아니라 환경을 돕고 사용자를 더 행복하게 만들기 위해 기본 웹 사이트를 이러한 목표(전력 및 대역폭 절약)로 이동할 수 있다면 정말 좋을 것입니다.

UI/UX

  • 팟캐스트의 에피소드 42에서 Nori 팀은 디자이너가 기후 변화를 역전시키기 위해 무엇을 할 수 있는지 자세히 설명합니다. 논의된 내용은 개발자에게도 전달될 수 있으므로 제목에도 불구하고 시청하는 것을 두려워하지 마십시오.
  • Denislav Jeliazkov는 마이크로 인터랙션의 중요성과 마이크로 인터랙션이 어떻게 잘 설계되어 귀사와 경쟁사의 앱을 차별화할 수 있는지 설명합니다.
  • Jeremy Cherry가 제품 중독자가 아닌 사용자를 만들어야 하는 이유와 UX가 사람들의 건강에 쉽게 영향을 미칠 수 있는 방법에 대해 설명합니다.
  • Shawn Park는 6년 연속 웹사이트를 새롭게 디자인하면서 배운 점과 이것이 기술 향상을 위한 중요한 단계라고 생각하는 이유를 공유합니다.
  • Jonas Downey는 우리가 소프트웨어의 '사용자 경험' 디자인에 의해 어떻게 지속적으로 조작되고 있으며 왜 우리가 가진 유일한 옵션은 지갑으로 이러한 패턴에 반대하는 투표를 하고 영향을 미치는 방식으로 우리를 조작하지 않는 소프트웨어에 대해 비용을 지불하는 것뿐인지에 대해 썼습니다. 우리의 개인 정보, 보안 또는 사고 방식.
  • 최고의 현대 무료 글꼴은 Behance에서 무료로 사용할 수 있는 훌륭한 글꼴 모음입니다.
포트폴리오 웹사이트 재설계
Shawn Parks는 매년 포트폴리오를 재설계하면서 배운 교훈을 공유합니다. (이미지 크레디트)

접근성

  • 접근성은 신체 장애가 있는 사람들이 웹사이트에 액세스할 수 있도록 하는 것 이상입니다. 가능한 한 많은 사람들에게 사이트를 제공하려면 인지적 차이를 고려한 디자인도 필수적이라는 사실을 잊어서는 안 됩니다.
  • Amy Leak은 좋은 대체 텍스트를 작성하는 방법에 대한 몇 가지 훌륭한 예를 보여줍니다.

압형

  • Trix는 Basecamp의 풍부한 오픈 소스 텍스트 편집기입니다. Ruby를 이미 사용하고 있다면 애플리케이션의 모든 콘텐츠 편집 필드에 적합한 선택일 수 있습니다.

은둔

  • 뭔지 맞춰봐? 이 기사에서 볼 수 있듯이 쿠키를 삭제하는 간단한 개인 정보 보호 도구는 쓸모가 없습니다. TLS 세션 추적을 통해 사용자를 추적하는 더 똑똑한 방법이 있으며 우리는 이에 대해 아무 것도 할 수 있는 권한이 없습니다. 따라서 브라우저에서 얼마나 많은 대응책을 활성화했는지에 관계없이 누군가가 귀하를 추적할 수 있다는 점에 유의하십시오.
  • Google의 데이터 수집에 대한 대학 연구에 대한 Josh Clark의 의견은 Android 전화 데이터가 Google의 비즈니스 모델에 얼마나 중요한지와 스마트폰이 유휴 상태이고 위치가 이동하지 않는 경우에도 수집되는 정보 유형에 대한 가장 중요한 부분을 강조하고 있습니다.

보안

  • Cloudflare의 Brendan McMillion이 IPFS(분산, 분산 웹 프로토콜) 게이트웨이에 대한 종단 간 무결성을 보장하는 방법을 공유합니다. 웹의 미래에 대한 매우 흥미로운 통찰력.
고양이와 개로 구성된 IPFS를 사용한 종단 간 무결성
Cloudflare의 IPFS 게이트웨이를 사용하면 에지 네트워크에서 제공되는 성능 및 안정성 이점을 유지하면서 웹 사이트를 종단 간 보안을 유지할 수 있습니다. (이미지 크레디트)

웹 성능

  • Shubham Kanodia는 스마트 번들링 기술을 사용하여 레거시 브라우저에만 레거시 코드를 제공할 수 있는 방법을 설명합니다.
  • 성능 문제 디버깅에 대한 심층 가이드에서 Nolan Lawson은 웹에서 레이아웃 성능을 정확하게 측정하는 방법과 최신 브라우저의 렌더링 파이프라인이 작동하는 방법을 공유합니다.
  • Philip Walton은 웹 사이트의 로드 및 페인트 성능을 최적화하기 위한 긴급 시까지 유휴 원칙을 설명합니다.
  • 가능한 한 적은 리소스를 사용하면서 로우테크 장치에서 잘 작동하고 빠른 웹 사이트를 구축하려면 어떻게 해야 합니까? Low-Tech Magazine은 리소스를 절약하기 위한 미친 접근 방식에 따라 웹사이트를 찾고 구축하기를 원했습니다. 재미있는 추가 사실: 서버에 전력을 공급하는 2.5와트 태양광 패널에 전력을 공급하기에 태양광이 충분하지 않으면 웹사이트가 오프라인 상태가 됩니다.
  • RAIL 모델로 성능을 측정하기 위한 새로운 Google Web Fundamentals 가이드가 나왔습니다. 성능을 분석하거나 디버그할 때 매우 유용합니다.
RAIL 모델의 그림
RAIL 성능 모델의 네 부분: 응답, 애니메이션, 유휴, 로드. (이미지 크레디트)

HTML 및 SVG

  • 이제 사람들이 Apple Watch에서 웹을 탐색할 수 있게 됨에 따라 Marcus Herrmann이 장치에 맞게 사이트를 최적화할 수 있는 방법에 대한 통찰력을 공유합니다.
  • 모달 창에는 일반적으로 많은 사용자 정의 JavaScript, CSS 및 HTML 코드가 포함됩니다. 이제 접근성을 포함하여 기본적으로 대부분의 기능을 제공하는 <dialog> 요소가 있습니다. Chris Manning은 대화 요소에 대한 소개와 이를 사용하고 폴리필하는 방법을 썼습니다.

자바스크립트

  • Willian Martins는 널리 알려지지 않은 연산자인 JavaScript의 bind() 함수의 비밀을 공유합니다. 이 연산자는 매우 강력하여 this 다른 곳에서 명명된 비익명 함수로 호출할 수 있습니다. JavaScript를 작성하는 다른 방법.
  • "오전 9시 러시아워"가 무엇을 의미하는지 모두 알고 있습니다. Paul Lewis는 이 용어를 사용하여 웹용으로 구축하는 방법과 브라우저의 메인 스레드에서 교통 체증을 피하고 UI에 속하지 않는 모든 것을 대신 별도의 트래픽 차선으로 아웃소싱해야 하는 이유를 재고합니다.

CSS

  • Michelle Barker는 왜 음수 격자선이 매우 유용할 수 있는지 설명합니다.
  • CSS Grid의 grid-templategrid-auto 의 차이점을 알고 계십니까? Ire Aderinokun이 설명합니다.
  • Rachel Andrew는 이제 CSS 그리드 레이아웃이 있고 언제 어느 것을 사용해야 하는지에 대한 조언을 공유하므로 Flexbox의 사용 사례에 대해 썼습니다.
음수 격자선을 사용하여 격자 내부에 배치된 항목
CSS로 그리드 항목을 배치하기 위해 음수 그리드 라인 번호를 사용할 수 있다는 것을 알고 계셨습니까? (이미지 크레디트)

직장 생활

  • 당신은 취미가 있나요? 글쎄, 마지막으로 당신이 그것을 즐기고 충분한 시간을 가졌던 것은 언제였습니까? Tim Wu는 탁월함의 추구가 여가의 세계에 어떻게 침투하고 타락했는지를 반영합니다.
  • 다음은 기술 회사가 더 강력한 지속 가능성 관행과 입장을 채택하도록 하는 방법에 대한 직원용 입문서입니다.
  • Basecamp의 David Heinemeier Hansson이 일, 고용 및 성공에 대해 어떻게 생각하는지에 대해 많이 들었습니다. 이 인터뷰는 "Basecamp 방식"과 이에 연결된 도전을 요약합니다.
  • Seth Godin은 1조 달러에 달하는 Apple과 Amazon의 순 '가치'와 왜 회사의 이윤이 중요한 것이 아니라 업무의 중요성에 대해 숙고합니다.
  • “기술 산업은 인류의 가장 큰 변화를 목격할 정도로 사회에 영향을 미치는 기하급수적인 속도로 성장하고 있습니다. 일부 기술 서비스에는 실제로 수십억 명의 사용자가 있습니다. 수천, 수백만이 아니라 수십억 명의 사람들이 정기적으로 사용하는 권리를 읽었습니다. 이러한 서비스가 우리 사회를 형성하고 우리의 규범을 형성하고 있지만 그들의 유일한 목표는 성장 곡선을 계속 성장시키는 것이라고 말하지 않는 것은 오만한 일입니다.” — Anton Sten의 " 책임은?"
  • 당신은 프로젝트를 라이브로 했을 때 기분이 너무 좋고 편안할 거라 기대하면서 열심히 그 프로젝트를 마치려고 노력하고 있습니다. Itamar Turner-Trauring은 이러한 사고 방식이 잘못된 이유와 소진을 피할 수 있는 방법을 공유합니다.
  • Leo Babauta는 우리가 항상 일에 뒤처져 있다고 느끼는 이유와 이러한 감정을 피하고 대신 행복하게 일하기 위한 몇 가지 전략에 대해 설명합니다.
  • 대부분의 회사(및 개발자)는 원격 근무의 긍정적인 측면만을 칭찬하고, 소수의 기업만이 고립감, 불안 또는 우울증에 직면할 위험이 더 높은 것과 같은 문제와 부정적인 결과에 대해 이야기합니다.

넘어…

  • 네덜란드에는 현재 2020년까지 CO2 배출량을 25%까지 줄이도록 규정하는 법적 근거가 있습니다(지금부터 1년 조금 더 소요됨). 저는 이 아이디어가 마음에 들고 다른 나라들도 이 아이디어에서 영감을 받기를 바랍니다. 예를 들어 독일은 현재 배출량 감축 목표를 더 멀리 미래로 옮기고 있습니다.
  • David Wolpert는 컴퓨터가 왜 그렇게 많은 에너지를 사용하는지, 어떻게 컴퓨터를 훨씬 더 효율적으로 만들 수 있는지 설명합니다. 그러나 그렇게 하려면 컴퓨팅의 열역학을 더 잘 이해할 필요가 있습니다.
  • 20억 달러를 거절하는 것은 멋지다. 당연하지. 그러나 이 기사에서 Whatsapp 창립자에 대한 흥미로운 점은 자신이 Facebook에 서비스를 판매한 것이 얼마나 불행한지 세상에 알렸습니다. 그는 자신이 자신의 제품에 대한 통제권을 유지할 수 있다고 믿었던 것 같습니다.

한 가지 더: 이번 달에 웹 개발 읽기 목록에 대한 기금 수준을 100%까지 올리는 데 도움을 주신 모든 분들께 진심으로 감사드립니다. 나는 당신에게서 그렇게 많은 피드백과 많은 지원을 받은 적이 없습니다. 감사합니다! 좋은 한 달 보내세요!

—안셀름