2016년 7월 25일 월요일

JavaScript Standard Style - 자바스크립트 코딩 스타일(컨벤션) 체크 툴



최근에 자바스크립트 공부를 하면서 느꼈던게 있었는데
코딩 컨벤션, 코딩 스타일에 대한 것이었습니다.

에어비앤비에서 깃헙에 올렸던
자바스크립트 코딩 스타일 가이드 문서 라던지,
https://github.com/airbnb/javascript

구글에 있는 자바스크립트 코딩 스타일 가이드도 봤었습니다.
https://google.github.io/styleguide/javascriptguide.xml

제 코드에서 조금씩 조금씩 바꿔보긴 했는데
힘들어서 자동툴 같은 것이 없을까해서 찾아봤는데
역시 누군가가 잘 만들어놨습니다.
(제가 한번 만들어보고 싶었는데 나중에 한번 만들어봐야겠습니다.)

위에 있는 스탠다드JS가 그 툴을 만든곳이고
그 툴의 이름이기도 합니다.

깃헙 주소는 https://github.com/feross/standard

사용법은 쉽습니다.

1. 설치
$npm install standard -g

2. 사용
자바스크립트로 작성중인 프로젝트의 디렉토리에 가셔서
$standard

그럼 각 라인별로 확인을 해서 기준에 맞는지 틀리는지 체크합니다.

결과는
/Users/pineoc/Desktop/project/server/app.js:1:33: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:2:27: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:3:5: 'favicon' is defined but never used
  /Users/pineoc/Desktop/project/server/app.js:3:39: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:4:31: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:5:44: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:6:40: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:7:5: 'fs' is defined but never used

이런식으로 쭉해서
출력이 너무 많이 나와서 파일로 출력해봤습니다.

$standard > standard.out

그랬더니...
출력 라인수가 17828!
(파일 라인 확인하는 방법은 $wc -l [filename] 입니다.)

많이 고쳐야겠네요.. ㅎㅎ

아, 그리고 이 스타일 체크는 아래와 같은 기준으로 합니다.

/* 깃헙에 있는 룰을 가져왔습니다.*/

Rules

  • 2 spaces – for indentation
  • Single quotes for strings – except to avoid escaping
  • No unused variables – this one catches tons of bugs!
  • No semicolons – It's fine. Really!
  • Never start a line with ([, or `
    • This is the only gotcha with omitting semicolons – automatically checked for you!
    • More details
  • Space after keywords if (condition) { ... }
  • Space after function name function name (arg) { ... }
  • Always use === instead of == – but obj == null is allowed to check null || undefined.
  • Always handle the node.js err function parameter
  • Always prefix browser globals with window – except document and navigator are okay
    • Prevents accidental use of poorly-named browser globals like openlengthevent, and name.

PS. Node.js 프로젝트에 적용한 것이지만
어느정도 골라서 수정이 필요할 것 같습니다.



2016년 7월 22일 금요일

Google I/O 2016 Recap

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

Index of 8 things you don't miss it

1. Introducing rich cards
2. New Search Console reports
3. Real-time indexing
4. Getting up to speed with Accelerated Mobile Pages
5. A new and improved Structured Data Testing Tool
6. App Indexing got a new home (and new features)
7. App streaming
8. Revamped documentation

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!

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

2016년 7월 21일 목요일

안드로이드 얼굴 인식 해보기 (Android face detection)


이번에 안드로이드 앱 개발 프로젝트가 하나 생겨서
얼굴 인식을 해야할 일이 생겼습니다.

어렵지 않게 안드로이드 쪽 API가 있겠거니 해서 찾아서
테스트 진행!

우선 API가 있나 찾아봅니다.
API 문서: android/media/FaceDetector.html
소개 문서: google/android/gms/vision/face/FaceDetector

코드랩은 쭉 따라가면서 만들어보는 곳인데
사진에 대해서 얼굴 인식을 해보는 예제입니다.
CodeLab: https://codelabs.developers.google.com/codelabs/face-detection/index.html#0

구글 비전 API관련 소스는 아래를 참고하시면 좋습니다.
https://github.com/googlesamples/android-vision

저는 일단은 코드랩을 따라서 진행해봤습니다.
아래와 같은 목표를 가지고 진행을 했는데요.
1. 얼굴의 위치를 가져오자
2. 얼굴의 눈, 코, 입, 등의 구성요소 위치를 가져오자

코드랩을 따라가면
사진을 이용해 1의 목표만을 달성할 수 있었습니다.


코드랩은 이렇게 생겼습니다

2단계에서는 프로젝트를 만들고 프로젝트 세팅을 합니다.
3단계에서는 메인 엑티비티 코드를 수정해서 기능 구현을 하고
4단계에서 결과를 같이 보게 됩니다.

제가 따라하면서 만들었던 코드는 아래와 같습니다.





저는 추가적으로 목표 2를 달성하기 위해
몇줄의 코드를 추가했습니다.

https://developers.google.com/vision/detect-faces-tutorial
여기서 보고 추가한
FaceDetector detector = new FaceDetector.Builder(context)
    .setTrackingEnabled(false)
    .setLandmarkType(FaceDetector.ALL_LANDMARKS)
    .build();
그리고 랜드마크들 위치에 점을 찍기 위해서
얼굴 찾은 반복문에서 랜드마크 리스트를 받고 랜드마크 각각의 위치에
초록색 동그라미를 찍어 주었습니다.


카메라를 이용해서 얼굴인식을 하는 것은 다음 포스트에서 진행하려고 합니다.
그래도 관련 링크는 남겨놓겠습니다!

https://developers.google.com/vision/face-tracker-tutorial

즐거운 코딩하세요!

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

2016년 7월 20일 수요일

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!


2016년 7월 19일 화요일

Cordova, Xcode Error code 65 for command

Cordova iOS 버전 업그레이드 도중에 에러가 발생.

에러 환경은
- MacBook El capitan
- Cordova 6.2.0
- Corova iOS 4.1.1

에러코드는 아래와 같았습니다.

xcodebuild: error: The project '킹콩로켓56.xcodeproj' does not contain a target named '킹콩로켓56'.
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/cordova/build-debug.xcconfig,-project,킹콩로켓56.xcodeproj,ARCHS=i386,-target,킹콩로켓56,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/build/sharedpch

원인해결을 위해서 검색해봤지만
- 프로비저닝 파일 문제
- Xcode 문제
- ios-deploy 문제

모두 아니었습니다.

문제는 한글이름.

config.xml에 있는 앱 이름을 한글로 설정하고 진행하면 에러가 납니다.


이에 대한 해결방법은
1. 에러가 났을 경우, 일단 iOS 쪽을 삭제한다.
$cordova platform rm ios


2. config.xml에 있는 앱 이름을 영어로 바꾼후 iOS 다시 설치
$cordova platform add ios

3. 그리고 빌드해줍니다.
$cordova build ios



빌드 성공!

4. (추가적으로) 앱이름을 한글로 하시고 싶다면
우선 영어로 platform add ios, build 해주시고
그다음에 한글로 바꾸는걸 추천드립니다.

Happy Coding!

2016년 7월 18일 월요일

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:
Tutorials:

Good Library for Web!
+

2016년 7월 17일 일요일

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:

happy coding!

JIRA Plugin - ScriptRunner 소개 #2

관련 글 소개 #1:  https://pineoc.blogspot.com/2019/03/scriptrunner-1.html ScriptRunner 소개 #2 지난 글에서는 Behaviours를 보았고 다음 내용인 콘솔, 리스너 등을 ...