MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: 2013, By: Seo Master

Seo Master present to you: Nicholas C. Zakas delivers the seventh Web E^xponents tech talk at Google. Nicholas is a JavaScript guru and author working at Yahoo!. Most recently we worked together on my next book, Even Faster Web Sites. Nicholas contributed the chapter on Writing Efficient JavaScript, containing much of the sage advice found in this talk. Check out his slides and watch the video.



Nicholas starts by asserting that users have a greater expectation that sites will be fast. Web developers need to do most of the heavy lifting to meet these expectations. Much of the slowness in today's web sites comes from JavaScript. In this talk, Nicholas gives advice in four main areas: scope management, data access, loops, and DOM.

Scope Management: When a symbol is accessed, the JavaScript engine has to walk the scope chain to find that symbol. The scope chain starts with local variables, and ends with global variables. Using more local variables and fewer global variables results in better performance. One way to move in this direction is to store a global as a local variable when it's referenced multiple times within a function. Avoiding with also helps, because that adds more layers to the scope chain. And make sure to use var when declaring local variables, otherwise they'll end up in the global space which means longer access times.

Data Access: In JavaScript, data is accessed four ways: as literals, variables, object properties, and array items. Literals and variables are the fastest to access, although the relative performance can vary across browsers. Similar to global variables, performance can be improved by creating local variables to hold object properties and array items that are referenced multiple times. Also, keep in mind that deeper object property and array item lookup (e.g., obj.name1.name2.name3) is slower.

Loops: Nicholas points out that for-in and for each loops should generally be avoided. Although they provide convenience, they perform poorly. The choices when it comes to loops are for, do-while, and while. All three perform about the same. The key to loops is optimizing what is performed at each iteration in the loop, and the number of iterations, especially paying attention to the previous two performance recommendations. The classic example here is storing an array's length as a local variable, as opposed to querying the array's length property on each iteration through a loop.

DOM: One of the primary areas for optimizing your web application's interaction with the DOM is how you handle HTMLCollection objects: document.images, document.forms, etc., as well as the results of calling getElementsByTagName() and getElementsByClassName(). As noted in the HTML spec, HTMLCollections "are assumed to be live meaning that they are automatically updated when the underlying document is changed." Any idea how long this code takes to execute?

   var divs = document.getElementsByTagName("div");
   for (var i=0; i < divs.length; i++) {
       var div = document.createElement("div");
       document.body.appendChild(div);
   }

This code results in an infinite loop! Each time a div is appended to the document, the divs array is updated, incrementing the length so that the termination condition is never reached. It's best to think of HTMLCollections as live queries instead of arrays. Minimizing the number of times you access HTMLCollection properties (hint: copy length to a local variable) is a win. It can also be faster to copy the HTMLCollection into a regular array when the contents are accessed frequently (see the slides for a code sample).

Another area for improving DOM performance is reflow - when the browser computes the page's layout. This happens more frequently than you might think, especially for web applications with heavy use of DHTML. If you have code that makes significant layout changes, consider making the changes within a DocumentFragment or setting the className property to alter styles.

There is hope for a faster web as browsers come equipped with JIT compilers and native code generation. But the legacy of previous, slower browsers will be with us for quite a while longer. So hang in there. With evangelists like Nicholas in the lead, it's still possible to find your way to a fast, efficient web page.

By Steve Souders, Performance Evangelist


Check out other blog posts and videos in the Web Exponents speaker series:

• John Resig: Drop-in JavaScript Performance
• Doug Crockford: JavaScript: The Good Parts
• Steve Souders: Life's Too Short, Write Fast Code (part 2)
  
• PPK: The Open Web Goes Mobile
• Rob Campbell: Debugging and Testing the Web with Firebug
  

2013, By: Seo Master

Seo Master present to you: The Chrome Developer Tools are great for debugging HTML, JavaScript and CSS in Chrome. If you're writing a webpage or even a web app for the Chrome Web Store, you can inspect elements in the DOM, debug live JavaScript, and edit CSS styles directly in the current page. Extensions can make Google Chrome an even better web development environment by providing additional features that you can easily access in your browser. To help developers like you, we created a page that features extensions for web development. We hope you’ll find them useful in creating applications and sites for the web.


For example, Speed Tracer is an extension to help you identify and fix performance issues in your web applications. With Speed Tracer, you can get a better idea of where time is being spent in your application and troubleshoot problems in JavaScript parsing and execution, CSS style, and more.


Another useful extension is the Resolution Test that changes the size of the browser window, so web developers can preview websites in different screen resolutions. It also includes a list of commonly used resolutions, as well as a custom option to input your own resolution.


With the Web Developer extension, you can access additional developer tools such as validation options, page resizing and a CSS elements viewer; all from an additional button in the toolbar.


Another extension you should check out is the Chrome Editor that allows you to easily code within your browser, so you don’t have to flip between your browser and code editor. You can also save a code reference locally to your computer for later use.

These are just a few of the extensions you can find in our extensions for web development page. You can also look for more in the extensions gallery.

By Koh Kim, Google Chrome Team2013, By: Seo Master

Seo Master present to you: By Mark Pilgrim, Google Code Team

The open web is the web built on open standards: HTML, JavaScript, CSS, and more. The open web is a beautiful soup of barely compatible clients and servers. It comprises billions of pages, millions of users, and thousands of browser-based applications. You can access the open web with open source and proprietary browsers, on open source and proprietary operating systems, on open source and proprietary hardware.

Google has built its business here, on the open web, and we want to help you build here too. To that end, we are happy to announce the formation of an encyclopedia for web developers, by web developers: Google Doctype.

In its current (beta) form, Google Doctype contains dozens of articles written by top Googlers on topics important to all web developers: security, performance, caching, DOM manipulation, CSS styling, and more. It contains over 8,000 lines of JavaScript code: Google's own battle-tested JavaScript library, released today under a liberal open source license. And it contains the beginnings of a test-driven reference of the open web: a reference of every element, every attribute, every DOM method, every CSS property, all backed up by test cases.

Well, not quite every property; at least, not yet. We're still working on filling in a few of the details about the world's largest development platform ever, and we need your help. And so we humbly offer this fledgling encyclopedia under a Creative Commons Attribution license, and we invite the web developers of the world to contribute to it. Sign in with your Google account and edit any page, any article, anywhere. Create new ones, update old ones, and help expand the world's understanding of the open web.2013, By: Seo Master

Seo Master present to you:
By Dominic Szablewski, creator of the Impact Game Engine

This post is part of Who's at Google I/O, a series of guest blog posts written by developers who are appearing in the Developer Sandbox at Google I/O.


Impact is a JavaScript game engine that uses the HTML5 Canvas and Audio elements for graphics and sound, instead of relying on any browser plugins. Impact's main focus is on classic 2D games. Examples include the Biolab Disaster Jump'n'Run game and the Z-Type Space Shooter. These games, like many other 2D games, draw sprites in front of multiple background layers.


Each background layer is drawn from a tileset, an image containing all the individual building blocks, and a tilemap, a 2D array that tells the renderer where to draw each of these tiles. Similarly, sprites are drawn from an animation sheet, an image with all the animation's frames.

This technique has proven so efficient and flexible that it was enforced in hardware on early game consoles: the Super Nintendo could not do anything other than draw tiled background maps and sprites. There was no way to directly access single pixels on the screen.

The HTML5 Canvas element is perfectly equipped for these kinds of games. Most importantly, the Canvas API's drawImage() method allows us to draw only a certain part of a tileset or animation sheet to the screen. In Impact, however, you don't have to deal with any of the Canvas API methods directly. Instead, you specify your tilemaps and animation sheets and let the engine handle the details.

This is how you'd create an animation from an animation sheet:

// Each animation frame is 16x16 pixels
var sheet = new ig.AnimationSheet( 'player.png', 16, 16 );

// This creates the "run" animation: it has 6 frames (the 2nd row 
// in the image), with each one being shown for 0.07 seconds
var run = new ig.Animation( sheet, 0.07, [6,7,8,9,10,11] );

Similarly, here's the code needed to create and draw a background layer:

// Create a 2D tilemap
var map = [
 [5, 3, 4],
 [2, 7, 1],
 [6, 0, 3]
];

// Specify a layer with a tilesize of 16px and our tilemap
var layer = new ig.BackgroundMap( 16, map, 'tileset.png' );
layer.draw();

You don't have to create these tilemaps by hand. Impact comes with a powerful level editor called Weltmeister, which makes it easy to draw background layers and position your entities (non-static objects in the game world) in your levels.


When drawing on a Canvas, the performance is mostly bounded by the number of draw calls. It is far more efficient to draw one or two very large images than to draw several hundred small ones. This means that drawing background layers tile by tile can be quite slow, especially on mobile devices.

The Impact engine therefore has a special "pre-render" mode that you can enable on background layers. This mode will first draw the tilemap into large chunks of 512x512 pixels when loading a level, and then use these chunks to fill the screen instead of drawing the layer tile by tile. With this technique, you can get good frame rates even for fast-paced games on Android and iOS devices.

Impact also handles sound, input, timing, and much more for you. It's by no means a game engine that can do everything – and it doesn't try to be one – but it's very good at the things it can do.


Come see Impact in the Developer Sandbox at Google I/O on May 10-11.

Dominic Szablewski is the creator of the Impact Game Engine. He recently finished his Bachelor Thesis about HTML5 Gaming and now lives the dream by selling Impact and making games.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: Over the last few months, I've started inviting web gurus I know to give tech talks at Google. It's been great to kick off this speaker series with such luminaries as John Resig, Doug Crockford, and PPK. (I snuck in there, too.) The biggest benefit from these talks is the release of the videos and slides. The videos are popular, with thousands of viewers. The videos make it possible to share these insights with a wider audience who might not be at the next tech conference or workshop.

For various reasons (t-shirts, YouTube playlist), it's beneficial to give this speaker series a name. I've decided to call it Web E^xponents. I use "exponents" in the sense of "a person who actively supports or favors a cause". The cause, in this case, is evangelizing innovation and best practices in web development. And now, thanks to fellow Googler Mark Chow, we have the Web Exponents playlist on YouTube. You can find all the past and future videos there.

Web E^xponents speakers coming up next include Rob Campbell (Firebug) and Nicholas Zakas (Yahoo! JavaScript expert). I'll write a blog post for these and other future talks, and you can subscribe to the playlist to make sure you catch all the videos.

And now for the mandatory cheesy tagline: Web E^xponents - raising web technology to a higher power.

By Steve Souders, Performance Evangelist2013, By: Seo Master

Seo Master present to you: We launched Chrome Experiments last month to feature some of the crazy things that are now possible with JavaScript. Since then, a number of developers have submitted additional experiments, many of which have made us smile -- take a look at a few of them.

In May, we're going to feature Chrome Experiments during Google I/O, our largest developer event (May 27 - 28), as well as on the Google Code blog.

So if you haven't already started experimenting, here's your chance to create something cool, fun, or quirky with JavaScript. Please submit it by May 26th. We'll reveal the top ten experiments here on the Google Code Blog during Google I/O.

Happy experimenting!

By Aaron Koblin, Google Creative Lab2013, By: Seo Master

Seo Master present to you: Earlier today Meebo announced Extended Authentication (XAuth), an open platform that makes it possible for users to bring their preferred services with them across the web.



To learn more about XAuth and why we're among the supporters of this technology, check out our post on the Social Web Blog.



From a technical perspective, we wanted to offer you some additional insights into how this technology works.



If you visit Meebo's XAuth page, you should see an array of logos:





When this page loaded, it requests the list of services that have been registered with XAuth by making an HTML5 window.postMessage request to xauth.org. As you can see in the graphic, no active sessions were detected.



When the user clicks through to one of the linked demo pages — we'll use googxauthdemo.appspot.com in this case — the same JavaScript is loaded from xauth.org. When the user successfully authenticates, some basic information is pushed to the browser's HTML5 localStorage:This information — that the user has an active session at googxauthdemo.appspot.com — is now available to any site on the web (because extend: ["*"] uses the wildcard case to make this information world-readable; providers can also choose to restrict access to this information to certain domains or partners).



