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 …

Panda.js HTML5 game engine

Panda.js looks like a neat JS Game Engine featuring a Canvas/WebGL Renderer, Physics engine, Particle engine, Tweening, Sound Manager, etc. It also plays nice with mobile/touch interfaces. Example game is this neat Flappybird clone, Flying Dog. Panda.js HTML5 game engine → Flying Dog Source (GitHub) → Related: Be sure to check out Vladibird, an altered …

Supercharging your Gruntfile

In this article, we won’t focus on what numerous Grunt plugins do to your actual project code, but on the Grunt build process itself. We will give you practical ideas on: How to keep your Gruntfile neat and tidy, How to dramatically improve your build time, And how to be notified when a build happens. …