Node.js and the power of JavaScript

node.js in brief:

- Server-side Javascript
- Built on Google’s V8
- Evented, non-blocking I/O. Similar to
- EventMachine or Twisted.
- CommonJS module system.
- 8000 lines of C/C++, 2000 lines of
- Javascript, 14 contributors.

This is the node.js project: To provide a purely evented, non-blocking infrastructure to script highly concurrent programs.

homepage: http://nodejs.org
interesting doc: http://s3.amazonaws.com/four.livejournal/20091117/jsconf.pdf
presentation video: http://jsconf.eu/2009/video_nodejs_by_ryan_dahl.html

CSS 3 - Shadows

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha).
The property takes 3 lengths and a color as it’s attributes, the lengths are:
the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

Temporally the current support for both WebKit and Mozilla is with the following attributes:
Webkit: -webkit-box-shadow
Mozilla: -moz-box-shadow

Here there is an example:

Lorem ipsum dolor sit amet, class in eu est maecenas. Neque elit arcu nulla. Fames libero ut ultricies sed praesent orci. Condimentum turpis vestibulum risus massa, egestas phasellus ut, fermentum quis mauris nulla in quisque.

Another JQuery example: Drag and Drop and Shake Animation

In this example you can appreciate a simple Drag and Drop created with JQuery. When you drop the silver rectangle on the yellow one you can see the Shake effect.

Drop here

Drag me

JQuery Animation Example

This is what wikipedia says:
jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. The following is an example using slide animation:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

for further information visit JQuery Home Page

Animation example with YUI (Yahoo User Interface) Library

YUI 3 is Yahoo!'s next-generation JavaScript and CSS library, it was launched on September 2009. This example was done using the Animation Utility. This Utility provides an API for creating advanced transitions between property values.

Open Image
Close Image

If you want to learn more about this Utility you can visit: YUI 3: Animation

Canvas HTML 5

<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this new element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

Some interesting samples in this web: http://www.canvasdemos.com/

Floating panel always in the same position

To implement this behavior I call a javascript function in the onScroll event within the body tag. The function looks like this:

document.getElementById("FloatingDiv").style.top=document.body.scrollTop+100;

NOTE: If you are using Mozilla/Firefox, Safari 3 or Chrome you can see the round corners. This is a new CSS3 property (border-radius).

webkit (safari/chrome): -webkit-border-radius
gecko (mozilla/firefox): -moz-border-radius

click here and see how it works!

I am always in the same position!

close me!

Create a simple popup with JavaScript and CSS

To create this popup effect you should have a back div (the black one) with the following style:

position:absolute
z-index:50
top:0
left:0
height:100%
width:100%
background-color:black
opacity:0.7


This layer has a z-index between the page and the popup (z-index = 50)

The popup is another div with the following style:

position:absolute
z-index:100
top:45%
left:45%

This panel is over the back layer (z-index = 100)


Click the following link to see the sample!
Open popup!

This is a sample popup...
Close it!

CSS 3 - Opacity

CSS3 has a specific property that controls the transparency of an element, aptly named "opacity". It takes as its value a number from zero to one, representing the degree to which the element is opaque. A value of zero means completely transparent and one means completely solid.
This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
Firefox/Opera/Safari uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Move the mouse over the thundercats image to see the opacity effect.

Current Browser Support:
FireFox (3.0.5)
Google Chrome (1.0.154.36)
Opera (9.6)
Safari (3.2.1, Windows)

Check your browser with Acid3

Acid3 is a test page from the Web Standards Project that checks how well a web browser follows certain selected elements from web standards, especially relating to the Document Object Model and JavaScript.

When successful, the Acid3 test displays a gradually increasing percentage counter with colored rectangles in the background. The percentage displayed is based on the number of subtests passed. It does not represent an actual percentage of conformance as the test does not keep track of how many of the subtests were actually started (100 is assumed). In addition to these the browser also has to render the page exactly as the reference page is rendered in the same browser. Like the text of the Acid2 test, the text of the Acid3 reference rendering is not a bitmap, in order to allow for certain differences in font rendering.

Acid3 was in development from April 2007, and released on 3 March 2008. The main developer was Ian Hickson, who also wrote the Acid2 test. Acid2 focused primarily on Cascading Style Sheets, but this third Acid test also focuses on technologies used on modern, highly interactive websites characteristic of Web 2.0, such as ECMAScript and DOM Level 2. A few subtests also concern Scalable Vector Graphics (SVG), XML, and data URIs. Controversially, it includes several elements from the CSS2 recommendation that were later removed in CSS2.1 but reintroduced in W3C CSS3 working drafts that have not made it to candidate recommendations yet.

Site: http://www.acidtests.org/

URL to check your browser: http://acid3.acidtests.org/

Original article: http://en.wikipedia.org/wiki/Acid3

Gecko

Gecko is a layout engine currently developed by Mozilla Corporation, known as the layout engine of the Firefox web browser, Mozilla Application Suite, Nvu, Mozilla Thunderbird and many more. It is designed to support open Internet standards, and is used by applications such as Mozilla Firefox, Camino, Flock, SeaMonkey, K-Meleon, Netscape 9, Lunascape to display web pages and, in some cases, an application's user interface itself (by rendering XUL). Gecko offers a rich programming API that makes it suitable for a wide variety of roles in Internet-enabled applications, such as web browsers, content presentation, and client/server. Development originated with Netscape Communications Corporation, but soon moved to the Mozilla Foundation for the Mozilla application suite, and now used in many applications developed by Mozilla Foundation and or the Mozilla Corporation, as well as many other open source software projects. It was also used in later Netscape Navigator releases.

Gecko is written in C++ and is cross-platform, and runs on various operating systems including BSDs, Linux, Mac OS X, Solaris, OS/2, AIX, OpenVMS, and Microsoft Windows. Its development is now overseen by the Mozilla Foundation. Licensed by a tri-license of the Mozilla Public License (MPL), GNU General Public License (GPL) and GNU Lesser General Public License (LGPL), Gecko is free and open source software.

Gecko is the second most-popular layout engine on the World Wide Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebKit (used by Safari & Google Chrome) and Presto (used by Opera)

Original article: http://en.wikipedia.org/wiki/Gecko_(layout_engine)

CSS 3 rotation example

If you are using firefox you should see this mazinger rotated:
(Firefox (Gecko) 3.5 (1.9.1) -moz-transform)

If you are using safari/chrome you should see this mazinger rotated:
Safari (WebKit) 3.1 (525) -webkit-transform

If you are using IE...