본문 바로가기

분류 전체보기

(27)
[번역] 듀얼 스크린과 폴더블 디바이스를 위한 웹 API 소개 이 글은 Microsoft의 Introducing Web APIs for Dual Screen and Foldable Devices 포스트 내용을 번역, 요약하였습니다. 9월 10일 출시된 Surface Duo를 포함하여, 요즘엔 다양하고 새로운 듀얼 스크린, 폴더블 디바이스가 시장에 나오고있습니다. 이에 따라서 사이트를 이러한 규격을 어떻게 수용할 지 생각해볼 좋은 시기입니다. 그래서 마이크로소프트는 웹 개발자들이 브라우저 창이 여러 디스플레이 영역에 걸쳐있는 경우에 콘텐츠를 효과적으로 배치하고, 해당 디바이스에 자연스럽게 반응형 웹 사이트를 만들 수 있도록 하는 두 가지 실험 기능을 발표했습니다. CSS 스크린 확장 미디어 기능(screen-spaning media feature)과 접힌 형상을 설명..
[기술 영어] low-fidelity / high-fidelity Adaptive serving allows sites to ensure users on slow connections can get “a” version of the experience, even if at a lower-fidelity. 해외 아티클을 번역 하던 중 위의 문장에서 막히기 시작했다. 대체 "lower-fidelity"가 무엇일까? 몇 가지 찾아본 결과는 다음과 같다. 맨 처음 찾아 본 것은 번역기와 사전이였다. 구글 번역기와 네이버 파파고로 돌려보면 "충실도", 네이버 영어사전을 찾아보면 "충실도", "정확도"로 나온다. 아래는 네이버 영어사전의 예문. the fidelity of the translation to the original text 원본 텍스트에 대한 번역본의 충실도 [정확..
Mac에서 iPhone 사파리(Safari) 디버깅(Web inspector) Mac과 iPhone을 케이블로 연결 [iPhone] "이 컴퓨터를 신뢰하겠습니까?" 팝업에 "신뢰"버튼 누르기 [Mac] "Safari > 환경설정(Preferences) > 고급(Advanced)"에서 메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar) 체크박스 활성화 [iPhone] "설정(Setting) > Safari > 고급(Advanced)"에서 웹 속성(Web Inspector) 활성화 [Mac] "Safari > 개발자용(Develop) > 디버깅하려는 iPhone (예: ~의 아이폰)> 개발용으로 사용(Use for Development...)" 선택 [iPhone] Safari 실행 후 디버깅하려는 페이지 열기 [Mac] "Safari > 개발자용..
[용어] Above the Fold / Below the Fold Above the Fold: 웹페이지에서 아무 행동(스크롤, 클릭 등)을 하지 않은 부분. 접은 신문의 첫 페이지의 상단에서 따옴 Below the Fold: 웹페이지에서 스크롤하지 않으면 볼 수 없는 부분. Above the Fold가 아닌 부분. 출처: https://en.wikipedia.org/wiki/Above_the_fold Above the fold - Wikipedia Top section of the front page of a newspaper or website Above the fold is the upper half of the front page of a newspaper or tabloid where an important news story or photograph is of..
ES6 화살표 함수 사용 시, " _ => {} " 구문 ES6 화살표 함수를 _ => {} 와 같이 사용하는 코드를 종종 목격하게 된다. 무슨 이유로 이렇게 사용할까? 화살표 함수에서 인자를 받지 않는 경우 () => {} 와 같이 사용한다. 하지만 _ => {}로 쓰면 1글자가 더 적어진다. 즉, _를 무시되는 매개변수로 사용하여 짧게 쓰려고 사용한다는 것이다. 이렇게 사용할 때에 유의해야할 점이 있는데, _ 를 매개변수로 선언해놓고 사용하지 않기 때문에, 린트 등으로 인해 Error/Warning이 발생할 수 있다. Underscore/Lodash를 사용하면 _를 사용하기 때문에 충돌이나서 해당 화살표 함수에서는 사용할 수 없을 수 있다. 참고 링크: Using _ (underscore) variable with arrow functions in ES6/..
HTML5 비디오 자동 재생 관련 정책 및 조건(Chrome, Safari를 중심으로) 이 글은 Google Developers 의 자동 재생 정책 변경사항, Webkit 블로그의 iOS를 위한 새로운 정책, macOS를 위한 자동 재생 정책 변경사항을 기반으로 정리하였고, 검증을 위해 몇가지 브라우저로 테스트 하였습니다. 디바이스, 브라우저 종류와 버전 등 환경에 따라 자동 재생에 대한 정책이 다르므로 해당 글과 다른 점 있을 수 있다는 것 말씀드립니다. 자동 재생이 되는 경우 1. 무음인 경우 항상 자동 재생이 가능. 음소거 ON: 요소에 muted 속성을 추가 하거나, video.muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. var video = document.querySelector('video'); video.muted = true; // #2 video.m..
[번역] 웹킷 페이지 캐시 I - 기초 (WebKit Page Cache I – The Basics) 원문: WebKit Page Cache I – The Basics WebKit Page Cache I – The Basics This is the first of two posts that will center around a modern browser engine feature that doesn’t usually get a lot of press: The Page Cache. webkit.org 이 포스트는 페이지 캐시에 대한 두 포스트 중 첫번째 포스트입니다. 페이지 캐시는 일반적으로 관련해서 많이 포스팅되지 않는 모던 브라우저 브라우저 기능입니다. 오늘 저는 이 기능이 무엇인지, 왜 종종 동작하지 않는지, 그리고 이를 개선하기 위해 어떤 계획을 세워야 하는지에 대해 이야기하려고 합니다. 페이지 캐..
[번역] 자동 재생 정책 변경사항 Autoplay Policy Changes 원문: Autoplay Policy Changes Autoplay Policy Changes | Web | Google Developers Learn best practices for good user experiences with the new autoplay policies in Chrome, coming April 2018. developers.google.com 참고: 오디오, 비디오 요소에 대한 자동 재생 정책은 M66 Stable에서 시작했으며, Chrome에서 원하지 않는 미디어의 자동 재생의 약 절반을 효과적으로 차단하고 있습니다. Web Audio API의 경우, 자동 재생 정책이 M71에서 시작됩니다. 이것은 웹 게임, 몇 WebRTC 어플리케이션, 다른 오디오 기능을 사용하는 웹페이지..
[번역] iOS를 위한 새로운 <video> 정책 원문: New Policies for iOS New Policies for iOS Since before your sun burned hot in space and before your race was born, Safari on iOS has required a user gesture to play media in a or element. webkit.org 우주에 당신의 태양이 불타기 전부터, 당신의 민족이 태어나기 전부터 (Since before your sun burned hot in space and before your race was born), iOS의 Safari는 혹은 요소의 미디어를 재생하기 위해서는 사용자 제스처가 필요했습니다. Safari가 iPhoneOS 3 에서 를 처음 지원했..
[번역] macOS를 위한 자동 재생 정책 변경사항 원문: Auto-Play Policy Changes for macOS Auto-Play Policy Changes for macOS This is a guest post from the Safari team about changes to how Safari handles HTML5 video and audio auto-play. webkit.org 이 게시물은 Safari 팀에서 Safari가 HTML5 비디오 및 오디오 자동 재생을 처리하는 방법의 변경사항에 대한 게스트 게시물입니다. 이러한 변경사항은 웹사이트와의 호환성에 영향을 줄 수 있습니다. 작년에 사파리의 iOS 용 비디오 정책 업데이트에 따라, 이번 주에는 Mac에서 자동 재생 정책을 크게 변한다고 발표했습니다. 이러한 변경 사항을 통해 특히..