AMP의 지금까지의 성과와 현주소

구글코리아 블로그 : http://googlekoreablog.blogspot.kr/2016/10/amp.html

AMP 로드맵 : https://www.ampproject.org/roadmap/

How to check Developer tool window open

http://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open

In my case,




I use check4.js

check1.js, check2.js code can't check developer tools open event.
check3.js code check using setInterval() function.

check4.js
code use Object definedProperty() function on get() function.
console.log("%c hello", element)

When console.log called, element object call get() function.
And you can check developer tools open

Happy Coding!

프로그래시브 웹앱 (Progressive Web App) 만들어보기 - 프로그래시브 웹 앱이란

프로그래시브 웹앱(Progressive Web App, PWA)은 최근 구글 I/O 2016에서도 발표를 했었지만
그전부터 진행되어 왔던 프로젝트 입니다.
공식적으로는 2015년에 발표되었죠.

이 프로젝트는 웹이 앱이 되가는 과정을 보여주고 있습니다.
PWA의 몇가지 특징을 보면

• Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
• Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - Enhanced with service workers#Service Workers to work offline or on low quality networks.
• App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
• Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
• Re-engageable - Make re-engagement easy through features like push notifications.
• Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
• Linkable - Easily share via URL and not require complex installation.

[출처]: https://en.wikipedia.org/wiki/Progressive_web_app

해석의 시간입니다.

• Progressive - 그들은 핵심 교리(tenet)로 점진적 개선을 내장하고 있기 때문에 브라우저의 선택에 관계없이 모든 사용자에 대해 동작 할 수 있다.
• Responsive - 모든 폼팩터에 맞는다: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - service workers의 향상#서비스 워커는 오프라인과 네트워크가 좋지 않을때에도 동작한다.
• App-like - PWA는 앱 쉘 모델을 기반으로하고 있기 때문에 앱 스타일의 상호 작용 및 탐색으로 사용자에게 응용 프로그램 같은 느낌을 줌.
• Fresh - 항상 최신이다.(서비스 워커의 업데이트 프로세스로)
• Safe - 내용의 스누핑을 방지하기 위해 HTTPS를 통해서 전달.
• Discoverable - W3C Manifest를 도입, "애플리케이션" 으로서 인식되고 검색엔진에 의해 등록 가능할 것.
• Re-engageable - 푸시 노티피케이션을 통해 사용자 다시 불러오기
• Installable - 앱스토어를 통해 번거롭게 찾지 않아도 앱을 홈 화면에 둘 수 있는 것
• Linkable - 복잡한 설치가 필요없다면 URL을 통해 쉽게 공유가능해야함 .

앞으로의 웹은 이러한 특징을 가진 앱으로 만들어질 것이고
PWA를 통해 본격적으로 진행되고 있는 것으로 보입니다.

PWA를 현재 공부하는 중이지만
블로그 페이지나 공부겸 해서 한번 테스트 페이지를 만들어볼 생각입니다.

해당 서브밋이 있으니 영상도 참고하시면 좋습니다.
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb

그리고 현재 구글 디벨로퍼 페이지에서 정보를 더 얻을 수 있습니다.
PWA에 대한 소개: https://developers.google.com/web/progressive-web-apps/
PWA 처음 시작: https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en
PWA 시작하기 (코드랩): https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

다음 포스팅에서는 "구글 코드랩에서 시작하는 PWA" 를 다루겠습니다.

Happy Coding!

Motion Graphics For Web - mojs.io

Homepage: http://mojs.io/GitHub: https://github.com/legomushroom/mojs

This library used to make motion graphics for web.
In this time, not open all tutorials.
(just opened path-easing, will be open another tutorials soon)

Quick Start:
<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

Demos:

• motion graphics for the web
• bubble layout
• sleepy mole

Tutorials:

http://mojs.io/tutorials/easing/path-easing/

Good Library for Web!

+

Webpage speed optimize informations

When i optimize webpage,
use these sites


Google pageSpeed: https://developers.google.com/speed/pagespeed/insights/


Varvy pageSpeed: https://varvy.com/pagespeed/

These pageSpeed service check page loading speed, rendering, so on.

<Varvy pageSpeed check result>

You can see summary list,

Server:

- Quick server response time
- Compression enabled
- Browser caching issues
- Keep-alive enabled
- Minimal redirects

Page:

- No bad requests
- HTML not minimized
- Request size is fine
- Visible content prioritized
- Render blocking CSS / JS found

Resources:

- Images not optimized
- Javascripts seem async
- CSS minified
- No @import CSS
- JS minified

Note: These values may change often if you display third party content (ads, widgets, etc.).

Recommend solutions below.

google page speed tool information here:

https://developers.google.com/speed/pagespeed/

happy coding!