jQuery: round edges on images to overlap

Thursday, October 30, 2008

Because of the different rendering between different browser, which certainly see Microsoft Internet Explorer in mind, we must always resort to apply for artifizi effects that now should be a standard. The multi-discussed rounded edges are a classic example of the "disaster" produced by the complete inability to achieve a standard seriously on page rendering HTML / CSS. There are numerous networking solutions that allow you to have "effects" (effects exempting dall'HTML present as rounded edges, shadow effects, reflections, etc ...) with patches on the sheets of styles, special tricks using div grafted, libraries Javascript, use of canvas etc ...
For purely educational I would explain further technical (cross-browser) to apply to the rounded edges of images:

Demos and sources

Continue to read ... "

Related Post

Create applications with Desktop Chrome Google and FireFox?

Tuesday, October 28, 2008

Chrome Google allows you to create Desktop applications from a Web page? In fact, as shown in the menu item, is simply allowed to create a shortcut to a shortcut that - in turn - opens a window without the address bar without all the frills of the browser. With this does not mean that we have created a Desktop, and we have just created a link to the same Google Chrome mode - so to speak-chrome-less.

Feature Simla, but more ambitious, had already been proposed by the Mozilla Foundation in 2007 through the Prism. This is certainly the most versatile and articulate, accompanied by a useful extension that allows you to create desktop applications menu of FireFox, like Google Chrome.

However, both solutions are far away from technology Adobe AIR. Before someone is confusing the good stress the substantial differences between a shortcut on the desktop, which opens a window without menus, and a desktop application true and proper.
Adobe AIR, in fact, unlike the solutions proposed by Google Chrome and Prism allows:

  • Virtually complete access to the system running the application with the ability to read and write files. Opportunity to extend its functionality through a DLL (dynamic link library), extensions and third-party products as SHU Player (see Distribute Adobe AIR: AIR Badge by a SHU Player)
  • It manages the application like any other system applications: installation and uninstallation

Related Post

jQuery against everyone: a benchmark with 5 browser

Wednesday, September 17, 2008

image A good developer has no problem to move from a programming language to another. The choice to focus on a particular language, framework and development environment, is dictated more by availability of time and type of work that takes place. However, an important factor that may influence the choice of "framework" like, is the sympathy or the illness which can mature over time.
Specifically, I wanted to analyze some - not all - Javascript framework available today, because "advised" to look primarily at jQuery.
The creators of mootools (one of the most popular Javascript framework) has made available a tool to run a test of speed and validity of five known framework Javascript: Slickspeed. This test, the results do not discount at all, is important as the operating framework Javascript client-side, which is run by our browser. It is precisely for this reason that some find Safari faster than Internet Explorer or Google Chrome faster than FireFox. However, this often depends on the type of page you are viewing. In fact, may very well happen that a particular site is really more "fast" when displayed in Safari, but this does not mean that "all sites will be faster with Safari! Of course, this speech is valid for any other browser.

The benchmark

In tests I conducted with Slickspeed I have compared the browser available on my machine (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2.4GHz with a 8Gb RAM).
Unfortunately, the tests are not able to run it with Internet Explorer 7, because blocking the car, even going out of scale with the results! Once again, congratulations Microsoft.
I crercato identical to maintain the status of the PC during the test, opening the browser separately and not sending anyone else running process.

Note: If you feel like you do one or more of these tests, you can comment on this post in case of "curious" and different results.

image

Google Chrome is truly fast, with a value of 68 (average) in the test with jQuery. The slower, however, it appeared Flock, despite coming from the same "mother" Mozilla. This bad result for Flock is truly curious given its cutting Social Network; because it is the Social Network Web 2.0 exploit many of Javascript framework available, so as to provide a navigation and interaction truly innovative.
A surprise beat FireFox and Opera also has a lot ', even getting a 74 in the Dojo! FireFox and Safari, after all, are alike, with Safari faster in tests with Mootools and jQuery.

What framework to choose?

If not badiamo to test the speed of execution and we do not care about the size in Kbytes of the same framework, the answer might be "what's for you" or, if you prefer, "what you know best or is more harmonious with your style of programming. "
Ultimately, these frameworks will look somewhat 'all (see the use of $ for example), despite some important and substantial differences that can jump in the eyes of an expert or really pushed in a particular library. In principle, in fact, everything that can be achieved with jQuery, for example, you can do well with mootools or prototype! If jQuery has a very compact syntax, as all methods always return the jQuery object basis, thus creating endless files of oggetto.metodo().metodo().metodo()... is not told that this is at all costs a strength, especially for those who will have to debug!
Libraries as prototype.js sin perhaps in the absence of graphic effects, even simple, forcing the developer to implement spinoff as scriptaculous.js, heavy and distant from the library first choice.

An example

Just this last reason, for example, took me to replace the coupled prototype / scriptaculous with jQuery to make the panels interactive / animated here in the sidebar of undolog.com. Indeed, even using Google API to import libraries, is a waste load the entire library scriptaculous for a slideDown and slideUp. For information and sample, here yesterday Javascript code coupled with the prototype / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown'). Each (
  3. element ) { function (element) (
  4. = "pointer" ; element. style. cursor = "pointer";
  5. 'click' , element. observe ( 'click',
  6. event ) { function (event) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. next (). style. display == "") new Effect. BlindUp (this. next (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Effect else new. BlindDown (this. next (), (duration:. 3));
  9. event ) ; Event. Stop (event);
  10. )
  11. )
  12. )
  13. );

and it is now with jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown'). Each (
  3. i ) { function (s) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ( 'cursor', 'pointer'). Click (
  5. function () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). is ( ': hidden')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

After all, at all, I do not think there is a lot of difference! But as I said before ... question is "well" of personal taste.

Related Post

Flick and Flock

Tuesday, August 19, 2008

If there is something that Mozilla does have good browsers!

Flock

Flock is a browser with a variety of functions for the social network and blog. Available for Mac, Windows and Linux offers a new experience of browsing on those who, like me, has several accounts in the social network (Facebook, Twitter, YouTube, ...) and will also handle RSS feeds so smooth and quick.

Installation

If you have FireFox (which you must not remove) all your settings can be transferred in Flock during the first use: cookies, passwords, bookmarks, everything short. After using Flock for a few minutes, I came spontaneously remove the excellent FeedReader now unnecessary given the excellent management of Feed the Flock.

Features

In addition to possess many characteristics similar to FireFox, which makes it immediately available, Flock allows:

  • Blog Editor
    Simple but effective editor for the publication of Post on our blog. Supports both personal blog platforms like WordPress, Blogger and Live Journal. Excellent the "notes", the Web Clipboard, found in various parts of the browser
  • People Panel
    Through the simple Drag & Drop you can instantly link and share images with our contacts, recovered from Twitter, Facebook, YouTube and Flickr
  • Media Bar
    Flock can automatically recognize many features when you enter a Web site (Blog or Social Network). For example entering Flickr or YouTube is a Apera Media Bar at the top where you can scroll horizontally movies and photos allowing you to send or copy the contents immediately
  • Search Engine
    The research management is fully customizable (as already happens in FireFox thanks to the Open Search standard) making it possible to easily add a number of alternative search engines, both from a list proposed on the site of Flock is through the automatic recognition in this a site
  • Plugins and extensions
    Even Flock as FireFox already has numerous extensions, a weapon that has proved successful for FireFox. Some are specifically for Flock even if you can find some "porting" of notes FireFox extensions
  • Management of transmission of photos
    With Photo Uploader, you can use an internal Flock to quickly send our photos on Flickr or Facebook.

Related Post

Safari, delete the blue border on input fields

Monday 14 July, 2008

Safari, the Apple browser available for Windows, produces a blue border (blue border) when you click within a field input If in some cases it may be pleasant, others become really annoying! To delete just enter in our style sheet:

CSS:
  1. / * ____________________________ Remove blue border * /
  2. : 0 none } input (outline: 0 none)

Or, alternatively, directly attribute the tag as input

HTML:
  1. ... <input style = "outline: 0 none" ... />

Related Post

Enter the text with CSS: IE7, a bad deal

Tuesday, June 10, 2008

Once again, when I find myself writing about the capabilities of style sheets, I am forced to put aside Microsoft Internet Explorer! With CSS2 was introduced a really interesting feature, property content used in conjunction with the pseudo-elements before and after Through this "style" can alter the content of a site acting solely on the CSS file. For example if we write:

CSS:
  1. content : ">>" } li: before (content: ">>")

A bulleted list LI LI) will each preceded by characters ">>"! Anything, of course, can be treated in this way:

HTML:
  1. fogli di stile </span> </p> <p> can insert characters with <span> CSS </ span> </ p>

CSS:
  1. content : "-->" } p span: before (content:) "-->"

The versatility of this element does not end here! You can use other parameters besides the simple (but useful) text. The content it also allows special values or url:

CSS:
  1. content : url ( images/quote.gif ) } p: before (content: url (images / quote.gif))
  2. content : close-quote } p: after (content: close-quote)
  3. content : url ( waves/sound.wav ) } p: before (content: url (waves / sound.wav))

For details on implementing refer directly to W3C - shame it does not even Microsoft!

Related Post

FireFox 3 RC1 Acid 3

Tuesday, June 3, 2008

Acid 3 Test

We are on track than before! :)

Related Post

FireFox 3: I'm looking forward

Thursday, May 8, 2008

I hold for some time by downloading the beta version of Firefox 3! Use FireFox every day then I do not want scasinare all for the hurry. However, I do not see just the time it reaches the official release of this fantastic browser, that with the release 3 promises wonders that I had the pleasure to try on another machine (beta 5).

FireFox 3

Continue reading ... "

Related Post

Four browsers: Acid 3 Test a disappointment ...

Friday March 28, 2008

To paraphrase the movie Four Brothers, here's who has passed the Acid 3 Test!

image

From top left: IE7, Opera, Safari, FireFox! All recent versions on Windows Vista 64 bit! A disaster! ;)

Related Post

Tunneling and proxy servers for Ajax and beyond

Monday, December 10, 2007

Because of its ability to communicate with the server, the XMLHttpRequest object (XHR), used in technology Ajax (short for Asynchronous JavaScript and XML, whose pronunciation would be "egiacs" even if we Italians prefer "aiacs"), has a block of protection that prevents him from running applications outside the domain in which it operates. This protection is needed to prevent Javascript Injection (techniques of "injection" extremely dangerous code in order to violate the system) of varied types, with the ultimate goal of "break" in the system.
This limit is now taken seriously and is thinking in some way to resolve it - directly into XMLHttpRequest - without jeopardizing the security (see also: Third proposal for cross-site extensions to XMLHttpRequest).

Nevertheless, the situation today is as follows:

XHR

Continue reading ... "

Related Post