잡다한 개발 블로그

문제 상황 IE 10에서 video tag를 사용하여 동영상을 노출 시켰을 때, Invalid Source 라고 노출되며 재생 불가 해당 비디오는 서버에서 MIME type "application/octet-stream" 으로 내려주고 있었음 MIME type: application/octet-stream 이란 application/octet-stream 는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다. 출처: MDN - MIME 타입의 전체 목록 해결 방안 서버에서 비디오의 MIME type을 video/mp4로 반환하도록 변경. 참고 링크 HTM..

git log --author="유저 이름" --name-only --pretty=format: | sort | uniq git log --author="유저 이름" : 특정 유저의 로그만 필터링 git log --name-only : 커밋 정보중에서 수정된 파일의 목록 출력 git log --pretty=format: : 지정 형식으로 출력하는 옵션. 여기에서는 파일 외의 string 제거용 sort : 정렬 uniq : 중복 제거 큰 프로젝트 인수인계시에 직접 작업한 내용이 무엇이 있었는지 확인하려다가 사용했습니다. Git commit 히스토리 내에서 수정한 적이 있는 모든 파일이 나오므로, 이미 삭제된 파일도 목록에 노출될 수 있습니다. 참고 링크

이 글은 Microsoft의 Introducing Web APIs for Dual Screen and Foldable Devices 포스트 내용을 번역, 요약하였습니다. 9월 10일 출시된 Surface Duo를 포함하여, 요즘엔 다양하고 새로운 듀얼 스크린, 폴더블 디바이스가 시장에 나오고있습니다. 이에 따라서 사이트를 이러한 규격을 어떻게 수용할 지 생각해볼 좋은 시기입니다. 그래서 마이크로소프트는 웹 개발자들이 브라우저 창이 여러 디스플레이 영역에 걸쳐있는 경우에 콘텐츠를 효과적으로 배치하고, 해당 디바이스에 자연스럽게 반응형 웹 사이트를 만들 수 있도록 하는 두 가지 실험 기능을 발표했습니다. CSS 스크린 확장 미디어 기능(screen-spaning media feature)과 접힌 형상을 설명..

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 원본 텍스트에 대한 번역본의 충실도 [정확..

Safari 특정 버전은 모바일 디버깅 미지원 할 수 있으며, 이 경우 Safari Technology Preview으로 디버깅 가능합니다.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 D..

Above the Fold 웹페이지에서 아무 행동(스크롤, 클릭 등)을 하지 않은 부분. 접은 신문의 첫 페이지의 상단에서 따옴 Below the Fold 웹페이지에서 스크롤하지 않으면 볼 수 없는 부분. Above the Fold가 아닌 부분. 출처: 위키피디아 - 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 often located. Papers are ..

ES6 화살표 함수를 _ => {} 와 같이 사용하는 코드를 종종 목격하게 된다. 무슨 이유로 이렇게 사용할까? 화살표 함수에서 인자를 받지 않는 경우 () => {} 와 같이 사용한다. 하지만 _ => {}로 쓰면 1글자가 더 적어진다. 즉, _를 무시되는 매개변수로 사용하여 짧게 쓰려고 사용한다는 것이다. 이렇게 사용할 때에 유의해야할 점이 있는데, _ 를 매개변수로 선언해놓고 사용하지 않기 때문에, 린트 등으로 인해 Error/Warning이 발생할 수 있다. Underscore/Lodash를 사용하면 _를 사용하기 때문에 충돌이나서 해당 화살표 함수에서는 사용할 수 없을 수 있다. 참고 링크: Using _ (underscore) variable with arrow functions in ES6/..

이 글은 Google Developers 의 자동 재생 정책 변경사항, Webkit 블로그의 iOS를 위한 새로운 정책, macOS를 위한 자동 재생 정책 변경사항을 기반으로 정리하였고, 검증을 위해 몇가지 브라우저로 테스트 하였습니다. 디바이스, 브라우저 종류와 버전 등 환경에 따라 자동 재생에 대한 정책이 다르므로 해당 글과 다른 점 있을 수 있다는 것 말씀드립니다. 자동 재생이 되는 경우 1. 무음인 경우 항상 자동 재생이 가능. 음소거 ON: 요소에 muted 속성을 추가 하거나, video.muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. var video = document.querySelector('video'); video.muted = true; // #2 video.m..

원문: 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 | 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 어플리케이션, 다른 오디오 기능을 사용하는 웹페이지..