HTML5_JS_CSS 썸네일형 리스트형 Page Visibility API 파일이 변경되면 리로드를 해주는 작은 프로그램들이 많이 있는데, 이런 프로그램을 쓰지 않고 브라우저가 활성화되면 발생하는 이벤트가 없을지 찾다가 Page Visibility API를 발견했다. 설명은 이곳에서 확인할 수 있다. 결론부터 말하면 기대한 것과는 다르게 동작해서 쓰지 않기로 했다. 기대했던 것은 다른 앱을 사용하다가 브라우저를 활성화시켰을 때 리로드되는 것이었는데, 이 API를 사용하면 다른 앱을 쓰다가 브라우저로 이동해도 이벤트가 발생하지 않는다. 대신 다른 브라우저의 다른 탭을 사용하다가 돌아오면 이벤트가 발생한다. 테스트한 코드는 다음과 같다. document.addEventListener("visibilitychange", () => { console.log(document.visibi.. 더보기 인스타그램 크롤러 만들기 얼마전에 전자액자를 하나 샀습니다. 더운 여름에 기분전환을 해볼까 싶어 구매했는데 날이 다 시원해지고서야 제 손에 들어왔네요. 처음에는 직접 찍은 사진도 올려보고, 괜찮은 그림도 올려봤지만 오래지 않아 귀차니즘이 찾아오더군요. 결국 매일 업데이트되는 인스타그램 피드에 있는 사진을 보여주고 싶어졌습니다. 사진의 품질도 나쁘지 않을 뿐더러 누군가가 업데이트까지 해주니 바로 이거다 싶었습니다. 인스타그램에서는 API를 제공하고 있어 API를 사용할까 찾아보니, 저에게 필요한 피드 정보를 얻을 수 있는 API는 작년에 중단됐더군요. 이런 날벼락이. 어렴풋이 작년에 인스타그램이 피드 API를 중단해서 인스타그램 클론이 나오기 힘들게 됐다는 기사가 기억났습니다. 이런건 찾아보기 전에 기억날 것이지. 그래서 결국 웹.. 더보기 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.. 더보기 Manifest for web application 요약 Manifest for web application을 사용할 일이 있어 스펙을 살펴보며 간단히 정리했다. 이 스펙은 web application을 브라우저가 아닌 곳에서 실행시킬 때 기기에서 표시할 정보와 실행에 필요한 정보를 저장하는 방법에 대해 정의하고 있다. 모바일 사이트나 web os등 이 스펙이 사용되는 곳은 심심치 않게 있겠지만 일반 사용자에게는 거의 눈에 띄지 않는 스펙이기도 하다. 개인적인 필요로 http://w3c.github.io/manifest/ 문서를 한 번 살펴보면서 정리한 것이므로 개인적으로 불필요하다고 생각하는 부분은 정리하지 않았고 문서의 품질을 높이기 위해 리뷰를 하지 않았으므로 내용이 누락되어 있거나 오역이 있을 가능성이 높다. 그러므로 이 문서를 참고할 분들은 적용 전에.. 더보기 새로운 컨퍼런스 소개 - ANGLEBRACKETS 우연히 front-end를 주제로 하는 새로운 컨퍼런스를 발견했다. 라는 행사인데 무려 4일 동안 열리는 상당히 규모가 큰 컨퍼런스이다. (홈페이지) 올해는 4월 8일부터 11일까지 미국 라스베가스에서 개최된다. 컨퍼런스만 참여하려고 해도 1,700불에 가까운 비용을 지불해야 하는 상당히 고가(?)의 컨퍼런스인데 워크샵이 포함된 패키지를 선택하면 최대 2,500불에 가까워진다. 워크샵 컨퍼런스에는 MS 설피스 윈도 RT 테블릿이나 넥서스 7을 준다고.. 워크샵의 주제는 다음과 같다.Day of Single Page ApplicationsOn the Metal: Essential HTML5, CSS3 and JavaScript for All DevelopersBuilding Applications with.. 더보기 fluent 2013에서 관심 있는 세션 JavaScript와 HTML5를 주제로 하는 Fluent 컨퍼런스가 5월 28일부터 30일까지 샌프란시스코에서 열린다. 한 번쯤 가보고 싶은 컨퍼런스지만 이래저래 연이 닿고 있지 않은 컨퍼런스다. 트위터를 돌아다니다가 누가 이 컨퍼런스에 대해 이야기했길래 가볍게 스케쥴을 살펴보다가 관심이 생기는 세션 몇 개를 정리해본다. Secrets of Awesome JavaScript API Design혼자만 사용할 기능을 만드는 것이 아니라면 항상 고민하게 되는 주제이다. 설명 중 APIs are developer UX.라는 표현이 와닿는다. Who Killed My Battery: Analyzing Mobile Browser Energy Consumption모바일 브라우저와 배터리 소모량의 관계라니. 삼성전자.. 더보기 자바스크립트를 배우는 좋은 방법 자바스크립트를 배우는 좋은 방법이라는 글이 올라왔는데 상당히 수긍할 수 있는 내용이라 간단히 요약하고 의견을 추가해본다. 원문은 http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/ 이다. 0번째: 어떤 것이 자바스크립트인지 이해하기자바스크립트가 정확히 무엇을 의미하는지를 이해해야 한다는 요지이다. 그리고 라이브러리를 사용하기 전에 자바스크립트를 먼저 익히라고 조언해준다. 첫번째: 코드카데미(Codecademy.com)에서 자바스크립트 코스 수강하기최근 코드카데미에서 파이썬을 공부했었는데 여기서도 첫번째로 코드카데미를 추천한다. 내용이 일반인을 대상으로 하고 있기 때문에 매우 쉽게 공부할 수 있다. 두번째: .. 더보기 이전 1 2 3 4 ··· 6 다음