Thursday, December 22, 2011

jQote2

jQote2 is the second major release of jQuery’s most powerful and versatile client-side templating engine. Version 2 now incorporates a faster and more accurate parsing/conversion part that does away with its predecessor’s shortcomings in escaping quotes and multiline support.

http://aefxx.com/jquery-plugins/jqote2/
https://github.com/aefxx/jQote2

Wednesday, December 21, 2011

Slanger

Slanger is an open source server implementation of the Pusher protocol written in Ruby. It is designed to scale horizontally across N nodes and to be agnostic as to which Slanger node a subscriber is connected to, i.e subscribers to the same channel are NOT required to be connected to the same Slanger node. Multiple Slanger nodes can sit behind a load balancer with no special configuration. In essence it was designed to be very easy to scale.

Presence channel state is shared using Redis. Channels are lazily instantiated internally within a given Slanger node when the first subscriber connects. When a presence channel is instantiated within a Slanger node, it queries Redis for the global state across all nodes within the system for that channel, and then copies that state internally. Afterwards, when subscribers connect or disconnect the node publishes a presence message to all interested nodes, i.e. all nodes with at least one subscriber interested in the given channel.

Slanger is smart enough to know if a new channel subscription belongs to the same user. It will not send presence messages to subscribers in this case. This happens when the user has multiple browser tabs open for example. Using a chat room backed by presence channels as a real example, one would not want "Barrington" to show up N times in the presence roster because Barrington is a retard and has the chat room open in N browser tabs.

Slanger was designed to be highly available and partition tolerant with eventual consistency, which in practise is instantaneous.

https://github.com/stevegraham/slanger

Tuesday, December 13, 2011

Programming With Nothing

Ruby is a powerful language, but how much power does it have if you remove all of its datatypes except for Proc and all of its features except for Proc.new and Proc#call?

Contents

http://experthuman.com/programming-with-nothing

Friday, December 2, 2011

BREAKPOINTS.JS

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Get it from Github.

http://xoxco.com/projects/code/breakpoints/

Humane JS

A simple, modern, framework-independent, well-tested, unobtrusive, notification system. Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.

http://wavded.github.com/humane-js

KeyboardJS

What is KeyboardJS?
KeyboardJS is a library for binding to keys or key combos. Its available as an AMD module or a standard Library.
Language Support
KeyboardJS is for binding to keyboards with the US character set. Adding other character sets is possible by editing the key code map variable named 'keys' in the module.

http://robertwhurst.github.com/KeyboardJS

RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino andNode. Using a modular script loader like RequireJS will improve the speed and quality of your code.

http://requirejs.org/

Principles of Writing Consistent, Idiomatic JavaScript

Important, Non-Idiomatic Stuff:

Code Quality: Awesome Tools, Resources & References

Leveraging Code Quality Tools by Anton Kovalyov

Get Smart

http://es5.github.com/

The following should be considered 1) incomplete, and 2) REQUIRED READING. I don't always agree with the style written by the authors below, but one thing is certain: They are consistent. Furthermore, these are authorities on the language.

Build & Deployment Process

Projects should always attempt to include some generic means by which source can be compressed in preparation for production use. Some popular and proven tools include the JavaScript-based Uglify.js, as well as the Java-based Google Closure Compiler and YUI Compressor. Choose one and support it.

You can now find a functional, generic "build kit" in the /kits directory of this repository. Usage is easy: 1) copy the contents of a kit found in /kits to a new working directory, 2) save your project .js file in the /src directory, 3) put the name of the project in project.txt, 4) run make from command line. (Even easier directions: replace occurrences of "foo")

Test Facility

Projects must include some form of unit, reference, implementation or functional testing. Use case demos DO NOT QUALIFY as "tests".

https://github.com/rwldrn/idiomatic.js

Efficient JavaScript

Traditionally, a Web page would not contain much scripting, or at least, not much that would affect the performance of that Web page. However, as Web pages become more like applications, the performance of scripts is having a bigger effect. With more and more applications being developed using Web technologies, improving the performance of scripts is becoming increasingly important.

With a desktop application, a compiler is normally used to convert the source into the final binary. The compiler can take its time, and optimize as much as possible for good performance of the final application. Web applications do not have that luxury. Since they need to run on multiple browsers, platforms, and architectures, they cannot be completely precompiled. The browser has to do the interpretation and compilation each time it retrieves a script, and yet the final application has to run as smoothly as a desktop application, and load quickly as well. It is expected to run on a large variety of devices, from an ordinary desktop computer, to a mobile phone.

