background preloader

Keypress: A Javascript library for capturing input

Keypress: A Javascript library for capturing input
The first thing to do is include the JavaScript file in your page. Once you've got that loaded in, you'll want to start by instantiating a listener: var listener = new window.keypress.Listener(); Once you've done that you can register combos with that listener you've created. The simplest way to do that is using the simple_combo API. It takes a space dilineated string or an array of strings of key names that describe your combo. listener.simple_combo("shift s", function() { console.log("You pressed shift and s"); }); listener.counting_combo("tab space", function(e, count) { console.log("You've pressed this " + count + " times."); }); listener.sequence_combo("up up down down left right left right b a enter", function() { lives = 30; }, true); If you only want to use Keypress for some very simple keyboard shortcuts, that's all you need to know! listener.unregister_combo("shift s"); listener.unregister_many(my_registered_combos); listener.reset(); Related:  JS Librariesolindgallet

11 Awesome “jQuery Site Tour Plugins” For Guiding Users With Style It is always hard to guess how users browse + how they perceive the content and flow of a website or web app. There are tools to analyze these as much as possible and, using methods like A/B testing, improving the usability is always possible. However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure. There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Intro.js A lightweight plugin that uses data attributes and has keyboard navigation support. It focuses on objects beautifully and pretty easy-to-setup. aSimpleTour aSimpleTour uses a JSON data for all the configuration and content. While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements. Pageguide.js Pageguide.js offers a very slick way to provide site tours. Joyride This is a very nice plugin by the talented ZURB team. Website Tour Bootstro.js

arbor.js Codeblock.js by Filepicker.io Why? Humans learn better when they can play with what they're working with, when they can poke at it and understand what happens to B when you change A. The browser provides a wonderful place where examples can be interactive, and yet most documentation for javascript APIs doesn't make use of these capabilities. Codeblock.js turns example code into editable, runnable code blocks that visitors can poke at and play with to better understand your API. For example, try playing with the parameters in the example below: Output from the example appears here run Using Codeblock.js Codeblock.js is a jQuery plugin that uses the Ace code editor, and therefore requires including both jQuery and Ace. Once the scripts are imported, you can use the $.codeblock call to transform any piece of text into an editable, runnable code sample. The codeblock.js api is very similar to the api of jQuery UI widgets, so if you are familiar with those the syntax should feel natural. Instantiation Methods Events

Master Spy - On Cutscenes news A look at the process we use to implement retro cinematic cutscenes into Master Spy. Master Spy employs Turbo Theater Graphic Technology to blend a cinematic story of intrigue, betrayal, and conspiracy with the heart racing action of the stealth-platforming gameplay. Why Cinematic Cutscenes? As huge fans of anime, manga, and graphic novels, there’s something enticing about the style that mimics a comic brought to life. Inspired by the likes of Ninja Gaiden and Zero Wing (yes, the “All your base” game), we set out to merge storytelling medium and game play experience in this retro-cinematic fashion. The Process We start from the basis of Master Spy’s story script. I then take the parts John has made and make sure they’re ready for implementation. From there, I lay out the cutscene in code as a “list” (which is in actuality a Javascript Object Literal since Master Spy is written in html5/JS) of what should show up on screen and what fancy things should happen with them. In Game

annyang! Easily add speech recognition to your site Go ahead, try it… Say "Hello!" Annyang! Let's try something more interesting… Say "Show me cute kittens!" Say "Show me Arches National Park!" Now go wild. That's cool, but in the real world it's not all kittens and hello world. No problem, say "Show TPS report" How did you do that? Simple. What about more complicated commands? annyang understands commands with named variables, splats, and optional words. Use named variables for one word arguments in your command. Use splats to capture multi-word text at the end of your command (greedy). Use optional words or phrases to define a part of the command as optional. What about browser support? annyang plays nicely with all browsers, progressively enhancing browsers that support SpeechRecognition, while leaving users with older browsers unaffected. It looks like your browser doesn't support speech recognition. Please visit in a desktop browser like Chrome.

DeepTissue.js - A Touch Abstraction Library Browserify Introducing smartcrop.js / 29a.ch Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It's often a compromise and sometimes it fails miserably. Evelyn by AehoHikaruki Can we do better than that? Smartcrop.js is the result of my experiments with content aware image cropping. This library is still in it's infancy but the early results look promising. Source Code: github.com/jwagner/smartcrop.js Examples: test suite with over 100 images and test bed to test your own images. Command line interface: github.com/jwagner/smartcrop-cli

iView Slider (jQuery) | Free PSDs & Resources for Web Designers by Hemn Chawroka iView has been stopped! iView has been stopped from update and support!You can use my new powerful mightySlider plugin. Go to mightySlider What is iView? iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android. Multiple customized slider instances can happily live on the same page, and the slider offers a simple API to control the slider’s behaviour from within your custom scripts. Features Dont forget to follow me on twitter or like my page on facebook and take a look at my premium scripts too Changelog Version 2.0.1

Typeahead.js – A jQuery Autocomplete Plugin By Twitter Twitter has open sourced a very nice project named Typeahead.js for building smart auto-complete form fields. It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling. The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly. Typeahead.js simply converts any textfield into an auto-complete field, accepts JSON as the data source and has various settings for optimizing remote requests (rate limiting, maxConcurrentRequests, etc.). Jeditable - Edit In Place Plugin For jQuery Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. For those in hurry download latest source or minified. For bleeding edge version check GitHub. How does in place editing work? Normal flow is this. Basic usage While reading you might also want to check live demo. <div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. There is only one mandatory parameter. Code above does several things: Elements with class edit become editable. Not bad for oneliner, huh? Elements with class edit_area will use textarea as input. These two examples cover most of needs you usually have. What is sent to server? When submitting change following data will be POST:ed to server: But wait! Demo

PSR-2 — Coding Style Guide This guide extends and expands on PSR-1, the basic coding standard. The intent of this guide is to reduce cognitive friction when scanning code from different authors. It does so by enumerating a shared set of rules and expectations about how to format PHP code. The style rules herein are derived from commonalities among the various member projects. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in this document are to be interpreted as described in RFC 2119. Overview Code MUST follow a “coding style guide” PSR [PSR-1]. 1.1. This example encompasses some of the rules below as a quick overview: General 2.1. Code MUST follow all rules outlined in PSR-1. 2.2. All PHP files MUST use the Unix LF (linefeed) line ending. All PHP files MUST end with a single blank line. The closing ? 2.3. There MUST NOT be a hard limit on line length. There MUST NOT be trailing whitespace at the end of non-blank lines. 2.4. 2.5. <? 4.1.

Related: