SlideShare a Scribd company logo
YUI on the go
How to include YUI components on demand


                   Christian Heilmann
         Yahoo! Frontend Engineering Summit UK
                     December 2007
Why use libraries?
Plan   Use good   Job
Code    library   done
Without libraries:

Recommended for you

HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin

The document discusses HTML5 and its new features such as video, canvas, geolocation, drag and drop, full screen, camera, battery status, vibration, and WebGL. It provides code examples for implementing these features and encourages trying new things with HTML5. The document is presented by Robert Nyman who works at Mozilla and advocates for open web standards and HTML5.

html5javascriptapis
Ember background basics
Ember background basicsEmber background basics
Ember background basics

This document provides an introduction to Ember.js and discusses some of its core concepts and patterns. It explains that Ember uses an observer pattern where objects called observables maintain lists of dependent observer objects that are notified of state changes. It also discusses how Ember implements an asynchronous run loop and single source of truth model layer for data binding and decoupling different parts of the application.

sproutcorejavascriptemberjs
Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013

The document discusses automated release management and continuous delivery using TeamCity and Octopus Deploy. It provides steps to configure a build pipeline in TeamCity that packages a .NET project into a NuGet package. The NuGet package is then deployed to various environments in Octopus Deploy using steps like publishing a website, running smoke tests, and verifying changes in user acceptance testing. It also discusses writing PowerShell scripts to automate packaging, publishing, and deployment tasks. Connecting an issue tracker to provide release notes from pending issues is also covered.

integrationoctopusdeploycontinuous integration
Plan     Browser Hell
Code
       OS inconsistencies
         Forget about
         obscure bugs

        Cannot reproduce
YUI on the go
> CVS commit
> Conflict:
> Too much fail error.
You.sacked = true

Recommended for you

How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps

You’ve seen Kris’ open source libraries, but how does he tackle coding out an application? Walk through green fields with a Symfony expert as he takes his latest “next big thing” idea from the first line of code to a functional prototype. Learn design patterns and principles to guide your way in organizing your own code and take home some practical examples to kickstart your next project.

symfony2
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next

The document discusses HTML, CSS, and JavaScript concepts including: - Using HTML and CSS for static and interactive user interfaces. - Code examples for CSS prefixes, accordion components, promises, async functions and error handling, sliding animations and image loading. - Variable declarations and scope, constant variables, type checking, for loops, and array mapping in JavaScript. - Debugging with breakpoints and examining the call stack. - Selecting elements, creating elements, and adding event listeners in the DOM.

웹퍼블리셔웹프론트엔드코드스쿼드
Deploying
DeployingDeploying
Deploying

1. The document discusses the steps needed to deploy a web application including choosing a web host, domain name, web server, database, and technologies. 2. It recommends using a virtual private server or shared web host to avoid maintaining physical infrastructure, and choosing technologies like Apache, MySQL, and Python/Django based on your specific application needs and comfort level. 3. Key steps include buying a domain name, configuring the domain to point to your web server's IP address, setting up the Apache web server with mod_wsgi to run Django projects, and configuring Django to use a MySQL database.

 
by soon
MCSE
YUI on the go
YUI on the go
“You want fries
  with that?”

Recommended for you

Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3

The performance of your application depends heavily on the number and size of assets on each page. Even your blazingly fastest Symfony2 application can be bogged down by bloated Javascript and CSS files. This session will give you a basic introduction to PHP's new asset management framework, Assetic, and explore how it integrates with Symfony2 for a pleasant, common sense developer experience.

phpsymfony2twig
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today

The document discusses creating futuristic interfaces using web technologies like WebSockets, WebGL, and device APIs. It provides examples of syncing device orientation over WebSockets between clients, accessing the device camera with getUserMedia, and using head tracking with headtrackr.js to control the camera in a 3D scene rendered with three.js. Links are included for related projects on Wiimote control, head tracking examples, and touch tracking demos.

web socketsuser experiencewebgl
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires

This document discusses several JavaScript APIs available in modern browsers including fullscreen API, camera API, pointer lock API, IndexedDB, battery status API, vibration API, and developer tools. It provides code examples for how to use these APIs to enable fullscreen mode, access camera and files, track mouse movement, store data in IndexedDB, get battery information, trigger vibrations, and open developer tools.

