Webremixed Articles for tags: ajax

A Drumbeat for the Open Web

Thu, 02 Sep 2010 10:30:40 GMT

I stumbled on the Mozilla Foundation’s Drumbeat project recently: Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web. It’s very well done combination of projects + community. There’s a whole slew of cool projects already one here. A small sample:

Extending HTML5

Wed, 01 Sep 2010 10:30:57 GMT

Google Rich Snippet Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this? While HTML5 has a bunch of semantic elements, including new ones like and , sometimes there just isn’t an element with the [...]

Raphaël 1.5 Released

Tue, 31 Aug 2010 10:30:55 GMT

Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations: PLAIN TEXT JAVASCRIPT: el.animate({ "20%": {cy: 200, easing: ">"}, "40%": {cy: 100}, "60%": {cy: [...]

New SVG Web Release: Owlephant

Mon, 30 Aug 2010 23:05:00 GMT

The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash. The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code [...]

Design 3D Models in a Browser

Mon, 30 Aug 2010 11:00:37 GMT

Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:

Find Info On Webkit Spec Extensions

Fri, 27 Aug 2010 11:00:41 GMT

I stumbled across http://webkit.org/specs recently, which is basically a nifty listing of all custom extensions Apple/Webkit has made to web specs, written up as specs themselves so that other browsers can implement them: Squirrelfish Bytecode Timed Media Elements CSS Effects Extensions to CSS 3 Media Queries The 'pointer-events' property There were some on here that I had ever even heard of. [...]

It’s Gmail: The Game!

Fri, 27 Aug 2010 10:00:01 GMT

TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time: When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but [...]

How to Drag Out Files Like Gmail

Thu, 26 Aug 2010 11:00:40 GMT

Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop. Note that the feature only currently works in Chrome. Ryan begins with the following code: PLAIN TEXT JAVASCRIPT: var file = document.getElementById("dragout"); file.addEventListener("dragstart",function(evt){ evt.dataTransfer.setData("DownloadURL",fileDetails); },false); Describing the code Ryan says: From [...]

innerShiv: Make innerHTML + HTML5 Work in IE

Thu, 26 Aug 2010 10:00:47 GMT

(Various Shivs) Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE: PLAIN TEXT HTML: var s = document.createElement('div'); s.innerHTML = "Hi!"; document.body.appendChild(s); For example, let's imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section: PLAIN TEXT CSS: footer, header, section { border:1px solid #ccc; display:block; padding:10px; } Unfortunately, even if [...]

Adobe Releases Web Fonts

Wed, 25 Aug 2010 11:00:48 GMT

Last week Adobe announced they are jumping into the Web Fonts game in a partnership with Typekit: For this debut of Adobe Web Fonts, I think we’ve made some great choices. Everyone knows Myriad and Minion — pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the web as they have been [...]

Real World Canvas Tips from Hakim El Hattab

Wed, 25 Aug 2010 10:00:27 GMT

From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag: Cross browser implementation There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, [...]

Motorola Purchases 280 North

Tue, 24 Aug 2010 22:26:37 GMT

I don’t usually post acquisition news on here, but I just wanted to congratulate 280 North, who we’ve covered on here many times and are fellow members of the Ajax community. 280 North produces the awesome Cappuccino language/framework, including the 280 Slides presentation web application. Techcrunch is reporting that Motorola has bought 280 North. From [...]

CSS Media Queries: Bees Knees Or Spawn of Satan?

Tue, 24 Aug 2010 11:00:58 GMT

The last month has seen an interesting back and forth over CSS Media Queries. In a nutshell, CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For example, you could have a stylesheet only display for screen devices with a maximum screen width of [...]

Blow Things Up!

Tue, 24 Aug 2010 10:00:09 GMT

Jonas Wagner has ported the Flash 2D physics engine Box2DFlash to JavaScript: In his demo Jonas uses the Canvas tag to map the physics simulations on. Click on it to create explosions: Jonas talks about the approach he used to convert the original library from ActionScript to JavaScript: At first I thought this conversion would be trivial as [...]

The CSS3 Song

Mon, 23 Aug 2010 11:00:32 GMT

Don’t be bummed it’s Monday, ‘cuse the CSS3 Song is here to cheer you up: How can you go wrong with lyrics like this: CSS3 Web animation done properly CSS3 Degrading gracefully I had a dream, an awesome dream People surfing in the park On Windows, Linux and Mac And their page load speeds were oh-so-high No big JavaScript library Just to show some eye-candy CSS3 Web animation [...]

Pure Pulsing CSS Map Markers

Mon, 23 Aug 2010 10:00:18 GMT

Via Zachary Johnson (aka the Zachstronaut) comes a cool experiment using pure CSS to generate pulsing rings/map markers. He's put together a nice video explaining the concept: He has a cool demo (Chrome or Safari + Snow Leopard only) of the effect. If you have a supporting browser you should the demo animating inline below: The pulsing [...]

Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas

Sun, 22 Aug 2010 19:30:36 GMT

Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards "genius bordering on the bat-sh*t-crazy" touch that make you shake your head in disbelief when they come out but later on become very interesting. One of his posts from [...]

Attack of the IE Conditional Comment…

Fri, 20 Aug 2010 11:00:16 GMT

Just in time for Friday, James Padolsey wins the award for most creative Internet Explorer detection code: PLAIN TEXT JAVASCRIPT: // ---------------------------------------------------------- // If you're not in IE (or IE version is less than 5) then: // ie === undefined // If you're in IE (>5) then you can determine which version: // ie === 7; // IE7 // Thus, to [...]

Auto-Generate CSS3 For Fame and Fortune!

Fri, 20 Aug 2010 10:00:14 GMT

We've seen a number of nice CSS3 generators. I stumbled across another one recently that has a nice set of features for autogenerating the following from a single CSS3 generator web page: Border Radius Gradients CSS Transforms CSS Animations CSS Transitions Text Shadow Box Shadow Text Rotation @Font Face

An Implausibly Illustrated Introduction to HTML5 Web Workers

Thu, 19 Aug 2010 11:00:12 GMT

Been hearing about HTML5 Web Workers but can’t wrap your brain around them? Mark Pilgrim is here to help with an (implausibly) illustrated tongue-in-cheek guide. A small visual snippet: Yet another snippet: [Disclosure: Mark Pilgrim owes me money; just kidding]

Will Native Mobile Applications Wither Away?

Thu, 19 Aug 2010 10:00:08 GMT

James Pearce has started a fascinating series, called WhitherApps.com, trying to rewrite the BBC iPhone application and other native mobile apps using HTML5. From the kickoff blog post: WhitherApps is a bandwagon-busting experiment. I believe there are far too many native client apps which could have been far better written as mobile web apps. What we’re [...]

When does JavaScript trigger reflows and rendering?

Wed, 18 Aug 2010 11:26:21 GMT

Thomas Fuchs has some good performance things to say reflows and rendering. A video of wikipedia gives you an idea of how much happens when a basic page is rendered: The advice? The important thing is to always remember that reflowing and rendering HTML is the single most expensive operation browsers do. If your page feels [...]

JavaScript Gameboy Emulator: Memory and GPU

Wed, 18 Aug 2010 11:00:50 GMT

Jack Vaughn posted on Ajaxian recently about a new blog series on building a Gameboy emulator using JavaScript. Now Parts II and III have been posted in the series: Part 1: The CPU Part 2: Memory Part 3: GPU Timings In the Memory section, Imran Nazar builds up a JavaScript MMU that can interpret the different parts of the [...]

The Web as an API

Wed, 18 Aug 2010 10:00:08 GMT

(Photo CC-A by JSConf) The ever prolific Michael Mahemoff has a nice blog post up about using Cross-Origin Resource Sharing to do cool cross site scraping, especially of microformats: Cross-Origin Resource Sharing makes it possible to do arbitrary calls from a web page to any server, if the server consents. It's a typical HTML5 play: We could [...]

How to Become a JavaScript Bad… Shut Yo Mouth!

Tue, 17 Aug 2010 11:00:32 GMT

[Image CC-A by Terry Johnston] A fun post for a Tuesday morning, Aaron Newton shares his path to becoming a JavaScript ninja, and how you can too. Some of his tips (I encourage you to read the whole article): Study design and designers. I’m not saying you have to have the talent to be an awesome graphic [...]

Glimmer: Visual Builder for JQuery Animations

Tue, 17 Aug 2010 10:00:19 GMT

From Tim Aidlin over at Microsoft comes a tutorial on using JQuery to do animation. The tutorial is focused on using a new library they have designed called Glimmer that allows designers and developers to create interactive elements and animations on web pages using JQuery. Using Glimmer you setup your HTML and CSS and then [...]

IE Compatibility View

Mon, 16 Aug 2010 20:26:11 GMT

A client of ours recently contacted me with the question: We use Keynote, WebPagetest and dynaTrace AJAX – but we get different results with these tools/services. WebPagetest tells us that our page is very slow – but dynaTrace on my local machine does not. What can be the problem here? What’s the difference? I took a look at their page on my own laptop – running WinXP and IE8. I saw a small JavaScript performance hotspot but nothing major. Then it occurred to me that WebPagetest is probably using a different browser which made me notice a feature of IE that I haven’t yet explored enough.

HTML5Rocks Gets Awesomer

Mon, 16 Aug 2010 10:45:48 GMT

Version 2 of HTML5Rocks is hot off the presses! We think HTML5 will make your work more engaging and create a faster, more responsive experience for your users, so we’re happy to add today a slew of new content to html5rocks.com. If you want to not only get up to speed, but understand the browser differences and techniques [...]

Tricks From Our Flash Friends: 3D in a 2D Context

Mon, 16 Aug 2010 10:00:48 GMT

If you’ve seen some of the cool work that folks like Mr. Doob or Gerard Ferrandez have done with HTML5/CSS3/SVG/etc., you’ve probably seen them emulating nifty 3D effects in the browser (move your mouse within the demo inline below to pan the camera): The demo above, by Gerard, uses SVG plus various mathematical tricks to emulate [...]

jQuery Mobile Announced; Touch-Optimized Web Framework for Smartphones & Tablets

Sat, 14 Aug 2010 02:12:19 GMT

I have had the pleasure to start working with the awesome jQuery team on a new mobile development. Today, John announced jQuery Mobile, “a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” Palm has sponsored the effort with other great folks, and I wrote about [...]

i-Government : Trusted Services Cloud infrastructure

Fri, 13 Aug 2010 22:38:00 GMT

Governments moving to Cloud will be such a major stimulant for the market not just because their spending can act as an ‘anchor client’ for helping new local start-up businesses, those creating local “Green Data-centres”, but because they literally have to play an essential role in creating the Cloud itself. To explain this consider the concept of “i-Government”, rather than e-Government, simply to reflect the role Identity technologies will play. Universal adoption of standards like OpenID will enable ‘single sign-on’ across all web applications, including those of government. This will streamline access for users and the Web 2.0 software that uses it and provides web site features will most likely run in the Cloud.

Don’t Build from Scratch. You Now Have an HTML5 Boilerplate to Work With

Wed, 11 Aug 2010 15:58:04 GMT

The HTML5 love continues to be doled out by Paul Irish. First, he offered up Modernizr and now, he’s teamed up with Divya Manian to create an HTML5 boilerplate which leverages best practices to get your started. It’s essentially a good starting template of html and css and a folder structure that works. But baked [...]

Free talk at Yahoo on the 27th about the software revolution that is JavaScript

Wed, 11 Aug 2010 08:42:00 GMT

Yahoo invites to their campus in Sunnyvale, California on the 27th of August to hear Douglas Crockford talk about “Loopage”. In his own words: Software development is hampered by a specific set of design mistakes that were made in the first programming languages and repeated in everything that has been done since. And, somewhat miraculously, JavaScript [...]

JavaFX Does Have a Future

Mon, 09 Aug 2010 13:30:00 GMT

In looking back at my JavaFX… does it have a future? posting, my views have been changed by some of the comments made (here and here), in particular about JavaFX vs. Flash/Flex and Java Web Start. JavaFX and applets I agree that comparing JavaFX applets vs Flash/Flex is not something we should be doing. Flash [...]

What Can You Build in 1k of JS?

Fri, 06 Aug 2010 16:00:44 GMT

Here’s a fun way to end the week. Peter van der Zee has cranked up a cool contest where you’ll be judged on what you can build using just 1k of JavaScript. The rules are simple: Create a fancy pancy Javascript demo Submissions may be up to 1k. (And not crash) Externals are strictly forbidden, unlike “some” contests. [...]

qooxdoo 1.2 and 1.1.1 released

Thu, 05 Aug 2010 20:26:06 GMT

Qooxdoo framework folks report a new release. Update includes a virtual list for handling really big numbers of items. It takes full advantage of qooxdoo’s data binding layer, so another demo shows how you can create an extended list with custom renderers. The virtual List is marked as experimental, and we look forward to include user [...]

How to Identify IE Add-Ons that Impact Web Site Performance

Tue, 03 Aug 2010 18:16:00 GMT

I occasionally get invited to do JavaScript/AJAX Performance Workshops. Last week I spent two days with a group of dynaTrace AJAX Users that work in a performance task force group within their R&D Organization. I asked them about the reasons for this Client-Side Performance Initiative. They told me the following story: One of our sales managers started to complain about several pages of the product we sell being too slow to demo therefore impacting his ability to pitch and sell the product. We analyzed the page in-house but couldn’t reproduce the same exact behavior. After some back and forth we identified that it was the Skype Add-On for Internet Explorer caused the performance hit on those pages that had a very large DOM with many table rows and many nested divs. This raised the awareness of client side performance and that there is much to learn about how browser work and how the generated HTML impacts JavaScript, Rendering and IE Add-Ons.

Canto.js: An Improved Canvas API

Thu, 29 Jul 2010 04:10:24 GMT

Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example: PLAIN TEXT JAVASCRIPT: canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke(); Notice three things: canto() returns an abstraction of the canvas - a "Canto" object. As with jQuery and similar libraries, there's method chaining; each method called on a Canto [...]

YUI 3.2.0 preview release 1 – touch events support, transitions and browser-specific loading

Tue, 27 Jul 2010 18:34:02 GMT

Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious: Touch event support for mobile interfaces [...]

Canvas Color Cycling

Tue, 27 Jul 2010 00:21:55 GMT

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects. Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to [...]

Amazon’s Push for the Enterprise

Mon, 26 Jul 2010 12:00:00 GMT

This also seems to be a natural adjacent market for Amazon (the IaaS company – not the online retailer). If they already successfully host web startups and are the most well-known compute platform for tasks such video transcoding or text recognition – why not use that same expertise and infrastructure to sell it to enterprises? Enterprise IT is a huge market with great margins, and as corporate CIOs are looking for ways to use the cloud to cut costs and/or become more agile – Amazon has the brand recognition to be their number one choice. This seems to be a high priority effort for the company considering that they have their CTO attending and delivering his keynote at events like the one in LA. And it should be if Amazon does not want to be squeezed between enterprise vendors like Microsoft and VMware getting the higher margin enterprise cloud segment, while initiatives like OpenStack commoditizing lower end cloud compute services.

Looking at JS emulator core for GameBoy

Sun, 25 Jul 2010 03:29:06 GMT

JavaScript as a general-purpose “Turing-complete language” is illustrated – the example discussed in the first part of a series: How a CPU can be emulated through JS, and how one might start building an emulation core for the GameBoy console. Looking forward: How a game image can be loaded into the emulator over the Web. [...]

Best Practices on JavaScript and AJAX Performance

Thu, 22 Jul 2010 18:44:47 GMT

JavaScript can save your day or it can cause you nightmares. JavaScript and XHR (XmlHttpRequest) enable what the industry considers to be Web 2.0 – meaning highly interactive web sites where some application logic is pushed down to the client into the browsers JavaScript engine. As with any application code – regardless of the language and runtime environment – it is easy to not follow Best Practices which ultimately negatively impact the end-user experience with the site.

Dojo 1.5 is Out and it’s Feature Packed!

Thu, 22 Jul 2010 18:06:14 GMT

The Dojo project continues to pump out goodness announcing version 1.5 of the Dojo Toolkit with a number of new and exciting features. Dylan Schiemann had this to say about the release: The JavaScript world is evolving at an intense pace. We’re very pleased with this release of Dojo, which offers the stability needed for existing [...]

A Little PIE with that CSS3?

Mon, 19 Jul 2010 15:51:00 GMT

Everyone's chomping at the bit to leverage new HTML5 and CSS3 features but with some older browsers not supporting them, hacks are still needed to make things work in a cross-browser fashion. We've seen libs that make things easier such as Remy Sharp's html5shiv and Modernizr and now we can add another one. Jason Johnston's new [...]

It’s Friday. Take the time to learn the Web with a splash of French, German, and Irish

Fri, 16 Jul 2010 17:34:34 GMT

The week has been long. Much code has been written. There is much more to do, but Friday is for relaxing a little. Take some time, sit back and watch, as three fantastic videos are available for you: French: Paul Rouget of Mozilla, shows you the future Paul builds the best demos. ever. At the Mozilla Summit [...]