Group items tagged

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. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc. 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. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs). 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). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.

At the start of this year, I sat down to write the "Errors and Debugging" chapter of Simply JavaScript. I cracked my fingers, dove into the landscape of JavaScript debugging tools, and emerged very disappointed several hours later. At the time, Firefox was the only browser with a JavaScript debugging tool worth writing about: Firebug. Less than a year later, the landscape has changed dramatically. Every major browser has introduced new development tools that make it easier to diagnose problems with your HTML, CSS, and JavaScript code right inside the browser in question. But can any of these tools stack up against the slick and effortlessly powerful tools provided by Firebug? Let's take a look.

I have revisited adding Yui compressor into my work's ant build script to minify JS and CSS scripts. The current jar was yuicompressor-2.3.5.jar . It took a lot of playing around but I finally stumbled on how to get it to work. Here is the snippet for the yuicompressor. I had to jump through a couple hoops like overriding the current js/css scripts with the optimized js/css scripts. I'll release a full working copy in a zip, you can run against your webroot. We achieved an average 18% compression rate for all our js/css files.

"SHJS is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser. SHJS uses language definitions from GNU Source-highlight. This gives SHJS the ability to highlight source code written in many different languages: Bison C C++ C# ChangeLog CSS Desktop files Diff Flex GLSL Haxe HTML Java Java properties files JavaScript JavaScript with DOM LaTeX LDAP files Log files LSM (Linux Software Map) files M4 Makefile Objective Caml Oracle SQL Pascal Perl PHP Prolog Python RPM spec files Ruby S-Lang Scala Shell SQL Standard ML Tcl XML Xorg configuration files SHJS comes with themes taken from the Highlight program. SHJS is distributed under the GNU General Public License version 3. "

SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn't depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.

Master HTML5 with JavaScript and CSS3 with proficient HTML5 training from experienced trainers at Multisoft Systems. Complete assistance through mock tests, progress reports and in-depth analysis.

Response to marbux comments.

# See also my comment on the same web page that explains why HTML 5 is NOT it for document exchange between web editing applications. . - comment by marbux # Response to marbux supporting the WebKit layout/document model. Marbux argues that HTML5 is not interoperable, and CSS2 near useless. HTML5 fails regarding the the interop web appplications need. I respond by arguing that the only way to look at web applications is to consider that the browser layout engine is the web application layout engine! Web applications are actually written to the browser layout/document model, OR, to take advantage of browser plug-in capabilities. The interoperability marbux seeks is tied directly to the browser layout engine. In this context, the web format is simply a reflection of that layout engine. If there's an interop problem, it comes from browser madness differentials. The good news is that there are all kinds of efforts to close the browser gap: including WHATWG - HTML5, CSS3, W3C DOM, JavaScript Libraries, Google GWT (Java to JavaScript), Yahoo GUI, and the my favorite; WebKit. The bad news is that the clock is ticking. Microsoft has pulled the trigger and the great migration of MSOffice client/server systems to the MS WebSTack-Mesh architecture has begun. Key to this transition are the WPF-.NET proprietary formats, protocols and interfaces such as XAML, Silverlight, LINQ, and Smart Tags. New business processes are being written, and old legacy desktop bound processes are being transitioned to this emerging platform. The fight for the Open Web is on, with Microsoft threatening to transtion their entire business desktop monopoly to a Web platform they own. The Web is going to be broken. There is no way of stopping Microsoft at this point. What we can do though is focus on Open Web solutions that are worthy alternatives to Microsoft's proprietary push. For me, this means the WebKit layout/document model supported by Apple, Adobe and Google. ~ge~

A CMS expert argues for HTML over XHTML, explaining his reasons for switching. Excellent read! He nails the basics. for similar reasons, we moved from ODF to ePUB and then to CDf and finally to the advanced WebKit document model, where wikiWORD will make it's stand.

TweetDeck v0.25 Integrates Facebook & Twitpic Previews - TweetDeck is a personal browser used to stay in touch with the latest happening around us and connect you with your contacts across Twitter, Facebook and more. TweetDeck v0.25 recently released..." />

Disable YouTube's related videos With a Simple Hack Code - YouTube added the feature "related videos" wayback in 2007. Iam sure every YouTube user come across with this feature. Once the video completes playing, will displays a list of related videos..." />

"DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features: Variable length pagination On-the-fly filtering Multi-column sorting with data type detection Smart handling of column widths Display data from almost any data source DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc) Scrolling options for table viewport Fully internationalisable jQuery UI ThemeRoller support Rock solid - backed by a suite of 2800 unit tests Wide variety of plug-ins inc. Editor, TableTools, FixedColumns and more It's free! State saving Hidden columns Dynamic creation of tables Ajax auto loading of data Custom DOM positioning Single column filtering Alternative pagination types Non-destructive DOM interaction Sorting column(s) highlighting Advanced data source options Commercial support available Fully accessible for screenreaders / keyboard access Sensible file size: 68K minified, 20K gzip'd Extensive plug-in support Sorting, type detection, API functions, pagination and filtering Fully themeable by CSS Solid documentation 130+ pre-built examples"

"The session presented by Andy Idsinga (@pithy_uji) and Ujwal Paidipathi (@andyidsinga) seems like pure wizardry. The idea being you get your web code HTML, CSS, JavaScript, Web API calls, embeddable code etc and then convert it to an application through programmable API's for MeeGo and AppUp."

If you're looking to execute javascript code whenever someone finishes (or stops temporary) scrolling, moving the mouse, or resizing the page, you may find the following segment of code useful.

qooxdoo is a comprehensive and innovative Ajax application framework. Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed. It includes a platform-independent dev

"Essentially, a widget is a local HTML/CSS/JavaScript web application. A mobile phone user downloads a widget once, and from that moment on he has a web application stored locally on his mobile phone. Although currently widgets are mostly used for relatively limited functions such as clocks, RSS readers, or Twitter or Flickr clients, as well as for games, there's no theoretical reason why they couldn't contain a complete, complicated, JavaScript-heavy web application; for instance a mobile-optimised spreadsheet application."

The Lightbox Clones Matrix This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes. Comparison of various scripts that display images and other objects in somehow cool CSS popups

"iUI: User Interface Framework for Mobile Web Devices iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices. "

Best Css Loader For Front-end Developers- Gscode

"For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5 Widgets, lists and scrolling goodness using JavaScript & CSS3 Make native mobile apps or web apps with the same code Works great with PhoneGap"

" Dojo Mobile is a world class HTML5 mobile JavaScript framework that enables rapid development of mobile web applications with a native look and feel on modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android and RIM smartphones and tablets. Dojo mobile is completely free with no-hassle liberal licensing under either the NewBSD and AFL open source licenses. "