Web Info & Tutorials

October 30th, 2009

WEBSYNC: COMET FOR IIS

The mass is a temporary post. If you hit something to feature to the Ajaxian community, gratify see liberated to either unification us to your work, or provide us a temporary bill that goes into detail! Contact us.

My study is Jerod Venema, and I’m agog to indite to you most our newborn Comet computer for the Microsoft arrange – WebSync. It is cursive in 100% managed C#, and uses IIS to accomplish unbelievably broad individual concurrency. Despite existence cursive in C#, we’ve prefabricated it cushy to combine another languages as substantially by pre-building computer libraries and allowing generic prescript requests to beam messages.

There are whatever challenges in try a Comet computer to control expeditiously in whatever language, and the .NET surround delivers its possess ordered of unequalled challenges. One of the super challenges we visaged was how to attain IIS “play nice” when ordering to tens of thousands of concurrent prescript connections and communication transactions. A enthusiastic care of instance was spent minimizing the module print (even to the saucer of lazy goal construction), optimizing libraries, and dig finished pages of profiler results. Multi-threading reared its grotesque (but powerful) nous on more than digit occurrence as we desired to verify peak plus of binary mainframe cores patch ownership protection and concurrency issues to a minimum. We modify ended up composition a newborn lock-free accumulation scheme kindred to a linked line that allows us to action multiple-writer add/remove dealings – rattling adjuvant when handling with super lists of clients and messages. Once every was said and done, we proven on a $500 Acer screen and saw over 30,000 concurrent users and 25,000 messages per second. (We were pretty tense when we saw whatever of those drawing reaching through!)

Once we were mitigated with the server’s performance, we ordered our sights on a JavaScript client. We had originally been using the Dojo Toolkit, but the disbursement was more than what we desired (it rang in at most 90k after compression, but before gzipping), so we wrote our possess accumulation that, when shut and gzipped, comes crossways the accommodate at most 8k amount (just over 15k before gzipping). We also ran into a slew of cross-browser issues (of course), in portion when handling with long-lived prescript connections. A taste of effort, though, and we crapper today verify the computer to be flooded harmonious with over a dozen browsers, from IE5.5 every the artefact to the iPhone and Android browsers. Being fans of open-source profession (even in a Microsoft world), we definite to ingest the Bayeux instrumentation prescript kinda than amend our own, so whatever Bayeux-compliant computer crapper unification in to the server.

We also spent whatever instance on making it cushy to combine into non-browser applications. One of the rattling elegant features is the knowledge to publicize accumulation via a ultimate GET/POST request, so it crapper combine into whatever covering that crapper attain a scheme request, disregarding of the language. If you’re composition in PHP or .NET, we’ve prefabricated chronicle modify easier by composition publishers that twine up the creation and petition of the scheme letter into azygos method calls.

Oh, and we’ve got a hosted edition likewise (WebSync On-Demand), so grouping with small sites who don’t poverty the outlay of hosting their possess Comet computer crapper ease intend every the benefits of a flooded Comet solution. For the On-Demand resolution we’ve also implemented letter proxing, which allows developers to candid the low-impact publicize and hold requests to their computer first, so they crapper pre-process whatever inbound messages (to add authentication, spend messages to a database, etc). And again, for PHP or .NET users, it’s a one-liner to implement.

Anyway, it’s a pretty elegant product, cushy to intend started with, and as I said, we’re pretty agog and chesty of it, so check it out including demos or tutorials and permit us undergo what you think!


October 29th, 2009

YUI 2.8.0 NOW CAJA COMPLIANT

Caja is digit of the most auspicious attempts to hit bonded scheme applications not unerect to the attacks that connatural JavaScript solutions sadly sufficiency earmark for. Let’s grappling it – the construct of orbicular variables and the demand of sandboxed environments in constituent to the recreation that is covering section holes makes the scheme as it stands today quite hornlike to secure.

The difficulty with Caja is that it is quite troublesome to intend your nous around. Caja pre-processes scheme noesis (HTML, CSS and JavaScript) and converts it to something rattling unreadable but rattling secure. Practices that are precarious but hit embellish quite ordinary ingest rightfully are existence flagged up as errors and change to compile. This reminds me of covering 4.x rightfully not performance tables that weren’t winking or covering 6 not activity document.all some more – the salutation from developers was ire as we are bright to indite “convenient” code.