Upon returning to meebo.com/xauth, the page requests the list of active sessions from XAuth, and passes the browser an array of domains that the browser will match against the local storage for xauth.org:

The major performance and scalability benefits of this design are a result of the single HTTP request made to xauth.org to determine which services are currently active, rather than one-request-per-domain. The request and response are also purely client-side, so there's no waiting for a server to look up anything in a database — and the XAuth JavaScript files get cached after they are first retrieved, making XAuth overall very efficient.



Once the tokens are retrieved the program iterates through them looking for matches, and then modifies the interface according the service token discovered, like this:

In this way, site publishers can detect a user's set of active and preferred services, or request a subset of known services, and present only those services which are known to be currently active. In practice, the list of services provided at any given time by xauth.org should not be considered exhaustive, but instead a suggestion for how to prioritize complex service selection dialogs and interfaces, like those known as "NASCAR" interfaces.



For more technical information about XAuth, please read the spec, or visit the informational page on xauth.org.



Posted by Chris Messina, Social Web Team2013, By: Seo Master

Seo Master present to you: Posted by DeWitt Clinton, Google Developer Programs

The AJAX Search team launched a new API this morning that introduces a subtle, yet powerful new way to integrate syndicated content into your web applications.

The Google AJAX Feed API provides functionality that allows webpages to retrieve any public RSS or Atom feed via a simple JavaScript method call. The data can be retrieved in either JSON or XML format, enabling web applications to easily mash up and consume the contents of public feeds. Some of the best content on the web is being syndicated over RSS and Atom channels; this API should help web developers quickly integrate rich external data sources into their web applications, while leveraging Google to do the the heavy lifting of crawling, caching, and content normalization.

Read more on the AJAX APIs blog, join the discussions in the developer forum, or see an example to get you started.2013, By: Seo Master

Seo Master present to you: In case you missed it on the Google Web Toolkit Blog, check out this HTML5 port of Quake II. (Yep, that is a browser pushing 30 frames per second)



For more info, read the full post on the GWT Blog.

By Stephanie Liu, Google Developer Team2013, By: Seo Master

Seo Master present to you:
This post is by Roland Steiner of the Chrome Team. Roland works mainly on layout and rendering for Chrome and WebKit. An Austrian native, Roland has ventured far and made Tokyo his second home. -scottk

Many web applications allow users not just to edit plain text, but also to embellish it – making it bold or underlined, adding bulleted lists or images. For example, think of online document or blog editors, or rich e-mail apps. JavaScript provides various APIs you can use to implement these apps.

Unfortunately, while these APIs are largely defined the same in modern browsers, the results often differ. To document the current state of all this, we have set up a new rich text editing test suite as part of the larger browserscope framework.

Let’s look at how a region of text, such as a <div>, can be marked as editable by adding the contenteditable attribute:

<div contenteditable="true"> ...some content... </div>


You can then manipulate the content with simple calls:

document.execCommand("formatting command", showUI, parameter)

For example, you can set the color of the selected text to red with this call:

document.execCommand("forecolor", false, "red")

Although this command works well on most browsers, different browsers implement different subsets of formatting commands, and even common commands often produce varying HTML structures.

There are other APIs that affect selection and cursor movement, or allow querying of the current state, and those, too, are often implemented differently.

Our new test suite tries to capture all currently implemented commands and APIs, and runs them on varying initial HTML content and within various containers. The suite already contains well over 1,000 tests.


We don’t want to stop there. We intend to grow the suite and incorporate external feedback and suggestions so we can arrive at a common set of editing functions. We hope this can then serve as a common reference, not only for browser implementers, but also for web developers.

To achieve this goal, we would like input from anyone interested in this topic, including those with past complaints about bugs and incompatibilities in this area.

For suggestions, criticism, and general discussion on the suite and tests, please send feedback to the browserscope mailing list at browserscope@googlegroups.com.

2013, By: Seo Master