html5html5 javascriptjavascript
YUI on the go
Ergo:
Libraries are good, mkay?
A common complaint.
“YUI is too big! If I want to
build something on top of it, I
need to include a lot of large
           files!”

Recommended for you

JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo

The document provides an overview of various JavaScript APIs available for building web applications, including Browser ID for authentication, drag and drop, fullscreen mode, camera access, WebRTC, pointer lock, IndexedDB, battery status, and vibration. It also briefly mentions Boot to Gecko and the telephony and SMS APIs available in B2G.

html5javascriptapis
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings

HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!

html5 javascript api
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components

Apresentada no GDG Recife - itshackademic Desbravamos Web Components e Polymer, mostrando as especificação, com muito live code e toda a mágica de Web Components.

yahoo.js – 4.6kb
      dom.js – 35kb
      event.js – 61kb
    reset.css – 0.5kb
    fonts.css – 0.6kb
     grids.css – 3kb

6 HTTP requests – 104.7kb
First Aid remedies:

– Use the minified YUI versions
yahoo-min.js – 1kb
  dom-min.js – 10.2kb
  event-min.js – 13kb
 reset-min.css – 0.4kb
 fonts-min.css – 0.2kb
 grids-min.css – 2.4kb

6 HTTP requests – 27.2kb
First Aid remedies:

– Use the minified YUI versions
– Cut down on included YUI
  components by using the combined
  component includes.

Recommended for you

Add loop shortcode
Add loop shortcodeAdd loop shortcode
Add loop shortcode

This plugin adds a [loop] shortcode that embeds The Loop. It allows shortcodes to be run within the loop and includes optional pagination. The shortcode attributes allow filtering posts by category, type, order, and more. Output buffering is used to return the loop content.

jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new

This document provides an overview and introduction to jQuery. It discusses understanding jQuery and its core functionality as a DOM library. It covers selecting elements, DOM navigation/filtering, debugging selectors, new features like deferreds/promises in jQuery's Ajax functionality. It also discusses best practices like letting the browser handle effects natively when possible, proper use of document ready, and designing well-behaved jQuery plugins.

jquery
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo

The document discusses several JavaScript APIs available in the browser including fullscreen API, camera API, WebRTC, Pointer Lock API, IndexedDB, battery status API, Boot to Gecko, telephony and SMS APIs, vibration API, and developer tools. It provides code examples for how to use these APIs to enable fullscreen mode, access camera and files, capture video streams, track pointer movement, store data in IndexedDB, get battery status, make phone calls and send SMS, trigger vibration, and debug web applications.

html5javascriptapis
yahoo-dom-event.js – 24.1kb
reset-fonts-grids.css – 3.1kb

 2 HTTP requests – 27.2kb
First Aid remedies:

– Use the minified YUI versions
– Cut down on included YUI
  components by using the combined
  component includes.
– Use the hosted YUI versions.
This is all packing and level
         crunching.
What we really want is...

Recommended for you

JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile

This document summarizes several JavaScript APIs available in the browser, including APIs for fullscreen mode, cameras, WebRTC, pointer lock, IndexedDB, battery status, and vibration. It also discusses Boot to Gecko, telephony/SMS, and developer tools.

html5javascriptapis
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires

This document provides summaries of various JavaScript APIs available in the browser, including APIs for fullscreen mode, cameras, WebRTC, pointer lock, IndexedDB, battery status, B2G/Gaia, telephony/SMS, vibration, and developer tools. It encourages trying new things with these Web APIs.

htmlhtml5javascript
Yui- Yahoo! User Interface Library
Yui- Yahoo! User Interface LibraryYui- Yahoo! User Interface Library
Yui- Yahoo! User Interface Library

YUI is a JavaScript and CSS library developed by Yahoo for building interactive web applications. It includes core functions for DOM manipulation and events, utilities for common tasks like Ajax calls and animation, UI controls like menus and sliders, and developer tools for testing and profiling applications. The document provides details on YUI's features and components. It also gives examples of how YUI can be used and lists some well-known websites that implement YUI in their designs.

technologywebinterface
On-demand delivery
Why is that needed?
Use cases:
Use cases:

– We don’t want to make users load
  things they don’t need.

Recommended for you

YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)

2008/10/5 在中央大學介紹 YUI 使用者函式庫 Part 1.

ycoursencuyui
The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)

The document discusses the Yahoo! User Interface (YUI) library. It provides an overview of the YUI library and its core components, utilities, and controls. It also describes the YUI development tools and hosting services available to developers. The presentation encourages developers to use the YUI library and components to build Ajax applications and improve user interface performance and usability.

ycourseyuincu
Yui3
Yui3Yui3
Yui3

The Yahoo! User Interface Library (YUI) is a JavaScript and CSS framework for building richly interactive web applications. It includes a JavaScript library with utilities, widgets, and other core functions, a CSS foundation, and developer tools for testing, documentation, and builds. YUI has evolved over multiple versions to support modern web standards and provides a comprehensive set of resources for front-end developers.

Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
– We can offer implementers to trigger
  extra functionality with markup:
Use cases:

– We don’t want to make users load
  things they don’t need.
– Distribution (badges, banners) works a
  lot better if it is one <script> and not 3.
– We can offer implementers to trigger
  extra functionality with markup:
          “add an ‘animated’ CSS class for
                smooth transitions”
Example?

Recommended for you

YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces

The Yahoo User Interface Library (YUI) is a JavaScript framework that helps build web applications by abstracting away browser inconsistencies and issues. It includes CSS solutions for layouts and typography, JavaScript utilities, and tested widgets like AutoComplete, DataTable, Button, Calendar, and more. All components are fully documented and have examples to learn from. YUI makes it easier to build interfaces without dealing with browser pain points and allows chaining of animations through custom events.

yuidelhiblrhackday
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI

My small presentation at Web Directions North 2009 introducing YUI as part of the "JavaScript Libraries Super Session"

introductionyuiwebdirectionsnorth
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script

The document discusses the beauty of JavaScript and its many features. It covers how JavaScript offers classless object-oriented programming and functional programming. It also discusses how JavaScript can run on both the client-side and server-side. The document provides examples of JavaScript syntax like variables, functions, objects, prototypes and more to demonstrate JavaScript's capabilities. It emphasizes that libraries help create abstractions and beautiful patterns in JavaScript code.

closurelambdaoop
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
<div class=quot;flickrbadgequot;>
  <p>
    <a
href=quot;http://www.flickr.com/photos/11414938%
40N00quot;>
       My latest photos on flickr
    </a>
  </p>
</div>
<script src=quot;flickrbadgeloader.jsquot;></script>




        http://icant.co.uk/sandbox/flickrbadgev2/
How?

Recommended for you

The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a

The document discusses the beauty of JavaScript and its many features. It covers how JavaScript offers classless object-oriented programming and functional programming. It also discusses how JavaScript can run on both the client-side and server-side. The document provides examples of JavaScript syntax like variables, functions, objects, inheritance through prototypes, and AJAX requests. It emphasizes how libraries help create abstractions and beautiful patterns in JavaScript code.

ajaxworld-2008ajaxworld-2008ajaxworld-2008
Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)

The document discusses the benefits and drawbacks of using SDKs (software development kits) to access APIs. SDKs can help reduce time-to-first-use for developers but can also introduce dependencies and long-term support costs. The document recommends SDKs for on-boarding but suggests transitioning to using web APIs directly in production to avoid issues with instrumentation, metrics, error handling and performance.

BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks

PhoneGap and BlackBerry WebWorks allow developers to create cross-platform mobile apps using web technologies like HTML, CSS, and JavaScript. The document discusses how these tools were used to build a nursing app, including overcoming challenges related to platform differences and limitations. Feature detection was used to handle quirks across platforms. Performance was improved by dispatching functions asynchronously on BlackBerry 5. The developer recommends alternative approaches like using Backbone.js, jQuery Mobile, Jasmine BDD, and pre-generated JSON files for future projects.

