background preloader

HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki

HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki
The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? See Modernizr.Looking for a guide to write your own polyfills? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions Sectioning Elements Video VTT: Video Timed Track (subtitles) Audio Audio Data API IndexedDB Web SQL Database Web Forms Beacon

Snap.svg - Why Snap Snap.svg is a brand new JavaScript library for working with SVG. Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap. Currently, the most popular library for working with SVG is Raphaël. (Better) Tabs with Round Out Borders The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

My DebugBar IETester - Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 IETester is free.To support the projectyou can make a donation : or you can translate it. IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of IE11, IE10, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the installed IE in the same process. This is an alpha release, so feel free to post comments/bugs on the IETester forum. Requirement : Windows 8 desktop, Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7) Note for IE10 : IE10 is not available on IETester if it is not the default IE version installed on the system.

Violin: Visualizing JavaScript This is an experiment in instrumenting JavaScript applications. On the right is the Object and Function graph for a simple Backbone app. The app's code has been instrumented to draw and animate the graph as the JavaScript runs without having to modify the app's original code at all (by hand anyway). Hit the button to start the backbone app and interact with it. Closure Tools The Closure Tools project is an effort by Google engineers to open source the tools used in many of Google's sites and web applications for use by the wider Web development community. Web applications have evolved from simple HTML pages into rich, interactive applications that provide a great user experience. Today's web apps pose a challenge for developers, however: how do you create and maintain efficient JavaScript code that downloads quickly and works across different browsers? The Closure tools help developers to build rich web applications with web development tools that are both powerful and efficient. The Closure tools include:

SyntaxHighlighter - Feature Demo <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title> ** Multiline block comments Image Placeholder APIs In a previous article I discovered fake images please which allowed you to put image placeholders on your webpage by using an image placeholder API. I had a number of comments about this post from other people sending links to other image placeholder APIs. Here is a list of some more APIs. PlaceKitten A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you'll get a placeholder. JavaScript UI Kit Installation The global Gumby object is where all the magic happens. It is defined in js/libs/gumby.js and is required by all UI modules (except jQuery plugins ). The UI modules are stored as separate files in js/libs/ui and should be included after gumby.js at the bottom of your page. The final include should be gumby.init.js which takes care of initializing the modules included above, as well as calling AMD's define function. This means your single optimised gumby.min.js file can be loaded asynchronously by Require.js or another AMD loader .

leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. In JavaScript you cannot have "memory leaks" in the traditional sense, but you can have objects which are unintentionally kept alive and which in turn keep alive other objects, e.g., large parts of DOM. Leak Finder for JavaScript works against the Developer tools remote inspecting protocol of Chrome, retrieves heap snapshots, and detects objects which are "memory leaks" according to a given leak definition. The default configuration of the tool detects goog.Disposable objects which were not dispose()d. goog.EventTarget is a subclass of goog.Disposable, and if an EventTarget is not disposed, event listeners are not discarded properly, and event listeners in turn keep DOM objects alive. It's possible to configure the tool to detect other similar misuses.

Building vorlon.JS with the help of the developer community and what’s next Recently at //BUILD/ 2015 and in the Microsoft Edge Web Platform Summit, we have talked about how our focus on bringing our teams and the technologies behind our web platform closer to the broader community of developers. We’ve made it a priority to contribute to open source projects that improve web interoperability and help developers spend less time testing across browsers and devices. One such project we recently announced is vorlon.JS – an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. vorlon.JS itself is a small web server you can run from your local machine or install on a server for your team to access, which serves the vorlon.JS dashboard (your command center) and communicates with remote devices. Installing the vorlon.JS client in your web site or app is as easy as adding a single script tag. It’s also great to see some of the community responses like this: