JSer.info #378 - Progressive Web Apps on iOS are here 🚀 – Maximiliano Firtman – Medium에는 iOS 11.3/Safari 11.1에서 지원하는 Service Worker 등 소위 Progressive Web Apps (PWA)와 관련한 내용이 정리돼 있습니다.

홈 스크린 앱으로써의 구동, Safari Technology Preview를 사용한 Service Worker 디버깅 방법에 관해 소개돼 있으며 iOS의 네이티브 앱과의 차이점이나 Android/Chrome의 PWA와이 차이점 등에 관해서도 작성돼 있습니다.

이어, First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Centra에서 Windows 10 Spring Creators Update(Windows 10 build 1803)의 프리뷰 버전의 Windows Store에 PWA 앱이 등록된 소식을 전하고 있습니다.

Windows Store와 PWA에 관한 내용은 아래 글을 참고해주세요.

Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

DOM 요소를 테스트하기 위한 라이브러리 kentcdodds/dom-testing-library: 🐙 Simple and complete DOM testing utilities that encourage good testing practices.가 공개됐습니다.
테스트 시 자주 필요로 하는 특정 텍스트를 포함하는 요소를 선택하는 getByText 함수나 data-testid 속성을 기반으로 요소를 선택하는 getByTestId 함수 등을 제공하는 라이브러리입니다.

React 용 바인딩 라이브러리react-testing-library
도 제공하며 Vue 용으로 vue-testing-library
가 준비돼 있습니다.

자세한 내용은 라이브러리 개발자가 직접 공개한 아래 글을 참고해주세요.

Introducing the react-testing-library 🐐 – kentcdodds

헤드라인

Axe 3.0 has arrived — here’s what you need to know - Deque

www.deque.com/blog/axe-3-0-has-arrived/

accessibility ReleaseNote

Axe 3.0이 릴리스 됐습니다.
Shadow DOM을 지원합니다.

Release 3.0.0 · dequelabs/axe-core

First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store | Windows Central

www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

MS PWA news

Microsoft Store에 PWA 애플리케이션이 공개됐습니다.

sails/CHANGELOG.md at v1.0.0 · balderdashy/sails

github.com/balderdashy/sails/blob/v1.0.0/CHANGELOG.md

node.js JavaScript ReleaseNote

Node.js의 웹 애플리케이션 프레임워크 Sails.js 1.0이 릴리스 됐습니다.

아티클

React v16.3 changes - blog.koba04.com(일본어)

blog.koba04.com/post/2018/04/04/react-v163-changes/

React article

React 16.3의 변경 사항에 대해 정리돼 있습니다.

Lazy Loading Images and Video | Web Fundamentals | Google Developers

developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

performance browser JavaScript CSS

이미지나 영상을 지연 로드하는 방법에 관해 작성돼 있습니다.
Intersection Observer 또는 CSS를 사용한 이미지 지연 로드 방법을 각각 소개하며 영상과 GIF를 지연 로드하는 방법과 지연 로드를 보조하는 라이브러리, 로드에 실패했을 때의 Fallback 처리 등에 관해 작성돼 있습니다.

Headless Chrome: an answer to server-side rendering JS sites | Tools for Web Developers | Google Developers

developers.google.com/web/tools/puppeteer/articles/ssr

Chrome server article

Headless Chrome을 사용해 서버 사이드 렌더링을 구현하는 튜토리얼입니다. 구현하는 방법 뿐 아니라 최적화 방법에 대해서도 정리돼 있습니다.

GoDaddy Open Source Center - Isomorphic Asset System for React and React-Native

godaddy.github.io/2018/04/04/isomorphic-asset-system-for-react-and-react-native/

SVG React library article

SVG 파일(에셋)을 관리하는 도구로 React/React Native 컴포넌트, webpack loader 와의 연계에 대해 정리돼 있습니다.

Strategies for Service Worker Caching for Progressive Web Apps

blog.hasura.io/strategies-for-service-worker-caching-d66f3c828433

ServiceWorker article

Service Worker의 캐시 구조 및 캐시와 관련한 문제에 대해 작성돼 있습니다.
문제가 있는(망가진) 배포 버전 패치 문제, service-worker.js 파일 자체를 캐시할 때의 문제, 캐시될 필요 없는 응답에 대한 조작 등을 소개하며 create-react-app의 사례와 Clear-Site-Data 헤더에 대해서도 이야기합니다.

Progressive Web Apps on iOS are here 🚀 – Maximiliano Firtman – Medium

medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

ios safari article ServiceWorker PWA

iOS 11.3에서 지원하는 Service Worker 등 PWA와 관련된 기능에 대해 작성돼 있습니다.
네이티브 앱과 비교했을 때의 제약과 Chrome/Android 와의 차이점에 대해 이야기합니다.

Transform your codebase using codemods | nec.is

nec.is/writing/transform-your-codebase-using-codemods/

JavaScript Tools article AST

jscodeshift를 사용한 JavaScript 코드 변환에 대해 소개합니다.
JavaScript 코드를 다루는 방법과 AST 그리고 jscodeshift의 API에 관해 작성돼 있습니다.

Introducing the Payment Request API for Apple Pay | WebKit

webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/

safari article

Safari 11.1에서 Payment Request API로 Apple Pay를 이용하는 방법에 대해 소개합니다.
-webkit-appearance: -apple-pay-button;" 스타일을 지정하여 Appley Pay 버튼을 표현하는 방법과 Payment Request API를 사용하는 방법에 관해 작성돼 있습니다.