Web Info & Tutorials

We posted on jQTouch, the jQuery supported iUI-esque toolkit that David Kaneda created.

Today they hit free a newborn edition which improves on their extensible grouping with:

• Improved 3D fling transition
• Callback events throughout for tender transitions, swipe events, and class changes
• Included demos: Clock, To-do, Main useful demo
• Theming: Currently has Apple and jQTouch thought (gray)

Read more most getting started and the asking API.

Hello Ajaxians, my study is Apostle Young and I am the co-founder of Skybound Software. We’re the consort behindhand Stylizer, which is a real-time CSS redaction tool. We’re attractive a pretty radical move to CSS editing, and as such, a aggregation of what I do is “web profession research”, which is hunting for meliorate structure of doing things with a scheme browser, finally so that Stylizer crapper automate more of the scheme utilization process. This has allowed me the quantity to conceive a whatever things that impact had momentous effect on a scheme developer’s workflow, as was the housing with State Scope Image Replacement.

In conducting whatever investigate for a forthcoming edition of Stylizer I institute a artefact to create a querySelector method for IE 7 and lower. querySelector is a rattling multipurpose feature of newer scheme browsers. It takes a CSS switch as progress constant and returns an clothing containing the HTML elements that correct the selector. Unfortunately it doesn’t impact in IE 7 and lower… until today

My querySelector framework entireness in IE7 backwards to IE4 (although I exclusive proven it backwards to edition 6). It’s exclusive 327 characters minified, and runs ultra-fast because it doesn’t parse section or cross the DOM. Keep in nous though that it’s using the CSS switch engine shapely into the browser, which effectuation no emotional CSS 3 switch features module work, as they weren’t implemented older versions of IE.

In visit to vindicate how it works, I’ll requirement to prototypal counterbalance something added I discovered: Single Execution CSS Expressions (SECEs). These are an staggeringly coercive framework that alas has been prefabricated impracticable in IE8. We’re using these extensively in the built-in CSS ordered feature in Stylizer to destroy bugs and to add grave but absent features in IE 6 and 7.

About CSS Expressions

The difficulty with IE’s CSS expressions feature is that because they’re recalculated hundreds of nowadays per second, they’re notoriously slow. Fortunately, I’ve institute a artefact to secure they’re exclusive executed erst per matching element. Examine the cipher below:

There are 3 things you requirement to undergo to wager how this works:

• CSS expressions are executed disregarding of whether the CSS concept study is valid. So “-singlex” is meet an capricious name.
• CSS expressions are executed on every matching element. So in the housing above, on every div on the page.
• Inside a CSS expression, the “this” keyword refers to the underway matching HTML element.
• The cipher above checks to wager if the matching surroundings has a concept titled “singlex”. If it does, it meet returns 0. Otherwise, it executes an inline function, expiration it a meaning to the matching element. Inside that function, we crapper action whatever processing we want. At the end, we ordered a alarum on the surroundings to secure that the duty won’t be executed again.

This is how you crapper do Byzantine processing exclusive a CSS countenance without having to vexation most a action hit. The duty exclusive executes on the prototypal enforcement of the expression, and then on every ensuant execution, 0 is returned instantly. The action outlay of streaming an if effort and backward 0 is negligible, modify if you’re doing it thousands of nowadays per second. If you adhesive that CSS into a tender with 3 div elements on it, in IE it module signal “DIV” 3 times.

The things you crapper do with SECE’s are essentially restricted exclusive by your imagination. Here is an warning of using digit to imitation the CSS noesis concept in IE 7 and lower:

You crapper ingest SECEs to imitation every sorts of things same generated content, min-width and min-height, CSS counters, CSS outlines, and more. But most importantly, you can…

Create a querySelector method with Single Execution CSS Expressions!

Creating a querySelector method is meet a concern of dynamically adding a SECE to a tender that copies a meaning to apiece matching HTML surroundings into a globally reachable array, and then backward that array. Examine the cipher below:

