Confirmed: Google is able to execute and index JavaScript

Quote

1. Ran a series of tests that verified Google is able to execute and index JavaScript with a multitude of implementations. Confirmed Google is able to render the entire page and read the DOM, thereby indexing dynamically generated content.

2. SEO signals in the DOM (page titles, meta descriptions, canonical tags, meta robots tags, etc.) are respected. Content dynamically inserted in the DOM is also crawlable and indexable. Furthermore, in certain cases, the DOM signals may even take precedence over contradictory statements in HTML source code. This will need more work, but was the case for several of our tests.

 

Read more here: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

Advertisements

FASTFOOD: 2013 sẽ là năm cất cánh cho web

Vì sao?

Một số công nghệ web đã trưởng thành và sẽ được triển khai trên nhiều trang web, mang lại nhiều ấn tượng cho user, giảm công sức cho lập trình viên khi phát triển và phân phối ứng dụng

CSS filters, mang sức mạnh đồ hoạ 3D

Cho phép thực hiện nhiều hiệu ứng đồ hoạ phức tạp (làm mờ, đổ bóng, bóp mép, đổi hình dạng của đối tượng, thay đổi mật độ màu, …) bằng các khai báo đơn giản.

Cho phép thực hiện các thao tác đồ hoạ phức tạp như đổ bóng vertex (như dùng GLSL, được ứng dụng phổ biến nhiều năm nay trong các xử lý đồ hoạ 3D)

Xem ví dụ tại CSS Filter

Lợi ích lớn cho các game nền web, các ứng dụng cần những hiệu ứng gây shock về đồ hoạ, xử lý ảnh

 

Google Chrome Apps

Google ko đối đầu trực tiếp với Windows, Mac, Linux, mà họ tạo ra Chrome,  cố gắng làm cho Chrome có mặt tại nhiều nơi, nhiều thiết bị như TV, laptop, điện thoại

Với Chrome, Google mang lại cho các lập trình viên khả năng viết chương trình bằng JS HTML CSS (là đơn giản hơn nhiều so với việc viết bằng C# Java PHP), chạy chương trình trong Chrome.

  • Phát triển nhanh chóng, thuận tiện
  • Rất dễ phân phối (vì có WebStore)
  • Có nhiều khả năng tương tác phần cứng (cổng serial, usb, bluetooth, webcam, mic, loa, âm thanh, …)
  • Vẽ thêm “cánh” (tương tác, tính năng) cho  ”hổ” (các trang web sẵn có)

Hiện tại, viết extension/app cho Chrome là dễ nhất, nhanh nhất và thuận tiện nhất (so với việc viết cho Firefox, IE, Opera)


ECMAScript 6, cải tiến Javascript

ECMAScript 6 (ES6), là cải tiến của JavaScript, sửa các vấn đề “chíu khọ” trong ngôn ngữ JavaScript, cung cấp tính năng mới thuận tiện hơn, dễ bảo trì mã nguồn hơn.

  • thêm class, kế thừa, mixins (lai ghép, tương tự như đa kế thừa trong C++)
  • Hệ thống tải/nạp module (giúp tổ chức mã nguồn gọn gàng, nhanh, dễ quản lý hơn)
  • proxies
  • cải tiến việc gọi hàm bất đồng bộ (asynchronous), vứt bỏ sự rối rắm của các hàm callback

Web Components

Web Components cho ta khả năng thêm tag mới cho trình duyệt, tương tự như những tag gốc sẵn có. VD:

  • Tạo ra thẻ mới (VD mydiv)
  • Tạo style và tính năng cho thẻ đó
  • người dùng khác chỉ cần khai báo thẻ, tương tự như thẻ gốc (div)

Web Components sẽ thay đổi cách viết, sử dụng và phân phối các thư viện JavaScript hiện có theo hướng dễ dàng hơn nhiều.

Tương lai

Các tính năng mới, API mới sẽ được (tự động) đưa vào trình duyệt mới ngày càng nhanh hơn

  • Vì phần lớn các trình duyệt sẽ tự động cập nhật phiên bản mới
  • Với Chrome, cứ 4 tháng là sẽ có một bản mới sẽ được đưa tới 350 triệu người dùng
  • Thị phần của các trình duyệt Webkit đủ lớn, để các trình duyệt khác (như IE, Opera, Firefox) phải chạy theo và đưa tính năng tương đương vào.

Javascript sleep(), will block browser, block setTimeout either

I found this Javascript sleep function here and it works in FF9, Chrome 14 (tested).

function sleep(ms) {
 ms += new Date().getTime();
 while (new Date() < ms){}
}

This function will block browser from doing anything, even setTimeout()
E.g.:

/*BEGIN*/
setTimeout(alert('stupid'), 1000); 
sleep(2000); 
// after sleep completed, setTimeout has its turn to run. 
// The alert() will be shown after 3 seconds from /*BEGIN*/

This might be a stupid thing but sometimes you have to do stupid work and it’s required.

NodeJS quick sum up July 2011

This is my sum up about NodeJS on July 2011, base on some slides (of geeks in my list from BarCamp Saigon 2011). Just a fastfood of what NodeJS is, why is get buzz at the moment.

 

specs

  • JS and C++ code
    + and commonJS module mechanism 
    ——–> on NodeJS binding (http socket IO …)
    ——–>——–> on JS engine V8 + ThreadPool-libIO + EventLoop-libEV + …
  • programming style: evented with callback function, no thread
  • non blocking IO
  • DB support: mongodb couchdb mysql redis
  • package (module of NodeJS) is NPM (not available on Windows?)
  • IDE support: bad, no great debugger, can use cloud9 online IDE
  • hosting: joyent heroku cloudfoundry dotcloud

 

when to use it?

  • chat/messaging
  • real-time applications
  • intelligent proxies
  • high concurrency applications
  • communication hubs
  • coordinators

 

something bad

  • so young, immature
  • lots of stuffs to look at, must lookup API from internet, and remember yourself (function name, parameter, …)
  • retro compatibility, API is (frequently) subject to change
  • hard to find organized (and centralized) and authoritative information

Adding Client-Side Script Blocks with RegisterStartupScript() and RegisterClientScriptBlock()

The System.Web.UI.Page class contains two methods for emitting client-side script code into the HTML rendered by the ASP.NET Web page:

  • RegisterStartupScript(key, script)
  • RegisterClientScriptBlock(key, script)

Both of these methods take two strings as input. The second parameter, script, is the client-side script—including the opening and closing <script> tags—to insert into the page. The first parameter, key, serves as a unique identifier for the inserted client-side script.

The only difference between these two methods is where each one emits the script block. RegisterClientScriptBlock() emits the script block at the beginning of the Web Form (right after the <form runat="server"> tag), while RegisterStartupScript() emits the script block at the end of the Web Form (right before the </form> tag).

From http://msdn.microsoft.com/en-us/library/aa478975.aspx

jQuery animation queue, create DOM element and its properties, ajaxStart and ajaxStop events

animation queue

By default, animations are queued, but you can disable this by setting the queue property to false. Unqueued animations start immediately and subsequent queued animations are not deferred for unqueued animations.

$("img").fadeIn(500)
        .animate({"width":"+=100"},
                 {queue:false, duration:1000})
        .fadeOut(500);
  • The fadeIn() and fadeOut() effects are queued, but the call to animate() (which animates the width property for 1000ms) is not queued.
  • The width animation begins at the same time the fadeIn() effect begins. The fadeOut() effect begins as soon as the fadeIn() effect ends—it does not wait for the width animation to complete.

 

ajaxStart and ajaxStop events

  • When jQuery is not performing any Ajax requests and a new request is initiated, it fires an “ajaxStart” event.
  • If other requests begin before this first one ends, those new requests do not cause a new “ajaxStart” event.
  • The “ajaxStop” event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.
  • These “ajaxStart” and “ajaxStop” event handlers can be bound to any document element: jQuery triggers them globally rather than on any one particular element.

 

DOM Element creating

You probably already know that you can pass a tagname to $() to create an element of that type, and that you can pass (as a second argument) an object of attributes to be set on the newly created element.

  • This second argument can be any object that you would pass to the attr() method,
  • but in addition, if any of the properties have the same name as the event registration methods, the property value is taken as a handler function and is registered as a handler for the named event type.
  • Similarly, if any of the properties has the name “css”, “val”, “html”, “text”, “data”, “width”, “height”, or “offset”, then the value of that property is passed to the method with the same name as the property.
var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");},
                  css: { border: "dotted red 3px" }
               });
 

Sum up from: http://answers.oreilly.com/topic/2353-5-things-you-might-not-know-about-jquery/

Cache control problem with IE6 when do Ajax site call XML API

When create ajax site, we let client browser use js to make some call to our API services (REST). API function return output as XML (our format). Then the js at browser parse the return XML to display some fancy on screen.

Firefox, Mozzila base work fine, but IE6 is so stupid and lazy. IE6 cache the return XML data, and later call to API (with the same URL), IE6 take data from it internal cache, avoid calling from API.

To avoid it, our API server must send some header(s), tell the browser (client) NOT TO CACHE the XML data (fetching from API). You must do it from SERVER, remember.

Here is correct sequence (write in PHP), work for IE6

header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0”, false);
session_start();
header(“Cache-Control: private”);

But, beside the problem with IE (while using js, make ajax call to XML file), using caching with API oriented and ajax call is very sweet.

Some resource I found here about caching:

http://www.htaccesselite.com/using-php-header-function-vt156.html
http://www.phpbuilder.com/board/showthread.php?t=10294526
http://www.websiteoptimization.com/speed/tweak/cache/
http://www.chriskirkland.net/news/59_PHP-Cache-Control-script.html
http://www.badpenguin.org/docs/php-cache.html
http://www.mnot.net/cache_docs/
http://www.htaccesselite.com/using-php-header-function-vt156.html