AddyOsmani.com - The Developer's Guide To Writing Cross-Browser JavaScript Polyfills
I believe it's one of our responsibilities as designers and developers to both advocate for best practices and encourage others to make the leap to using modern features for a modern web. At the same time, we need to do our best to avoid leaving users with older browsers behind. Polyfills - a term coined by Remy Sharp to describe JavaScript shims that replicate the standard API found in native features of new browsers for those without such features - are a way of helping us achieve this. In today's post, I'm going to recount my experience of creating a cross-browser polyfill along with the lessons learned along the way.
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
Keep the Web Open with Cross-Browser Testing – Mozilla Tech – Medium
Keep the Web Open with Cross-Browser Testing Cross-browser testing is crucial to keeping the Internet open and healthy. Anyone should be able to view your website on any browser or device. It’s a founding principal of the Web, and one that we take seriously here at Mozilla. But building completely cross-browser-friendly sites isn’t easy. It takes a ton of expertise — and time.
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.
How Your Website Looks On Different Devices And Browsers
See How To Use BrowserStack First of all to use BrowserStack, you’ll need to visit their site at www.browserstack.com/screenshots/ Which will give you a page similar to below.
