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. 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! If you want to use some of the more advanced features of Keypress, you can use the register_combo API and supply an object with any number of options described below. And here's a complete look at the Listener class' complete public API:
drewsymo/Foundation 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. 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. //Press "Run" above to turn this sample into a codeblock //Then try running this code to undo console.log("Destroying..."); window.setTimeout(function(){ $("#basic-codeblock-example").codeblock("destroy"); }, 1000); Instantiation Methods
UIkit Font Survey: 42 of the Best Monospaced Programming Fonts Introduction Recently I have seen several blogs talking about which fonts are best for use in programming. Some blogs list two or three fonts, some list ten fonts. Here are some of the things I look for in a programming font: The Fonts The following table lists in alphabetical order the most commonly cited programming fonts. I look at fonts no differently than I look at other programming tools - they are professional investments. The point size I used for each font sample is indicated in the table. Reference For anyone wanting to know more about fonts, I recommend Fonts and Encodings. For more information on ClearType, see here. Revision History
Jeffrey Zeldman Presents The Daily Report Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element. Main Structure CSS Again, I'm not going to get into the details.
TheNeoDesign | Uncovering Latest Design and Development Resources