background preloader

YUI Compressor

YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). How does the YUI Compressor work? Additional notes

JavaScript::DebugScreen デバッグに役立つかもしれないライブラリ 公開 : 2006-01-15 更新 : 2006-01-16 License : Same as Perl See also : サンプル ダイアログはダブルクリックで消えます。 使い方 debug.js debug.css ie_xmlhttp.js ファイルを保存してheadタグの中にこんな感じで貼り付ける。 読み込んだだけで有効になります。 機能を無効にするには DebugScreen.stop() body描画前のエラーは表示できない。 動作環境 IE6、Firefox1.5で動作確認していますが、行番号は正確に出なかったりします。 依存と影響 エラー行を取得するのにXMLHttpRequestを使っています。 追加される変数はDebugScreenだけです。 Pluginの作り方 DebugScreen.registerを使います。 // モニタのサイズを表示 DebugScreen.register("ScreenSize",function(){ return screen.width +" x "+ screen.height }); // 現在表示中のURLを加える var _debug = DebugScreen.register; _debug("Location",location.href); DebugScreen.registerの第一引数にはプラグインの名前。 関数の場合は、その関数の実行結果を返します。 オブジェクトが渡された場合、DebugScreen.dumperを使って文字列に変換されます(デフォルトではtoStringメソッドが使われる)。 仕様 外部jsファイルでエラーが起こった場合 Firefoxだとjsファイル名を取得してくれます。 IEだと常に本体ファイル名を返すみたいです。 evalでエラーが起こった場合 Firefoxだとevalの中での行番号を返します。 IEだとevalが呼び出された行の番号を返します。 ライセンス 「Perlと同じ」 もしくは 「 彼の日記にコメントをつけてあげてください 」 のデュアルライセンス

online - JavaScript-Projekt "Lively" erblickt Licht der Programmierwelt Dan Ingalls, der Chef-Entwickler von Smalltalk und Squeak , hat auf der Squeak-Developer-Mailing-Liste sein neuestes Projekt " Lively " vorgestellt. Dabei handelt es sich um eine dynamische, in JavaScript geschriebene Web-Programmierumgebung. "Lively" soll (künftigen) experimentierfreudigen Besitzern von Geräten wie dem iPhone oder auch dem iPod-Touch eine dynamische Open-Source-Entwicklungsumgebung bieten, die es ermöglicht, eigene Spiele oder Anwendungen zu programmieren. Die Entwicklungsumgebung ist analog zu Squeak im Download von "Lively" integriert. Ein JavaScript-Objekt-Browser kann von der Hauptseite mit einem Klick in die "Development Tools" erreicht werden. "Lively" kann am besten in einem aktuellen Safari-Browser (3.0.3) unter Windows XP und MacOS direkt und ohne Zusatzinstallationen ausprobiert werden, läuft aber auch mit Einschränkungen in den aktuellen Versionen von Firefox (2.0.0.7 oder 3.0-Beta). "Lively" ist zwar schon recht dynamisch, aber noch nicht "wohlerzogen".

Secure Authentication Without SSL Using Javascript Everybody loves the Web 2.0 style of no page loads and seamless transitions (almost everybody). But there are some security limitations placed on the xmlhttp callback objects that make life a little difficult sometimes. For instance, if your page originated on the server you are only allowed to use the xmlhttp request object to request data from If you try and request data from the request will throw an exception and you'll get nowhere. So, for instance, if you want to have your users authenticate over ssl, you either have to do a page reload, or your page has to be on ssl to begin with. A third option is to come up with a scheme to secure the data that needs to be secured without having to use ssl. There are two main stages to this system: registration and authentication. Authentication is a little more complicated, but its not too bad. The flaw here is with registration. // 3 - main loop <?

Das EfA fontsize-Script: Einfach für Alle Widgets ade Fast täglich erreichen uns in der EfA -Redaktion Mails mit der Frage nach dem Verbleib des EfA - Fontsize -Skriptes, das den letzten Relaunch nicht überlebt hat. Die kurze Antwort: Die lange Version der Antwort wollen wir unseren Lesern aber auch nicht vorenthalten: Eine fiktive aber durchaus realistische Diskussion zwischen einem Frontend -Entwickler (im folgenden F. genannt) und einem Projektmanager (im folgenden P. genannt; eventuelle Ähnlichkeiten mit tatsächlichen Personen sind rein zufällig und unbeabsichtigt). Projektmanager ( P. ): »Die Website muss ganz dringend barrierefrei sein. Entwickler ( F. ): »Aber warum? P. : »Egal, wir brauchen so ein Ding, damit endlich diese Mails und Anrufe aufhören, wo sich Besucher über die Unzugänglichkeit der Website beschweren F. : »Das wäre aber doch nur an den Symptomen rumgedoktert und würde nicht die Ursachen kurieren. P. : »Aber unsere Statistiken sagen, dass immer noch 20% aller Besucher den IE6 benutzen. F. : »Kann er wohl…«

Nützliche JavaScript-Funktionen - Byte-Welt Forum ein kleiner anstoss für leute mit javascript-kenntnissen: dieser thread soll dazu dienen anderen selbstgeschriebene javascript-funktionen (auch jscript, da für intranets mit dem IE gut geeignet) anzubieten die die arbeit erleichtern sollen. gemeint sind damit nützliche funktionen wie 'in_array()' aus PHP ich kann solche funktionen auch selbst gut gebrauchen, da ich in meinem 3-monatigen praktikum beinahe ausschließlich mit JavaScript bzw. JScript arbeiten werde. hier mal ein paar von mir: Code: //gibt alle GET-Variablen in einem assoziativen Array zurück function http_get_vars() { var string = window.location.search; string = string.replace("?" //a = suchmuster, b=ersetzungsmuster, c=string function str_replace(a,b,c) { while (c.indexOf(a) ! function nl2br(string) { return str_replace("\n","<br \/>",string); } //a = suchwert; b = array function in_array(a,b) { var stat = false; for (cache in b) { if (b[cache] == a) { stat = true; break; } } return stat; } ich hoffe auf eure beteiligung

Browser Detecting (and what to do Instead) By Richard Cornford, edited by Garrett Smith Introduction Avoiding Structural Differences in the Browser DOMs Browsers Differences Failed Strategies: Browser Detecting Assumptions Based on navigator.userAgent Assumptions Based on DOM Objects: Object inference A Strategy That Works: Object/Feature Detecting. Example 1: IDed Element Retrieval Example 2: Scroll Values Example 3: String.prototype.replace The Javascript Design Problem Under normal circumstances computer programs are written for a known environment. Client side javascript for the Internet, on the other hand, has the possibly unique problem of having to be authored with no specific knowledge of the environment in which it will be executed. Javascript authors for the Internet must realise that they are dealing with the unknown and that any, and all, scripts will fail to execute somewhere. I once read a description of a variant on the game of chess, played at military academies. The game is used to teach battlefield strategy.

How to Drag and Drop in JavaScript - WebReference.com - JavaScript excels at modifying the DOM of a Web page, but we usually only do simple things with it, such as creating image rollovers, making tabs, etc. This article is going to show you how to create items on your page that you can drag and drop. There are several reasons you might want to encorporate this drag and drop ability into your Web pages. One of the simplest reasons is to reorganize Data. As an example, you might want to have a queue of items that your users can reorganize. There's really not much involved with dragging an item around on your Web page. Demo - Drag any of the images Capturing Mouse Movement To start we need to capture the mouse coordinates. We must first explain the event object. To make ev contain the event object in every browser we OR it with window.event. Since we'll need to obtain the mouse coordinates many times over this article we make a mouseCoords function that takes one argument: the event. Again we run into differences between IE and other browsers.

A New Image Replacement Technique: The State Scope Method [CSS Tutorials] Image replacement is arguably one of the most important CSS-based techniques available to a web designer. While some people view image replacement as merely a way to use fonts absent from the client computer, I believe that’s simply untrue. Image replacement has a place on nearly every web site – it can be useful in displaying a variety of page elements: company logos, attractive navigation bars, and fancy paragraph headings. Most importantly though, is its use for the “call to action” buttons; these must stand out in order to attract a visitor’s attention for performing important tasks (like signing up, downloading, or making a purchase). Why Image Replacement is So Important If you already understand the fundamentals of image replacement, you can safely skip this section. Styling text with CSS alone is basically limited to the selection of a few typefaces and flat-shaded coloring. The Problem with Other Methods A New Image Replacement Method First, a Little Background ...

JavascriptTips - jslibs - JavaScript language advanced tips and tricks - standalone JavaScript development runtime environment with general purpose native libraries These tips and tricks are not related to any web browser or any Document Object Model (DOM), they are only general purpose tips and tricks for the JavaScript language. Some of these tricks are using a latest version of JavaScript language (v1.8) and cannot run with the Microsoft Implementation of JavaScript (v1.5). All these tricks has been tested with the Mozilla SpiderMonkey/TraceMonkey JavaScript engine (v1.8). You can try these examples using jshost, a command-line JavaScript interpreter. If you need more explanation about one of the following tips, don't hesitate to ask me or use the comment section at the end of this page. See the TOC at the end of the page. Append an array to another array var a = [4,5,6];var b = [7,8,9];Array.prototype.push.apply(a, b); uneval(a); // is: [4, 5, 6, 7, 8, 9] Milliseconds since epoch +new Date() // 1259359833574 Simulate threads using yield operator JavaScript 1.7 //// thread definitionfunction Thread( name ) { for ( var i = 0; i < 5; i++ ) { prints: note output:

Jon Combe | Code | ExCanvas World Map February 2009 Google Analytics has an excellent map of the world showing where your website visitors come from. My JAWStats web stats project currently does not. :( While I can't ever hope to compete with Google's product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Be warned, if you want to play with the code, my solution contains a nasty hack. Try different views: Google Maps style , news.bbc.co.uk style , style or something a little darker . Example code: Those parameters in detail: The only mandatory field. The colours of the background (the wet bits), foreground (the dry bits) and country borders. Country borders and outlines measured in pixels (note: Internet Explorer doesn't go sub-zero). The gap (if any) to be added between the detail of the map and the edge of the <canvas> . A comma-separated list of country codes you want the map to include or zoom in on. If you want to download and use this in your own project, be my guest. Digg

localStorage: Use it, Don't Abuse It Yetii - Yet (E)Another JavaScript Tab Interface Implementation | kminek.pl Breaking News - Yetii featured in Smashing Magazine! Yetii stands for Yet (E)Another JavaScript Tab Interface Implementation. There are plenty of DHTML tabs scripts out there but most of them are either poorly coded, library/framework dependend or bloated with unnecessary functionality. So I`ve decided to come up with this simple, yet functional tab interface implementation. Features Demo Define custom function to run You can define custom function to run after certain tab is clicked: Manually invoke tab showing method If needed you can invoke tab showing method like this: <a href="#tab3" onclick="tabber1.show(3); return false;">show Tab 3</a> Click here to show Tab 3 Nesting You can nest tab interfaces easily but remember to set different tabclass for nested interface: Tab 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Tab 2 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Next/Previous Basic usage

comp.lang.javascript FAQ - 9.88 - 2007-10-12 Version 32.2, Updated 2010-10-08, by Garrett Smith 1 Meta-FAQ meta-questions 1.1 Which newsgroups deal with javascript? 1.2 What questions are on-topic for comp.lang.javascript? 1.3 What should I do before posting to comp.lang.javascript? 1.4 Why was my post not answered? 2 Language Overview 2.1 What is ECMAScript? 2.2 What is JScript? 2.3 What is the Document Object Model (DOM)? 2.4 Internationalisation and Localisation in javascript 2.5 What does the future hold for ECMAScript? 3 Javascript Resources 3.1 What books are recommended for javascript? 3.2 What online resources are available? 3.3 Javascript Libraries 4 Functions 4.1 What is (function(){ /*...*/ })() ? 4.2 What is a function statement? 5 Dates 5.1 How do I format a Date object with javascript? 5.2 How can I create a Date object from a String? 6 Numbers 6.1 How do I format a Number as a String with exactly 2 decimal places? 6.2 Why does simple decimal arithmetic give strange results? 6.3 Why does K = parseInt('09') set K to 0? 7 Objects 12 Debugging .

Related: