SlideShare a Scribd company logo
Using YUI Dom

to tame the Browser

       Christian Heilmann
  Yahoo! F2E Summit Asia 2007
Quick reminder

• Development according to web standards
  means first and foremost separation.
• Specifically separation of web
  development layers.
addClass batch generateId get
getAncestorBy getAncestorByClassName
getAncestorByTagName getChildren
getChildrenBy getClientHeight
getClientWidth getDocumentHeight
getDocumentScrollLeft
getDocumentScrollTop getDocumentWidth
getElementsBy getElementsByClassName
getFirstChild getFirstChildBy
getLastChild getLastChildBy
getNextSibling getNextSiblingBy
getPreviousSibling getPreviousSiblingBy
getRegion getStyle getViewportHeight
getViewportWidth getX getXY getY
hasClass inDocument insertAfter
insertBefore isAncestor removeClass
replaceClass setStyle setX setXY setY
Use cases for the DOM utility

•   Using CSS Classes
•   Getting elements from the DOM
•   Using the browser dimensions
•   Using element dimensions
•   Styling elements

Recommended for you

Designing Immutability Data Flows in Ember
Designing Immutability Data Flows in EmberDesigning Immutability Data Flows in Ember
Designing Immutability Data Flows in Ember

Presented at EmberFest 2017, Berlin. The talk walks through possible patterns to implement immutability within Data Down, Actions Up and its benefits.

ember.jsimmutabilityconference
Deep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerViewDeep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerView

Highly recommend look at the mp4 video (https://drive.google.com/open?id=1_k0jlSilVkekIgqU6NHAcx01pjT8cee5) or the recorded talk (not available yet) DroidKaigi 2018 2018/2/8 Room3

androidui
2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux

Our speaker of the evening was Kristof Van Miegem, co-founder of Codifly (http://codifly.be/). He explained how to manage application state in React applications with Redux, followed by a focus on immutable data structures and how these data structures fit perfectly into this story.

reactreduxjavascript
Using CSS Classes


• addClass()
• removeClass()
• hasClass()
• replaceClass()
• getElementsByClassName()
Why?
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely to change at the
  same time.
• I hate loops.
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely to change at the
  same time.
• I hate loops.

Recommended for you

Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1

The document provides information about jQuery: 1) jQuery is an open-source JavaScript library developed by John Resig in 2006 that simplifies HTML document traversal and manipulation, events, animations and Ajax interactions for rapid web development. 2) It is used by many large companies and websites and has two versions: compressed and uncompressed, under both MIT and GPL licenses. 3) The document outlines jQuery's main features including being lightweight, having a large plugin library, easy to learn and use, CSS3 support, documentation and examples. It then provides examples of how to implement jQuery.

codingjquery
informatics practices practical file
informatics practices practical fileinformatics practices practical file
informatics practices practical file

This document contains 15 questions and answers related to Java programming. Each question asks the student to design a Java program to perform a specific task such as printing a table of numbers, calculating a Fibonacci series, or checking if a string is a palindrome. For each question, the student provides the code needed to solve the problem along with screenshots of a sample program preview and output.

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

Ext JS provides easy-to-use charting components that satisfy common needs, but sometimes you want to deliver an exceptional, unique user experience. This presentation will discuss how Ext JS leverages the popular and extremely powerful D3 library to create sophisticated, data-driven visualizations. This functionality helps your users understand the story behind their data, so they can make informed decisions.

web app developmentext jsd3
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely to change at the
  same time.
• I hate loops.
Why?

• CSS is the supercharged DOM Scripting.
• CSS is much closer connected to the
  HTML
• Therefore it is more likely to change at the
  same time.
• I hate loops.
Example:

Hiding all “trigger” links in a main section
when JS is available.
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var i=0,j=triggers.length;i<j;i++){
    if(triggers[i].className === 'trigger'){
      triggers[i].style.display = 'none';
    }
  }
}

Recommended for you

Ms Ajax Dom Element Class
Ms Ajax Dom Element ClassMs Ajax Dom Element Class
Ms Ajax Dom Element Class

This document summarizes methods in the Sys.UI.DomElement class in the Microsoft AJAX library for manipulating DOM elements. It describes methods for getting elements by ID, adding/removing CSS classes, and getting/setting an element's position and dimensions. Key methods include getElementById(), addCssClass(), getLocation(), and setLocation().

What are arrays in java script
What are arrays in java scriptWhat are arrays in java script
What are arrays in java script

Arrays in JavaScript can store multiple data types. Common array methods allow users to manipulate array elements by adding, removing, and modifying items. Key methods include toString() and join() to convert arrays to strings, concat and push/pop to modify arrays, and filter(), map(), and reduce() to transform array elements.

Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations

The document provides ideas for integrating technology to meet kindergarten and first grade standards requiring participation in multimedia group projects and second grade standards requiring digital presentations. Some suggested ideas include having students make digital books with pictures and text, make single PowerPoint slides to accompany oral reports, combine single slides into slideshows, and take and edit pictures to create posters presenting information on various topics. These technology-integrated projects can be used across subjects such as math, language arts, science, and social studies.

Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var i=0,j=triggers.length;i<j;i++){
    if(triggers[i].className === 'trigger'){
      triggers[i].style.display = 'none';
    }
  }
}


display:none is a bad plan!
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var i=0,j=triggers.length;i<j;i++){
    if(triggers[i].className === 'trigger'){
      triggers[i].style.display = 'none';
    }
  }
}


Off-left is better.
Example:
var main = document.getElementById('main');
if(main){
  var triggers = main.getElementsByTagName('a');
  for(var i=0,j=triggers.length;i<j;i++){
    if(triggers[i].className === 'trigger'){
      triggers[i].style.position = 'absolute';
      triggers[i].style.left = '-6000px';
    }
  }
}
Magic JavaScript Pixy Solution

$('#main a.trigger').hide();

Recommended for you

Pp Under Consturction
Pp Under ConsturctionPp Under Consturction
Pp Under Consturction
Put the Ease in Papers, Please!
Put the Ease in Papers, Please!Put the Ease in Papers, Please!
Put the Ease in Papers, Please!

This document is an invitation to join a podcast called "Put the Ease in Papers, Please!" hosted by Lee Hall and Angela Clark, technology resource teachers at Shelby County Schools. The document provides contact information for the hosts, including their email addresses and Twitter handles, as well as a link to the podcast site.

Al Den Presentation
Al Den PresentationAl Den Presentation
Al Den Presentation

The document introduces the ALABAMA Leadership Council and provides details about Sharon Sizemore, a second grade teacher from Vestavia Hills Elementary in Cahaba Heights, Alabama. Sharon Sizemore is an Intel Master Teacher, STAR Discovery Educator, and Apple Distinguished Educator who graduated in 2007. The document welcomes comments on the Discovery Education blog from those interested in the Alabama Den.

My fave:

document.body.className = 'js';

// or
var b = document.body;
var bc = b.className;
b.className = bc ? bc + ' js' :
'js';
Getting elements from the DOM

• inDocument()
• isAncestor()
• getElementsByClassName
• getElementsBy
• get
• batch
Using the browser dimensions

• getViewportWidth()
• getViewportHeight()
• getDocumentWidth()
• getDocumentHeight()
Using element dimensions

• getX(), getY(), getXY()
• setX(), setY(), setXY()
• getRegion()
 – Region union
 – Region intersect
 – Region contains

Recommended for you

Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations

Digital presentations are a great way for teachers to integrate technology into their curriculum. This presentation focused on K,1,and 2 but could easily be modified for use by any grade with any subject.

Put the ease in papers, please!
Put the ease in papers, please!Put the ease in papers, please!
Put the ease in papers, please!

This document provides information about an upcoming event hosted by Lee Hall and Angela Clark, technology resource teachers from Shelby County Schools. The event is called "Put the Ease in Papers, Please!" and aims to help teachers simplify paperwork and documentation tasks through the use of technology. Lee Hall and Angela Clark's contact information is provided so teachers can learn more about the event.

Dia Biblia
Dia BibliaDia Biblia
Dia Biblia

O documento convida as pessoas a participarem das atividades do Dia da Bíblia, que incluem uma exposição de literatura bíblica, uma aula bíblica, um culto e vídeos sobre a Bíblia, com atividades para crianças.

Using element dimensions
Using element dimensions

• Each of these methods can take an ID, a
  reference of an HTMLelement or an array
  of elements as the parameter.
• This allows you to easily access a lot of
  elements.
Using element dimensions

• The Dom utility does not care if the
  element is positioned absolute, relative or
  static.
• It also sorts out differences in render mode
  for you.
• However, each element needs to be part
  of the Dom and not hidden with
  display:none!
Using element dimensions

• The get and set methods of x and y are
  very straight forward.
• They return the left, the top or both values
  in pixels or an array with this data for each
  element you parsed in.
• You can also set the position in pixels with
  the setter methods.

Recommended for you

32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business

How can a digital marketing consultant help your business? In this resource we'll count the ways. 24 additional marketing resources are bundled for free.

digital marketingcontent marketingconsulting
Js info vis_toolkit
Js info vis_toolkitJs info vis_toolkit
Js info vis_toolkit

This document provides information about using the JavaScript InfoVis Toolkit (JIT) for data visualization. It discusses feeding JSON tree structure data to JIT visualizations, using controllers to customize visualizations, and exploring different visualization types including treemaps, sunbursts, icicles, and more. It also provides instructions for implementing a basic visualization with JIT by creating the data, HTML, JavaScript, and CSS files needed.

infovistoolkitvgsom
Fact, Fiction, and FP
Fact, Fiction, and FPFact, Fiction, and FP
Fact, Fiction, and FP

This document provides examples of functional JavaScript code using point-free style and typeclasses. It includes code snippets demonstrating: - Composing functions using point-free style to remove unnecessary variables - Implementing common typeclass methods like map, chain, and ap for a Container type - Deriving typeclass instances for custom types to gain functionality like Functor, Applicative, Foldable - Using typeclasses to compose functions operating on different container types in a uniform way The document provides code samples but does not explain concepts in detail. It focuses on demonstrating point-free code and typeclass patterns through examples rather than performing in-depth explanations or performance analysis. Questions are provided at the end to prompt

javascriptfunctional programmingjavascript haskell pointfree applicative functor t
Using element dimensions

var xy =
  YAHOO.util.Dom.getXY('hd');
// = [128, 0];
YAHOO.util.Dom.setXY('hd',[128,-
  10]);
// shifts header 10 pixels up
Using element dimensions

• By using the getRegion() method you
  can read out the screen estate the
  element occupies.
• This is incredibly useful for positioning
  elements or avoiding overlap.
• The return is an object with several
  properties.
Using element dimensions
var h =
  YAHOO.util.Dom.getRegion('hd');
// h =
// {0:128
// 1:0,
// top:0,
// right:878,
// bottom:79,
// left:128}
Using element dimensions

• top, left, right, bottom are the pixel
  locations on the page.
• There are shortcuts for left and top named
  0 and 1 to allow for compatibility with
  setX,setY and setXY.

Recommended for you

the next web now
the next web nowthe next web now
the next web now

The document discusses techniques for improving performance of CSS, JavaScript, and HTTP including: - Minimizing included styles and using less-complicated selectors to optimize CSS performance - Avoiding expressions and minimizing page re-layouts in JavaScript - Combining script and link files, leveraging caching, browser expiration headers, and content encoding to optimize HTTP performance

Using ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript ProjectUsing ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript Project

ReasonML is based on the OCaml programming language and was created at Facebook, by the same creator as React! It shares a lot of features, but with the benefits of a statically typed functional programming language. ReasonML compiles to JavaScript and can therefore be used to create strongly typed React applications.

reactreasonreasonml
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries

The document discusses secrets and techniques for JavaScript libraries. It covers topics like the JavaScript language, cross-browser code, events, DOM traversal, styles, animations, distribution, and HTML insertion. It provides examples and explanations of techniques for class creation, timers, options, subclassing, custom events, selector internals, computed styles, and dimension calculations.

Using element dimensions

• Using these properties you can also
  calculate the dimensions of the element.
• Simply subtract left from right for the width.
• And top from bottom for the height.
Using element dimensions

• The Region() component does a lot
  more for you though.
• By calculating the region occupied by two
  elements, you can find out:
  – if one element contains the other
  – how big the area containing both of them is
    and
  – if and where they intersect
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contains(reg2);




                     Region #1    Region #2
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contains(reg2);

          false


                     Region #1    Region #2

Recommended for you

Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices

This document provides an overview of key Android development concepts and techniques. It discusses fragments, the support library, dependency injection, image caching, threading and AsyncTask, notifications, supporting multiple screens, and optimizing ListView performance. The document also recommends several popular Android libraries and open source apps that demonstrate best practices.

androidjava
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!

jQuery provides a unified event model that works across browsers. It allows binding multiple handlers per event type on each element. The event object passed to handlers is normalized and common properties like target and type are available. Events can be removed by unbinding handlers. The event object contains useful information like keyCode, pageX/Y, and relatedTarget.

jquery
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites

Learn how to improve your Web application performance in the browser by avoiding common pitfalls in JavaScript, CSS, and HTTP caching techniques.

fullbreakoutie
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contains(reg2);




                        Region #1

                              Region #2
Using element dimensions
YD = YAHOO.util.Dom;
reg1 = YD.getRegion('r1');
reg2 = YD.getRegion('r2');
contains = reg1.contains(reg2);

          true

                        Region #1

                              Region #2
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.intersect(reg2);



                         Region #1



                                     Region #2
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.intersect(reg2);



                         Region #1



                                     Region #2

Recommended for you

Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters

WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. It can be used for data visualization, creative coding, art, 3D design environments, music videos, mathematical function graphing, 3D modeling, texture creation, physics simulations, and more. WebGL works by using JavaScript to interface with the GPU through WebGL API calls. Common libraries like Three.js simplify the use of WebGL. The basics of a WebGL app include setting up a 3D scene, camera, and rendering loop. Sample code is provided to load a 3D model and texture and allow interactive rotation. Resources listed for learning more include tutorials on Phil

jsconfarwebglhtml5
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects

s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.

backendsymfonyreactjs
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones

This is a talk I gave at AnDevCon. It talks about ways to take advantage of features introduced in Android 3.0 to create more modular and better looking apps.

android
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.union(reg2);



                         Region #1
                         Region #1



                                     Region #2
                                     Region #2
Using element dimensions
YD =   YAHOO.util.Dom;
reg1   = YD.getRegion('r1');
reg2   = YD.getRegion('r2');
is =   reg1.union(reg2);



                         Region #1
                         Region #1



                                     Region #2
                                     Region #2
Styling elements

• getStyle()
• setStyle()
Styling Elements

• You might wonder why you’d need these
  two methods as seemingly
  element.style.property = value
  would do the same.
• The two methods however work around
  several browser problems and differences
  between computedStyle and
  currentStyle.

Recommended for you

Utilising the data attribute
Utilising the data attributeUtilising the data attribute
Utilising the data attribute

The document discusses using jQuery and custom data attributes to add client-side behavior and interactivity to Oracle APEX applications. It introduces: - The data attribute for unambiguously identifying elements - jQuery for element selection, event handling, and AJAX - Changing page items to HTML5 input types using data attributes - A rowclick plugin for adding click handling to report rows - Record sorting in reports using jQuery sortable - Deleting records from reports using click events and PL/SQL processing The document provides code examples and discusses building interactive features like record sorting and deletion without custom coding.

jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript

Long ago, in the late days of the first Internet boom, before jQuery, before Underscore, before Angular, there was a web application built by a large corporation. This application was written as a server-side application using server-side technology like Java or PHP. A tiny seed of JavaScript was added to some of the pages of this application to give it a little sizzle. Over the ages, this tiny bit of JavaScript grew like kudzu. Most of it was embedded in the HTML in

refactoringjavascriptlegacy
How to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in RHow to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in R

Parameterisation can be used to build a website with a page for every region/category/row in your data. This talk at DataHarvest/EIJC 2023 walks through how to do that, with example code and tips.

parameterisationrdata journalism
Styling Elements

• The other benefit is that you can use the
  CSS selector names instead of the
  camelCased JavaScript ones.
• Furthermore you can use the opacity
  property without needing to branch for
  different browsers.
CSS normalization

obj.style.marginTop = '10px';

               vs.

YAHOO.util.Dom.setStyle(obj,
'margin-top','10px');
CSS normalization

• Furthermore, opacity is not a nightmare
  any longer:

YAHOO.util.Dom.setStyle(obj, 'opacity','.2');
CSS normalization

