GitHub profile page가 이뻐졌어요!

원래는 어땠는지 스크린샷을 찍어 놓지 못해서 비교하기가 힘들지만
프로젝트의 정보를 한눈에 이쁘게 볼 수 있게되었습니다.

밑에는 어떤 기여를 했는지 정리해서 볼 수 있네요.


이번 업데이트에는 다른 것들도 추가가 되었는데
프로젝트 안에 칸반 스타일 보드를 추가해서 트렐로(Trello) 처럼 할 일, 이슈를 관리 할 수 있게
Projects 탭이 추가되었습니다.


관련 동영상은 아래에!

깃헙과 함께 즐거운 오픈소스 기여를!

안드로이드 Firebase 테스트하기

구글 디벨로퍼 코리아 블로그에 소개된 내용입니다.
http://googledevkr.blogspot.kr/2016/07/introducing-firebase-test-lab-for.html
공유합니다.

+Google Developers
+Life at Google

동영상:




단계별로 따라할 수 있는 코드랩 링크:
https://codelabs.developers.google.com/codelabs/firebase-test-lab/index.html?utm_campaign=Firebase_featureoverview_education_testlab_en_06-29-16&utm_source=gdevkrkr&utm_medium=blog#0

즐거운 개발하세요~

Google I/O 2016 Recap

Search at I/O 16 Recap: Eight things you don't want to miss
posted on google developers blog

https://developers.googleblog.com/2016/05/search-at-io-16-recap.html?m=1

Index of 8 things you don't miss it

1. Introducing rich cards

https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html

2. New Search Console reports

https://developers.google.com/search/docs/guides/debug#keep-track-of-coverage

3. Real-time indexing

4. Getting up to speed with Accelerated Mobile Pages

https://www.ampproject.org/

5. A new and improved Structured Data Testing Tool

https://search.google.com/structured-data/testing-tool

6. App Indexing got a new home (and new features)

https://www.youtube.com/watch?v=C35OSHlTNwA

7. App streaming

https://www.youtube.com/watch?v=T93bcJh4oSQ

8. Revamped documentation

https://developers.google.com/search/

Chrome 52 Released

Chrome 52: Contain Property, the PerformanceObserver API & Service Worker Stream

Chrome 52 released.

Release note

* CSS Contain Property

- Post: http://goo.gl/9hX2A2

- Spec: http://goo.gl/AmLB8z

* Performance Observer API

- Post: http://goo.gl/gteR4E

- Demo: http://goo.gl/wYwdY9

- Spec: http://goo.gl/TA9RtM

* Service Worker Streamed Responses

- Post: http://goo.gl/hrRUd0

- Spec: http://goo.gl/DgrjhH

프로그래시브 웹앱 (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!

CODEBEAT - Code Analyzer

HomePage: https://codebeat.co

This service get Feedback of your project code.



This service check clean code.

Start this service!

First, Login with GitHub.


And make account of CODEBEAT



Second, Public project setup
You can add public git repo.
(This service can analyze java, python, Go, swift project)
https://hub.codebeat.co/v1.0/docs/unsupported-project



Exam project result at below.



book button on right side, you can see recommand docs.
For example, first of list "There is identical code 2 places"
book link: https://hub.codebeat.co/docs/software-quality-metrics#code-duplication
-> code duplication

You can see Ratings of all.



"load more..." button at last.

This service can help me make clean code.
Awesome!

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!

+

Microsoft data science course open with edX

https://academy.microsoft.com/en-US/professional-degree/data-science/

you can get these courses



last one is project. (data science challenge)
And each course can get Verified Certificate.



happy study!

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!

Machine Learning Recipes with Josh Gordon - Google Developers Youtube

https://www.youtube.com/playlist?list=PLOU2XLYxmsIIuiBfYad6rFYQU_jL2ryal



This playlist teach about What is machine learning, machine learning technique, so on.

Good for Machine learning study.

Coding With Chrome

http://codingwithchrome.foo/



we can learn using chrome extension program.

link here : https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed

And you can contribute this project on GitHub
https://github.com/google/coding-with-chrome/

First, this program UI like this.



So Simple. i clicked Beginner in this posting.
And we see this screen below.




1. Blockly
Blockly menu likes scratch i think.






2. Robots
Robots menu likes scratch same as blockly.
but this menu can be used robot control.



first ev3 menu can use if you have ev3 robot. (when i use program, can not use it)
so, i'll show you sphero menu.





Start!

<Youtube information video>

This program good to learn coding.
gooooood

Which Programming Language Should I Learn First - carlcheo.com

http://carlcheo.com/startcoding

Poster



Python



You can see this reference about Python, Java, C/C++, JavaScript, C#, Ruby, PHP, Objective-C.
In this site. http://carlcheo.com/startcoding

+CarlCheo

Google AR(Augmented Reality) Project Tango

https://get.google.com/tango/



Video>

more video here

https://youtu.be/pmXVMIRwuJQ

https://youtu.be/KxTLOXzhqzA

Apps:

https://play.google.com/store/apps/collection/promotion_3001310_project_tango_featured

And Developer page

https://developers.google.com/tango/

GitHub : 

https://github.com/googlesamples/?query=tango

Google I/O 2016 codelab

https://codelabs.developers.google.com/io2016



You can learn technique on this site.
I click one of lab, "Accerlerated Mobile Pages Advanced Concepts"



















10 step course.




Do each stap.
End.



I will use this codelab on my project.

Android, iOS, Windows Phones Viewport size table

http://viewportsizes.com/



You can use this site when you need viewport size table for make cordova applications.

Filter can use like this.

Octane, Javascript Benchmark

http://chromium.github.io/octane/



What is Octane : https://developers.google.com/octane/benchmark

Start Octane!



Running...




End!
My Macbook retina chrome Octane Score: 20984

if you want accurate result,
make new window OR anew browser.

Use Cordova application + Crosswalk (for performance, compatibility)

Cordova website: https://cordova.apache.org/
Crosswalk website: https://crosswalk-project.org/

in my project, i use to make app have more performace, compatibility.
Crosswalk project advantages are

The Crosswalk Project Advantage:

• Get consistent, predictable behavior by reducing Android device fragmentation.
• Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices.
• Easily debug with Chrome DevTools.
• Improve the performance of your HTML, CSS, and JavaScript.

like that.

And I will use it in this time.

First, Install Cordova

$npm install cordova -g
(if you are not install npm, install nodejs or npm)


Second, Make Cordova app

$cordova create app com.pineoc.testapp app
$cordova platform add android


Third, Install Crosswalk plugin for Cordova

$cordova plugin add cordova-plugin-crosswalk-webview


Fourth, run android

$cordova run android


Reference post benchmark about crosswalk:
http://monaca.mobi/en/blog/crosswalk-performance/


*Crosswalk makes app good performance, but application dex size(apk file size)
bigger than not use crosswalk application.



left side info is "crosswalk + cordova"
right side info is "just cordova"

dex size added about 20MB
because of Crosswalk APIs, high performance rendering functions, Compatibility functions.

if not important about application size, use crosswalk for performance
but important about that, should be consider to use it.

Good coding day
Thanks

Megaboilerplate - starter project generator

http://megaboilerplate.com/



Github link: https://github.com/sahat/megaboilerplate/

This service
make starter project.

it can be used like this.






pick the stack you want.
and download




Download file packed,

You can use just
$npm install
$npm start

And you can see this page



Amazing service!

I will use this for my personal project some time.

Developer Github link: https://github.com/sahat
I follow him.