This document discusses using JavaScript libraries to write unobtrusive scripts. It begins with a brief history of JavaScript development and introduces concepts like unobtrusive scripting and progressive enhancement. It then provides examples of basic unobtrusive scripts and discusses challenges like cross-browser event handling. The bulk of the document focuses on JavaScript libraries and their benefits, listing common library features and some of the most popular libraries like jQuery. It concludes with a specific example using Yahoo's YUI library to add AJAX functionality to a login form.
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
This is the Google Tech Talk that I gave August 17th, 2007 on building a JavaScript library. I derived much of the talk from my experiences in building the jQuery and FUEL JavaScript libraries.
The Complementarity of React and Web ComponentsAndrew Rota
On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html
The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.
Everything is Awesome - Cutting the Corners off the WebJames Rakich
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.
In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility
This is the Google Tech Talk that I gave August 17th, 2007 on building a JavaScript library. I derived much of the talk from my experiences in building the jQuery and FUEL JavaScript libraries.
The Complementarity of React and Web ComponentsAndrew Rota
On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html
The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.
Everything is Awesome - Cutting the Corners off the WebJames Rakich
The web is awesome despite it's detractors. But we can't forget our fundamentals when we're trying to forge ahead with new tech. This talk is about how to approach the building blocks of the web in a way that takes advantage of their strengths and avoids their weaknesses.
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This talk is geared towards users of jQuery plugins who are looking to pick the best plugins and plugin authors who would like a holistic review of existing jQuery plugins and what things to consider when making your own plugins. Marketing tactics and approaches to spreading the word about your plugin will also be discussed.
In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
My Slides about creating web sites which could also be useable even if you are not online! From Web Storages to Service Workers.
Presented at Mobiletech Conference in Munich March 2017
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes Multimedia, Offline, device hardware access, internationalization, and more.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes providing offline installation, multimedia, performance, and more.
Slides of the talk I gave at the .NET-day 2015 @L'Aquila (Italy).
Roadmap:
Use the DOM efficiently
Master events
Be smart with the network
Take care of memory issues
Take advantage of CSS3 features
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...Charles Beyer
Application Programming Interfaces allow developers to leverage existing program code in an effort to build additional functionality, automate processes or present existing functionality in a different format. APIs exist for many of Hyperion products; however, clear examples of how to use them are not always easy to find nor are applications for the API readily available. Proper application of the APIs for HFM, Workspace, FDM, Smartview and Shared Services can simplify the daily routines of end users and administrators.
This session will provide a high level overview of how each of the APIs work. Additionally, real-world examples for each API will be provided. Fully working code will be available for download from the ODTUG 12 site which attendees can use in their own environments.
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This talk is geared towards users of jQuery plugins who are looking to pick the best plugins and plugin authors who would like a holistic review of existing jQuery plugins and what things to consider when making your own plugins. Marketing tactics and approaches to spreading the word about your plugin will also be discussed.
In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
My Slides about creating web sites which could also be useable even if you are not online! From Web Storages to Service Workers.
Presented at Mobiletech Conference in Munich March 2017
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes Multimedia, Offline, device hardware access, internationalization, and more.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes providing offline installation, multimedia, performance, and more.
Slides of the talk I gave at the .NET-day 2015 @L'Aquila (Italy).
Roadmap:
Use the DOM efficiently
Master events
Be smart with the network
Take care of memory issues
Take advantage of CSS3 features
Hyperion EPM APIs - Added value from HFM, Workspace, FDM, Smartview, and Shar...Charles Beyer
Application Programming Interfaces allow developers to leverage existing program code in an effort to build additional functionality, automate processes or present existing functionality in a different format. APIs exist for many of Hyperion products; however, clear examples of how to use them are not always easy to find nor are applications for the API readily available. Proper application of the APIs for HFM, Workspace, FDM, Smartview and Shared Services can simplify the daily routines of end users and administrators.
This session will provide a high level overview of how each of the APIs work. Additionally, real-world examples for each API will be provided. Fully working code will be available for download from the ODTUG 12 site which attendees can use in their own environments.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
A/B Testing at Pinterest: Building a Culture of Experimentation WrangleConf
Presenter: Andrea Burbank, Pinterest
A successful experimentation program consists of much more than mere randomization and measurement. How do you help stakeholders understand the right things to measure, avoid common pitfalls, and learn to rely on A/B tests as the best way to measure a new system or feature? In this talk, Andrea will explain how building a culture of experimentation and the right tools to support it is just as important as the statistics behind the comparisons themselves - and potentially much trickier to get right.
Integrating React.js Into a PHP ApplicationAndrew Rota
React.js has taken the web development world by storm, and for good reason: React offers a declarative, component-oriented approach to building highly-scalable web UIs. But how can we take advantage of a JavaScript library like React in our server-side PHP applications. In this talk l cover the different ways React.js can be integrated into an existing PHP web application: from a client-side only approach to multiple techniques that support full server-side rendering with a Node.js server or PHP’s v8js. I also discuss the trade-offs in each of these designs and the challenges involved with adding React to a PHP site. Most importantly, I consider the higher-level issue of how to improve view cohesion across the client-server divide in a PHP application.
In recent years, a number of features have appeared on the web platform that allow us to provide better user experiences, largely through doing things more efficiently rather than inventing completely new patterns. In this talk, Mozilla’s Chris Mills explores a few of these features — such as Streams, Service workers and PWAs — and why they are worth knowing about as we move towards the future.
A talk on my experiences building crowdsourcing applications, both at the Guardian newspaper and for my own personal projects. Presented at Web Directions @media 2010 on June 9th.
Keynote for DjangoCon 2009, presented on the 8th of September 2009. Covers two cowboy projects - WildLifeNearYou.com and MP expenses - and talks about ways of "reigning in the cowboy" and developing in a more sustainable way.
Keeping your web application secure is an ongoing process - new classes of vulnerabilities are discovered with surprising frequency, and if you don't keep on top of them you could be in for a nasty surprise. This talk will discuss both common and obscure vulnerabilities, with real-world examples of attacks that have worked against high profile sites in the past.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
14. Progressive enhancement
Rather than hoping for graceful degradation, PE
builds documents for the least capable or
differently capable devices first, then moves on to
enhance those documents with separate logic for
presentation, in ways that don't place an undue
burden on baseline devices but which allow a
richer experience for those users with modern
graphical browser software.
Steven Champeon and Nick Finck, 2003
15. Applied to JavaScript
• Build a site that works without JavaScript
• Use JavaScript to enhance that site to
provide a better user experience: easier to
interact with, faster, more fun
19. • Start with Plain Old Semantic HTML
• Layer on some CSS (in an external
stylesheet) to apply the site’s visual design
• Layer on some JavaScript (in an
external script file) to apply the
site’s enhanced behaviour
21. • There are legitimate reasons to switch it off
• Some companies strip JavaScript at the
firewall
• Some people run the NoScript Firefox
extension to protect themselves from
common XSS and CSRF vulnerabilities
• Many mobile devices ignore JS entirely
• Screen readers DO execute JavaScript, but
accessibility issues mean that you may not
want them to
24. labels.js
• One of the earliest examples of this
technique, created by Aaron Boodman (now
of Greasemonkey and Google Gears fame)
25.
26.
27. How it works
<label for=quot;searchquot;>Search</label>
<input type=quot;textquot; id=quot;searchquot; name=quot;qquot;>
• Once the page has loaded, the JavaScript:
• Finds any label elements linked to a text field
• Moves their text in to the associated text field
• Removes them from the DOM
• Sets up the event handlers to remove the
descriptive text when the field is focused
• Clean, simple, reusable
28. easytoggle.js
• An unobtrusive technique for revealing
panels when links are clicked
<ul>
<li><a href=quot;#panel1quot; class=quot;togglequot;>Panel 1</a></li>
<li><a href=quot;#panel2quot; class=quot;togglequot;>Panel 2</a></li>
<li><a href=quot;#panel3quot; class=quot;togglequot;>Panel 3</a></li>
</ul>
<div id=quot;panel1quot;>...</div>
<div id=quot;panel2quot;>...</div>
<div id=quot;panel3quot;>...</div>
29.
30.
31. How it works
• When the page has loaded...
• Find all links with class=quot;togglequot; that reference an
internal anchor
• Collect the elements that are referenced by those
anchors
• Hide all but the first
• Set up event handlers to reveal different panels when a
link is clicked
• Without JavaScript, links still jump to the right point
32. Django filter lists
• Large multi-select boxes aren't much fun
• Painful to scroll through
• Easy to lose track of what you have
selected
• Django's admin interface uses unobtrusive
JavaScript to improve the usability here
33.
34.
35. Mapping Microformats
• The hCard microformat provides a standard
set of CSS classes for marking up an address
• Wouldn’t it be great if we could
unobtrusively plot them on a Google Map...
36.
37.
38. • When the page loads...
• Scan through for hCards (by looking for
class=quot;vCardquot;)
• Extract the street address and postcode for
each one
• Pass it to the Google Maps geocoder to get
the lat/long point
• Insert a div for the Google Map, instantiate it
and add the points as markers
39. How about Ajax?
• Ajax is frequently used to avoid page refreshes
• So...
• Write an app that uses full page refreshes
• Use unobtrusive JS to quot;hijackquot; links and form
buttons and use Ajax instead
• Jeremy Keith coined the term quot;Hijaxquot; to
describe this
42. Bad
Have you read our
<a href=quot;javascript:window.open(
'terms.html', 'popup',
'height=500,width=400,toolbar=no'
);quot;>terms and conditions</a>?
43. Also bad
Have you read our
<a href=quot;#quot; onclick=quot;window.open(
'terms.html', 'popup',
'height=500,width=400,toolbar=no'
); return false;quot;
>terms and conditions</a>?
44. Better
Have you read our
<a href=quot;terms.htmlquot;
onclick=quot;window.open(
'terms.html', 'popup',
'height=500,width=400,toolbar=no'
); return false;quot;
>terms and conditions</a>?
45. Better still
Have you read our
<a href=quot;terms.htmlquot;
onclick=quot;window.open(
this.href, 'popup',
'height=500,width=400,toolbar=no'
); return false;quot;
>terms and conditions</a>?
46. Best
Have you read our
<a href=quot;terms.htmlquot;
class=quot;sidenotequot;
>terms and conditions</a>?
47. Characteristics of
unobtrusive scripts
• No in-line event handlers
• All code is contained in external .js files
• The site remains usable without JavaScript
• Existing links and forms are repurposed
• JavaScript dependent elements are
dynamically added to the page
48. Handling events
function makeLinkPopup(link) {
if (link.addEventListener) { // W3C spec browsers
link.addEventListener('click', popupClicked, false);
} else if (link.attachEvent) { // Internet Explorer
link.attachEvent('onclick', popupClicked);
} else {
return; // Fail silently in ancient browsers
}
}
49. Handling events (2)
function popupClicked(ev) {
// Find the link that was clicked
ev = ev || window.event;
var link = ev.target || ev.srcElement;
if (link.nodeType == 3) { // Safari bug fix
link = link.parentNode;
}
window.open(link.href, 'popup',
'height=500,width=400,toolbar=no');
// Now prevent the default link action
if (ev.preventDefault) {
ev.preventDefault(); // W3C spec browsers
} else {
ev.returnValue = false; // Internet Explorer
}
}
50. Handling events (3)
function setupLinks() {
var links = document.getElementsByTagName('a');
for (var i = 0, link; link = links[i]; i++) {
if (link.className == 'sidenote') {
makeLinkPopup(link);
}
}
}
if (window.addEventListener) {
window.addEventListener('load', setupLinks, false);
} else if (window.attachEvent) {
window.attachEvent('onload', setupLinks);
}
52. Unobtrusive challenges
• Adding events from pure script (avoiding
inline script handlers) works differently
between IE and other browsers
• Cancelling default actions (link navigation,
form submission) also works differently
• Scripts that add behaviour need to execute
as soon as the DOM is available
53. The onload problem
• All of these examples use code that runs
when the window quot;loadquot; event is fired
• Wait until page is loaded, then manipulate
the DOM
• Problem: If the page takes a while to load
(large inline images) there will be a Flash Of
Unstyled Content (FOUC)
• Also, if the user clicks things before the
setup code has fired they won't get the
expected behaviour.
54. onDOMReady
• A number of attempts have been made to create
an onDOMReady event that fires when the
DOM has been constructed but before the page
has loaded
• dean.edwards.name/weblog/2006/06/again/
• Modern libraries all support this in some form
• One caveat: CSS may not have loaded, so
calculated dimensions may be incorrect
55. So we need libraries
• Writing this stuff by hand is madness
• Boilerplate code to deal with browser
inconsistencies is the number one enemy of
unobtrusive scripting
• Thankfully, today these are all solved
problems
57. Controversial statement
• A year ago, there was a sizable debate over
whether libraries were worth using at all -
many people preferred to just “roll their
own”
• Today, that argument is over. Libraries have
won.
• (some may disagree)
58. “The bad news:
JavaScript is broken.
The good news:
It can be fixed with
more JavaScript!”
Geek folk saying
59. JavaScript characteristics
• Highly dynamic language
• Most things can be introspected
• Most things can be modified at runtime
• Functional programming, anonymous
functions and closures
• Ability to modify behaviour of built-in types
• Prototypal inheritance - arguably more
powerful than class-based inheritance,
though much less widely understood
60. Modifying built-in types
var s = quot;This is a stringquot;;
alert(s.dasherize()); // Throws an error
String.prototype.dasherize = function() {
return this.toLowerCase().replace(/s+/g, '-');
}
alert(s.dasherize()); // this-is-a-string
61. Functional programming
function hello() {
alert(quot;helloquot;);
}
var hello = function() {
alert(quot;helloquot;);
}
(function() {
alert(quot;helloquot;);
})();
62. Functional programming
function hello() {
alert(quot;helloquot;);
}
var hello = function() {
alert(quot;helloquot;);
}
(function() {
alert(quot;helloquot;);
})();
63. Functional programming
function hello() {
alert(quot;helloquot;);
}
var hello = function() {
alert(quot;helloquot;);
}
(function() {
alert(quot;helloquot;);
})();
65. Closures
function outer() {
var s = quot;This is a stringquot;;
function inner() {
alert(s);
}
return inner;
}
var func = outer();
func(); // Alerts quot;This is a stringquot;;
66. Closures
function outer(s) {
function inner() {
alert(s);
}
return inner;
}
var sayHello = outer(quot;Helloquot;);
var sayGoodbye = outer(quot;Goodbyequot;);
sayHello();
sayGoodbye();
70. Event handling
• Cross-browser “run this function when this
event happens to this element”
• Cross-browser “on DOM ready” support
• Cross-browser event introspection: where
was the event targetted?
• Event triggering
• Custom events
72. Effects and animation
• Fades, wipes and transitions
• Custom animation of any CSS property
• Automatic frame-rate management
• Easing
73. Widgets
• Packaged widgets for things like...
• Sliders
• Calendar date pickers
• Fake “windows”
• Auto-completers
• Grids and treeviews
• Support for drag-and-drop
74. Language tools
• Iteration over objects and arrays
• Utilities for managing prototypal inheritance
• Traditional class-based inheritance
• Tools for managing scope and callbacks
• Dynamic code loading
75. Array manipulation
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
// process item
}
forEach(arr, function(item) {
// process item
});
doubles = map(arr, function(i) { return i * 2 });
evens = filter(arr, function(i) { return i % 2 == 0 });
76. Other characteristics
• Do they modify built in types?
• Global namespace impact
• Library size and componentization
• Support for accessibility (esp. for widgets)
• Browser support
• Documentation
• Community
77. The big five
• The Yahoo! User Interface Library
• Prototype (and Script.aculo.us)
• The Dojo Toolkit
• mooTools
• jQuery
78. The Example
• A login form that shakes its head at you
• Standard POST login form, unobtrusively
upgraded to use Ajax and shake if the
password is incorrect
• Behind the scenes, JSON is used for the reply
to say if the password was correct or not
79. Simple login JSON API
• Responds to the same POST as the regular
form, but looks for X-Requested-With:
XMLHttpRequest header
• If login fails, returns
{quot;okquot;:false}
• If login succeeds, returns
{quot;okquot;: true, quot;redirectquot;: quot;loggedin.phpquot;}
82. YAHOO.util.Event.onDOMReady(function() {
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
var $C = YAHOO.util.Connect;
var query = YAHOO.util.Selector.query;
$D.get('username').focus();
var form = query('form')[0];
83. YAHOO.util.Event.onDOMReady(function() {
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
var $C = YAHOO.util.Connect;
var query = YAHOO.util.Selector.query;
$D.get('username').focus();
var form = query('form')[0];
84. YAHOO.util.Event.onDOMReady(function() {
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
var $C = YAHOO.util.Connect;
var query = YAHOO.util.Selector.query;
$D.get('username').focus();
var form = query('form')[0];
85. YAHOO.util.Event.onDOMReady(function() {
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
var $C = YAHOO.util.Connect;
var query = YAHOO.util.Selector.query;
$D.get('username').focus();
var form = query('form')[0];
87. success: function(response) {
var json = eval('(' +
response.responseText + ')');
if (json.ok) {
window.location = json.redirect;
} else {
$D.get('password').value = '';
$D.get('password').focus();
shake(form, function() {
if (!query('p.error').length) {
var p = document.createElement('p');
p.className = 'error';
p.innerHTML = 'Incorrect password.';
form.insertBefore(p, form.firstChild);
}
});
}
88. function shake(el, onComplete) {
var $D = YAHOO.util.Dom;
$D.setStyle(el, 'position', 'relative');
var anim = new YAHOO.util.Anim(el, {
left: {to: -10}
}, 0.1, YAHOO.util.Easing.easeOut);
anim.onComplete.subscribe(function() {
// ...
}
anim.animate();
}
89. function shake(el, onComplete) {
var $D = YAHOO.util.Dom;
$D.setStyle(el, 'position', 'relative');
var anim = new YAHOO.util.Anim(el, {
left: {to: -10}
}, 0.1, YAHOO.util.Easing.easeOut);
anim.onComplete.subscribe(function() {
var anim2 = new YAHOO.util.Anim(el, {
left: {to: 10}
}, 0.1, YAHOO.util.Easing.easeOut);
anim2.onComplete.subscribe(function() {
var anim3 = new YAHOO.util.Anim(el, {
left: {to: -10}
}, 0.1, YAHOO.util.Easing.easeOut);
anim3.onComplete.subscribe(function() {
var anim4 = new YAHOO.util.Anim(el, {
left: {to: 10}
}, 0.1, YAHOO.util.Easing.easeOut);
anim4.onComplete.subscribe(function() {
var anim5 = new YAHOO.util.Anim(el, {
left: {to: 0}
}, 0.1, YAHOO.util.Easing.easeOut);
if (onComplete) {
anim5.onComplete.subscribe(onComplete);
}
anim5.animate();
});
anim4.animate();
});
anim3.animate();
});
anim2.animate();
});
anim.animate();
}
90. • Nice animation library, but a better way of
chaining animations would be useful
• Severe namespacing (YAHOO was picked
because it was so ugly no one would ever
have used it for an existing variable)
• Not too many shortcuts outside of dealing
with browser difficulties
• Excellent documentation
91. Download
Get the latest version—1.5.1
Learn
Prototype is a JavaScript Framework that aims to Online documentation and resources.
ease development of dynamic web applications.
Featuring a unique, easy-to-use toolkit for class-driven Discuss
development and the nicest Ajax library around, Prototype Mailing list and IRC
is quickly becoming the codebase of choice for web
application developers everywhere.
Contribute
Prototype and Script.aculo.us
Prototype and script.aculo.us: The quot;Bungee
bookquot; has landed!
Submit patches and report bugs.
Who's using Prototype?
Meet the developers
Core team member Christophe
Porteneuve has been hard at work
for the past few months tracking
92. document.observe('dom:loaded', function() {
$('username').focus();
var form = $$('form')[0];
form.observe('submit', function(ev) {
ev.preventDefault();
var url = form.action;
new Ajax.Request(url, {
parameters: form.serialize(),
onSuccess: ...
});
});
});
93. onSuccess: function(response) {
var json = response.responseJSON;
if (json.ok) {
window.location = json.redirect;
} else {
form.shake();
// No apparent way of setting an
// quot;on finishedquot; callback
setTimeout(function() {
if (!$$('p.error').length) {
var p = new Element(
'p', {'class': 'error'}
).insert('Incorrect...');
form.insertBefore(p, form.firstChild);
}
}, 500);
$('password').value = '';
$('password').focus();
}
}
94. • Adds many functions to the global
namespace ($, $$ etc) and extensively
modifies built in types
• Heavily inspired by Ruby and Ruby on Rails
• Useful shortcuts and nice effects
• Documentation still leaves something to be
desired - API docs for Prototype, incomplete
wiki docs for Scriptaculous
98. dojo.connect(last, 'onEnd', function() {
if (!dojo.query('p.error').length) {
var p = document.createElement('p');
p.className = 'error';
p.innerHTML = 'Incorrect username or password.';
form.insertBefore(p, form.firstChild);
}
});
dojo.byId('password').value = '';
dojo.byId('password').focus();
99. • core, dijit and dojox:
• Small, powerful abstraction library
• Widget creation tools plus many widgets
• “The future today” genius extensions
• Documentation has improved with the Dojo
Book, but still patchy in places
101. window.addEvent('domready', function() {
$('username').focus();
$$('form').addEvent('submit', function(ev) {
new Event(ev).stop();
var form = this;
var url = form.action;
form.send({
onComplete: function(data) {
var json = Json.evaluate(data);
if (json.ok) {
window.location = json.redirect;
} else {
form.style.position = 'relative';
// ... animation here
$('password').value = '';
$('password').focus();
}
}
});
});
});
102. var fx = form.effects({
duration: 100,
transition: Fx.Transitions.Quart.easeOut
});
fx.start({left: -10}).chain(function(){
this.start({left: 10});
}).chain(function(){
this.start({left: -10});
}).chain(function(){
this.start({left: 10});
}).chain(function(){
this.start({left: 0});
}).chain(function() {
if (!$$('p.error').length) {
var p = new Element('p').
addClass('error').setHTML(
'Incorrect username or password.'
);
form.insertBefore(p, form.firstChild);
}
});
103. • Started as an effects library for Prototype, now its
own thing but Prototype influences are clear
• No intention at all of playing nicely with other
libraries
• Good API documentation (including a mootorial)
but not much else, and major changes between
library versions
• I found the API unintuitive compared to the others
107. • Powerful, concise API based around CSS
selector querying and chaining
• Excellent namespace management -
everything lives on the one jQuery symbol
which is aliased to $, with the option to
revert
• Excellent support for plugins
• The best documentation out of all of the
libraries
109. Why jQuery
• It has the best balance between simplicity,
productivity and good manners
• It has excellent documentation
• You can learn the whole library in less than
an hour
110. Why jQuery instead of...?
• Unlike Prototype and mooTools...
• ... it doesn’t populate your global namespace
• Unlike YUI...
• ... it’s extremely succinct
• Unlike Dojo...
• ... you can learn it in 45 minutes!
112. jQuery philosophy
• Focus on the interaction between JavaScript
and HTML
• (Almost) every operation boils down to:
• Find some stuff
• Do something to it
114. Only one function!
• Absolutely everything* starts with a call to
the jQuery() function
• Since it’s called so often, the $ variable is set
up as an alias to jQuery
• If you’re also using another library you can
revert to the previous $ function with
jQuery.noConflict();
* not entirely true
117. CSS 2 and 3 selectors
a[rel]
a[rel=quot;friendquot;]
a[href^=quot;http://quot;]
ul#nav > li
li#current ~ li (li siblings that follow #current)
li:first-child, li:last-child, li:nth-child(3)
119. jQuery collections
• $('div.section') returns a jQuery collection
• You can treat it like an array
$('div.section').length = no. of matched elements
$('div.section')[0] - the first div DOM element
$('div.section')[1]
$('div.section')[2]
120. jQuery collections
• $('div.section') returns a jQuery collection
• You can call methods on it
$('div.section').size() = no. of matched elements
$('div.section').each(function() {
console.log(this);
});
121. jQuery collections
• $('div.section') returns a jQuery collection
• You can call methods on it
$('div.section').size() = no. of matched elements
$('div.section').each(function(i) {
console.log(quot;Item quot; + i + quot; is quot;, this);
});
125. Grabbing values
• Some methods return results from the first
matched element
var height = $('div#intro').height();
var src = $('img.photo').attr('src');
var lastP = $('p:last').html()
var hasFoo = $('p').hasClass('foo');
var email = $('input#email').val();
126. Traversing the DOM
• jQuery provides enhanced methods for
traversing the DOM
$('div.section').parent()
$('div.section').next()
$('div.section').prev()
$('div.section').nextAll('div')
$('h1:first').parents()
132. Chaining
• Most jQuery methods return another
jQuery object - usually one representing the
same collection. This means you can chain
methods together:
$('div.section').hide().addClass('gone');
133. Advanced chaining
• Some methods return a different collection
• You can call .end() to revert to the previous
collection
134. Advanced chaining
• Some methods return a different collection
• You can call .end() to revert to the previous
collection
$('#intro').css('color', '#cccccc').
find('a').addClass('highlighted').end().
find('em').css('color', 'red').end()
135. Ajax
• jQuery has excellent support for Ajax
$('div#intro').load('/some/file.html');
• More advanced methods include:
$.get(url, params, callback)
$.post(url, params, callback)
$.getJSON(url, params, callback)
$.getScript(url, callback)
136. Animation
• jQuery has built in effects:
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);
• You can chain them:
$('h1').fadeOut(1000).slideDown()
137. Or roll your own...
$(quot;#blockquot;).animate({
width: quot;+=60pxquot;,
opacity: 0.4,
fontSize: quot;3emquot;,
borderWidth: quot;10pxquot;
}, 1500);
138. Plugins
• jQuery is extensible through plugins, which
can add new methods to the jQuery object
139. Further reading
• http://jquery.com/
• http://docs.jquery.com/
• http://visualjquery.com/ - API reference
• http://simonwillison.net/tags/jquery/
• http://simonwillison.net/2007/Aug/15/jquery/
• http://24ways.org/2007/unobtrusively-
mapping-microformats-with-jquery