PuzzleScript: An open-source HTML5 game engine

27 Fresh and Free jQuery Plugins

Mapael

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

Demo

Selectric

jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.

Demo

onScreen

A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport).

Demo

Charlie.js

A small framework for synchronizing video and CSS3 animations.

Demo

Snap.svg

The JavaScript SVG library for the modern web.

Demo

Touche.js

Effortlessly re-map click events to touch events on touchscreen UIs.

Offline.js

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.

fullPage.js

Create Beautiful Fullscreen Scrolling Websites.

Peeler.js

A library to add peeling to the center of your content. This was inspired by the brilliant folks over at Teehan+Lax and introduced in their blog post for UX considerations for Medium.

Demo

Mobify.js

Mobify.js is an open source library for improving responsive sites by providing responsive images, JS/CSS optimization, Adaptive Templating and more.

Demo

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Odometer

Odometer is a Javascript and CSS library for smoothly transitioning numbers.

Demo

FullPaged

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

Demo

At.js

Demo

ContextJS

ContextJS a lightweight solution for contextual menus.

Demo

Scrolld.js

Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

jQuery Popdown Plugin

A super simple jQuery popdown plugin.

Demo

Resumable.js

It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

WhatsNearby

A jQuery plugin to list and show nearby places around a certain position using Google Maps.

Demo

stickUp

stickUp a jQuery Plugin for sticky navigation menus.

Circletype.js

Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle.

Isotope

Isotope: An exquisite jQuery plugin for magical layouts.

Validetta

Validetta is a tiny jQuery plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure.

Demo

Wallpaper

A jQuery plugin for smooth-scaling, element-filling backgrounds.

Demo

Trip.js

Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.

CLNDR.js

A jQuery Calendar Plugin.

imgcolr

imgcolr is a jQuery plugin for grabbing the dominant color of a given image’s borders. You can programmably adapt the elements’ color on the webpage for the image after getting the color. Based on the idea, we can make the web more beautiful and interesting.

Knockout.js: Simpler dynamic JavaScript UIs

HTML5 File Uploads with jQuery

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

Demo    Download

What are HTML5 File Uploads?

Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). Here is a description of a HTML5 file upload process:

1. The user drops one or more files from their file system to the browser window by dragging. Browsers that support the Drag & Drop API will fire an event, which alongside other useful information, contains a list of files that were dropped;
2. Using the File Reader API, we read the files in the list as binary data, and store them in memory;
3. We use the new sendAsBinary method of the XMLHttpRequest object, and send the file data to the server.

Sounds complicated? Yes, it could use some optimization. Fortunately, there are jQuery plugins that can do this for us. One of them is Filedrop, which is a wrapper around this functionality, and provides features for limiting maximum file size and specifying callback functions, which is really handy for integrating it into your web applications.

Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. A simple fallback solution for older browsers would be to display a regular file input dialog, but we won’t be doing this today, as we will be focusing our attention on using HTML5.

So lets get started!

Inserted Android reference links as the first attempt to improve API documentation. More will follow soon.

Also found out accidentally that updated Configuration class is not generated in the latest commit, so I added it as a separate commit.

You can merge this Pull Request by running

  git pull https://github.com/guersam/scaloid wip-improve-apidoc

Or view, comment on, or merge it at:

https://github.com/pocorall/scaloid/pull/69

Commit Summary

• Generate Configuration class as changed in afb19ef8
• Add link to Android reference for each generated class

File Changes

• Mproject/AndroidClassExtractor.scala (2)
• Mproject/StringTemplateSupport.scala (3)
• Mproject/st/base.scala.stg (39)
• Mscaloid-common/src/main/scala/org/scaloid/common/content.scala (16)
• Mscaloid-common/src/main/scala/org/scaloid/common/preferences.scala (26)
• Mscaloid-common/src/main/scala/org/scaloid/common/view.scala (44)
• Mscaloid-common/src/main/scala/org/scaloid/common/widget.scala (758)
• Ascaloid-common/src/main/scala/org/scaloid/util/Configuration.scala (54)
• Mscaloid-support-v4/src/main/scala/org/scaloid/support/v4/app.scala (40)