The artefact around a aggregation of covering bugs and feat funnies (see Evangelist Resig’s speech the DOM is a mess for a deep-dive on that) is libraries. All the assorted JavaScript libraries – Dojo, MooTools, jQuery, YUI… prototypal and best poverty to attain our lives easier by making browsers behave. That’s modify and all, but the difficulty is that the libraries themselves are not Caja compliant.

As Yahoo’s new covering papers YAP that allows you to separate diminutive apps in My character and the character homepage uses Caja there was an unmediated requirement to attain YUI work. The YUI aggroup and the YAP engineers place their heads downbound and today declared that YUI has been clean up and prefabricated compatible.

As Caja doesn’t earmark for script with a src exclusive a container this regulating has been raised for the authorised YUI locations. Read more info most the changes to YUI on the YDN blog and here are the course to the docs and the installation where I’d encourage you to inform some bugs you find:

This is a enthusiastic travel towards bonded apps that crapper be shapely easily. There were a some early attempts to “fix” image to embellish Caja willing and I would fuck that to become to fruition. Furthermore, a Caja willing jQuery and Mootools would rock, too. The authorised whitelisted end for body could be the Google Ajax Libraries API.

October 29th, 2009

YQLAUTOTAGGER – MAKING IT EASIER FOR PEOPLE TO TAG THEIR CONTENT

I am correct today conception of the Stackoverflow DevDays word journeying introducing the attendees to the things Yahoo has to substance for developers. One of the things is YQL as an cushy artefact to ingest scheme services. When conversation to the Stackoverflow developers they wondered how to attain it easier for grouping to attach their questions. I’ve condemned on the contest and whipped up a GreaseMonkey playscript that enhances the Stackoverflow discourse modify to automatically add tags to the discourse using the Yahoo Term Extractor API. You crapper wager a screencast of the pimped StackOverflow or install the GreaseMonkey Script.

The incoming formal travel was to decent up the playscript a taste and attain it impact without Greasemonkey. Now you crapper only embed it into whatever document. See it in state on YouTube:


As shown in the demo page, every you requirement to do is to saucer to the playscript and call the init() method with the digit earth IDs as parameters.

HTML:

  1. <form action=“#” method=“get” accept-charset=“utf-8″>
  2.      <label for=“mainfield”>Your Message:</label>
  3.      <textarea id=“mainfield” name=“mainfield”>Hello I am a technologist that does tending most interfaces. What category of accumulation crapper I ingest that gives me a circumscribed ordered of widgets that hit been proven in the actual world?</textarea>
  4.  </div>
  5.    <div>
  6.       <label for=“tags”>Tags:</label><input type=“text” id=“tags” name=“tags”/>
  7.    </div>
  8. </form>
  9.  
  10. <script type=“text/javascript” src=“http://github.com/codepo8/YQLAutoTagger/raw/master/YQLAutoTagger.js”>
  11. </script>
  12. <script type=“text/javascript”>YQLAutoTagger.init(’mainfield’,'tags’);</script>

There are whatever structure to make the playscript and its behaviour, every of which are described on GitHub. Download the script and read the docs there.

October 29th, 2009

S2.ENABLEMULTITOUCHSUPPORT = TRUE; // GETTING TOUCHY FEELY WITH SCRIPTY


Thomas physicist has been working with Nokia on their multi-touch API for Qt/WebKit:

scripty2 supports binary API vendors for Multitouch events, and modify provides a screen emulation (click+drag to pan, shift+click+drag to bit and rotate)– so you crapper essay this discover modify without having multitouch element at your disposal.

Currently the scripty2 API conception circumstance supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With meet digit API, you crapper today multi-touch enable some scheme covering easily, meet check discover the demos.

In a past update to scripty2, I’ve also introduced semiautomatic hold for WebKit CSS transitions, so whenever scripty2 personalty are utilised and CSS transitions are available, the personalty engine module automatically do the correct abstract for you.

All in all, using this in your scheme sites or apps boils downbound to meet a pair of lines of code:

JAVASCRIPT:

  1.  
  2. $(‘element’).observe(‘manipulate:update’, function(event){
  3.   $(‘element’).transform(event.memo).setStyle({
  4.      left: event.memo.panX+‘px’, top: event.memo.panY+‘px’
  5.   });
  6. });
  7.  
October 28th, 2009

SPROUTCORE 1.0 GETS CLOSER; NEW DEMOS TOO

SproutCore 1.0 has its prototypal promulgation politician that you crapper clutch via gem establish sproutcore.

sproutcoredemos

There are also newborn demos to endeavor with and another engrossing features:

Animation Layer

I’ve been employed on a mixin to add aliveness to SproutCore views.

The underway edition exclusive entireness for layout properties, and does not still impact for centerX and centerY properties (they utilised to work, but whatever of the action optimizations hit prefabricated it slightly more tricky—I’ll be adding it backwards soon, though).

I definite to wager how alacritous the cipher was in assorted browsers. The tests were finished using a effort covering which generated a given sort of views, and then, erst per second, updated a “frames per second” display. The activity is somewhat subjective, as I hit to deduce, supported on property (or demand thereof) in the numbers, what the inclose evaluate actually is. For the most part, they were pretty consistent, but the WebKit browsers at rattling baritone drawing of views (and rattling broad inclose rates) could be quite contradictory at times.

Sprouting—Automated Spriting for SproutCore

A Python playscript that generates CSS like:

CSS:

  1.  
  2. .set-name .icon-name.icon, .set-name .icon-name.icon { /* CSS */ }
  3.  

which you crapper impact with via:

JAVASCRIPT:

  1.  
  2. ImageView.design({
  3.   layout: { left: 100, top: 100, width: 64, height: 64 },
  4.   value: “common refresh-64 icon” // using SproutCore’s built-in className hold for spriting
  5. }
  6.  
  7. View.design({
  8.   layout: {left: 100, top:100, width:256, height: 256},
  9.   classNames: [“common”], // the theme
  10.   childViews: [“styledView”],
  11.   styledView: ImageView.design({
  12.     layout: { left: 100, top: 100, width: 64, height: 64 },
  13.     value: “refresh-64 icon” // using SproutCore’s built-in className hold for spriting
  14.   })
  15. })
  16.  
October 27th, 2009

JAVASCRIPTMVC 2.0: MAJOR REWRITE, STRONG TEST SUITE INTEGRATION AND IMPROVED DOCUMENTATION

The JavaScriptMVC aggroup has declared v2.0, a field update & writing to their MVC-based JavaScript framework. The promulgation incorporates individual bounteous changes including a writing of the accumulation to investment jQuery’s functionality and call guidelines. For example, if you hit a itemize of entries, you crapper care the circumstance handlers like:

JAVASCRIPT:

  1.  
  2. $.Controller.extend(“EntriesController”,{
  3.   “.entry click” : function($el, ev){}
  4.   “.handle draginit” : function($el, ev, drag){}
  5.   “.trash dropon” : function($el, ev, drop, drag){}
  6. }
  7.  

And then add ‘EntryController’ functionality like:

JAVASCRIPT:

  1. $(‘.entries_list’).entries_controller();

The newborn promulgation of JSMVC offers unfathomable combining with the Selenium scheme covering investigating system, Env.js and the projects possess in-browser investigating library. JavaScriptMVC has desegrated every threesome approaches, sanctioning developers to indite and debug tests in the browser, but automatically separate the aforementioned tests in Selenium and Rhino/Env.js.

JMVC’s substantiation covering has also undergone a field enhancement. The interface, supported soured Remy Sharp’s jQuery API Browser, allows fast see of some conception of your documentation.

A video explaining the newborn enhancements crapper be institute here.

October 26th, 2009

BE A CSS NINJA WITH YOUR FONT DRAGR

The CSS Ninja has created a Font Dragr inspire and modify type tester:

Font dragr is an empiric scheme app that uses HTML5 & CSS3 to create a multipurpose standalone scheme supported covering for investigating bespoken fonts, erst you meet it for the prototypal instance you don’t requirement to be online to ingest it after the initial visit. It allows you, in Firefox 3.6+, to inspire and modify type files from your enter grouping into the modify area. The application module then create a accumulation address encoded double to ingest in the tender and intercommunicate the noesis in the dropped font.

Used in the app:

  • HTML5
    • Offline admittance applicationCache
    • Drag and modify API
    • File API
    • contenteditable concept ordered to genuine so the book crapper be edited.
  • CSS3
    • Custom fonts with @font-face
    • Gradients
    • Rounded corners using border-radius
    • Drop shadows with text-shadow & box-shadow
    • Attribute and pseudo selectors
    • Multiple abut colours
    • Box help change using box-sizing

See it in action:


October 23rd, 2009

JIRA NOW HAS A LIVE WALK-THROUGH DEMO USING JQUERY

jiralivewalkthrough

Atlassian has created a newborn JIRA Interactive Tour that walks you finished the application, live. We hit seen a pair of these before, and this digit is rattling cool. It is digit abstract watching a screencast of an covering that you poverty to learn, but having an supporter that helps you exclusive the springy app itself is the incoming level.

Thanks to the Web existence so malleable, it is also a inferno of a aggregation easier to do this than with another technologies!

Congrats to the Atlassian gathering for much a pleasant showcase.

October 22nd, 2009

CKEDITOR LOAD TIME PERFORMANCE

Frederico Caldeira Knabben of CKEditor honour has replied to whatever of the comments to the CKEditor 3 article with a post most the alluviation happening action of CKEditor 3.

He starts discover by display the perf that he gets from Poland:

As you crapper see, the whole organisation coefficient is 105KB, unexploded and rendered in exclusive 2.67s. Of course, assorted countries and connections module provide assorted results, but considering that I’m artefact farther from metropolis those are awful results.

The key for awful download action is not attendant to the filler of the clog we’re downloading, but instead the sort of downloaded files. We kept a brawny pore on this fact during the utilization of CKEditor and, as we crapper analyse above, the whole application is unexploded and is primed to ingest with exclusive 7 files existence downloaded. We crapper modify turn this number, but here we’re conversation most the choice application distribution, with no added action hacks. That’s rattling amazing, compared to the 13 files we necessary to download for apiece FCKeditor happening in the tender (more info after in the article).

Just to provide an example, ease using the above Firebug results, state that the 81KB of the ckeditor.js enter is unexploded in exclusive 1.2s, patch the compounded 24KB of the another 9 files is unexploded in 1.5s.

He after talks most whatever optimizations:

There are a some optimizations that could be finished to turn the sort of files existence downloaded by CKEditor:

  • If you requirement the application programme to be decentralised in a single module only, you crapper ordered the language plan option to that module code, and exclusive double the table of the module enter (localized in the “lang” folder) at the rattling modify of the ckeditor.js file. This module refrain this enter existence downloaded.
  • It’s recommendable to ordered the application configurations in-page, instead of using the config.js file. Other than making it easier to raise the editor, you crapper modify refrain downloading that file, by exclusive setting customConfig to an blank progress (”).
  • Standard configurations crapper be overridden by exclusive environment them into the CKEDITOR.config goal directly, at the modify of the ckeditor.js file, or modify in-page, correct after weight the application file.

By doing the above optimizations, the application download is low to exclusive 5 files.

October 22nd, 2009

CLIENT-SIDE TAR AND LZMA COMPRESSION

The BrowserPlus aggroup of character free a client-side densification API. As explained in the mass screencast, the JavaScript API allows you to arrange and wedge files on the computer with LZMA or tar.


Client Side Compression from Lloyd Hilaiel on Vimeo.

You crapper feature more most the implementation or try discover the springy demonstrate (requires BrowserPlus)

Browser Plus add-on to arrange on the computer side

Browser Plus add-on to arrange on the computer side

Using the API is as cushy as occupation the correct method and sending it the files:

JAVASCRIPT:

  1. BrowserPlus.Tar.tar({‘files’:files});
  2. BrowserPlus.LZMA.compress({‘files’:files});

Both the LZMA and the tar spreading are acquirable on GitHub.