레이블이 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,



function isInspectOpen()
{
console.profile();
console.profileEnd();
if (console.clear) console.clear();
return console.profiles.length > 0;
}
view raw check1.js hosted with ❤ by GitHub
window.onresize = function()
{
if ((window.outerHeight - window.innerHeight) > 100)
alert('Docked inspector was opened');
}
view raw check2.js hosted with ❤ by GitHub
var checkStatus;
var element = new Image();
// var element = document.createElement('any');
element.__defineGetter__('id', function() {
checkStatus = 'on';
});
setInterval(function() {
checkStatus = 'off';
console.log(element);
console.clear();
document.querySelector('#devtool-status').innerHTML = checkStatus;
}, 1000)
view raw check3.js hosted with ❤ by GitHub
var element = new Image();
Object.defineProperty(element, 'id', {
get: function () {
/* TODO */
alert('囧');
}
});
console.log('%cHello', element);
view raw check4.js hosted with ❤ by GitHub

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





body{
overflow-x: hidden;
}
/*navbar content*/
.custom-navbar {
background-color: transparent;
border: 0;
padding-top: 2.5%;
padding-bottom: 10px;
padding-left: 0;
position: absolute;
}
.custom-navbar .navbar-toggle {
float: left;
margin-left: 20px;
}
.custom-navbar .navbar-toggle:focus {
background-color: inherit;
}
.custom-navbar .navbar-header {
float: left;
width: auto !important;
margin-left: 5%;
padding: 0;
}
.custom-navbar .navbar-brand {
display: block;
margin-left: auto;
margin-right: auto;
color: white;
}
.custom-navbar .collapse {
float: right;
margin-right: 20%;
font-size: 18px;
}
.custom-navbar .navbar-nav>li>a {
color: white;
}
/*slider*/
#myCarousel {}
#myCarousel .carousel-control .icon-next,
.carousel-control .icon-prev {
width: 20%;
height: auto;
}
.wrapper {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#content1 {
background-color: #ffffff;
padding-top: 5%;
}
#content2 {
background-color: #ebebeb;
padding: 5% 20%;
}
#content3 {
background-color: #ffffff;
padding: 5% 0;
padding-bottom: 8%;
border-bottom: 1px solid #d0d0d0;
}
#content4 {
background-color: #ffffff;
padding: 5% 0;
padding-bottom: 8%;
}
#content5 {
background-color: #ebebeb;
padding-top: 5%;
padding-bottom: 8%;
}
#content6 {
background-color: #fc8f00;
padding-top: 5%;
padding-bottom: 8%;
}
#content7 {
background-color: #6e6e6e;
padding-top: 5%;
padding-bottom: 3%;
color: white;
font-weight: 100;
font-size: 1em;
}
/*phone*/
@media (max-width: 767px) {
#myCarousel {
margin-top: 50px;
}
.custom-navbar {
background-color: #ff8c00 !important;
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
}
.custom-navbar .navbar-toggle {
float: left;
margin-left: 20px;
border: 0;
}
.custom-navbar .navbar-header {
margin-left: -10px;
}
.custom-navbar .li {
float: left;
}
.custom-navbar .collapse.in {
margin-top: 50px;
border: 0;
color: white;
float: left;
}
.custom-navbar .navbar-collapse {
margin-top: 50px;
border: 0;
color: white;
float: left;
}
.custom-navbar .navbar-nav>li>a {
color: white;
}
.custom-navbar .navbar-brand {
display: block;
position: absolute;
width: 110px;
left: 0;
right: 0;
padding: 15px 15px;
margin-left: auto;
margin-right: auto;
color: white;
}
#content2 {
background-color: #ebebeb;
padding: 4% 10%;
}
#content3 {
padding-bottom: 12%;
}
#content4 {
padding-bottom: 12%;
}
#content6 {
padding-bottom: 12%;
}
#content7{
padding-bottom: 10%;
}
}
view raw index.css hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height">
<meta name="description" content="">
<meta name="author" content="">
<title>test</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/contents.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
<div class="container" style="width:100%;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="brand-img" src="img/logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">li1</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill">
<img id="s1-img" src="img/s1.jpg">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill">
<img id="s2-img" src="img/s2.jpg">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill">
<img id="s3-img" src="img/s3.jpg">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<img class="icon-prev" src="img/arrow1-prev.png">
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<img class="icon-next" src="img/arrow1-next.png">
</a>
</header>
<!-- Page Content -->
<div class="wrapper">
<div class="row" id="content1">
<div class="col-lg-12"></div>
</div>
<div class="row" id="content2">
<div class="col-lg-12"></div>
</div>
<div class="row" id="content3" name="how-to-use">
<div class="col-lg-12"></div>
</div>
<div class="row" id="content4">
<div class="col-lg-12"></div>
</div>
<div class="row" id="content5">
<div class="col-xs-12 col-lg-12"></div>
</div>
<div class="row" id="content6">
<div class="col-lg-12"></div>
</div>
<!-- Footer -->
<footer>
<div class="row" id="content7"></div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
//carousel interval settings
$('#myCarousel').carousel({
interval: 5000 //changes the speed
});
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub



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

thats all.
Daily save the day post.

2016년 5월 15일 일요일

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를 보았고 다음 내용인 콘솔, 리스너 등을 ...