반응형
반응형

Paperclip.js: A powerful template engine for Node.js and the browser

 

Paperclip.js is a powerful template engine that’s built for extensibility and speed. It creates compiled templates for the browser and Node.js.

paperclip.js

Homepage: http://paperclipjs.com/
GitHub: http://github.com/mojo-js/paperclip.js

reactive DOM template engine built for speed, and extensibility 

http://paperclipjs.com

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] setTimeOut  (0) 2014.12.12
[AngularJS] Angularjs 예제  (0) 2014.12.10
[JAVASCRIPT] Angular-kickstart: Develop with AngularJS faster  (0) 2014.11.19
[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
반응형

Angular-kickstart: Develop with AngularJS faster

 

Angular-kickstart makes it faster to develop with AngularJS. It combines AngularJS, GulpJS, and Bower, while also keeping your code reusable and with a modular structure.

angular-kickstart

Homepage: http://vesparny.github.io/angular-kickstart/
GitHub: https://github.com/vesparny/angular-kickstart/
Docs: http://vesparny.github.io/getting-started

angular-kickstart - speed up your AngularJS development and testing with a great gulpjs build system.

http://bit.ly/angular_kickstart

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[AngularJS] Angularjs 예제  (0) 2014.12.10
[javascript] Paperclip.js: A powerful template engine for Node.js and the browser  (0) 2014.12.02
[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
[HTML5] hash tag 사용시 IE에서 title이 왜곡되는 현상  (0) 2014.11.10
반응형

Vivus: An SVG animation library

Vivus is a JavaScript class for animating SVGs with no dependencies necessary. It offers asynchronous animations, delayed animations, and line-by-line animations.

vivus

Homepage: http://maxwellito.github.io/vivus/
GitHub: https://github.com/maxwellito/vivus


vivus.js

Demo available on http://maxwellito.github.io/vivus

Vivus is a little JavaScript class (little, because it's being lightweight and having no dependency) to make drawing animation with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.

Animations

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] Paperclip.js: A powerful template engine for Node.js and the browser  (0) 2014.12.02
[JAVASCRIPT] Angular-kickstart: Develop with AngularJS faster  (0) 2014.11.19
[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
[HTML5] hash tag 사용시 IE에서 title이 왜곡되는 현상  (0) 2014.11.10
[Charts] Google Charts - Column Chart  (0) 2014.11.10
반응형

Stitches: HTML5 sprite sheet maker

Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.

stitches

Homepage: http://draeton.github.io/stitches/
GitHub: https://github.com/draeton/stitches
Docs: http://draeton.github.io/stitches/stitches/doc/stitches.js.html

 

HTML5 Sprite Sheet Generator 

http://draeton.github.io/stitches

 

Stitches

Stitches is an HTML5 sprite sheet generator. The current version is 1.3.5. Documentation is availablehere.

Implementation

After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done:

<link rel="stylesheet" href="css/stitches-1.3.5.min.css">

<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>

The sprite sheet generator is automatically created in elements that have the stitches class:

<div class="stitches"></div>

If you choose, any images that are a part of the initial markup will be loaded onto the canvas:

<div class="stitches">
    <img src="img/test/github.png" data-name="github"/>
    <img src="img/test/gmail.png" data-name="gmail"/>
    <img src="img/test/linkedin.png" data-name="linkedin"/>
    <img src="img/test/stackoverflow.png" data-name="stackoverflow"/>
    <img src="img/test/tumblr.png" data-name="tumblr"/>
    <img src="img/test/twitter.png" data-name="twitter"/>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[JAVASCRIPT] Angular-kickstart: Develop with AngularJS faster  (0) 2014.11.19
[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML5] hash tag 사용시 IE에서 title이 왜곡되는 현상  (0) 2014.11.10
[Charts] Google Charts - Column Chart  (0) 2014.11.10
[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
반응형

hash tag 사용시 IE에서 title이 왜곡되는 현상

 

IE8에서 문서 제목 변경을 방지하는 a 방법이있다.

그것은 자동으로 URL의 hash를 기반으로 변화하고 있기 때문에 (WWW. #hash)

 

아래의 타이틀을 예를 들어

 

#691 로 hash change 하면 타이틀은 #691로 변경된다.

 

 

더 좋게 바꾸려면 아래와 같이 화면 load 시, 또는 스크립트 호출 후 타이틀을 재입력해주면 된다.

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
[Charts] Google Charts - Column Chart  (0) 2014.11.10
[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
[javascript] Walkway.js: Easily animate SVG elements  (0) 2014.11.03
반응형

Google Charts - Column Chart

 

https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

 

Point 커스터마이징 : https://developers.google.com/chart/interactive/docs/points#fullhtml

 

 

 

- 우축 인덱스 영역은 legend

 

- 그래프 기준값을 0부터 보여주고 싶으면 minValue 를 이용하면 된다.

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------------------------------------

 

HTML

 

 

 

JAVASCRIPT

 

* 가로나 세로 인덱스에서 0 값으로 시작하고 싶으면 아래와 같이 지정. (minValue) 

 

 

 

화면 사이즈 변경시 화면에 맞게 Redraw

 

 

 

 

 

Visualization: Column Chart

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
[HTML5] hash tag 사용시 IE에서 title이 왜곡되는 현상  (0) 2014.11.10
[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
[javascript] Walkway.js: Easily animate SVG elements  (0) 2014.11.03
[javascript] AngularJS 기초 교육 동영상  (0) 2014.10.31

+ Recent posts

티스토리툴바