Patch Links:

• https://github.com/pocorall/scaloid/pull/69.patch
• https://github.com/pocorall/scaloid/pull/69.diff

전화번호 입력 포멧

http://firstopinion.github.io/formatter.js/demos.html

Formatter.js: Conform user input to predefined patterns

formatter.js

   ___                    __  __              _   
  / _/__  ______ _  ___ _/ /_/ /____ ____    (_)__
 / _/ _ \/ __/  ' \/ _ `/ __/ __/ -_) __/   / (_-<
/_/ \___/_/ /_/_/_/\_,_/\__/\__/\__/_/ (_)_/ /___/
                                        |___/     

Format user input to match a specified pattern

Demos/Examples

view demo

Why?

Sometimes it is useful to format user input as they type. Existing libraries lacked proper functionality / flexibility. Formatter was built from the ground up with no dependencies. There is however a jquery wrapper version for quick use.

On Bower

bower install formatter

Usage

Vanilla Javascript

new Formatter(el, opts)

var formatted = new Formatter(document.getElementById('credit-input'), {
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

Jquery

• uncompressed: jquery.formatter.js
• compressed: jquery.formatter.min.js

$(selector).formatter(opts)

$('#credit-input').formatter({
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

Opts

• pattern (required): String representing the pattern of your formatted input. User input areas begin with {{ and end with }}. For example, a phone number may be represented: ({{999}}) {{999}}-{{999}}. You can specify numbers, letters, or numbers and letters.
  • 9: [0-9]
  • a: [A-Za-z]
  • *: [A-Za-z0-9]
• persistent: [False] Boolean representing if the formatted characters are always visible (persistent), or if they appear as you type.

- 다수의 사용자 요청을 빠른 시간 내에 모두 처리

- 서비스에서 읽기/쓰기 비율 중 데이터 쓰기 비율이 높음

- 저장된 데이터의 일관성이 중요하게 여겨짐

- 스키마가 없는 데이터 형태(schema-less)

- 네트워크 기반 분산 데이터베이스가 가진 확장성

* 저장과 처리 시간 주기에 맞춰 데이터 종류를 나누어 보자.

 - 빠른 주기로 빈번하게 저장 및 처리되는 캐시 영역의 데이터

     : 수 ms 단위로 데이터 처리

 - 일정 주기로 아카이빙돼 시점 복원이 가능하도록 관리되는 데이터

     : 수 분 이내로 이전 상태로 복구 가능한 데이터 처리

 - 일정 주기로 데이터를 집계해 게임 내에 다시 반영하는 데이터

    : 실시간 랭킹, 개인 요약 정보, 최근 아이템 교환 비율 등

 - 각종 사용자 이벤트 발생에 따라 그 이력을 관리하는 로그 데이터

* 저장형태에 따른 구분

 Key-value

 Ordered Key-value

 Wide Column Store

 Document

 Graph

* NoSQL - 어떻게 선택해야 할까? : http://platformadvisory.kr/archives/608

* 한 눈에 살펴보는 PostgreSQL : http://helloworld.naver.com/helloworld/227936

smart TV, 스마트 TV 환경

LG전자 스마트TV도 삼성전자와 같이 HTML5, Marmalade, Unity 등의 개발환경을 지원한다.

HTML5와 CSS, JAVASCRIPT를 이용한 웹기반 애플리케이션이 화제의 중심이다.

HTML4와 차별화된 요소는 화면에 무언가를 그릴 수 있는 Canvas가 지원되는 점이다.

HTML5는 Canvas뿐만 아니라 인터넷이 되지 않는 환경에서도 애플리케이션이 동작할 수 있도록

 데이터를 미리 캐싱한 상태로 유지하게 하거나 현재 웹페이지 또는 애플리케이션이 활성화되지 않는

상태에서도 실행될 수 있도록 다양한 백그라운드 지원 요소를 가지고 있다.

HTML5 Projects

• HTML5 Snake
• Follow the Swarm
• 3D Wire Creator
• Starship Shooter
• Image Histogram
• Bubble Evolution
• Catch It!
• Winamp Equalizer
• Bubble Drag