phonegapnitobi
Supercool Solution:

        The YUI Loader

http://developer.yahoo.com/yui/yuiloader
YUI Loader:
YUI Loader:

– Knows about dependencies
YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions

Recommended for you

Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress

This document discusses JavaScript and how it is used on over 92% of websites. It covers JavaScript fundamentals like variable scope, hoisting, and the this keyword. It also discusses how JavaScript allows first-class functions and functional programming. The document then covers how to properly manage scripts in WordPress using functions like wp_register_script, wp_enqueue_script, and wp_localize_script to internationalize scripts. It concludes by mentioning additional JavaScript topics to explore like closures and functional programming.

Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django

Slides de la charla que di en la PyConEs 2017 en Cáceres, el 24 de Septiembre. Explicaba cómo montar un entorno de desarrollo ágil con Django en el back, Vue en el front y webpack para empaquetar el front y proporcionar Hot Module Reloading

vuejsdjangowebpack
Express Presentation
Express PresentationExpress Presentation
Express Presentation

Express is a web application framework for Node.js that provides a robust set of features for building web applications and APIs. It is designed for building scalable and fast web applications and services. Some key features include being built on Node.js for asynchronous and event-driven capabilities, a simple routing system and middleware support, and support for template engines and plugins.

YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions
– Works without yahoo.js
YUI Loader:

– Knows about dependencies
– Automatically gets the newest
  hosted versions
– Works without yahoo.js
– Extendable with non-YUI
  components(!)
<script
src=quot;http://yui.yahooapis.com/2.3.1/b
uild/yuiloader/yuiloader-beta-
min.jsquot;></script>

<script>
loader = new YAHOO.util.YUILoader();
loader.require('calendar','tabview');
loader.insert(function() {
    // Your code
});
</script>
http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf

Recommended for you

JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise

This document discusses JavaScript promises as an abstraction pattern for handling asynchronous code. It explains why promises are useful by describing some of the issues with callback-based asynchronous code, such as callback hell and lack of readability. The document then provides examples of how to create and use promises to handle sequential and parallel asynchronous tasks in a more maintainable way using chaining and batching. It also discusses how promises are supported in browsers, Node.js, and common promise libraries like Q, RSVP, when.js, and Bluebird.

javascriptpromisepattern
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript

Leverage patterns of large-scale JS – such as modules, publish-subscribe and delegation – to achieve extreme performance without sacrificing maintainability.

require.jsjquery-uievent delegation
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015

Versão com GIFs: https://docs.google.com/presentation/d/17M-jHlkAP5KPfQ4_Alck_wIsN2gK3dZNGfJR9Bi1L50/present Códigos para instalação das dependências: https://github.com/fdaciuk/talks/tree/master/2015/wordcamp-sao-paulo

socket.iowordcampsp2015nodejs
Other option – 11kb is too
          much!
Rolling your own


The YAHOO_config way
YUI has an often forgotten
 configuration setting in
     YAHOO_config.
YUI has an often forgotten
   configuration setting in
       YAHOO_config.

http://developer.yahoo.com/yui/yahoo/#config

Recommended for you

Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears

Dion Almaer's talk on Google Gears and taking your apps offline, given at the Future of Web Apps conference 2007.

 
by dion
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2

Angular is a web application framework developed in 2009. It allows developers to create single page applications using HTML enhanced with Angular specific directives and by associating angular components like controllers, services and filters with HTML. The document provides an overview of key Angular concepts like controllers, services, filters and routing and how they are used to build interactive single page applications. It also demonstrates how to make HTTP requests to backend services and handle promises using the $http service and $q.

夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》

The document discusses market share projections for iPad and Android tablets in 2010-2012. It states that in 2010, Apple's iPad had a 53% market share while Android tablets had 32.5%. In 2012, the document predicts iPad's market share would be 44% and Android tablets would be close behind at 39%, with the remaining 17% shared between Windows, Blackberry and HP tablets. The document also discusses Facebook's efforts to add e-commerce functionality to compete with eBay.

YUI has an often forgotten
   configuration setting in
       YAHOO_config.
                                No
                                   ww
