This document provides an overview and agenda for a presentation on the Yahoo! User Interface (YUI) Library. The YUI Library is a set of JavaScript and CSS utilities for building rich web applications using techniques like DOM scripting, DHTML, and AJAX. The presentation agenda covers what a front-end engineer does, challenges in web development across browsers, and an introduction to the YUI Library including its utilities, widgets, CSS reset, and compression tool.
Front end engineering, YUI Gallery, and your futureLuke Smith
A brief history of front end engineering and why understanding the f2e technology stack is important for developers. An introduction to YUI 3 and the YUI Gallery project and overview of how contributing to OSS is good for the resume and good for the soul.
Front end engineering, YUI Gallery, and your futureLuke Smith
A brief history of front end engineering and why understanding the f2e technology stack is important for developers. An introduction to YUI 3 and the YUI Gallery project and overview of how contributing to OSS is good for the resume and good for the soul.
Here are the slides from my talk at @media in London two weeks ago titled "Professional Frontend Engineering." I had four goals for the talk.
Put a stake in the ground.
Reiterate our values.
Advocate the discipline.
Nurture a healthy Web.
The goals were threaded throughout the four sections of the talk::
Historical Perspective
Our Beliefs & Principles
Knowledge Areas & Best Practices
Why It All Matters
The professionalization of frontend engineering is a topic I'm passionate about. I think it is critical to the advancement of the Internet.
Presented May 30th, 2008, in London at the @media conference in the plenary opening day two.
Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…
JavaScript has grown up. Now it's time to see how far it can go.
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Shreeraj Shah
Browsers are escalating their feature set to accommodate new specifications like HTML 5, XHR Level 2 and DOM Level 3. It is forming the backbone of next generation applications running on mobile, PDA devices or desktops. The blend of DOM (Remote Execution stack) , XHR L2 (Sockets for injections) and HTML5 (Exploit delivery platform) is becoming an easy victim for attackers and worms. We have already witnessed these types of attacks on popular sites like Twitter, Facebook and Yahoo. It is of the essence to understand attack surface and vectors to protect next generation applications. We have an enormous expansion of attack surface after inclusion of features like audio/video tags, drag/drop APIs, CSS-Opacity, localstorage, web workers, DOM selectors, Mouse gesturing, native JSON, Cross Site access controls, offline browsing, etc. This extension of attack surface and exposure of server side APIs allow attacker to perform following lethal attacks and abuses.
XHR abuse with attacking Cross Site access controls using level 2 calls
JSON manipulations and poisoning
DOM API injections and script executions
Abusing HTML5 tag structure and attributes
Localstorage manipulation and foreign site access
Attacking client side sandbox architectures
DOM scrubbing and logical abuse
Browser hijacking and exploitation through advanced DOM features
One-way CSRF and abusing vulnerable sites
DOM event injections and controlling (Clickjacking)
Hacking widgets, mashups and social networking sites
Abusing client side Web 2.0 and RIA libraries
We will be covering the above attacks and their variants in detail along with some real life cases and demonstrations. It is also important to understand methods of discovering these types of vulnerabilities across the application base. We will see some new scanning tools and approaches to identify some of these key issues.
Building Cross Platform Mobile Web AppsJames Pearce
Frameworks like Sencha Touch are heralding a new way of building mobile services using Javascript, HTML5 and CSS3. If you want to discover how to use standard web technologies to reach your mobile users in beautiful app-like ways, this session is for you.
We explore the possibilities that each of these rich, standards-based libraries can bring, we show how the mobile device is fast becoming a first-class Javascript run-time environment, and we discuss how we might be on the dawn of a new web age, where mobile and client-side applications can immerse billions of users with exciting, contextually-aware experiences.
Building Hopsworks, a cloud-native managed feature store for machine learning Jim Dowling
Cloud Native London talk about the control layer of Hopsworks.ai and our choice of cloud native services. We built our own multi-tenant services as cloud native services, for the most part.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
Here are the slides from my talk at @media in London two weeks ago titled "Professional Frontend Engineering." I had four goals for the talk.
Put a stake in the ground.
Reiterate our values.
Advocate the discipline.
Nurture a healthy Web.
The goals were threaded throughout the four sections of the talk::
Historical Perspective
Our Beliefs & Principles
Knowledge Areas & Best Practices
Why It All Matters
The professionalization of frontend engineering is a topic I'm passionate about. I think it is critical to the advancement of the Internet.
Presented May 30th, 2008, in London at the @media conference in the plenary opening day two.
Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…
JavaScript has grown up. Now it's time to see how far it can go.
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Shreeraj Shah
Browsers are escalating their feature set to accommodate new specifications like HTML 5, XHR Level 2 and DOM Level 3. It is forming the backbone of next generation applications running on mobile, PDA devices or desktops. The blend of DOM (Remote Execution stack) , XHR L2 (Sockets for injections) and HTML5 (Exploit delivery platform) is becoming an easy victim for attackers and worms. We have already witnessed these types of attacks on popular sites like Twitter, Facebook and Yahoo. It is of the essence to understand attack surface and vectors to protect next generation applications. We have an enormous expansion of attack surface after inclusion of features like audio/video tags, drag/drop APIs, CSS-Opacity, localstorage, web workers, DOM selectors, Mouse gesturing, native JSON, Cross Site access controls, offline browsing, etc. This extension of attack surface and exposure of server side APIs allow attacker to perform following lethal attacks and abuses.
XHR abuse with attacking Cross Site access controls using level 2 calls
JSON manipulations and poisoning
DOM API injections and script executions
Abusing HTML5 tag structure and attributes
Localstorage manipulation and foreign site access
Attacking client side sandbox architectures
DOM scrubbing and logical abuse
Browser hijacking and exploitation through advanced DOM features
One-way CSRF and abusing vulnerable sites
DOM event injections and controlling (Clickjacking)
Hacking widgets, mashups and social networking sites
Abusing client side Web 2.0 and RIA libraries
We will be covering the above attacks and their variants in detail along with some real life cases and demonstrations. It is also important to understand methods of discovering these types of vulnerabilities across the application base. We will see some new scanning tools and approaches to identify some of these key issues.
Building Cross Platform Mobile Web AppsJames Pearce
Frameworks like Sencha Touch are heralding a new way of building mobile services using Javascript, HTML5 and CSS3. If you want to discover how to use standard web technologies to reach your mobile users in beautiful app-like ways, this session is for you.
We explore the possibilities that each of these rich, standards-based libraries can bring, we show how the mobile device is fast becoming a first-class Javascript run-time environment, and we discuss how we might be on the dawn of a new web age, where mobile and client-side applications can immerse billions of users with exciting, contextually-aware experiences.
Building Hopsworks, a cloud-native managed feature store for machine learning Jim Dowling
Cloud Native London talk about the control layer of Hopsworks.ai and our choice of cloud native services. We built our own multi-tenant services as cloud native services, for the most part.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
25. (X)HTML
Specification
Implementation
Bugs
server
26. (X)HTML
Specification
Implementation
Bugs
[ Theory / Practice ]
server
27. CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
data: custom, xml,
mixed: new xhtml
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server
28. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
data: custom, xml,
mixed: new xhtml
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server
29. Safari Firefox Opera Firefox Opera 10,000+ UAs
IE5, 6, 7
Macintosh Windows Linux, Unix, Mobile
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
data: custom, xml,
mixed: new xhtml,
Data Transport
Implementation
behavior: js
json
Defects
[ Theory / Practice ]
server
30. Safari Firefox Opera Firefox Opera 10,000+ UAs
IE5, 6, 7
Macintosh Windows Linux, Unix, Mobile
knowledge areas: 7
CSS
dimensions: xJavaScript
4 BOM API
(X)HTML DOM
DOM API
platforms: x 3
Specification
data: custom, xml,
mixed: new xhtml,
platform: x 4
browsers perDefects
Data Transport
Implementation
behavior: js
json
rendering modes: x 2
[ Theory / Practice ]
server
=672
113. [more videos ]
Yahoo! UI Library YUI Theater
The Yahoo! User Interface Library (YUI)
Home
Nate Koechley — quot;The YUI CSS
YUIBlog
Foundationquot;
The Yahoo! User Interface (YUI) Library is a set of utilities and
YUI Discussion Forum
controls, written in JavaScript, for building richly interactive web
YUI on Sourceforge
applications using techniques such as DOM scripting, DHTML and
API Documentation
AJAX. The YUI Library also includes several core CSS resources. All
YUI Examples Gallery
components in the YUI Library have been released as open source
Powered by YUI
under a BSD license and are free for all uses.
YUI Theater
YUI License Download YUI version 2.3.1, including full API
documentation and more than 200 functional examples
YUI Articles
from Sourceforge.
YUI FAQ
Graded Browser Support
The library's developers blog at the YUI Blog and the YUI Library community
Skinning YUI
exchanges ideas at YDN-JavaScript on Yahoo! Groups.
Bug Reports/Feature Requests
Serving YUI Files from Yahoo!
Security Best Practices Using YUI: YUI Core: YUI Library
Controls/Widgets:
FAQ The YAHOO
YUI Components
Global Object AutoComplete
Animation Getting Started
(base requirement Button Control
AutoComplete Licensing
for all YUI Calendar
Browser History Manager Articles
components) Color Picker
Button Cheat Sheets Senior YUI engineer Nate Koechley guides you
DOM Collection
Calendar Container
Support & through the YUI CSS foundation in this October 2007
(convenience (including Module,
Color Picker Community tech talk.
methods for DOM Overlay, Panel,
Connection Manager Filing Bugs & interactions) Tooltip, Dialog,
Container Feature Requests
Event Utility (event SimpleDialog)
DataSource
normalization and Yahoo! User Interface Blog
Searchable API DataTable
DataTable tools)
Documentation: Logger In the Wild for November 30th
Dom
API docs are availabe Menu Nate Koechley 11/30/07 19:45:25
YUI Library Utilities:
Drag & Drop
for every YUI Rich Text Editor
Animation Utility
Element Implementation Focus: TripIt
component. You can
Event Browser History Eric Miraglia 11/14/07 11:22:42
search the API Slider
Manager
ImageLoader [experimental]
documentation with Caridy Patiño Mayea’s Bubbling Library Updated
TabView
Logger Connection
instant filtering on the Eric Miraglia 11/07/07 09:23:45
TreeView
Manager (for
Menu main API page. Implementation Focus: Nestoria
XHR/Ajax)
Rich Text Editor
Eric Miraglia 11/06/07 17:58:27
YUI Library CSS
The YUI Compressor: DataSource Utility
Slider
Tools: Using the Yahoo Global Object to Manage Object
The YUI Compressor is
TabView
CSS Reset Inheritance and Composition: Four New YUI
a build-process Drag and Drop
TreeView
(neutralizes Examples
component that helps Utility
Yahoo Global Object
browser CSS Eric Miraglia 11/06/07 17:54:03
you minify your Element Utility
YUI Loader
styles)
JavaScript and CSS. ImageLoader Utility
YUI Test
CSS Base (applies
Documentation and [experimental]
Reset CSS
consistent style
download information The YUILoader YUI Forum on Yahoo! Groups
Base CSS foundation for
are available here. Utility
Fonts CSS common elements) Using DataTable with Drag and Drop
The YUI Test
Grids CSS CSS Fonts guiltyspark05 12/03/07 21:52:02