The VexFlow Tutorial
VexFlow is an engraving engine for music notation, and can be used as a rendering backend to various kinds of online music tools, libraries, and applications. It is designed to run on HTML5 Canvas and SVG. It is important to note that VexFlow is a low-level rendering API; most applications will want to use something like VexTab which is a higher-level language for rendering guitar tablature and music notation. VexFlow is written completely in JavaScript and when using it with HTML5 Canvas, requires no external libraries or dependencies. Finally, before we begin, this tutorial expects you to have some experience with programming in JavaScript and working with music notation. This source-code to this tutorial, including all the examples, is available in the GitHub repository. Enjoy the show! Step 1: The Basics Lets start with a quick example. Let's draw an empty treble stave on this canvas with VexFlow. Here's what it looks like. Notice that the stave is not exactly drawn in position 0, 0.
Offline.js – Handle your users losing their internet connection like a pro
What is Offline.js? Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration. Install The easiest way to add Offline to your site is with Eager. Click Install to see a live preview of Offline on your website. Download Offline.js Pick a Theme Indicator Themes Submit a theme! Documentation HubSpot
Jonathan T. Neal | Understand the Favicon
When Alec Rust asked the HTML5 Boilerplate project to switch to a HiDPI favicon, I realized how little I knew about favorite icons, touch icons, and tile icons. When I decided to dive in a little deeper, things got interesting. The classic favicon.ico is a 16×16 ICO file, often served in either 16-color or 24bit alpha-transparency format. The rel attribute of a favicon is a product of evolution. The type attribute of a favicon is about as useful as the type attribute of a <script>. Good news, everyone! Bad news, everyone! This really depresses me, because Chrome, Firefox, Opera 7+, and Safari 4+ all accept the PNG favicon, but Chrome and Safari will opt to use the ICO favicon when both are presented, regardless of the order in which they are declared. Since PNG favicon files do not include multiple resolutions like ICO favicons, we can write out several favicon declarations and use the sizes attribute to target each resolution. And that’s just the beginning. One. You. Related Articles
LukyVj/menu-to-cross-icon
Packery
chrisma/birdman.js
Ifvisible.js by serkanyersen
Crosbrowser & lightweight way to check if user is looking at the page or interacting with it. Check out the Demo or read below for code example or Check Annotated Sorce // If page is visible right nowif( ifvisible.now() ){ // Display pop-up openPopUp();} Handle tab switch or browser minimize states ifvisible.on("blur", function(){ // example code here.. animations.pause();}); ifvisible.on("focus", function(){ // resume all animations animations.resume();}); ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page ifvisible.on("idle", function(){ // Stop auto updating the live data stream.pause();}); ifvisible.on("wakeup", function(){ // go back updating data stream.resume();}); Default idle duration is 60 seconds but you can change it with setIdleDuration method ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds
Slideout.js - A touch slideout navigation menu for your mobile web apps.
1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. <nav id="menu"><header><h2>Menu</h2></header></nav><main id="panel"><header><h2>Panel</h2></header></main> 2. 3.
videoconverter.js - Convert Videos In Your Web Browser
videoconverter.js is a program that lets you process videos in your browser. View a DemonstrationView a Sample Application or view code on github About [#] Videoconverter.js was originally conceived and implemented for a project in Node Knockout 2013 called Video Funhouse. The idea for the application was to try and convert any video file into another video format, while allowing filters to be applied to the video – all inside of the browser, without uploading anything. And to build it in a single weekend. This is a huge task, and we knew that existing libraries like FFmpeg would do a great job. Here is a video demonstrating the sample application we made with this library over the weekend: Why? Why would you compile FFmpeg into JavaScript? Who? Most of the grunt work has been done by @bgrins and @aaronm67. How Big is the JavaScript File? The ffmpeg.js file is around 24 MB or so. Should I Use This? Feel free to use this program, but keep in mind the following things: Pontential Uses [#]