• And last but not least, float can be
  used:
YAHOO.util.Dom.setStyle(obj, 'float','left');

Recommended for you

COLLADA & WebGL
COLLADA & WebGLCOLLADA & WebGL
COLLADA & WebGL

WebGL and COLLADA were discussed as technologies for 3D rendering and asset interchange on the web. The presentation covered the history and capabilities of both standards. It also described approaches for loading COLLADA assets into WebGL, such as preprocessing COLLADA into JSON or loading XML directly and parsing it with JavaScript. Optimizing COLLADA assets for WebGL rendering through techniques like quantization and compression was also mentioned.

colladakhronoswebgl
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro

introducing the essence of how rails works, also talk some basic common concepts in script languages

railsscript language
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications

When you move beyond adding simple enhancements to your website with jQuery and start building full-blown client-side applications, how do you organize your code? At this month's Triangle JS Meetup, we'll take a look at patterns for application development using jQuery that promote the principles of tight encapsulation and loose coupling, including classes, the publish/subscribe paradigm, and dependency management and build systems.

javascriptjquery
Thanks!

More Related Content

What's hot

Road to react hooks
Road to react hooksRoad to react hooks
Road to react hooks
Younes (omar) Meliani
 
08 Queries
08 Queries08 Queries
08 Queries
Ranjan Kumar
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Query
itsarsalan
 
Designing Immutability Data Flows in Ember
Designing Immutability Data Flows in EmberDesigning Immutability Data Flows in Ember
Designing Immutability Data Flows in Ember
Jorge Lainfiesta
 
Deep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerViewDeep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerView
Takeshi Hagikura
 
2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux
Codifly
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1
saydin_soft
 
informatics practices practical file
informatics practices practical fileinformatics practices practical file
informatics practices practical file
Sai Sathvick Chirakala
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
Ms Ajax Dom Element Class
Ms Ajax Dom Element ClassMs Ajax Dom Element Class
Ms Ajax Dom Element Class
jason hu 金良胡
 
What are arrays in java script
What are arrays in java scriptWhat are arrays in java script
What are arrays in java script
Miguel Silva Loureiro
 

What's hot (11)

Road to react hooks
Road to react hooksRoad to react hooks
Road to react hooks
 
08 Queries
08 Queries08 Queries
08 Queries
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Query
 
Designing Immutability Data Flows in Ember
Designing Immutability Data Flows in EmberDesigning Immutability Data Flows in Ember
Designing Immutability Data Flows in Ember
 
Deep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerViewDeep Dive Into LayoutManager for RecyclerView
Deep Dive Into LayoutManager for RecyclerView
 
2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux2018 02-22 React, Redux & Building Applications that Scale | Redux
2018 02-22 React, Redux & Building Applications that Scale | Redux
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1
 
informatics practices practical file
informatics practices practical fileinformatics practices practical file
informatics practices practical file
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
Ms Ajax Dom Element Class
Ms Ajax Dom Element ClassMs Ajax Dom Element Class
Ms Ajax Dom Element Class
 
What are arrays in java script
What are arrays in java scriptWhat are arrays in java script
What are arrays in java script
 

Viewers also liked

Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations
lhall
 
Pp Under Consturction
Pp Under ConsturctionPp Under Consturction
Pp Under Consturction
melissaaa
 
Put the Ease in Papers, Please!
Put the Ease in Papers, Please!Put the Ease in Papers, Please!
Put the Ease in Papers, Please!
lhall
 
Al Den Presentation
Al Den PresentationAl Den Presentation
Al Den Presentation
lhall
 
Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations
lhall
 
Put the ease in papers, please!
Put the ease in papers, please!Put the ease in papers, please!
Put the ease in papers, please!
lhall
 
Dia Biblia
Dia BibliaDia Biblia
Dia Biblia
lcsmbr
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
Barry Feldman
 

Viewers also liked (8)

Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations
 
Pp Under Consturction
Pp Under ConsturctionPp Under Consturction
Pp Under Consturction
 
Put the Ease in Papers, Please!
Put the Ease in Papers, Please!Put the Ease in Papers, Please!
Put the Ease in Papers, Please!
 
Al Den Presentation
Al Den PresentationAl Den Presentation
Al Den Presentation
 
