GitLab CI 해보자!

미디엄: https://medium.freecodecamp.org/how-to-setup-ci-on-gitlab-using-docker-66e1e04dcdc2
GitLab CI quick start: https://gitlab.com/help/ci/quick_start/README
GitLab CI Demo: https://gitlab.com/ykyuen/gitlab-ci-demo

이번에 GitLab에서 CI를 자체적으로 지원해준다고 해서 한번 해보자!
하는 마음으로 시작하는 CI 설정!

쉽게 정리해보자면, 설정 순서는 다음과 같습니다.

0. 빌드하고자하는 환경을 설정
1. .gitlab-ci.yml 설정
2. gitlab에 push!
3. 빌드됨!

여기서 가장 어렵다고 생각이 드는 것은 빌드하고자 하는 환경을 설정하는 것이라고 생각합니다.
그런데 freecodecamp 미디엄 글에서는 도커 이미지를 사용해서 설정하는군요.

일단 저는 Cordova 앱을 빌드하기 위해 필요한 환경설정이 무엇인지 살펴보고자 합니다.
필요한 세팅은 아래와 같을겁니다.

Cordova Android 문서를 참고해보았습니다.
- JDK 8 이상
- Android SDK, Android SDK Packages
- Node.js 8.9.4 (NPM)
- Cordova

정리하고 나니 위에 4개 정도 필요하네요. (추가적으로는 환경변수 설정도 있겠습니다.)

미디엄 글에서 나온 것은 docker 이미지를 사용해서 CI를 설정하고 있어서 편하게 되어 있습니다.
저도 그래서 찾아봤습니다. cordova 관련한 docker 이미지가 있는지!

있습니다!
https://hub.docker.com/r/beevelop/cordova/

요거 써서 설정되어 있는 이미지를 사용하면 편할 것 같습니다.

그래서 제가 작업한 저장소는 아래에!
https://gitlab.com/pineoc/cordova-ci-demo

기본적인 프로젝트 구성은 아래와 같이 만들어졌습니다.

0. .gitignore는 platforms, plugins를 포함해서 기본적인 세팅을 했습니다.
1. npm i -g cordova
2. cordova create ci-test com.pineoc.citest ciTest
3. cordova platform add android
4. .gitlab-ci.yml 세팅

.gitlab-ci.yml 파일은 아래와 같습니다.

image: beevelop/cordova:latest

before_script:
  - cordova platform add android

stages:
  - build

build:
  stage: build
  script:
    - cordova build android

이렇게 .gitlab-ci.yml을 작성하고 올려두면 자동적으로 파일을 인식, 빌드를 시작합니다.

https://gitlab.com/pineoc/cordova-ci-demo/-/jobs/48618903

이것처럼 쭉 로그가 나오고 빌드 결과는 passed, failed로 나옵니다.
그렇게 어렵지 않게 기본 프로젝트 빌드는 세팅해보았지만
추가적인 설정이 들어가면 어려워질 수 있을 것 같네요.
(플러그인을 추가, iOS 빌드 시스템)

도움이 되었으면 좋겠습니다.

Firebase node-gyp error

최근에 파이어베이스 호스팅과 Functions를 이용해서 사이트를 만들어보고자 했지만
firebase 커맨드라인에 문제가 생겨서 글을 남겨봅니다.


Error Name: ERR! Pre-built binaries not found for grpc@1.6.6 and node@9.3.0 (node-v59 ABI) (falling back to source compile with node-gyp)

위와 같은 에러가 났는데요.
몇가지 글이 나오지 않는데 GitHub에 이슈가 올라온 것으로 확인했습니다.

https://github.com/firebase/functions-samples/issues/267

저는 아래와 같이 해결했습니다.

$ npm install -g firebase-tools

또 project-folder/functions 폴더로 가서 node_modules를 지우고 다시 명령어를 해주었습니다.

$ npm install

그리고 디플로이! 잘 진행해볼 수 있었습니다.

$ functions firebase deploy

=== Deploying to 'webpage-test'...