http://developer.yahoo.com/yui/yahoo/#config
                                 mo ith
                            AW       re
                                 ES
                                    OM
                                        E!
It allows you to define a
listener function that gets
 notified every time a YUI
    component is loaded.
<script>
function snitch(component){
   console.log('can has YUI ' +
                component.name);
};
YAHOO_config = {
   listener:snitch
};
</script>
<script
src=quot;http://yui.yahooapis.com/2.3.1/build/ya
hoo/yahoo-min.jsquot;></script>
<script
src=quot;http://yui.yahooapis.com/2.3.1/build/ev
ent/event-min.jsquot;></script>
Using this in conjunction with
your scripts and repeat calls
   of the “snitch” function
 allows you to dynamically
       include the YUI.

Recommended for you

Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications

http://lanyrd.com/2012/yuiconf/szwrf/ Everyone agrees that application security is of crucial importance, and attacks on web frontends are getting more frequent, sophisticated, and dangerous. Yet the area of security testing of frontend and YUI-based applications has so far received little attention. This talk highlights the need to embed security testing in the standard repertoire of every Javascript and YUI developer, alongside with functionality and performance tests. We will emphasize the security testing as part of development workflow - writing and running tests alongside creating the code. Our main goal is to attract the YUI community's attention to this grey area and start a discussion and cooperation of webappsec and YUI worlds.

yuiwebappsectesting
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy

These are slides to my presentation on Virtual Madness - the virtual machine management platform at Etsy.

javascriptetsymarionette
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework

1) The document discusses the author's experience building their own node.js web framework, including their background with other technologies like Ruby on Rails. 2) It describes the key features of their framework, such as MVC structure, middleware support, asset packaging, and command line tools. 3) The author explains that they rolled their own framework to learn more about how frameworks work, have more control over the technology stack, and because node.js performance is better than Ruby on Rails. They emphasize that building the framework was a fun learning experience.

