레이블이 javascript인 게시물을 표시합니다. 모든 게시물 표시
레이블이 javascript인 게시물을 표시합니다. 모든 게시물 표시

2016년 8월 29일 월요일

Vorlon.JS - 원격 자바스크립트 디버깅 툴



Homepage: http://vorlonjs.com/
GitHub: https://github.com/MicrosoftDX/Vorlonjs/

원격 자바스크립트 디버깅 툴 이라고 설명은 적어놓았지만
제대로 된 설명은 아래와 같습니다.

"An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io."

플랫폼에 종속되지 않고 원격으로 자바스크립트를 디버깅, 테스트가 가능한 툴.
(Node.js 와 Socket.io 를 이용함)

현재 버전은 0.3.0 입니다.
앞에 버전 번호가 0 인걸로 봐서 아직 개발이 활발히 진행중인
프로젝트인 것 같습니다.

실제 데모 영상은 다음 링크에 있습니다.
http://www.vorlonjs.com/#demo (유튜브에 올라가 있지 않아서 직접 눌러서 보셔야할 듯 합니다.)

- 설치
$npm install -g vorlon

- 실행
$vorlon

실행 전에 해당 웹 앱 페이지에 스크립트 코드를 넣어주셔야합니다.
<script src="http://localhost:1337/vorlon.js"></script>

이렇게 하면 vorlon에서 사용하는 socket.io에 연결되어서
디버깅, 테스트를 진행 할 수 있습니다.

현재 진행하는 Cordova나 웹 페이지 개발에
테스트, 디버깅에 한번 사용해봐야겠습니다.

2016년 8월 8일 월요일

GitHub 자바스크립트 게임 엔진 프로젝트 모음 - Phaser

https://github.com/showcases/javascript-game-engines

가끔 심심할 때에 깃헙에 있는 Explore 를 보곤합니다.
어떤 프로젝트가 요즘 뜨고 있는가, 재미있는 프로젝트가 있나해서
두리번 두리번 보곤했는데

오늘은 자바스크립트 게임엔진 프로젝트가 있길래 한번 들여다 봤습니다.





총 15개의 프로젝트가 있는데
제일 많은 스타를 받은 프로젝트를 한번 볼까요?

https://github.com/photonstorm/phaser

이 프로젝트는 Phaser 라는 이름의 게임 엔진 프로젝트입니다.




아래에는
엔진의 특징을 설명해놓았네요



WebGL, Canvas 그래픽 표현부터 시작해서
소리, 인풋, 애니메이션 등에 대한 특징에 대해 설명하고 있습니다.

그 아래에는 튜토리얼, 소식 등에 대한 내용이 있습니다.



각 포스트에는 내용에 따라 라벨이 붙어있네요.
튜토리얼, 게임, 컨퍼런스 등으로 나눠져 있습니다.

그리고 마지막에는
퀵스타트 가이드가 있습니다.



Phaser를 깃헙에서 받을 수 있기도 합니다만.
링크로 가면 해당 사이트에 있는 다운로드 페이지로 가서
stable 버전을 다운 받을 수 있게 되어있네요.




저는 js 버튼을 눌러서 다운받아 보았습니다.
(3.3MB 정도의 크기의 phaser.js 파일이 다운받아졌습니다.)

튜토리얼을 한번 해보려고 했으나
http://phaser.io/tutorials/getting-started/index
영어 + 조금 불친절한 내용으로 힘들 것 같네요.

튜토리얼 말고 예시에 대해서 한번 보고 마치겠습니다.
http://phaser.io/examples
깃헙 Examples 링크: https://github.com/photonstorm/phaser-examples



많은 예제가 있는데 하나만 들어가보겠습니다.

ACADE PHYSICS로 가서 Accelerate to pointer 라는 예제를 보겠습니다.



이 예제는 저 초록 화살표가 마우스를 따라옵니다.

이 밑에는 코드 예시가 있는데요



다운받아서 플러그인 처럼 사용해도될 것 같습니다.

Phaser로 한번 간단한 게임 만들어도 재미있을 것 같네요.
이상 자바스크립트 게임 엔진 프로젝트인
Phaser 포스팅을 마치겠습니다.

즐거운 코딩하시길 바랍니다 :)

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일 금요일

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!

2016년 6월 15일 수요일

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.

2016년 6월 10일 금요일

Bootstrap safari right side empty white space


When i use bootstrap full slider,
(http://startbootstrap.com/template-overviews/full-slider/)

I have some issue. Like this.


As you can see, this image shows white space at right side.

in my code,
1. use wrapper class
2. wrapper > row, row, row








i just add to wrapper class
overflow-x: hidden;
and removed empty white space.

thats all.
Daily save the day post.

2016년 4월 15일 금요일

Javascript 개발 가이드 - NHN entertainment 자료



GitHub URL: https://github.com/nhnent/fe.javascript/wiki

공부하기 좋은 내용을 공유하고 있네요.
코딩 컨벤션이나 디버깅, 테스팅등
너무나 배울게 많습니다

NHN enter- 감사합니다!

2016년 3월 18일 금요일

Javascript promises - html5rocks

I start study about javascript promises. (so late...)
(Promises.js had started 2012-12-06 ver 1.0.)

Start from html5rocks page
http://www.html5rocks.com/en/tutorials/es6/promises/

I think promises core value is "Control Async function system".
If use promises, we can control async callback function.

if all function success -> return true,
else return false.

ref,
Promises.js site
https://www.promisejs.org/

I need more study on promises after this posting.
I will use promises on my projects. :)


Korean version
Promises가 있다는걸 이제야 알았네요.
http://www.html5rocks.com/ko/tutorials/es6/promises/

이 글을 보고 다른것도 찾아보려고 검색해봤더니
좋은 글이 많더라구요

http://programmingsummaries.tistory.com/325
(위의 블로그에는 좋은글들이 많습니다!)

아직 많이 부족해서 아쉬운점이 큽니다만
공부할게 많다는점이 아직 즐겁습니다 ㅎㅎ

JIRA Plugin - ScriptRunner 소개 #2

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