Seo Master present to you: Over the past year or so, my contributions to Google Chrome have mostly been behind the scenes: improving our base libraries, security, stability, and performance. But recently, I made an addition to Chrome Experiments, a site we just launched today. With the Monster experiment I had a chance to step back from working deep within Google Chrome's C++ code, and give my right brain a little exercise.

Since web browsers don't currently support native 3D graphics, the basis for my experiment is a custom 3D rendering engine written in JavaScript. It uses some pretty intense numerical computations to project the 3D shapes into a 2D image, like your eye would. These are then drawn to the screen using the HTML5 canvas element. This process is a similar concept to early 3D game engines, before accelerating graphics cards handled the work.

JavaScript wasn't originally designed with intensive mathematical computation in mind; the real trick is not in writing the engine, but making it perform well in the high-level language running in your browser.

Compared to creating the 3D model beforehand and embedding the data in the application, Monster creates the mesh using software algorithms in real time while the demo runs. This has some nice advantages like decreasing download time, but it requires even more processing power to draw every frame.

Here's what it looks like in action:



The demo starts with a simple cube, but as it progresses, the cube is smoothed and pulled apart to become exponentially more complex. The values used in these operations are varied over time, creating an animation that brings the monster to life. Anytime during the demo you can hit 'p' to pause, and explore the scene with your mouse. With a bit of careful programming (ok, a lot) and the performance of V8, it's possible to do all this work and still generate smooth and consistent graphics.

So give it a try and take a look through the other Chrome Experiments on the Google Chrome Blog. If you've made something interesting with JavaScript please submit it, too. We'll be highlighting more experiments and holding sessions Google Chrome at Google I/O on May 27 - 28 in San Francisco.

By Dean McNamee, Google Chrome Team2013, By: Seo Master

Seo Master present to you:
By Doug Fritz, Creative Lab

Today we’re sharing a small open source project called Tailbone that lets developers read and write to the Google App Engine Datastore using JavaScript. We’re hoping that it makes App Engine a bit more accessible to developers who aren’t familiar with Python, Java or Go, or prefer not to use them.

I share an office with three creative programmers who work almost entirely in HTML5 and JavaScript. An important part of our work is writing server-side code for new projects that read or write data to to the App Engine Datastore or use Google accounts to store authenticated user-specific information. To make that process easier for my JavaScript-fluent colleagues, I created Tailbone to act as a RESTful API for an app’s Datastore.


To get started, you still have to install App Engine’s SDK and Python, but after that you’re all set. We’ve written a detailed tutorial that guides you through the installation and an example app for creating an authenticated profile page with an editable name and photo.

It’s my hope that Tailbone makes App Engine a little bit less intimidating for people who don’t have much experience with server-side coding. I know there are a few in my office. If there are any others out there, this is for you.


Doug Fritz is a programmer with the Creative Lab’s Data Arts Team. He thinks large amounts of data taste slightly purple and strongly wishes the government used bugzilla.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: By Steve Souders, Member of Technical Staff

Doug Crockford, from "The Yahoo!" (his words), gave a talk at "The Google" (again, his words) last week. The talk is based on his recent book of the same name, JavaScript: The Good Parts. Doug is a, perhaps the, JavaScript guru who has undertaken responsibility for helping the world's web developers embrace JavaScript and use it successfully to build clean, fast web applications. He is the creator of JSLint, JSMin, and JSON. (Notice a theme?)

Doug was hitting on all cylinders. I've heard him deliver this talk before, but this rendition was off the scale in terms of clarity, humor, and takeaways. He flowed effortlessly from broad observations to detail-oriented code samples.

He begins with the observation that JavaScript is one of today's most used languages, so it obviously has gotten something right. Despite this success, JavaScript has plenty of bad parts: global variables, semicolon insertion, with and eval, and more. There's confusion with false values. Consider this example:

'' == 0
0 == '0'
'' != '0'

In JavaScript, all three of these statements return true. Doug highlights other traps that are easy to fall into using for..in, ++, and typeof.

He delivers a clear, concise tutorial on object-oriented JavaScript and closures. The most satisfying piece to me was his clear explanation of why right-curlies ("block {" all on the same line) is the only acceptable style in JavaScript.