node.js
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
    function addScript(url){
        var s = document.createElement('script');
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(s);
    };
    function YUIready(o){
        if(typeof o === 'undefined'){
             var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                          'build/yahoo-dom-event/' +
                          'yahoo-dom-event.js';
             addScript(APIurl);
        } else {
            if(o.name === 'yahoo-dom-event'){ // YUI is ready
           }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

Recommended for you

Loadrunner
LoadrunnerLoadrunner
Loadrunner

Loadrunner is a script loader and dependency manager for JavaScript. It allows loading of scripts and modules, defining dependencies between them, and executing code only after all dependencies are loaded. Key features include: - Loading scripts and modules asynchronously - Defining modules with CommonJS or AMD syntax - Managing dependencies between modules so code only runs after dependencies are resolved - Being used by other libraries and frameworks like Phoenix and TfW - Having an open source implementation on GitHub under the MIT license

modulesdependenciesamd
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets

This document summarizes jQuery secrets presented by Bastian Feder. It discusses utilities like jQuery.data() and jQuery.removeData() for saving and removing state on DOM elements. It also covers AJAX settings, events, extending jQuery, and jQuery plugins. The presentation provides code examples for working with data, events, namespaces, AJAX, and extending jQuery functionality.

secretsjavascriptfrontend
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf

This document discusses improvements in YUI 3 compared to YUI 2, including how YUI 3 is lighter, faster and easier to use. It provides examples of code in YUI 2 and 3, highlighting improvements like sandboxing with modules, selector APIs and the use of Node and NodeList wrappers. It also covers topics like dynamic script loading, dependency management, events and custom events in YUI 3. Finally, it discusses some techniques for improving frontend performance like avoiding iframes and flushing content early.

yuiperformance
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };

Recommended for you

Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer

This talk aims to introduce the upcoming ServiceWorker technology, its basic functionalities, its lifecycle and its most common use cases. Then it moves to analyse in detail a less obvious implementation of this technology: how to create a wiki engine using ServiceWorker and IndexedDB.

indexeddbservice workerhtml5
Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019

We are obsessed with coding and creating automated workflows and optimisations. And yet our final products aren't making it easy for people to use them. Somewhere, we lost empathy for our end users and other developers. Maybe it is time to change that. Here are some ideas.

javascriptdevelopmentlearning
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web

This document discusses ways to improve how web developers learn best practices through browser and tooling improvements. It suggests that linting and inline insights directly in code editors could help prevent mistakes by flagging issues early. A tool called webhint is highlighted that provides one-stop checking and explanations of hints related to performance, accessibility, security and more. The document advocates for customizing hints based on a project's specific needs and environment. Overall, it argues for accelerated learning through context-sensitive, customizable best practices integrated into development workflows.

testingbrowserswebdevelopment
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            // YUI is ready
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
You can extend that to load
different YUI components one
        after the other.

Recommended for you

Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege

This document discusses privilege in the context of social media and the internet. It acknowledges privileges like internet access, the ability to communicate, and supportive online communities. It warns that machine learning and algorithms risk creating echo chambers and guided messaging if they are not kept in check by human curation. The document advocates taking back the web for decent, thinking and loving humans and using privileges to help others gain access to learning, communication, and communities.

social mediaprivilege
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo

JavaScript is a bigger world than a language these days. Time to take stock and find happiness in that world.

ndcoslondcoslo2018javascript
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote

This document discusses artificial intelligence and how it can help humans. It covers that AI is not new, having originated in the 1950s, and is now more advanced due to increased computing power. It also discusses how AI utilizes pattern recognition and machine learning. The document then covers several applications of AI including computer vision, natural language processing, sentiment analysis, speech recognition/conversion and moderation. It notes both the benefits of AI in automating tasks and preventing errors, as well as the responsibilities of ensuring transparency and allowing people to opt-in to algorithms.

aidc2018machine learningartificial intelligence
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
        if(typeof o === 'undefined'){
          var APIurl = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/yahoo-dom-event/' +
                       'yahoo-dom-event.js';
          addScript(APIurl);
        } else {
          if(o.name === 'yahoo-dom-event'){
            var url = 'http://yui.yahooapis.com/2.3.1/' +
                      'build/animation/' +
                      'animation-min.js';
            addScript(url);
          }
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
var myScript = function(){
    // other code
  + function addScript(url){};
    function YUIready(o){
  +     if(typeof o === 'undefined'){
         } else {
          if(o.name === 'yahoo-dom-event'){
            var url = 'http://yui.yahooapis.com/2.3.1/' +
                       'build/animation/' +
                       'animation-min.js';
             addScript(url);
          };
          if(o.name === 'animation'){
              // done …
          };
        };
    };
    YUIready();
    return { YUIready:YUIready };
}();
YAHOO_config = { listener:myScript.YUIready };
You can also make it
dependent on classes or IDs
  used in the document, or
configuration options of your
 main script and many more
           things.
Have fun!



Thanks!

Recommended for you

Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote

The document discusses concerns about the perception and realities of coding careers. It expresses worry that coding is seen solely as a way to get a job rather than as a means of problem-solving. While coding can provide fulfilling work, the document cautions that the need for coders may decrease with automation and that the role may evolve from coding to engineering. It suggests a future where machines assist with repetitive coding tasks and people focus on delivering maintainable, secure products with attention to privacy and user experience.

weardevs2018machinelearningprogramming
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland

PWA are a hot topic and it is important to understand that they are a different approach to apps than the traditional way of packaging something and letting the user install it. In this keynote you'll see some of the differences.

pwatdfinland
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege

This document discusses privilege in technology and perceptions of technology workers. It acknowledges the privileges that tech workers enjoy, such as access to resources and high demand in the job market. However, it also notes problems like peer pressure, lack of work-life balance, and imposter syndrome. Both tech workers and the public have skewed perceptions of each other - tech workers feel others do not appreciate or understand their work, while the public sees tech workers as antisocial or caring only about profit. The document encourages taking small steps to improve the situation, such as being kind to oneself, considering others, sharing knowledge, and focusing on quality over quantity of work.

smashingconflondon

More Related Content

What's hot

HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Robert Nyman
 
Seti 09
Seti 09Seti 09
Seti 09
bzanchet
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
Robert Nyman
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
Philipp Fehre
 
Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013
Kristoffer Deinoff
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
Kris Wallsmith
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
지수 윤
 
Deploying
DeployingDeploying
Deploying
soon
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
Kris Wallsmith
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Robert Nyman
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components
Mateus Ortiz
 
Add loop shortcode
Add loop shortcodeAdd loop shortcode
Add loop shortcode
Peter Baylies
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Remy Sharp
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
Robert Nyman
 

What's hot (20)

HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
Seti 09
Seti 09Seti 09
Seti 09
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web -  at NackademinHTML5 & The Open Web -  at Nackademin
HTML5 & The Open Web - at Nackademin
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
 
Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013Automated release management with team city & octopusdeploy - NDC 2013
Automated release management with team city & octopusdeploy - NDC 2013
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
Deploying
DeployingDeploying
Deploying
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Desbravando Web Components
Desbravando Web ComponentsDesbravando Web Components
Desbravando Web Components
 
Add loop shortcode
Add loop shortcodeAdd loop shortcode
Add loop shortcode
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 

Viewers also liked

Yui- Yahoo! User Interface Library
Yui- Yahoo! User Interface LibraryYui- Yahoo! User Interface Library
Yui- Yahoo! User Interface Library
Momentum Design Lab
 
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
Joseph Chiang
 
The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)
Joseph Chiang
 
Yui3
Yui3Yui3
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces
Christian Heilmann
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
Christian Heilmann
 

Viewers also liked (6)

Yui- Yahoo! User Interface Library
Yui- Yahoo! User Interface LibraryYui- Yahoo! User Interface Library
Yui- Yahoo! User Interface Library
 
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
 
The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)The YUI Library (Yahoo! Course @NCU)
The YUI Library (Yahoo! Course @NCU)
 
Yui3
Yui3Yui3
Yui3
 
YUI introduction to build hack interfaces
YUI introduction to build hack interfacesYUI introduction to build hack interfaces
YUI introduction to build hack interfaces
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
 

Similar to YUI on the go

The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
Michael Girouard
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani
 
Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)
Nordic APIs
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
wpnepal
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
aaronheckmann
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
Joseph Chiang
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
aglemann
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
Fernando Daciuk
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
dion
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
Christoffer Noring
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
Koubei Banquet
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
dimisec
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
Nishan Subedi
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
Ben Lin
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
danwrong
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
Bastian Feder
 
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf
Morgan Cheng
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
Sandro Paganotti
 

Similar to YUI on the go (20)

The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)Do you want a SDK with that API? (Nordic APIS April 2014)
Do you want a SDK with that API? (Nordic APIS April 2014)
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
Avinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPressAvinash Kundaliya: Javascript and WordPress
Avinash Kundaliya: Javascript and WordPress
 
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar DjangoDjango + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
Embracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend PerfEmbracing YUI3 and Frontend Perf
Embracing YUI3 and Frontend Perf
 
Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
Christian Heilmann
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
Christian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
Christian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Christian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 

Recently uploaded (20)

DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 

YUI on the go

  • 1. YUI on the go How to include YUI components on demand Christian Heilmann Yahoo! Frontend Engineering Summit UK December 2007
  • 3. Plan Use good Job Code library done
  • 5. Plan Browser Hell Code OS inconsistencies Forget about obscure bugs Cannot reproduce
  • 7. > CVS commit > Conflict: > Too much fail error.
  • 12. “You want fries with that?”
  • 16. “YUI is too big! If I want to build something on top of it, I need to include a lot of large files!”
  • 17. yahoo.js – 4.6kb dom.js – 35kb event.js – 61kb reset.css – 0.5kb fonts.css – 0.6kb grids.css – 3kb 6 HTTP requests – 104.7kb
  • 18. First Aid remedies: – Use the minified YUI versions
  • 19. yahoo-min.js – 1kb dom-min.js – 10.2kb event-min.js – 13kb reset-min.css – 0.4kb fonts-min.css – 0.2kb grids-min.css – 2.4kb 6 HTTP requests – 27.2kb
  • 20. First Aid remedies: – Use the minified YUI versions – Cut down on included YUI components by using the combined component includes.
  • 21. yahoo-dom-event.js – 24.1kb reset-fonts-grids.css – 3.1kb 2 HTTP requests – 27.2kb
  • 22. First Aid remedies: – Use the minified YUI versions – Cut down on included YUI components by using the combined component includes. – Use the hosted YUI versions.
  • 23. This is all packing and level crunching.
  • 24. What we really want is...
  • 26. Why is that needed?
  • 28. Use cases: – We don’t want to make users load things they don’t need.
  • 29. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3.
  • 30. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3. – We can offer implementers to trigger extra functionality with markup:
  • 31. Use cases: – We don’t want to make users load things they don’t need. – Distribution (badges, banners) works a lot better if it is one <script> and not 3. – We can offer implementers to trigger extra functionality with markup: “add an ‘animated’ CSS class for smooth transitions”
  • 33. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 34. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 35. <div class=quot;flickrbadgequot;> <p> <a href=quot;http://www.flickr.com/photos/11414938% 40N00quot;> My latest photos on flickr </a> </p> </div> <script src=quot;flickrbadgeloader.jsquot;></script> http://icant.co.uk/sandbox/flickrbadgev2/
  • 36. How?
  • 37. Supercool Solution: The YUI Loader http://developer.yahoo.com/yui/yuiloader
  • 39. YUI Loader: – Knows about dependencies
  • 40. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions
  • 41. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js
  • 42. YUI Loader: – Knows about dependencies – Automatically gets the newest hosted versions – Works without yahoo.js – Extendable with non-YUI components(!)
  • 43. <script src=quot;http://yui.yahooapis.com/2.3.1/b uild/yuiloader/yuiloader-beta- min.jsquot;></script> <script> loader = new YAHOO.util.YUILoader(); loader.require('calendar','tabview'); loader.insert(function() { // Your code }); </script>
  • 45. Other option – 11kb is too much!
  • 46. Rolling your own The YAHOO_config way
  • 47. YUI has an often forgotten configuration setting in YAHOO_config.
  • 48. YUI has an often forgotten configuration setting in YAHOO_config. http://developer.yahoo.com/yui/yahoo/#config
  • 49. YUI has an often forgotten configuration setting in YAHOO_config. No ww http://developer.yahoo.com/yui/yahoo/#config mo ith AW re ES OM E!
  • 50. It allows you to define a listener function that gets notified every time a YUI component is loaded.
  • 51. <script> function snitch(component){ console.log('can has YUI ' + component.name); }; YAHOO_config = { listener:snitch }; </script> <script src=quot;http://yui.yahooapis.com/2.3.1/build/ya hoo/yahoo-min.jsquot;></script> <script src=quot;http://yui.yahooapis.com/2.3.1/build/ev ent/event-min.jsquot;></script>
  • 52. Using this in conjunction with your scripts and repeat calls of the “snitch” function allows you to dynamically include the YUI.
  • 53. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 54. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 55. var myScript = function(){ // other code function addScript(url){ var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(s); }; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 56. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 57. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 58. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 59. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 60. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 61. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 62. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 63. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ // YUI is ready } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 64. You can extend that to load different YUI components one after the other.
  • 65. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ if(typeof o === 'undefined'){ var APIurl = 'http://yui.yahooapis.com/2.3.1/' + 'build/yahoo-dom-event/' + 'yahoo-dom-event.js'; addScript(APIurl); } else { if(o.name === 'yahoo-dom-event'){ var url = 'http://yui.yahooapis.com/2.3.1/' + 'build/animation/' + 'animation-min.js'; addScript(url); } }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 66. var myScript = function(){ // other code + function addScript(url){}; function YUIready(o){ + if(typeof o === 'undefined'){ } else { if(o.name === 'yahoo-dom-event'){ var url = 'http://yui.yahooapis.com/2.3.1/' + 'build/animation/' + 'animation-min.js'; addScript(url); }; if(o.name === 'animation'){ // done … }; }; }; YUIready(); return { YUIready:YUIready }; }(); YAHOO_config = { listener:myScript.YUIready };
  • 67. You can also make it dependent on classes or IDs used in the document, or configuration options of your main script and many more things.