i  deploying functions, hosting
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (29.15 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting: preparing public directory for upload...
⚠  Warning: Public directory does not contain index.html
✔  hosting: 2 files uploaded successfully
i  functions: updating function app...
✔  functions[app]: Successful update operation.
Function URL (app):

✔  Deploy complete!

Project Console: ---
Hosting URL: ---

OpenGL ES 버전 2.0과 3.0 차이(1)

Cocos2d-x 버전 차이에 대해서 공부하던 중에 그 기반이 되는 OpenGL ES의 버전에도
큰 차이가 있지 않을까하여 공부해봤습니다.

우선 OpenGL ES란, (Wikipedia-ko)

OpenGL ES (임베디드 단말을 위한 OpenGL)는 크로노스 그룹이 정의한 3차원 컴퓨터 그래픽스 API인 OpenGL의 서브셋으로, 휴대전화, PDA 등과 같은 임베디드 단말을 위한 API이다.

한글로 작성된 위키는 짧군요.
영어로 작성된 위키를 더 보겠습니다. (Wikipedia-en)

OpenGL for Embedded Systems (OpenGL ES or GLES) is a subset^[2] of the OpenGL computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics such as those used by video games, typically hardware-accelerated using a graphics processing unit (GPU). It is designed for embedded systems like smartphones, computer tablets, video game consoles and PDAs. OpenGL ES is the "most widely deployed 3D graphics API in history".^[3]The API is cross-language and multi-platform. The libraries GLUT and GLU are not available for OpenGL ES. OpenGL ES is managed by the non-profit technology consortium Khronos Group. Vulkan, a next-generation API from Khronos, is made for simpler high performance drivers for mobile and desktop devices.^[4]

설명에 큰 차이는 없지만, API에 대한 설명에는 크로스 랭귀지, 멀티 플랫폼이 들어가있습니다.
OpenGL에서 사용할 수 있는 GLUT, GLU는 OpenGL ES에서는 사용할 수 없다. 정도네요.

각 버전별 설명도 잘 나와있는 영문 위키를 보면,

OpenGL ES 2.0
OpenGL ES 2.0 was publicly released in March 2007.^[6] It is based roughly on OpenGL 2.0, but it eliminates most of the fixed-function rendering pipeline in favor of a programmable one in a move similar to transition from OpenGL 3.0 to 3.1.^[7] Control flow in shaders is generally limited to forward branching and to loops where the maximum number of iterations can easily be determined at compile time.^[8] Almost all rendering features of the transform and lighting stage, such as the specification of materials and light parameters formerly specified by the fixed-function API, are replaced by shaders written by the graphics programmer. As a result, OpenGL ES 2.0 is not backward compatible with OpenGL ES 1.1. Some incompatibilities between the desktop version of OpenGL and OpenGL ES 2.0 persisted until OpenGL 4.1, which added the GL_ARB_ES2_compatibility extension.^[9]

OpenGL ES 3.0

The OpenGL ES 3.0 specification^[10] was publicly released in August 2012.^[11] OpenGL ES 3.0 is backwards compatible with OpenGL ES 2.0, enabling applications to incrementally add new visual features to applications. OpenGL 4.3 provides full compatibility with OpenGL ES 3.0. Version 3.0 is also base of WebGL 2.0.^[12]

New functionality in the OpenGL ES 3.0 specification includes:

• multiple enhancements to the rendering pipeline to enable acceleration of advanced visual effects including: occlusion queries, transform feedback, instanced rendering and support for four or more rendering targets,
• high quality ETC2 / EAC texture compression as a standard feature, eliminating the need for a different set of textures for each platform,
• a new version of the GLSL ES shading language^[13] with full support for integer and 32-bit floating point operations;
• greatly enhanced texturing functionality including guaranteed support for floating point textures, 3D textures, depth textures, vertex textures, NPOT textures, R/RG textures, immutable textures, 2D array textures, swizzles, LOD and mip level clamps, seamless cube maps and sampler objects,
• an extensive set of required, explicitly sized texture and render-buffer formats, reducing implementation variability and making it much easier to write portable applications.

(참고, http://www.informit.com/articles/article.aspx?p=2181697&seqNum=2)

음, 각각 살펴보고 정리해보겠습니다.

OpenGL ES 2.0을 먼저 살펴보면,
2007년 3월에 출시되었습니다. OpenGL 2.0을 기반으로 하지만 OpenGL 3.0에서 3.1로 업데이트 될 때와 비슷하게 고정 렌더링 파이프라인을 제거하였습니다. 셰이더의 제어 흐름은 컴파일할 때에 쉽게 결정할 수 있는 순방향 분기, 루프로 제한됩니다.
이전에 고정 함수 API에 의해 지정된 재질 및 조명 매개 변수와 같은 변형 및 조명 스테이지의 거의 모든 렌더링 기능은 그래픽 프로그래머가 작성한 쉐이더로 대체되었습니다. 따라서 OpenGL ES 2.0은 OpenGL ES 1.1과 호환되지 않습니다. OpenGL과 OpenGL ES 2.0 데스크톱 버전 간의 일부 비 호환성은 GL_ARB_ES2_compatibility 확장을 추가 한 OpenGL 4.1까지 지속됩니다.

OpenGL ES 3.0은 어떨까요.
OpenGL ES 3.0 사양은 2012년 8월에 공개되었습니다. OpenGL ES 3.0은 OpenGL ES 2.0과 하위 호환되므로 응용 프로그램이 응용 프로그램에 점진적으로 새로운 시각적 기능을 추가할 수 있습니다.
OpenGL 4.3은 OpenGL ES 3.0과 완벽한 호환성을 제공합니다.
버전 3.0은 WebGL 2.0의 기반이기도합니다.
새로운 기능은 아래와 같습니다.

• 오클루전 쿼리, 변환 피드백, 인스턴스 렌더링 및 4개 이상의 렌더링 대상에 대한 지원을 비롯하여 고급 시각 효과를 가속화 할 수 있도록 렌더링 파이프 라인에 대한 여러 가지 향상된 기능을 제공합니다.
• 고품질 ETC2/EAC 텍스처 압축을 표준 기능으로 지원하여 각 플랫폼에 다른 텍스처 세트가 필요하지 않습니다.
• 부동 소수점 텍스처, 3D 텍스처, 깊이 텍스처, 정점 텍스처, NPOT 텍스처, R/RG 텍스처, 불변 텍스처, 2D 배열 텍스처, 스위즐, LOD 및 밉 레벨 클램프, 매끄러운 큐브 맵 및 샘플러 객체에 대한 보장된 지원을 포함하여 크게 향상된 텍스처링 기능을 포함합니다.
• 명시적으로 크기가 필요한 텍스처 및 렌더링 버퍼 형식의 광범위한 세트로, 구현 변동성을 줄이고 모바일 앱을 훨씬 쉽게 개발할 수 있습니다.

구글 번역기의 도움을 받아 해석해봤는데, 전반적으로 기능, 성능향상이 있어보입니다.
퍼포먼스 테스트 자료가 있으면 좋겠는데.. 없네요. 한번 테스트를 해봐야겠습니다.

OpenGL ES 버전 차이가 어떤가에 대해 개괄적인 내용이었지만
렌더링 방식, 텍스처 처리방식, 버퍼 크기등에 대한 차이가 있었네요.
다음 글에서는 성능 차이에 대한 이야기를 해보겠습니다.

Cocos2d-x version difference between 2.x vs 3.x

http://cocos2d-x.org/

Cocos2d-x는 현재 두개의 버전을 지원하고있는데요.
2.2.6 버전과 3.15 버전을 지원하고 있습니다.

최근에 이 두개의 버전은 어떤 차이가 있고, 성능차이가 있는가에 대해 궁금해져서
이렇게 포스팅을 하게 되었습니다.

우선 크게 바뀐 것 부터 정리해보자면,
Release Note on GitHub: Cocos2d-x-v3.0-ReleaseNote.md
참고: VallistA님의 블로그

1. Python을 사용한 크로스 플랫폼 개발 지원(Cocos console)
Cocos2d-x 2.x 버전에서는 Cygwin을 이용한 리눅스 환경에서 작업을 했다면,
3.x 버전에서는 파이썬을 이용한 cocos console을 이용해서 작업할 수 있게 되었습니다.
이를 통해 쉽게 크로스 플랫폼 환경에서 편하게 프로젝트를 만들고 컴파일할 수 있게 되었습니다.

2. Objective-C 패턴 제거(Objective-C pattern removed)

1. cocos2d라는 namespace를 사용하게 되면서, 더이상 CC라는 prefix를 사용할 필요가 없게되었습니다.
• CCSprite -> Sprite, CCFrame -> Frame, CCScene -> Scene, CCDirector -> Director 등으로 변경되었습니다.
2. copy() 함수 대신에 clone() 함수를 사용합니다.
3. Singleton은 getInstance(), destoryInstance() 함수명을 사용하여 인스턴스를 관리합니다.
• 그전에는 sharedDirector()와 같은 함수를 사용했었습니다.
4. Object 클래스 -> Ref로 변경
• Object라는 이름이 모호한 점이 있어 Ref로 변경되었습니다.
5. Getter 함수들이 get prefix를 가집니다.
6. POD type의 변수를 const로 전달합니다.

3. C++11 features를 따름
C++ 11 버전을 지원하게 되어서 여러가지 기능을 사용 가능하고, 따르게 되었습니다.
- auto 키워드를 사용가능 (보다 적극적으로 사용하게 되었습니다.)
- lambda식을 사용가능.
- enum(strongly typed enum)을 사용.
        (CCPointZero -> Point::ZERO 로 변경)
- override, final 키워드를 사용.

4. 새로운 Renderer
Cocos2d-x 2.2버전은 현재 문제는 없지만 최적화를 하거나 새로운 함수 추가,
새로운 플랫폼 추가하기가 힘듭니다. 이런 문제를 해결하기 위해 새로운 렌더러를 만들었습니다.
새로운 렌더러는 다음과 같은 기능을 가집니다.

• It has been decoupled from the Scene Graph. The draw() method, instead of "drawing" it sends a RenderCommand to the Renderer, and Renderer is responsible for drawing the queued RenderCommand commands.
• QuadCommands (used by Sprite and ParticleSystem objects) will be automatically batched.
• CustomCommand objects allow the user to use custom OpenGL code, using a API similar to v2.2
• GroupCommand objects allow to have "stacks" in the Renderer with different OpenGL values.
• Auto-culling for Sprite objects (although, technically, Auto-culling is not performed in Renderer code, but in the Sprite code)
• Global Z ordering (local Z ordering is still supported)

좀 더 살펴보면,

- Auto-batching
batch 작업을 많이하면 할 수록 성능이 안좋아지는데 이를 최적화합니다.
- Auto-culling(view frustum culling)
Sprite에 대해 처리를 하는 작업입니다. Sprite가 화면에서 나갈경우 draw가 실행되지 않도록합니다.
- Global Z order
setZOrder(), getZOrder()을 deprecate하고
setGlobalZOrder(), getGlobalZOrder(), setLocalZOrder(), getLocalZOrder()을 만들었습니다.
화면 전체에 대해 Zorder를 정할 것인지, 그 노드에서 Zorder를 정할 것인지를 세팅할 수 있습니다.

* Sprite vs SpriteBatchNode
2.2 버전에서는 Sprite를 효율적으로 처리하기 위해서, SpriteBatchNode를 사용하라고 권장 했었습니다.
3.0 버전에 올라와서는 SpriteBatchNode를 사용하지 않더라도 Sprite를 만들때 TextureID를 같게 만든다면 큰 성능 이슈는 없습니다.
만약 성능을 올리고 싶다면 SpriteBatchNode를 사용하는게 여전히 좋습니다.

5. LabelTTF / LabelBMFont / LabelAtlas 개선
Label에 대한 구현이 Label 클래스로 통합되었습니다.

6. 새로운 EventDispatcher
touch event, keyboard event, acceleration event, custom event에 대한 디스패쳐가 삭제되었습니다.
EventDispatcher로 통합되었는데, 모든 이벤트는 EventDispatcher로 처리합니다.

7. 물리엔진 개선(Physics Integration)
Box2D로 구현했던 물리엔진 기능이 Chipmunk2D로 통합, 바뀌었습니다.

정리해놓고 보니까 꽤 많은 변화가 있었지만, 2.2.6 버전도 지금까지 어떤 변화가 있었는지
그에 대한 정리가 필요해보입니다.

그 외에  OpenGL 버전 업은 어떻게 되었는지도 궁금하지만 릴리즈 노트에는 없으니
따로 찾아봐야겠습니다.

ARM에서 Ricardo Quesada 님이 발표한 내용이 있어서 공유합니다.

다음엔 OpenGL 버전과 Cocos2d-x 버전과의 상관관계를 알아봐야겠습니다.

Git trend - monitoring the popularity and the truck factor of GitHub projects

http://gittrends.io/#/

Git에서 트렌드로 올라와 있는 프로젝트들의 유명함, 성장 패턴, 예상, 트럭 팩터(?)를
볼 수 있는 서비스입니다.

예시로 리누즈 토발즈의 리눅스를 한번 볼까요?



star(별)을 얼마나 받았는지, 각종 수치를 볼 수 있습니다.
그 외에도 트럭 팩터, 랭킹, 컨트리뷰터 등에 대한 정보도 볼 수 있습니다.

각종 재미있는 수치들을 볼 수 있는데, 여기서 트럭 팩터란,

"Truck Factor (aka Bus Factor) is the minimal number of developers that have to be hit by a truck (or quit) before a project is incapacitated. It reveals the concentration of knowledge in individual developers."

Truck Factor (aka Bus Factor)는 프로젝트가 무능력 해지기 전에 트럭에 타격을 가해 야하는 최소한의 개발자 수입니다. 그것은 개별 개발자의 지식 집중을 나타냅니다.

위키의 설명 링크 입니다. ( https://en.wikipedia.org/wiki/Bus_factor )
"Bus Factor"는 전문 지식이 부족하거나 유능한 직원이 부족하여 프로젝트가 중단되기 전에 갑자기 프로젝트에서 사라져야하는 팀 구성원의 최소 수입니다.

이렇다고 하네요. 이런 용어도 있는 것을 처음 알았습니다. ㅎㅎ
다시말해서, 프로젝트가 망해가기전에 제 할일을 못하고 있는 컨트리뷰터를
얼마나 잘라야하는 것 인가에 대한 수치인 것이네요.

어쨋든, 재미있는 인사이트를 주는 서비스인 것 같습니다.
GOOD GOOD SERVICE!

마이크로소프트 감정인식 서비스(Emotion API)

https://www.microsoft.com/cognitive-services/en-us/emotion-api

마이크로소프트에서는 인식에 관련한 서비스들을 제공중입니다.
여러가지 인식 서비스가 있는데
Vision, Speech, Language 이렇게 세개의 파트로 나눠집니다.



그 중에 얼굴 감정인식 기능인 Emotion API를 잠깐 소개드리려고합니다.
아래서 데모를 할 수 있는데 데모 먼저 보겠습니다.


얼굴 표정에 대해서 분석을하고 그 결과값을 JSON 데이터 형식으로 보내줍니다.
각각 anger, contempt, disgust, fear, happiness, neutral, sadness, surprise
분노, 경멸, 혐오, 두려움, 행복, 감정자제, 슬픔, 놀람 이렇게 구분되어 데이터를 보내줍니다.

개발에 필요한 감정 API의 문서는 아래에서 보실 수 있습니다.
https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa

Get Started는 C#, Python이 있네요.
C# : https://www.microsoft.com/cognitive-services/en-us/Emotion-api/documentation/GetStarted
Python : https://www.microsoft.com/cognitive-services/en-us/Emotion-api/documentation/GetStartedWithPython

이 감정인식 서비스로 한번 재미있는 앱을 만들수 있을 것 같습니다.
가격 정책은 아래와 같으니 참고하세요


한달에 3만번 정도는 무료로 사용할 수 있네요.
비디오 분석은 한달에 300번 업로드, 비디오 쿼리 분석은 한달에 3000번이네요.
무료로 사용하는 만큼만 재미있게 만들면 좋겠네요 ㅎㅎㅎ

Google AI Experiments

https://aiexperiments.withgoogle.com/

이 사이트를 알게 된건 Quick, Draw라는 페이지였는데
https://quickdraw.withgoogle.com/
단어에 맞는 그림을 그리면 그림을 인식하는지 못하는지를 알려줍니다.



이런식으로 말이죠.



이 외에도 많은 실험사이트가 있는데 재미있는 것들이 많은 것 같습니다. :)
한번 살펴보세요!

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

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

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

스트레스 테스트 툴 - Artillery

https://blog.outsider.ne.kr/1238
아웃사이더님의 블로그를 보고 Artillery 툴이
ab(apache benchmark)보다 뭔가 더 좋은 것 같아서 한 번 공부해봅니다.



이 툴을 테스트해보고 싶었던 가장 큰 이유는
report라는 기능으로 테스트 결과를 html 파일로 보기 좋게 만들어주는 기능이 있기때문..!

한번 테스트해보겠습니다.

1. 설치
$npm install artillery -g

2. 퀵 테스트 실행
$artillery quick -d 60 -r 10 http://pineoc.blogspot.com

Log file: artillery_report_20160912_130365.json
Phase 0 started - duration: 60s

Report for the previous 10s @ 2016-09-12T04:04:09.912Z
  Scenarios launched:  99
  Scenarios completed: 95
  Requests completed:  194
  Concurrent users:    4
  RPS sent: 19.92
  Request latency:
    min: 168.8
    max: 623.9
    median: 188
    p95: 236.5
    p99: 504.6
  Scenario duration:
    min: 473.9
    max: 941.3
    median: 517.2
    p95: 718.9
    p99: 921.6
  Codes:
    200: 96
    302: 98
... 생략
밑에 쭈욱 로그가 나옵니다.

파일이 만들어졌다고 나왔네요. 한번 들여다보면,


이렇게 데이터가 14000줄 정도 나옵니다.
한번 report 명령어로 리포트 뽑아보겠습니다.

3. 리포트 만들기
$artillery report

이렇게 html이 바로 짠하고 나옵니다.





각각의 그래프에 마우스 커서를 올리면 데이터도 확인해볼 수 있구요.
실제로 서비스 개발할 때도 사용해봐야겠습니다.
굿굿

영어 스펠링 체크하기 - codespell

https://github.com/lucasdemarchi/codespell

오픈소스 프로젝트 기여하기에는 여러가지 방법이 있는데요.
저는 일단 영어 스펠링 틀린 것 수정하기부터 시작해보았습니다.

여러가지 스펠링 체크해주는 툴이 있는데
저는 현재 맥북을 사용하고 있으니
리눅스 스펠링 체크 툴을 찾아봅니다.

그 전에 찾아서 사용했던 툴 중에 하나가
codespell이라는 툴입니다.

깃헙에서 다운받아서
bin/codespell.py를 사용하시면 됩니다.

디렉토리로도 찾을 수 있고
틀린 것을 바로 수정하는 -w 플래그만 주면 수정할 수 있습니다.



cocos2d-x 스펠링 체크해본 결과입니다.
필요한 부분만 수정해줘야할듯하네요. 변수명은 두고 주석만 수정해야겠습니다.



이렇게 하면 다 수정되어버리는데,
수정되면 안되는 것은 git 명령어를 통해서 ignore 처리하고 커밋합니다.
(다른 명령어 처리방법도 있습니다만 저는 이렇게...)

이렇게 기여하고, 코드 보고 이해하다보면
실제 로직에 참여할 수 있습니다.
모두 화이팅!

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

http://standardjs.com/

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

에어비앤비에서 깃헙에 올렸던
자바스크립트 코딩 스타일 가이드 문서 라던지,
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 open, length, event, and name.

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

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!

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!

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!

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

jQuery iframe reload trick

Classroom for GitHub

https://classroom.github.com/

Classroom page after sign in.

You can make classroom of your organizations.
(your own organization only)

#Make classroom

This link can access invited user.
https://classroom.github.com/classrooms/17920673-treedreamer

#Create assignment

You can make assignment

1. Individual assignment
2. Group assignment

first individual assignment added.

Go to this link, show this page

If accept this,

You can see this page, and GitHub repo added to your organization.

It can be useful to programming group, study group.
I think GitHub Classroom is Good service for group.