background preloader

Labs by Big Room Studios

Labs by Big Room Studios
Related:  WebDesignJS/jQuery

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();

❍ IcoMoon Some jQuery Functions And Their JavaScript Equivalents In light of my recent forays into the JavaScript DOM world, I'd decided to do a little research and write a snippet collection based on jQuery functions and their JavaScript equivalents. I think jQuery is a great tool, and it has done great things for me and many others as developers. But I'm a firm believer that nowadays, JavaScript is an indispensable tool to keep in your arsenal. Manipulating the DOM with JavaScript DOM methods is fun and easy, and the majority of times, plain old vanilla JS is all we need. It seems scary at first, but let's take a look at some core functions/methods that we're accustomed to, how they work, and how to execute them with just plain old JavaScript. Accessing Elements There are many ways to access elements with JavaScript and jQuery. By ID In this above scenario, we're accessing by ID, so we'd expect that only one element is returned. var el = $("#element"); With regular JS, we can achieve this two ways: By Class & Tag var els = $("p"); var els = $(".class");

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

UX Crash Course: 31 Fundamentals My New Year’s Resolution for 2014 was to get more people started in User Experience (UX) Design. I posted one lesson every day in January, and hundreds of thousands of people came to learn! Below you will find links to all 31 daily lessons. Basic UX Principles: How to get started The following list isn’t everything you can learn in UX. Introduction & Key Ideas #01 — What is UX? #02 — User Goals & Business Goals #03 — The 5 Main Ingredients of UX How to Understand Users #04 — What is User Research? #05 — How to Ask People Questions #06 — Creating User Profiles #07 — Designing for Devices #08 — Design Patterns Information Architecture #09 — What is Information Architecture? #10 — User Stories & Types of Information Architecture #11 — What is a Wireframe? Visual Design Principles #12 — Visual Weight, Contrast & Depth #13 — Colour #14 — Repetition & Pattern-Breaking #15 — Line Tension & Edge Tension #16 — Alignment & Proximity Functional Layout Design #17 — Z-Pattern, F-Pattern, and Visual Hierarchy #22 — Forms

You Might Not Need jQuery Fontello - icon fonts generator Magnific Popup Documentation Here you can find the guide on how to use Magnific Popup. Besides this docs page, you can play with examples on CodePen. If you’ve found any mistake in this site or you know how to improve some part of this documentation - please commit on GitHub. Please ask general questions through Stack Overflow tagged with magnific-popup. If you’re looking for touch-friendly popup just for images, PhotoSwipe might be a better choice. Including files You can get Magnific Popup JS and CSS file from the build tool, from the dist/ folder in the GitHub repository, or by compiling it yourself with Grunt. It’s not required, but we recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag). Initializing popup Popup initialization code should be executed after document ready, for example: There are three ways to initialize a popup: 1. <a class="test-popup-link" href="path-to-image.jpg">Open popup</a> 2. 3. Content Types Image Type <!

Tendances Web Design 2015 Présenter les tendances web design n'est pas une chose aisée. Il faut tout d’abord analyser les raisons qui poussent les designers à faire un choix plutôt qu'un autre : par mimétisme, par mode ou pour répondre à une problématique spécifique ? Aujourd'hui, il est inimaginable de concevoir une charte graphique sans y intégrer les supports dématérialisés. Le web design est vivant. Tout comme dans le prêt-à-porter, il est possible de cerner les tendances en web design. Je développerai les tendances web design 2015 en 10 points. Le flat design et le style minimal Le flat design est une tendance de fond qui fut en partie initiée par Microsoft en 2010 avec Windows Phone. Plus plat, plus graphique, plus géométrique, plus minimal… Plus coloré aussi, ou pas du tout. Plus qu'une mode, le flat correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d'accessibilité, de mobilité liées au web d'aujourd'hui. Le skeuomorphisme* a-t-il dit son dernier mot ? Le Responsive

Parsley - The ultimate documentation Frontend form validation Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users. Javascript form validation is not necessary, and if used, it does not replace strong backend server validation. That's why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices. Parsley 1.x versions Parsley's current stable and supported versions are 2.x. Data attributes Parsley uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Configuration You'll see along this documentation and through examples various available configuration options. Basic installation That would look pretty much like this:

100 greatest free fonts of 2014 It’s been a great year for fonts. New, more affordable, options in font design software, and more and more designers moving over to font design has produced a great crop of typefaces that are absolutely free to use for personal and commercial projects. Today we’ve put together a list of some of the greatest fonts we’ve found available, released in the last year, for cero dinero. You’ll find full families, sample weights, scripts, serifs, display fonts, and everything inbetween. Browse through, pick out a few of your favourites to download, and if you use them in a project in 2015, let us know what you use them for! Born Fira Chelsea Brela Gagalin Moderne Sans Fonarto Smidswater Rabiola Fénix Cooper Hewitt Roboto 2014 Neythal Shadow Reis Floki Norwester Regina Boncegro FF Boxing Wizards Kino 40 Raw Font Bizon Lekea Ruina Vinta Densia Sans Curely Magra Ch. Hallo Sans Troika Raggedways Madariaga Axis Pirou Atletico Regular Nex Rust Moka Orgon Light DDM Regular Jauría Libre Caslon Blanch Big John & Slim Joe Close Hand Poligon Srfm Exo Kel

reveal.js - The HTML Presentation Framework The HTML Presentation Framework Created by Hakim El Hattab and contributors Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. Vertical Slides Slides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Markdown support Write content using inline or external Markdown. <section data-markdown> ## Markdown support Write content using inline or external Markdown. Fragments Hit the next arrow... ... to step through ... ... a fragmented slide. Fragment Styles There's different types of fragments, like: grow shrink fade-out current-visible Transition Styles

Related: