The JavaScript world seems to be entering a crisis of churn rate. Frameworks and technologies are being pushed out and burned through at an unsustainable speed. But I think the community will adapt and adopt new practices in response. Developers will move, I believe, from monolithic frameworks like Angular.js and Ember to a ‘pick n …
Tag Archives: javascript
JavaScript I/O (io.js)
Node.js, a popular and influential tool for building and running modern internet services, has split in two. Late yesterday, some of its primary developers “forked” this open source project, creating a new version of the tool they call Io.js. The group was unhappy with the stewardship of Node’s official sponsor, cloud computing company Joyent, so …
JSIL – CIL to Javascript Compiler
JSIL is a compiler that transforms .NET applications and libraries from their native executable format – CIL bytecode – into standards-compliant, cross-browser JavaScript. You can take this JavaScript and run it in a web browser or any other modern JavaScript runtime. Unlike other cross-compiler tools targeting JavaScript, JSIL produces readable, easy-to-debug JavaScript that resembles the …
DummyJS – Smart Functional Testing extension for PhantomJS
open http://my.test.site type :text John click “Say hi!” assertText .greeting Hi, John! $ dummyjs mytest.dummy ✓ open http://my.test.site ✓ type :text John ✓ click “Say hi!” ✓ assertText .greeting Hi, John! PASS: Executed 4 actions in 1s. DummyJS makes writing and running automated functional tests for websites and webapps incredibly easy. Tests can be run …
Continue reading “DummyJS – Smart Functional Testing extension for PhantomJS”
Realtime Audio-Visualizations with JavaScript
window.onload = function() { var ctx = new AudioContext(); var audio = document.getElementById(‘myAudio’); var audioSrc = ctx.createMediaElementSource(audio); var analyser = ctx.createAnalyser(); // we have to connect the MediaElementSource with the analyser audioSrc.connect(analyser); // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec) // frequencyBinCount tells you how many values you’ll receive …
Continue reading “Realtime Audio-Visualizations with JavaScript”
Twemoji
twemoji.parse(‘I \u2764\uFE0F emoji!’); // will produce /* I <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/36×36/2764.png"> emoji! */ Nugget of JavaScript to replace astral symbols (emoji) with images in browsers that don’t support them. Yes, looking at you Chrome on OS X. Images are included in the repo, or can be loaded from a CDN. Twitter Emoji for …
7 Principles of Rich Web Applications
My approach is to examine the usage of JavaScript exclusively from the lens of user experience (UX). In particular, I put a strong focus on the idea of minimizing the time it takes the user to get the data they are interested in. Starting with networking fundamentals all the way to predicting the future. Server …
ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and …
Continue reading “ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages”
scrollReveal.js – Easily reveal elements as they enter the viewport
<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute …
Continue reading “scrollReveal.js – Easily reveal elements as they enter the viewport”
Chartist – Simple responsive charts
/* Add a basic data series with six labels and values */ var data = { labels: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], series: [{ data: [1, 2, 3, 5, 8, 13] }] }; /* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic …