Articles Tagged 'Work'

jQuery: round edges on the images to overlap

Because of the different rendering across browsers, Microsoft Internet Explorer definitely see that in mind, we must always resort to tricks to apply special effects that now should be a standard. The award-discussed rounded edges are a classic example of "disaster" produced by the complete inability to make a serious standards on page rendering HTML / CSS. , etc… There are many solutions that allow the network to obtain the "effects" (effects of exempting existing HTML as rounded edges, shadow effects, reflections, etc ...) with patches on the leaves of styles, special tricks with the use of div grafted, libraries JavaScript, use of canvas , etc ...
On a purely technical teaching I would like to explain further (cross-browser) to apply the rounded edges of the images:

Demo and source

Continued ...

CSS3: has anyone seen the Internet Explorer?

I just do not ...

1
2
3
4
5
6
7
8
9
{p
/ * Rounded Corners * /
; /* CSS 3 */ border-radius: 9px; / CSS * 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -ICab-border-radius: 9px; / * iCab * /
; /* Konqueror */ -Khtml-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Continued ...

jQuery against everyone: a benchmark with 5 browser

image A good developer has no problem to switch from one programming language to another. The choice to focus on a particular language, framework or development environment, is dictated more by the availability of time and the type of work that takes place. However, an important factor that may influence the choice of "frameworks" such is the sympathy and affection that can mature over time.
Specifically, I wanted to analyze some - certainly not all - JavaScript frameworks available today, because even "advised" to take a look especially at jQuery .
The creators of mootools (one of the most popular JavaScript frameworks) have made ​​available a tool to run a speed test and validity of five well-known JavaScript frameworks: Slickspeed . This test, the outcome is not discounted at all, it is important to operate as client-side Javascript frameworks, that are executed by your 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. Indeed, it may well happen that a particular site is really more "fast" when viewed in Safari, but this does not mean that "all sites" will be faster with Safari! Obviously this is true for any other browser.

The benchmark

In the test I made ​​with Slickspeed I compared the browsers available on my machine (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2.4GHz with 8Gb RAM).
Unfortunately, the tests are not able to run with Internet Explorer 7, as the car crashed, even going out of scale with the results! Once again, congratulations Microsoft.
I crercato to maintain the same status of the PC during the test run, opening the browser and not individually by sending no other processes running.

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

image

Google Chrome is really fast results, with a value of 68 (average) in the test with jQuery . The slower, however, was Flock , despite coming from the same "mother" Mozilla. This poor performance of Flock is really curious as its cutting social networks, because it is precisely the Social Network Web 2.0 to take advantage of many JavaScript frameworks available, so as to provide an experience of truly innovative navigation and interaction.
Surprisingly beats FireFox and Opera also has a nice little ', achieving even a 74 in the performance of Dojo ! FireFox and Safari, on balance, are similar, with Safari faster in tests with Mootools and jQuery.

Which framework to choose?

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

An example

This last reason, for example, led me to replace the coupled prototype / scriptaculous with jQuery to create interactive panels / Animated undolog.com here in the sidebar. In fact, even using Google API to import libraries, it is wasteful to load all the library and scriptaculous for a slideDown slideUp. For information and an example, here is the Javascript code as it was coupled with the prototype / scriptaculous:

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

and it is now with jQuery:

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

All in all, a closer look, I do not think there is a lot of difference! But as I said before ... the question is "also" of personal taste.

Continued ...

Firebug Lite: Firebug for IE, Opera and Safari

Using Firebug Lite you can use a simplified version of the note on the extension for FireFox browsers Microsoft Internet Exploer, Opera and Apple Safari. Firebug Lite can be used in two ways: as a call as a library offline or Bookmark

Bookmark fashions

Adding this "special address" Firebug Lite to our bookmarks (drag the link into my favorites) - the code is:

1

You can enable Firebug Lite on any Web site from any browser. This is perhaps the most attractive option, although the functions are very limited.

Offline

Alternatively, if we are developing a Web site, you can download a JavaScript and install it on our site! In this way we can use Firebug Lite even without an Internet connection and locally.

Firebug Lite is a way to compensate for the lack of this extension to other browsers, but I was slow and very limited, especially in CSS! As they say, better than nothing ...

Continued ...

Made in the image resizing on browser

In principle, when you insert an image in an HTML document should be used to its original size. However, the TAG IMG allows you to force the width (width) and height (height) of any image, regardless of the original size. This scaling is done - of course - from the browser.
Use the original size of an image is good, although in some cases involves a double work for the Web Designer and / or dynamic engines (such as CMS or libraries of graphics manipulation) on the Web Server. A classic slide show, for example, usually shows previews or thumbnails (small images) show that if you select the original image larger.

Continued ...

Browser War: the war continues?

A Sunnyvale, California, brings together Yahoo to Silicon Valley WebBuilder Mike Shaver of Mozilla, Chris Wilson, Microsoft's IE team, and Hoon Lie of Opera, to discuss the current state of eternal war between browsers.

Be emphasized are the words of Mike Shaver of Mozilla:

Do not look to the W3C for the Future

And the criticism of Apple's non-attendance:

They refused to send someone Saying That "we are busy writing software."

That, among other things, is 10 miles from where the meeting took place!

Continued ...

browsershots.org: Multiple browser output

Here is the response to the dramatic incompatibilities with different browsers currently available. Browsershots.org is a service - free and open source for now - that provides an easy way to check if a site is displayed in the same way on different platforms and different browsers.

Thanks to a small server-farm home, the authors of this useful service to provide video output of the screens generated by your web, so you can verify the correctness of the interpretation HTML / CSS on different machines and browsers: PLD Linux 2.0 ( Ac), Windows 2003 (Server), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) and others.

browsershot-serverform

The site is really well looked after, with a lot of wiki documentation, sources, roadmap and timeline. . You can also view the latest screenshots, the state-of-queue process and the status of the factories. The only sour note, but surmountable, is the time required for the generation of screen-shot, a little 'slow! However, it is a big help to the web developer to verify the correctness of their work, without having to install any browser and / or virtual machines to live - for example - Internet Explorer 6 and 7. Virtually all browsers are supported by FireFox to Safari. Interesting is the possibility of verifcare IE6 and IE7, along with versions 5.01 and 5.5.
Well done!

Continued ...

Internet Explorer 7 and Opera: A world apart

Conitnua to astonish the total difference in yield between different browsers on the market. IE7 handles PNG (8-bit or 24) in a manner different from Firefox. Even Opera is not free from some strange event in this regard. In particular, the PNG used as background are made differently from IE7, Opera and FireFox. This is all well behaved and in this regard it is time to appoint browser's "century"! Congratulations to the development team.

IE7 creates a nice cutting effect of a PNG image used as background repeat-x. If you try to create an image of 200 × 200 pixels with a gradient from black (0 × 000000) to gray (0xEEEEEE) vertically and placed in the body in the CSS as a background orizzonale repeat (repeat-x), setting the background body color 0xEEEEEE - or the end of the gradient, you will notice that only the detachment makes it perfectly FireFox, IE7 and Opera show a nice cutting effect (but slightly different !!!): in practice we see the end of our image 200 × 200 and the beginning of the flat color background.

One way to solve the problem is to save our image to GIF ...

But the NPCs were not supported by IE7?

Continued ...