Integrating Technology Using Digital Presentations
Integrating Technology Using Digital PresentationsIntegrating Technology Using Digital Presentations
Integrating Technology Using Digital Presentations
 
Put the ease in papers, please!
Put the ease in papers, please!Put the ease in papers, please!
Put the ease in papers, please!
 
Dia Biblia
Dia BibliaDia Biblia
Dia Biblia
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar to Taming the browser with the YUI Dom Component

Js info vis_toolkit
Js info vis_toolkitJs info vis_toolkit
Js info vis_toolkit
nikhilyagnic
 
Fact, Fiction, and FP
Fact, Fiction, and FPFact, Fiction, and FP
Fact, Fiction, and FP
Brian Lonsdorf
 
the next web now
the next web nowthe next web now
the next web now
zulin Gu
 
Using ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript ProjectUsing ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript Project
Roy Derks
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
jeresig
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
Yekmer Simsek
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
Wildan Maulana
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites
goodfriday
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
gerbille
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
Ignacio Martín
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
Michael Galpin
 
Utilising the data attribute
Utilising the data attributeUtilising the data attribute
Utilising the data attribute
Richard Martens
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
Guy Royse
 
How to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in RHow to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in R
Paul Bradshaw
 
COLLADA & WebGL
COLLADA & WebGLCOLLADA & WebGL
COLLADA & WebGL
Remi Arnaud
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro
zhang tao
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
Rebecca Murphey
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
Visual Engineering
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
Jörn Zaefferer
 
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid ThemRedux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Adam Klein
 

Similar to Taming the browser with the YUI Dom Component (20)

Js info vis_toolkit
Js info vis_toolkitJs info vis_toolkit
Js info vis_toolkit
 
Fact, Fiction, and FP
Fact, Fiction, and FPFact, Fiction, and FP
Fact, Fiction, and FP
 
the next web now
the next web nowthe next web now
the next web now
 
Using ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript ProjectUsing ReasonML For Your Next JavaScript Project
Using ReasonML For Your Next JavaScript Project
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
 
Design Patterns for Tablets and Smartphones
Design Patterns for Tablets and SmartphonesDesign Patterns for Tablets and Smartphones
Design Patterns for Tablets and Smartphones
 
Utilising the data attribute
Utilising the data attributeUtilising the data attribute
Utilising the data attribute
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
How to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in RHow to generate a 100+ page website using parameterisation in R
How to generate a 100+ page website using parameterisation in R
 
COLLADA & WebGL
COLLADA & WebGLCOLLADA & WebGL
COLLADA & WebGL
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
Workshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScript
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
 
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid ThemRedux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
 

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

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
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Pr��sentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
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
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
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
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
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
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
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
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
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
 
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
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
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
 