Browsers are fairly good at achieving this, and Opera has one of the fastest scripting engines of any current browser. However, browsers do have their limits, and that is where the Web developer has to take over. Ensuring that a Web application runs as fast as possible can be a simple matter of trading one type of loop for another, making one combined style change instead of three, or adding only the script that will actually be used.

This article will show several simple changes that can be made to improve the performance of your Web applications. Areas covered will be ECMAScript - the core language used by JavaScript, DOM, and document loading.

ECMAScript

DOM

Document loading

http://dev.opera.com/articles/view/efficient-javascript

Thursday, December 1, 2011

Google Chrome Frame

Enable open web technologies in Internet Explorer
Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can:
- Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, 8, or 9.
- Take advantage of JavaScript performance improvements to make your apps faster and more responsive.
Get started with Google Chrome Frame
Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages and detect whether your users have installed Google Chrome Frame.
- If Google Chrome Frame is not installed, you can direct your users to an installation page.
- If Google Chrome Frame is installed, it detects the tag you added and works automatically.

http://code.google.com/chrome/chromeframe/

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Why use Modernizr?

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

http://www.modernizr.com/

Wednesday, November 23, 2011

HTML5 Reset

Summary:

HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

A style sheet designed to strip initial files from browsers, meaning you start off with a blank slate.
Easy to customize -- remove whatever you don't need, keep what you do.
Analytics and jQuery snippets in place
Meta tags ready for population
Empty mobile and print style sheets, including blocks for device orientation
Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
IE-specific classes for simple CSS-targeting
iPhone/iPad/iTouch icon snippets
Lots of other keen stuff...

http://html5reset.org
https://github.com/murtaugh/HTML5-Reset

Wednesday, November 16, 2011

CSS Reference

This an alphabetical list of CSS features. If you are going to add or modify a page, please fit in with the template CSS Reference:Property Template and modify as required. The basic template for example pages can be found here: samples/cssref/TEMPLATE.html. Feel free to discuss any questions or suggestions on the Talk:CSS Reference page.
See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz-. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

https://developer.mozilla.org/en/CSS/CSS_Reference

Announcing Firefox Aurora 10

In additional to the normal improvements that you’ve come to expect like performance, security and bug fixes, Aurora 10 focuses in HTML5 enhancements.

New additions

HTML5 Visibility API
createProcessingInstruction
WebGL antialiasing
3D Transforms
Visibility API
Document.mozFullScreenEnabled

Developer Tools

Aurora 10 also implements incremental enhancements like IndexedDB setVersion API changes. Ongoing detailed attention to evolving specifications help to keep Firefox at the front of the Web revolution. (Read more about IndexedDB on MDN.)

DOM

We now fire a “load” event on stylesheet linking when the sheet load finishes or “error” if the load fails.
We turn the POSTDATA prompt into an information page (when navigating in session history).
We only forward event attributes on body/frameset to the window if we also forward the corresponding on* property.
We no longer allow more than one call to window.open() when we allow popups.
We fixed a bug where a success callback never fired when a position update is triggered after getCurrentPosition().
We removed replaceWholeText().
We fixed an error with createPattern(zero-size canvas).
We now handle putImageData(nonfinite) correctly.
We now throw INVALID_STATE_ERR when dispatching uninitialized events.
We’ve made Document.documentURI readonly.
We fixed document.importNode to comply with optional argument omitted.

Web workers

We now allow data URLs.
We implemented event.stopImmediatePropagation in workers.
We made XHR2 response/responseType work in Web Workers.

Graphics

We implement the WebGL OES_standard_derivatives extension.
We implement minimal-capabilities WebGL mode.

JavaScript

The function caller property no longer skips over eval frames.
We fixed E4X syntax so that it is not accepted in ES5 strict mode.
weakmap.set no longer returns itself instead of undefined.
We implemented the battery API.

Offline: IndexedDB enhancements

IndexedDB setVersion API changes
Added support for IDBObjectStore/IDBIndex.count
Various methods accept both keys and KeyRanges.
Added support for IDBCursor.advance.
Implemented deleteDatabase.
objectStoreNames are no longer updated on closed databases when another connection adds or removes object stores
IDBObjectStore.delete and IDBCursor.delete now return undefined.
No longer throws an error if there are unknown properties in the options objects to createObjectStore/createIndex.
We now the errorCode to “ABORT_ERR” for all pending requests when IDBTransaction.abort() is called.
Fixed the sort order for indexes.

Layout

We have updated the current rule for handling malformed media queries.
We now support the HTML5 element and CSS property unicode-bidi: isolate.
The CSS3 implementation now supports unicode-bidi: plaintext.

Media

Implemented Document.mozFullScreenEnabled.
Enabled the DOM full-screen API on desktop Firefox by default.

http://hacks.mozilla.org/2011/11/announcing-firefox-aurora-10

