Two Way data-binding using Object.observe()

Object.observe(), part of a future ECMAScript standard, is a method for asynchronously observing changes to JavaScript objects … without the need for a separate library. It allows an observer to receive a time-ordered sequence of change records which describe the set of changes which took place to the set of these objects. Essentially, the article …

Responsive tables with Tablesaw

Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your …

HalfStyle: Style Half of a Character by CSS

Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created: HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually. Works on any dynamic text, or a single character, and is …

Reading Position Indicator

Lately I’ve seen quite a few websites that have some kind of an indicator to display the current reading position (how much you have “read”, depending on how far you have scrolled down an article). In this article, we’ll focus on a technique that uses a horizontal progress bar as the indicator. But instead of …

Parallax Done Right

Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …

Untrusted – a user javascript adventure game

Untrusted —or— the Continuing Adventures of Dr. Eval is an exciting Meta-Javascript Adventure Game wherein you guide the dashing, steadfast Dr. Eval through a mysterious MACHINE CONTINUUM, wherein, using only his trusty computer and the TURING-COMPLETE power of Javascript, he must literally ALTER HIS REALITY in order to find his freedom! You must literally edit …

WinJS – The Windows Library for JavaScript

Use WinJS to build first class apps with HTML, CSS, and JavaScript. WinJS provides high quality infrastructure like page controls, promises, and data-binding; polished UI features like virtualizing collections; and high performance Windows controls such as ListView, FlipView, and Semantic Zoom. Think of it as a mix of jQuery UI’s Components and a JavaScript MV* …

React-PHP-V8Js

// the library $react_source = file_get_contents(‘/path/to/build/react.js’); // all custom code concatenated $app_source = file_get_contents(‘/path/to/custom/components.js’); $rjs = new ReactJS($react_source, $app_source); $rjs->setComponent(‘MyComponent’, array( ‘any’: 1, ‘props’: 2)); /// … // print rendered markup echo ‘<div id="here">’ . $rjs->getMarkup() . ‘</div>’; React-PHP-V8Js is an experimental library that uses the power of Facebook’s React library to render UI components …