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

arbor.js FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width. What does FlowType.JS do? Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. Additional options, reviewed below, allow you to configure FlowType.JS to fit your needs. FlowType.JS is extremely easy to use.

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

Browserify Codeblock.js by 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

Introducing smartcrop.js / 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: Examples: test suite with over 100 images and test bed to test your own images. Command line interface:

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.

Chartist - Simple responsive charts You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Highly customizable responsive charts Facts about Chartist The following facts should give you an overview why to choose Chartists as your front-end chart generator: Simple handling while using convention over configurationGreat flexibility while using clear separation of concerns (Style with CSS & control with JS)Usage of SVG (Yes! These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. Cross-browser support Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary.

tweenjs/tween.js Home | Aurelia AirConsole is a local multiplayer gaming platform where your smartphone is the controller and your monitor is the screen. It's very game developer friendly, and there is a game development competition for it with $5,000 in prize money. : gamedev