Chrome 썸네일형 리스트형 YouTube 모바일 웹페이지에서는 동영상이 자동으로 재생된다? 모바일 사파리나 크롬 모바일과 같은 모바일 브라우저에서는 동영상이 자동으로 재생되지 않습니다. autoplay 속성을 사용하거나 JavaScript 함수를 이용해서 자동으로 재생시킬 수 없습니다. 이것은 데이터 네트워크에서 사용자가 의도하지 않게 고용량의 동영상을 시청할 때 발생할 수 있는 비용을 막고자 함입니다. (참고) 결과적으로 클릭과 같은 사용자의 행동이 있어야만 동영상이 재생됩니다. 그런데 우연히 유튜브 모바일 웹에서는 자동으로 동영상이 재생된다는 이야기를 들었습니다. 저 또한 모바일 웹에서 자동으로 동영상을 재생시키려다 포기한 적이 있어 그 방법이 궁금해서 잠시 살펴봤는데, 결론은 자동으로 재생되는 것 처럼 보인다는 것입니다. 자동으로 재생되는 것처럼 보이는 이유는 유튜브 모바일 웹이 Sing.. 더보기 DevTools in 2016: Accelerate your workflow 요약 DevTools에 새롭게 추가된 기능에 대한 세션입니다. - 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음- Authoring - Device mode - Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음 - responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음 - 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능 - settings - show the device frame 을 선택하면 기기의 프레임을 보여줌. - 스크린샷 촬영 가능 - 기기를 추가할 수 있고 - device pixel ratio 지정 가능 - ne.. 더보기 Great libraries and tools for great Progressive Web Apps 요약 오늘 본 비디오는 Great libraries and tools for great Progressive Web Apps 입니다. 솔직히 제목에 혹~! 했습니다만 막상 비디오를 다 보고 나니 동영상에 나온 것들을 적용하려면 고민을 많이 해야 할 것 같더군요. 동영상의 내용은 대략 다음과 같습니다. Progressive Web Apps 은 웹에서의 최신 유행어다. - PWA는 최신 기술을 많이 사용하고 - PWA를 만들면 사용자에게 유용하고, 사용성이 높고, 즐거운 경험을 줄 수 있다. PWA를 만드려면 만드는 방법의 변화가 필요하다. - 예전 웹 - 예전에는 고수준의 기능으로 웹페이지를 만들었다. - 이미지를 보여주고 싶으면 이미지 태그를 사용하고, 테이블을 보여주고 싶으면 테이블 태그를 사용했다. - 확.. 더보기 Chrome Dev Summit 2015 - Developing for Billions 요약 Chrome Dev Summit 2015의 Developing for Billions 를 요약해봅니다. ==== 발표자: Tal Oppenheimer, Product Manager for Chrome - 전세계를 대상으로 하는 웹 경험 만들기- 2014년 말 - 32억명의 인터넷 유저 - 미국과 인도가 비슷한 규모 - 인도의 경우 2014년에 3천만의 사용자가 인터넷을 처음 사용하기 시작 - 인도와 중국의 사용자는 아직 온라인이 아닌 사람이 많음 - 인도만 10억 이상- 도전꺼리 - 처음 인터넷을 사용하게 되는 경험이 다르다. - 남편의 전화기를 빌려 처음으로 인터넷을 경험. - 인도에 처음 인터넷을 쓰는 사람들이 쓰는 기기는... - Samsung Galaxy J1 - 2015 발매 - 4.3인치, 5.. 더보기 Chrome Dev Summit 2015 - Keynote 요약 지난 17, 18 양일간 마운틴뷰에서는 Chrome Dev Summit 2015가 열렸습니다. 유튜브에 행사 양일의 라이브 동영상(17일, 18일)이 공개되어 있고 각 세션별 동영상도 공개되어 있습니다. 관심있으신 분들은 동영상을 보셔도 좋겠습니다. 여기서는 첫날의 Keynote를 간단히 요약해봅니다. ==== 발표자: Darin Fisher, VP of Chrome - Android chrome은 3년 됐음- 롤리팝 이후의 사용자들은 크롬, 웹뷰가 자동 업데이트됨- 작년 4억명이 크롬 모바일 사용- 올해 8억명이 크롬 모바일 사용- 플랫폼으로써 웹의 가치 - low friction: 설치 없이 클릭만으로 개발자가 만든 결과물에 접근할 수 있음. - 6월 기준 - 매월 25개의 앱을 사용 - 크롬 사용자.. 더보기 What's new in Chrome DevTools? by Addy Osmani 간단 정리 지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료와 동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다. DevTools 공통- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능- Console에서 다양한 syntax highlighting 지원 Network Panel> Filmstrip 지원 - 시간별로 스크린샷을 기록. - 실제 화면에 렌더링되는 내용을 알 수 있음.> Throttling - 브.. 더보기 Performance Guide RAIL 요약 지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다. Performance- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것 RAIL 성능 모델 - Response, Animation, Idle, Load Response- 목적: 즉각적이라고 느끼도록 100ms 내에 반응- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Gro.. 더보기 DOM에서 특정 element를 제거하는 크롬 확장 프로그램 아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 dom element를 문서에서 제거하는 것이다. 설정 페이지 등 일반적인 형태로 사용할 수 있는 기능들을 빼고 dom element를 제거하는 기능 구현에 집중했더니 개발 시간은 길지 않았다. 소스 코드는 다음과 같다. // manifest.json{ "manifest_version": 2, "name": "Dom Element Remover", "description": "This extension removes pre-specific elements from HTML document.", "version": "1.0", "content_scripts": [ { "matches": ["http://*.daum.net/*"], .. 더보기 이전 1 2 다음