There you impact it! The duty is enwrapped in a contingent assembling interpret to attain trusty exclusive IE 7 and modify crapper wager it. Here is a minified edition for convenience:

I wish you crapper attain ingest of SECEs and this querySelector method. Maybe it modify has a locate in jQuery? I don’t know. (John Resig, are you reading?

NOTE: Fancy composition a temporary place for Ajaxian? Got whatever tips on noesis that we haven’t covered? Please email us, or tweet me

We hit talked most Aristo, the fictive green countenance and wager from 280 North and Sofa, quite a few times.

Allen Pike has posted a comparison of Aristo with the newborn Ace countenance and wager that SproutCore fresh added. It is enthusiastic to wager enthusiastic hunting clog reaching from these unstoppered maker JavaScript libraries!

It has been a feeling to check Evangelist physique TestSwarm and wager its alpha promulgation today. It is an enterprising send to support developers intend actual concern investigating crossways browsers. Here you crapper wager it every at work:

John talks most whatever of the recreation challenges:

TestSwarm ended up existence a rattling hard send to intend to an alpha land (and belike module be modify more hard to intend to a effort promulgation state). Dealing with cross-browser incompatibilities, cross-domain effort flat execution, and asynchronous, distributed, computer enforcement has been more than sufficiency to attain for a astonishingly arduous project. It’s mostly cursive in PHP and uses MySQL as a backwards modify (allowing it to separate in virtually whatever environment). Patches module dead be appreciated.

And, has a careful countenance at the project. This is primeval life (hence alpha) still beyond stabilization, Evangelist has the exteroception for whatever modify features:

• A pastebin-like assist where you crapper modify in cipher and wager the results become back, from some browsers, in real-time.
• IDE combining for sending secondary changes discover for hurried testing.
• Manual investigating of individual programme code. Pushing drill tests, with instructions, to users for them to achievement through.
• Distributing tests to whatever sort of browsers, kinda than a limited sub-set. (You could ingest this to embed a tiny iframe in your place to amass effort results from a diminutive distribution of our users.)
• The knowledge to intend and effort application cipher or extensions.

What would you same to see?

More resources

• Test Swarm Source Code
• Test Swarm Bug Tracker
• Test Swarm Discussion Group
• Test Swarm Twitter Updates

The disreputable excanvas has had a Silverlight bridge for whatever time. It is faster, ease has whatever artifacts and most grouping follow with beatific ole VML.

David Anson has place his headgear in the anulus by creating a new prototype sheet feat in Silverlight.

Thanks to Silverlight’s HTML Bridge, I had no pain creating a Silverlight goal that looks meet same a <canvas> to JavaScript cipher streaming on a scheme page. So similar, in fact, that I’m healthy to separate whatever pretty modify distribution applications on my possess <canvas> only by tweaking the HTML to instantiate a Silverlight <canvas> instead of the browser’s <canvas>. And as a pleasant lateral effect, cyberspace Explorer “magically” gains hold for the tag!

I did not endeavor to compel the rank sheet specification. Instead, I implemented meet sufficiency to hold the prototypal 5 (of 6 total) Mozilla distribution pages as substantially as the containerful of applications shown above. Specifically, I’ve implemented everything that’s not in italics in the feature itemize at the first of this post. Thinking most what it would verify to add the clog that’s not implemented: book and pixel-level touching are both direct based by Silverlight and should be pretty easy. Shadows seem same a uncolored sound for Silverlight’s element shader hold (though I haven’t played around with it yet). All that’s mitt is place compositing, which does vexation me meet a little… I haven’t intellection most it much, but this seems same added employ for WriteableBitmap, perhaps.

David gets a ton of the examples feat though, and I am ease anticipative that someone module move impact on this category of shim to attain a alacritous implementation. I requirement to go soured and effort Bespin.

Sorry most the cheesy title, I couldn’t resist. In digit of those moods I guess. Chris Lowe has posted a detailed warning of a new-age GWT application that uses lots of modify school supported on Ray Ryans speech on MVP pattern;

Chris takes these ideas and applies them to the official send created by the Google plugin for Eclipse. To intend this done, he uses a slew of libraries:

NOTE: currently GIN needs to be shapely from maker using SVN/Ant.

You’ll also requirement the mass libraries at the server:

Then, the tutorial walks you finished environment up your views, presenters, and events. It is Java, so you module attending a clean turn of maker cipher (but at small the GuiceServlet gets disembarrass of most of the XML). Just joshing with ya!

It was modify to wager my chum Rob’s Customware existence the locate that created whatever of the key libraries. Good on ya mate!

This Friday, August 28 marks the $100 soured early-bird deadline for The Ajax Experience conference, Sept 14-16 in Boston, MA. weekday is your terminal quantity to spend $100 soured the entrance fee. Visit the word place to run now!

Below is the stylish list at-a-glance with over 40 primary sessions, housing studies, mutual panels and insightful keynotes from Dion and Ben of Ajaxian.com, Brendan Eich, politico Crockford and doc Boucher. Register now to verify plus of $100 early-bird fund and tie your peers correct in Boston. This enthusiastic substance expires on Friday, August 28.

——————————————————————————–

DAY ONE - Monday, Sept 14

7:00 - 8:00 a.m.   Registration and Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘The Future of Ajax: The Browser Reinvented’ with Ben diplomat and  Dion Almaer, Co-founders, Ajaxian.com

9:05 - 9:45 a.m.   5-minute Lightning Rounds (HOT Ajax topics reaching soon!)

9:45 - 10:10 a.m.   Refreshment Break, Peer and Vendor Networking

10:10 - 11:10 a.m.   Choose between:
‘Design Tips for Dynamic UIs’ with Apostle Lightbody
‘Beyond IFrames: Web Sandboxes’ with histrion Isaacs
‘Building Accessible User Interfaces with jQuery and Fluid Infusion’ with Colin Clark
‘From Desktop to Web - Getting it Right’ with Evangelist Trelfa

11:20 - 12:00 p.m.   Luncheon Keynote

12:00 - 12:50 p.m.   Lunch and Peer Networking

1:00 - 2:15 p.m.   Panel: ‘ES5: ECMAScript Standards for a Better Web’ led by comedienne Wirfs-Brock
Panelists: Brendan Eich, politico Crockford, Mark Miller

2:25 - 3:25 p.m.   Choose between:
‘Interoperable Ajax Tools and Mashups’ with cristal Peller
‘API Doc Smackdown: YUI Doc versus JS Doc Toolkit’ with Ted Husted
‘Even Faster Web Sites’ with Steve Souders
‘Designing for Interesting Moments’ with Bill Scott

3:25 - 3:50 p.m.   Refreshment Break, Peer and Vendor Networking

3:50 - 4:15 p.m.   New Technology Launch

4:15 - 5:15 p.m.   Keynote: ‘The JSON Saga’ with politico Crockford, Author, ‘JavaScript: The Good Parts’; Creator, JSON

5:15 p.m.   Ajax Experience Evening Event

DAY TWO - Tuesday, Sept 15

7:30 - 8:00 a.m.   Registration and Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘ECMAScript Harmony and the Future of JavaScript’ with Brendan Eich, Creator, JavaScript; CTO, Mozilla Foundation

9:05 - 9:35 a.m.   5-minute Lightning Rounds (HOT Ajax Topics)

9:35 - 10:00 a.m.   Refreshment Break, Peer and Vendor Networking

10:00 - 11:30 a.m.   Choose between:
Standards Session with Brendan Eich
‘Web Compatibility and Performance Testing in a Multi-Browser World’ with Imad Mouline & Ryan Breen

11:40 - 12:20 p.m.   Luncheon Keynote

12:20 - 1:10 p.m.   Lunch and Peer Networking

1:20 - 1:50 p.m.   Vendor Tech Sessions

2:00 - 3:00 p.m.   Choose between:
‘Advanced Web Application Security’ with Joe Walker
‘Adaptive Static Resource Optimization in the Ajax World’ with king dynasty & Changhao Jiang
‘Object-Oriented CSS: for Scalable, Fast and Beautiful Web Applications’ with Nicole Sullivan
‘JavaScript: The Good Parts’ with politico Crockford

3:00 - 3:25 p.m.   Refreshment Break, Peer and Vendor Networking

3:25 - 4:25 p.m.   Choose between:
‘Ample SDK: Standards-based Runtime for Client-side Applications’ with Sergey Ilinsky
‘How to Simplify and Automate Testing Ajax Applications’ with Ted Husted
‘Web Services and JavaScript - Using and Offering Data on the Web for All of Us’ with faith Heilmann

4:25 - 5:25 p.m.   Ask the Expert Discussion Groups (Meet one-on-one with speakers)

5:25 p.m.    Ajax Experience Evening Event

DAY THREE - Wednesday, Sept 16

7:30 - 8:00 a.m.   Welcome Refreshments

8:05 - 9:05 a.m.   Keynote: ‘The Future of Development Tools’ with doc Boucher, Co-founder, 280 North

9:05 - 9:20 a.m.   5-minute Lightning Rounds (HOT Ajax Topics reaching soon!)

9:30 - 10:30 a.m.   Choose between:
‘Improving Facebook’s Performance with Ajax and Browser Caching’ with David  dynasty & Changhao Jiang
‘Bringing Data to Life in the Browser with the YUI Library’ with designer dynasty Donnelly
‘Designing for the Mobile Web with JavaScript’ with Brian LeRoux
‘Building Voice Recognition and Audio Recording into Web Applications with WAMI’ with saint Sutherland

10:30 - 10:55 a.m.   Refreshment Break, Peer and Vendor Networking

10:55 - 12:55 p.m.   Panel: ‘Secure Mashups: Getting to Safe Web Plug-ins’ with politico Crockford, histrion Isaacs, Mike Samuel, Marcel Laverdet

12:25 - 1:15 p.m.   Lunch and Peer Networking

1:25 - 2:25 p.m.   Choose between:
‘The Challenges and Rewards of Writing a 100K-line JavaScript Application with Laurens camper habitation Oever
‘Building Rich Web Applications with Ext JS 3.0′ with Rich Waters
‘Cappuccino Web Framework’ with doc Boucher

2:35 - 3:35 p.m.   Choose between:
‘Testing the Testers: YUI Unit versus QUnit’ with Ted Husted
‘Building a Web Application with Atlas, Start to Finish’ with doc Boucher
‘Web. Smartphone. Future. Now.’ with Jason O’Keefe
‘ARIA - Pushing Accessibility Even Further and How to Get Your Boss to Join in’ with Joe McCann

3:35 p.m.   Conference ends

Visit AjaxExperience.com to see more and spend $100!

The test entrance for the SVG Open 2009 word is reaching up the modify of this month! Scalable Vector Graphics, or SVG, is an open, browser-based accepted that makes it cushy to create mutual scheme graphics. SVG is enthusiastic as it’s conception of the HTML 5 kinsfolk of technologies patch existence see engine friendly; cushy for JavaScript and HTML developers to adopt; marketable from your selection art tools same Adobe Illustrator ™; and direct to expel from server-side systems same PHP and Google App Engine. It’s also acquirable in every recent browsers.

Google is serving to patron the SVG Open 2009 conference this start at their Mountain View campus. The thought this assemblage is SVG Coming of Age. It module be held at the Google Crittenden Campus in Mountain View, Calif. on Oct 2nd finished 4th 2009, with added workshops on Oct 5.

Co-sponsored by W3C, the SVG Open word program is the execute installation for SVG designers, developers, and implementors to deal ideas, experiences, products, and strategies. Over 60 presentations module be delivered by SVG experts from every over the world, tackling topics such as organisation workflows, ambulatory SVG, Web covering development, Web mapping, geo-location supported services, and such more.

Two commission discussions module earmark the word to handle ideas and issues with the W3C SVG Working Group and implementors. Many W3C Members module be participating, including Google, IBM, Mozilla, Opera, Oracle, Quickoffice and Vodafone. The word schedule and addicted tone speakers are today available.

The deadline for early-bird registration is August 31st, so intend your registrations in soon! Full-price entrance module rest acquirable until Oct 1, and restricted on-site entrance haw also be acquirable at the entrance desk during the conference. The W3C SVG Working Group and W3C’s Chris Lilley and Doug Schepers module participate.

A panoramic arrange of elating talks are on the docket. Here’s a diminutive sample:

* Ajax Toolkits activity SVG graphics: Raphaël, dojo, Ample SDK, SVG Web Project, JSXGraph
* SVG in cyberspace Explorer and at Google
* Beyond XHTML
* Progress in Opera and Mozilla
* Using Canvas with SVG
* Progress in Inkscape
* Implementors and Panel Sessions
* SVG and OpenStreetmap
* SVG in Wikipedia/Wikimedia
* SVG and ODF
* SVG for Scientific Visualization
* SVG for Webmapping
* SVG for Games
* SVG for Mobile Applications
* SVG Wow - demonstrations of enthusiastic SVG demos

See you there!

[Disclosure: I impact for Google and am serving to care the SVG Open conference]

Alex writer has been having a rattling engrossing communicating with whatever standards folks most what is criminal on the Web correct now, and it narrowed downbound to handle CSS variables as a housing think (it aint perfect, but intend DRY and ship it!)

Alex tells it how it is, but grouping block that he does this as he is aroused most the Web, and that he does also provide assign and constructive looking IF it is due!

His stylish place shows this as he talked most CSS 3 progress and specifically the pliant incase hold that Mozilla and WebKit hit had forevaaaaaah:

David Baron (of Mozilla fame) is redaction a long-overdue but totally awing Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it crapper be a taste tedious. Should you be employed on an app that crapper cut IE (say, for a ambulatory phone), this should hold attain incase layouts a taste easier to intend started with:

PLAIN TEXT

CSS:

1.  
2. /* hbox and vbox classes */
3.  
4. .hbox {
5.         display: -webkit-box;
6.         -webkit-box-orient: horizontal;
7.         -webkit-box-align: stretch;
8.  
9.         display: -moz-box;
10.         -moz-box-orient: horizontal;
11.         -moz-box-align: stretch;
12.  
13.         display: box;
14.         box-orient: horizontal;
15.         box-align: stretch;
16. }
17.  
18. .hbox> * {
19.         -webkit-box-flex: 0;
20.         -moz-box-flex: 0;
21.         box-flex: 0;
22.         display: block;
23. }
24.  
25. .vbox {
26.         display: -webkit-box;
27.         -webkit-box-orient: vertical;
28.         -webkit-box-align: stretch;
29.  
30.         display: -moz-box;
31.         -moz-box-orient: vertical;
32.         -moz-box-align: stretch;
33.  
34.         display: box;
35.         box-orient: vertical;
36.         box-align: stretch;
37. }
38.  
39. .vbox> * {
40.         -webkit-box-flex: 0;
41.         -moz-box-flex: 0;
42.         box-flex: 0;
43.         display: block;
44. }
45.  
46. .spacer {
47.         -webkit-box-flex: 1;
48.         -moz-box-flex: 1;
49.         box-flex: 1;
50. }
51.  
52. .reverse {
53.         -webkit-box-direction: reverse;
54.         -moz-box-direction: reverse;
55.         box-direction: reverse;
56. }
57.  
58. .boxFlex0 {
59.         -webkit-box-flex: 0;
60.         -moz-box-flex: 0;
61.         box-flex: 0;
62. }
63.  
64. .boxFlex1, .boxFlex {
65.         -webkit-box-flex: 1;
66.         -moz-box-flex: 1;
67.         box-flex: 1;
68. }
69.  
70. .boxFlex2 {
71.         -webkit-box-flex: 2;
72.         -moz-box-flex: 2;
73.         box-flex: 2;
74. }
75.  
76. .boxGroup1 {
77.         -webkit-box-flex-group: 1;
78.         -moz-box-flex-group: 1;
79.         box-flex-group: 1;
80. }
81.  
82. .boxGroup2 {
83.         -webkit-box-flex-group: 2;
84.         -moz-box-flex-group: 2;
85.         box-flex-group: 2;
86. }
87.  
88. .start {
89.         -webkit-box-pack: start;
90.         -moz-box-pack: start;
91.         box-pack: start;
92. }
93.  
94. .end {
95.         -webkit-box-pack: end;
96.         -moz-box-pack: end;
97.         box-pack: end;
98. }
99.  
100. .center {
101.         -webkit-box-pack: center;
102.         -moz-box-pack: center;
103.         box-pack: center;
104. }
105.  

With this set line CSS you crapper then do enthusiastic things much as easily vertically reorient (duh!)

and sharp grouping:

The powerful Erik Arvidsson also reminds us of the CSS3 attr() hold (already in Firefox, coming in WebKit too) that would enable us to accommodate up <div class=vbox flex=2>…</div>.

Although you haw be intellection “this is great, but freaking IE effectuation that I don’t tending most it.” True. It would be awing if someone took a shim that could grok this CSS (we shapely a CSS parser for Thunderhead) and attain it impact in IE etc. But until that day, or the period that IE implements it (heh) what crapper you do?

Write iPhone or Palm webOS or Android WebKit apps? You crapper ingest it correct friggin now!

Felipe Gomes has extended multitouch hold in Firefox to accomplish into noesis expanse (i.e. us Web devs crapper ingest it!). Checking discover the horny demos in the recording above module attain you conifer for the period (not long!) where every laptop screens hold contact (my son thinks they are already

We hit threesome newborn DOM events (MozTouchDown, MozTouchMove and MozTouchRelease), which are kindred to pussyfoot events, eliminate that they hit a newborn concept titled streamId that crapper uniquely refer the aforementioned digit existence tracked in a program of MozTouch events. The mass piece is the cipher for the prototypal demonstrate where we advise autarkical <div>s low the X/Y function of apiece contact point.

PLAIN TEXT

JAVASCRIPT:

1.  
2. var assignedFingers = {};
3. var lastused = 0;
4.  
5. function touchMove(event) {
6.   var divId;
7.   if (lastused <= 4) return;
8.   if (assignedFingers[event.streamId]) {
9.     divId = assignedFingers[event.streamId];
10.   } else {
11.     divId = “trackingdiv” + (++lastused);
12.     assignedFingers[event.streamId] = divId;
13.   }
14.   document.getElementById(divId).style.left = event.clientX + ‘px’;
15.   document.getElementById(divId).style.top  = event.clientY + ‘px’;
16. }
17.  
18. document.addEventListener(“MozTouchMove”, touchMove, false);
19. document.addEventListener(“MozTouchRelease”, function() { lastused–; }, false);
20.  

You crapper analyse discover code from every of the demos.

We’ll also add CSS hold to notice touchscreen devices. Using the pseudo-selector :-moz-system-metric(touch-enabled), you crapper administer limited styles for your tender exclusive if it’s viewed by a touchscreen user. That, along with fleshly CSS units (cm or in), makes it doable to change your webapp for a touchscreen experience.