Tune in to the video below, and follow along with the presentation. It's enjoyable and enlightening. What a great combination. Thanks, Doug!

2013, By: Seo Master

Seo Master present to you: By Ben Lisbakken, Google Developer Programs

On Friday, February 29th, Google will be holding a developer hackathon to get you started on our JavaScript APIs. We will be doing short introductions of the APIs and then breaking up into groups for coding and camaraderie. There will be plenty of Google engineers present to ask questions and get help from. Food will be provided and there will be prizes.

The event is open to anyone in the community that wants to learn about some Google API's, do some coding, or ask some questions. So please bring your laptops and come hang out at Google.

We'll be covering the following APIs:

• Google Gears
• Google AJAX Search/Feeds
• Google Gadgets
• Google Maps
• Google Calendar
• Blogger

The event will be held in two sessions, the first from 2:00PM - 5:30PM and another from 6:00PM - 10:00PM. You are welcome to stay for both.

To attend, all you need to do is RSVP and let us know you can make it, and be sure to add the event to your calendar.

Hope to see you there!2013, By: Seo Master

Seo Master present to you: By Steve Souders, Google Developer Team

Although Mozilla is right across the street, their JavaScript evangelist, John Resig, hails from Boston. When he comes to town, it's a great opportunity to learn about his current explorations in the world of JavaScript. I was fortunate to be able to host him for a Google tech talk last week. The video and slides are now available. In addition to his evangelism role at Mozilla, John is the creator of jQuery and Dromaeo, author of Pro JavaScript Techniques, and member of the Firebug Working Group. He's currently working on Secrets of the JavaScript Ninja, due out sometime this year.

In this talk, John starts off highlighting why performance will improve in the next generation of browsers, thanks to advances in JavaScript engines and new features such as process per tab and parallel script loading. He digs deeper into JavaScript performance, touching on shaping, tracing, just-in-time compilation, and the various benchmarks (SunSpider, Dromaeo, and V8 benchmark). John plugs my UA Profiler, with its tests for simultaneous connections, parallel script loading, and link prefetching. He wraps up with a collection of many other advanced features in the areas of communiction, DOM, styling, data, and measurements.



Wow, a lot of material to cover in one hour. An added benefit of having this talk given at Google is the questions from the audience. At one point, a member of the Google Chrome team goes into detail about how parsing works in V8. Many thanks to John for sharing his work and insights with all of us.

2013, By: Seo Master

Seo Master present to you:

Marcin

Aaron

By Aaron Wheeler, Senior User Experience Prototyper, and Marcin Wichary, Senior User Experience Designer

Cross-posted with the Chromium Blog

It took approximately 2000 years for the original Rosetta Stone to be discovered, which helped translate the Egyptian Hieroglyphs. We couldn’t wait that long to bridge the Dart and JavaScript worlds, so today we are releasing the JavaScript to Dart Synonym app.

Like most web developers, we are familiar, comfortable, and productive with JavaScript. We were curious about Dart, and thanks to a recent Dart hackathon, we had the chance to play with the language and libraries. The problem was, as JavaScript developers, we didn’t know how to map common JavaScript idioms to Dart. Hence the idea for this synonym app was born.

We started with the basics that every JavaScript and jQuery developer knows: variables, arrays, functions, classes, DOM manipulation, and many more. Then, with the help of the Dart team, we recorded the corresponding Dart versions of each idiom. To practice what we learned, we wrote this app with Dart.


We hope our app that maps between JavaScript and Dart eases your introduction to Dart and gives you a sense of where the project is going. We know the team is eager to hear your feedback. Don’t hesitate to join the conversation or file a new issue for either Dart or the Synonym app. And remember, Dart isn’t set in stone, so your feedback counts.


Aaron Wheeler is a user experience prototyper working on special projects that go beyond the Web. He balances design and engineering outside of work as well, splitting time between artistic pursuits and bicycle maintenance.

Marcin Wichary is a user experience designer, currently working on the Chrome browser and thinking of the future of the Web platform. He also occasionally codes interactive homepage doodles, such as Pac-Man and Stanislaw Lem.

Posted by Scott Knaster, Editor

2013, By: Seo Master