A rather geeky/technical weblog, est. 2001, by Bramus
// JavaScript Zenfonts(“Dolly”, {fallbackClass: “fallback-dolly”}) /* CSS */ body { font-family: “Dolly”, Georgia, serif; } .fallback-dolly body { font-family: Georgia, serif; } A tiny JavaScript helper to load and pre-load web fonts that are specified via @font-face. It uses best practices from other solutions, but it’s still a unique combination: It’s tiny (793 bytes minimized …
Continue reading “Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts”
Awaiting Object.observe() to land, Remy Sharp has written his own simple implementation: Data binding to the DOM is just one of those things that’s damn handy when you’ve got it and super laborious when you don’t. The problem is that it usually comes at a price of a hefty framework. So, as any good re-inventer …
new rafscroll(function() { // Do your thing here. }); Your monitor refreshes at 60 frames per second (fps). Scroll events, on the other hand, do not. Chaining your scroll events to a requestAnimationFrame ensures that your transitions and animations will refresh each time the monitor refreshes, rather than each time a scroll event is fired. …
Continue reading “rafscroll – chain your scroll events to requestAnimationFrame”
JavaScript Robotics, By Your Command. Next generation robotics framework with support for 36 different platforms Take the Leap Motion for example. Install Cyclon.js using npm, and then use this little tad of code to start interacting via the Leap Motion: var Cylon = require(‘cylon’); Cylon.robot({ connections: { leapmotion: { adaptor: ‘leapmotion’ } }, devices: { …
var app = require(‘app’); // Module to control application life. var BrowserWindow = require(‘browser-window’); // Module to create native browser window. // Report crashes to our server. require(‘crash-reporter’).start(); // Keep a global reference of the window object, if you don’t, the window will // be closed automatically when the javascript object is GCed. var mainWindow …
Continue reading “Electron – Build cross platform desktop apps with web technologies”
var handlers = { 'overlay' : function(e) { // This function is executed on click of any element with // 'overlay' in its data-handler attribute. // The click event is in 'e', $(this).attr('data-foo') holds the // value of data-foo of the element the user clicked on }, 'another-function-name' : function(e) {} …
Continue reading “Progressive enhancement with handlers and enhancers”
thisWhy you’d want to use arrow functions (next to them being shorter to type): Arrow functions will maintain the this value of the enclosing context Yes, this will work just fine: function Wilto() { this.age = 32; setInterval(() => { this.age++; console.log( “I am now ” + this.age + ” years old”); }, 3000 ); …
For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies …
Continue reading “Space.js – HTML-driven narrative 3D-scrolling”