[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
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 

Recently uploaded (20)

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
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
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
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
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
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
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
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
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
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
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
 
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
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
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
 
[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
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 

Taming the browser with the YUI Dom Component

  • 1. Using YUI Dom to tame the Browser Christian Heilmann Yahoo! F2E Summit Asia 2007
  • 2. Quick reminder • Development according to web standards means first and foremost separation. • Specifically separation of web development layers.
  • 3. addClass batch generateId get getAncestorBy getAncestorByClassName getAncestorByTagName getChildren getChildrenBy getClientHeight getClientWidth getDocumentHeight getDocumentScrollLeft getDocumentScrollTop getDocumentWidth getElementsBy getElementsByClassName getFirstChild getFirstChildBy getLastChild getLastChildBy getNextSibling getNextSiblingBy getPreviousSibling getPreviousSiblingBy getRegion getStyle getViewportHeight getViewportWidth getX getXY getY hasClass inDocument insertAfter insertBefore isAncestor removeClass replaceClass setStyle setX setXY setY
  • 4. Use cases for the DOM utility • Using CSS Classes • Getting elements from the DOM • Using the browser dimensions • Using element dimensions • Styling elements
  • 5. Using CSS Classes • addClass() • removeClass() • hasClass() • replaceClass() • getElementsByClassName()
  • 7. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  • 8. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  • 9. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  • 10. Why? • CSS is the supercharged DOM Scripting. • CSS is much closer connected to the HTML • Therefore it is more likely to change at the same time. • I hate loops.
  • 11. Example: Hiding all “trigger” links in a main section when JS is available.
  • 12. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } }
  • 13. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } } display:none is a bad plan!
  • 14. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.display = 'none'; } } } Off-left is better.
  • 15. Example: var main = document.getElementById('main'); if(main){ var triggers = main.getElementsByTagName('a'); for(var i=0,j=triggers.length;i<j;i++){ if(triggers[i].className === 'trigger'){ triggers[i].style.position = 'absolute'; triggers[i].style.left = '-6000px'; } } }
  • 16. Magic JavaScript Pixy Solution $('#main a.trigger').hide();
  • 17. My fave: document.body.className = 'js'; // or var b = document.body; var bc = b.className; b.className = bc ? bc + ' js' : 'js';
  • 18. Getting elements from the DOM • inDocument() • isAncestor() • getElementsByClassName • getElementsBy • get • batch
  • 19. Using the browser dimensions • getViewportWidth() • getViewportHeight() • getDocumentWidth() • getDocumentHeight()
  • 20. Using element dimensions • getX(), getY(), getXY() • setX(), setY(), setXY() • getRegion() – Region union – Region intersect – Region contains
  • 22. Using element dimensions • Each of these methods can take an ID, a reference of an HTMLelement or an array of elements as the parameter. • This allows you to easily access a lot of elements.
  • 23. Using element dimensions • The Dom utility does not care if the element is positioned absolute, relative or static. • It also sorts out differences in render mode for you. • However, each element needs to be part of the Dom and not hidden with display:none!
  • 24. Using element dimensions • The get and set methods of x and y are very straight forward. • They return the left, the top or both values in pixels or an array with this data for each element you parsed in. • You can also set the position in pixels with the setter methods.
  • 25. Using element dimensions var xy = YAHOO.util.Dom.getXY('hd'); // = [128, 0]; YAHOO.util.Dom.setXY('hd',[128,- 10]); // shifts header 10 pixels up
  • 26. Using element dimensions • By using the getRegion() method you can read out the screen estate the element occupies. • This is incredibly useful for positioning elements or avoiding overlap. • The return is an object with several properties.
  • 27. Using element dimensions var h = YAHOO.util.Dom.getRegion('hd'); // h = // {0:128 // 1:0, // top:0, // right:878, // bottom:79, // left:128}
  • 28. Using element dimensions • top, left, right, bottom are the pixel locations on the page. • There are shortcuts for left and top named 0 and 1 to allow for compatibility with setX,setY and setXY.
  • 29. Using element dimensions • Using these properties you can also calculate the dimensions of the element. • Simply subtract left from right for the width. • And top from bottom for the height.
  • 30. Using element dimensions • The Region() component does a lot more for you though. • By calculating the region occupied by two elements, you can find out: – if one element contains the other – how big the area containing both of them is and – if and where they intersect
  • 31. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); Region #1 Region #2
  • 32. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); false Region #1 Region #2
  • 33. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); Region #1 Region #2
  • 34. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); contains = reg1.contains(reg2); true Region #1 Region #2
  • 35. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.intersect(reg2); Region #1 Region #2
  • 36. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.intersect(reg2); Region #1 Region #2
  • 37. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.union(reg2); Region #1 Region #1 Region #2 Region #2
  • 38. Using element dimensions YD = YAHOO.util.Dom; reg1 = YD.getRegion('r1'); reg2 = YD.getRegion('r2'); is = reg1.union(reg2); Region #1 Region #1 Region #2 Region #2
  • 40. Styling Elements • You might wonder why you’d need these two methods as seemingly element.style.property = value would do the same. • The two methods however work around several browser problems and differences between computedStyle and currentStyle.
  • 41. Styling Elements • The other benefit is that you can use the CSS selector names instead of the camelCased JavaScript ones. • Furthermore you can use the opacity property without needing to branch for different browsers.
  • 42. CSS normalization obj.style.marginTop = '10px'; vs. YAHOO.util.Dom.setStyle(obj, 'margin-top','10px');
  • 43. CSS normalization • Furthermore, opacity is not a nightmare any longer: YAHOO.util.Dom.setStyle(obj, 'opacity','.2');
  • 44. CSS normalization • And last but not least, float can be used: YAHOO.util.Dom.setStyle(obj, 'float','left');