Tuesday, November 15, 2011

Xhtml Friends Network

XFN™ (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks. In recent years, blogs and blogrolls have become the fastest growing area of the Web. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding a 'rel' attribute to their <a href> tags.

Introduction and Examples: Introduction to XFN, examples, styling suggestions, and future potential.
Getting Started: Join the XHTML Friends Network in just four easy steps!
Profile: Version 1.1 of the XFN meta data profile: the list of the values used in XFN with their significance. See the XMDP home page for more information on XHTML Meta Data Profiles.
Background: The thinking that went into the design of XFN, why particular values were chosen, and why other values were left out.
FAQ: Frequently asked questions about XFN.
XFN Tools: A collection of tools, templates, editors, communities, and other resources that let you edit XFN information. Includes the XFN Creator, among many others.
XFN and ...: How to use XFN with numerous social network services and other technologies.
What's out there?: Pointers to pages and sites which use XFN, tools, ...
How can I help?: If you would like to support XFN...
Press: Articles about or that reference XFN...
Thanks: Thanks to all those who have helped XFN with their feedback, constructive criticisms, suggestions, and inspirational uses.
Feedback: Let us know what you think about XFN.

http://gmpg.org/xfn/

Monday, November 14, 2011

Vendor-prefixed CSS Property Overview

Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines. The latest update on this page occurred on 2011-11-14

http://peter.sh/experiments/vendor-prefixed-css-property-overview/

Core HTML5 Canvas

This is the companion website for Core HTML5, Volume I: Canvas, the first volume of the Core HTML5 series from Prentice-Hall. This book takes a code-fueled, no-nonsense, deep dive into one of HTML5's most exciting APIs by showing you how to:

Draw and paint
Apply shadows, patterns, and gradients
Manipulate images
Create animations
Implement video games
Develop custom controls
Manipulate videos in realtime
A bunch of other cool stuff

This website gives you access to the book's code, a free chapter, and live demonstrations of featured examples from the book.

http://www.corehtml5canvas.com/

WeasyPrint

WeasyPrint is a visual rendering engine for HTML and CSS that can export to PDF. It aims to support web standards for printing. WeasyPrint is free software released under the AGPL license.
It is based on libraries for parsing, text and drawing but not on full rendering engines like WebKit on Gecko. The CSS visual rendering is written in Python and meant to be easy to hack on.
Get started by installing it or jump to:

Source code on GitHub

Issue tracker

Continuous integration

Get in touch

Sample output

As an example, here is the introduction chapter of the CSS 2.1 spec rendered with WeasyPrint: CSS21-intro.pdf. It was obtained by running:

weasyprint http://www.w3.org/TR/CSS21/intro.html CSS21-intro.pdf

Current status

WeasyPrint 0.1 can fetch a remote web page from an URL, find and fetch associated stylesheets and images, and render it all to PDF or PNG.
Floats, absolute positioning and tables are not supported yet, but WeasyPrint can already be useful for pages with “simple” layout. See the features page for what exactly is supported or not.
Tables (among other things) are being worked on and should be in the next version.

http://weasyprint.org/

Friday, November 11, 2011

25 Cool jQuery Tooltip Plugins for Interactive Designs

jQuery tooltip is certainly one of the building blocks you should consider using in your web design and development. jQuery tooltips are easy to install and set up and they help you offer extra information on important elements and at the same time make the browsing experience of every visitor interesting and dynamic. Simple and minimalistic design is good for user experience and usability and jQuery tooltips help you achieve this by allowing you to “not show it all” at once. There is a lot of jQuery tooltip scripts available and some are free and some premium. Check out the demos and documentation to make sure you find what suits your needs best.

In this article we are sharing with you jQuery tooltips that you can use in your website to make it look cool and interesting. These are all easy to download scripts and easy to use, if you have the required tweaking know-how.

http://www.tripwiremagazine.com/2011/11/jquery-tooltip-plugin.html

FlatironJs: an unobtrusive framework initiative for node.js

No one agrees on frameworks. It's difficult to get consensus on how much or how little a framework should do. Flatiron's approach is to package simple to use yet full featured components and let developers subtract or add what they want.
Flatiron promotes code organization and sustainability by clearly separating development concerns. Each component works elegantly with or without its counterparts. Many of the components work the same in the browser as they do on the server. This is the motivation behind flatiron. At it's core flatiron is two things:

an initiative to build a collection of decoupled tools with the same standard of quality and performance that you would expect from anything built by nodejitsu.
a full-stack web application development framework which packages these tools together to make isomorphic and stream-based application development easier.

http://flatironjs.org

inside the framework

Packaged inside the framework are the basic building blocks for a modern web application.