SlideShare a Scribd company logo
Unobtrusive javascript
 JavaScript guru Douglas Crockford calls the
browser “the most hostile programming
environment in the world.”
 He said this before mobile browsing was even a
thing at which point he said:
 “I used to say that the web browser was the
most hostile programming environment ever
devised, but that was before I found out about
Mobile.”
 Infinite combinations of hardware and software
The front end stack
HTML
 HTML is forgiving and browsers can deal with
invalid markup
 Markup that doesn't meet the spec will still give
you a mostly working page
CSS
 CSS is aloof. If it encounters something it
doesn't understand, it just shrugs and moves on
 Some IE CSS hacks take advantage of CSS
quirks (It's not a bug, it's a feature)

Recommended for you

Kickstart sencha extjs
Kickstart sencha extjsKickstart sencha extjs
Kickstart sencha extjs

The document provides an overview of ExtJS, a JavaScript framework. It discusses trends in JavaScript like single page applications and MVC architecture. It then defines ExtJS, noting it is an open source framework developed by Sencha with rich UI components and support for HTML5. Some key benefits of ExtJS are discussed, like cross-browser support, powerful build tools, and accessibility features. The document demonstrates a simple "Hello World" app in ExtJS and covers core concepts like components, data packages, layouts and containers. It also lists additional ExtJS topics like localization, drag and drop, theming and MVVM.

javascriptsenchaextjs
Cross browser testing with browser stack
Cross browser testing with browser stackCross browser testing with browser stack
Cross browser testing with browser stack

This document discusses cross-browser testing using BrowserStack. It provides an agenda that covers why cross-browser testing is needed, why to use BrowserStack, basic concepts of BrowserStack usage, and leaves time for questions. BrowserStack allows testing across over 1100 real browsers and devices without requiring local installations. It also supports many programming languages and testing frameworks.

testingsoftware testingbrowserstack
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007

The document summarizes key principles for building high-performance JavaScript applications. It outlines mistakes made in developing Plaxo's AJAX desktop application, which almost didn't ship due to performance issues. The main points are: be lazy and write less code; load JavaScript on demand and draw UI late; be responsive by yielding frequently; cache backend responses; play to the browser's strengths; and profile applications vigilantly from the start to optimize for performance.

Javascript
 Javascript is a quitter. If it encounters a problem it just
gives up and goes on strike.
 Some browsers may ignore your script completely
 Even when a browser can support JavaScript, users may
turn it off for security reasons, or their corporate firewall
may block it
 Even when a browser supports JavaScript, it may not
understand parts of your script because it has a
proprietary implementation of some parts of the DOM
specification (usually IE)
 Even when the script is interpreted correctly, it may
depend on HTML that is very complicated and/or might
change in unpredictable ways.
A lesson from history
First world problems
 Last February the download button for google
chrome broke.
 Nobody could download chrome for 12 hours
 It was caused by a javascript error
 This was an easy problem to avoid
What went wrong?
 Somebody broke an unrelated javascript library
used by the google chrome website and
included in all pages
 Uncaught TypeError: Cannot read property
'value' of undefined
 Because google did not include a href, the
browser could do nothing except sit there
looking embarrassed

Recommended for you

Introduction to Web Development Career
Introduction to Web Development CareerIntroduction to Web Development Career
Introduction to Web Development Career

The document outlines the 11 phases of a web developer's career, including learning HTML, CSS, JavaScript, PHP, MySQL and frameworks like jQuery, AngularJS, and Laravel. It provides recommended resources for learning each technology, such as Codecademy for HTML and CSS and Tutsplus for PHP. Tools like text editors, web browsers, and development environments like XAMPP are also listed.

web developmentweb design and developmentphp
Java script performance tips
Java script performance tipsJava script performance tips
Java script performance tips

This document provides 10 tips for improving JavaScript performance: 1. Define local variables instead of global variables to improve lookup speed. 2. Use closures sparingly since functions are objects that hurt performance. 3. Caching object properties and array items in variables improves performance over repeated lookups. 4. Avoid function-based iteration like forEach which creates a function per item.

javascriptperformancebest practice
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017

This document contains information from a presentation on testing Angular applications. It discusses various testing strategies like unit testing, end-to-end testing, and continuous integration/deployment. It also covers tools like Angular CLI, TypeScript, setting up tests, mocking dependencies. Examples of unit testing Angular services and components are provided. Resources like style guides, books, and the presenter's contact details are listed at the end.

protractorjasminetypescript
No href
What google did wrong
 Didn't follow the rules of unobtrusive javascript
 Created a single point of failure
 Ignored web standards
 Trusted core functionality to the most fragile
part of the front end stack
Why do you hate javascript?
 Javascript is great
 But don't start with it
 It's like building a house by choosing the
wallpaper first
 The purpose of JavaScript is to add a layer of
usability to your site. If the script is the entire
usability layer (in other words, if the site is
unusable without JavaScript), your javascript is
not unobtrusive.
Principles of unobtrusive javascript
 Your site should work without JavaScript.
 If JavaScript happens to be enabled, you can
present your users with an extra layer of
usability; a layer that allows them to perform
their tasks more quickly, and that avoids jarring
page reloads where possible.
 JavaScript is unsafe. That is, you should
*never* trust in JavaScript-only routines for
crucial tasks such as checking user input in a
form.

Recommended for you

Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web Development

This was one of my presentations made for BSc. IT students. A simple introduction to Web development and Web 2.0

Jquery
JqueryJquery
Jquery

The document discusses jQuery, a JavaScript library that simplifies DOM manipulation and AJAX calls. It allows common tasks to be accomplished with single line code. The syntax uses $ to select elements and perform actions. jQuery can be included from a CDN like Google or downloaded. An example shows hiding paragraphs with a button click using jQuery's click handler and hide method.

Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website

The document discusses the evolution of web browsers and their impact on the advancement of the World Wide Web. It outlines the development of early browsers, the "Browser Wars" between Internet Explorer and Netscape Navigator that drove innovation, a period of stagnation for Internet Explorer 6, and a second "Browser War" between Internet Explorer, Firefox, Chrome and other browsers. It also provides details on building a dynamic website using HTML, CSS, JavaScript, jQuery, PHP and SQL.

p.s. Google still don't have a href on that link.
Maybe they invested in better functional tests
instead?

More Related Content

What's hot

On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
 
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
Dmitry Sheiko
 
Kickstart sencha extjs
Kickstart sencha extjsKickstart sencha extjs
Kickstart sencha extjs
Shakti Shrestha
 
Cross browser testing with browser stack
Cross browser testing with browser stackCross browser testing with browser stack
Cross browser testing with browser stack
Denys Poloka
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007
briandemant
 
Introduction to Web Development Career
Introduction to Web Development CareerIntroduction to Web Development Career
Introduction to Web Development Career
Eunus Hosen
 
Java script performance tips
Java script performance tipsJava script performance tips
Java script performance tips
Shakti Shrestha
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Matt Raible
 
Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Jquery
JqueryJquery
Jquery
chauhankapil
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
Ryan Scheel
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
Dirk Ginader
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
aldenustream
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
Frederick Townes
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
InApp
 
Staying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress WebsiteStaying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress Website
Raymund Mitchell
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
Vijay Rayapati
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
Douglas Wright
 

What's hot (20)

On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
 
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
 
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right ChoiceJavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
 
Kickstart sencha extjs
Kickstart sencha extjsKickstart sencha extjs
Kickstart sencha extjs
 
Cross browser testing with browser stack
Cross browser testing with browser stackCross browser testing with browser stack
Cross browser testing with browser stack
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007
 
Introduction to Web Development Career
Introduction to Web Development CareerIntroduction to Web Development Career
Introduction to Web Development Career
 
Java script performance tips
Java script performance tipsJava script performance tips
Java script performance tips
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
 
Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web Development
 
Jquery
JqueryJquery
Jquery
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
 
Staying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress WebsiteStaying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress Website
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
 

Similar to Unobtrusive javascript

PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Simon Willison
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
Saif Ullah Dar
 
Javascript SEO Devs and SEOs playing nicely
Javascript SEO Devs and SEOs playing nicelyJavascript SEO Devs and SEOs playing nicely
Javascript SEO Devs and SEOs playing nicely
Peter Mead
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
DanWooster1
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
 
Essential Javascript -- A Javascript <b>Tutorial</b>
Essential Javascript -- A Javascript <b>Tutorial</b>Essential Javascript -- A Javascript <b>Tutorial</b>
Essential Javascript -- A Javascript <b>Tutorial</b>
tutorialsruby
 
Essential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_TutorialEssential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_Tutorial
tutorialsruby
 
Essential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_TutorialEssential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_Tutorial
tutorialsruby
 
TPR4
TPR4TPR4
TPR4
TPR4TPR4
Top 8 react static site generators for 2020
Top 8 react static site generators for 2020Top 8 react static site generators for 2020
Top 8 react static site generators for 2020
Katy Slemon
 
Single Page Apps - Gerry White @ BrightonSEO
Single Page Apps - Gerry White @ BrightonSEOSingle Page Apps - Gerry White @ BrightonSEO
Single Page Apps - Gerry White @ BrightonSEO
Gerry White
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
Going native with html5 web components
Going native with html5 web componentsGoing native with html5 web components
Going native with html5 web components
James York
 
GROOVY ON GRAILS
GROOVY ON GRAILSGROOVY ON GRAILS
GROOVY ON GRAILS
ziyaaskerov
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
oazabir
 

Similar to Unobtrusive javascript (20)

PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
 
Javascript SEO Devs and SEOs playing nicely
Javascript SEO Devs and SEOs playing nicelyJavascript SEO Devs and SEOs playing nicely
Javascript SEO Devs and SEOs playing nicely
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
<img src="../i/r_14.png" />
<img src="../i/r_14.png" /><img src="../i/r_14.png" />
<img src="../i/r_14.png" />
 
Essential Javascript -- A Javascript <b>Tutorial</b>
Essential Javascript -- A Javascript <b>Tutorial</b>Essential Javascript -- A Javascript <b>Tutorial</b>
Essential Javascript -- A Javascript <b>Tutorial</b>
 
Essential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_TutorialEssential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_Tutorial
 
Essential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_TutorialEssential_Javascript_--_A_Javascript_Tutorial
Essential_Javascript_--_A_Javascript_Tutorial
 
TPR4
TPR4TPR4
TPR4
 
TPR4
TPR4TPR4
TPR4
 
Top 8 react static site generators for 2020
Top 8 react static site generators for 2020Top 8 react static site generators for 2020
Top 8 react static site generators for 2020
 
Single Page Apps - Gerry White @ BrightonSEO
Single Page Apps - Gerry White @ BrightonSEOSingle Page Apps - Gerry White @ BrightonSEO
Single Page Apps - Gerry White @ BrightonSEO
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
 
Going native with html5 web components
Going native with html5 web componentsGoing native with html5 web components
Going native with html5 web components
 
GROOVY ON GRAILS
GROOVY ON GRAILSGROOVY ON GRAILS
GROOVY ON GRAILS
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
 

Recently uploaded

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
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
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
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
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
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
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
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
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
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
 

Recently uploaded (20)

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
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
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
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
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
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
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
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
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
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
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
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
 

Unobtrusive javascript

  • 2.  JavaScript guru Douglas Crockford calls the browser “the most hostile programming environment in the world.”  He said this before mobile browsing was even a thing at which point he said:  “I used to say that the web browser was the most hostile programming environment ever devised, but that was before I found out about Mobile.”  Infinite combinations of hardware and software The front end stack
  • 3. HTML  HTML is forgiving and browsers can deal with invalid markup  Markup that doesn't meet the spec will still give you a mostly working page
  • 4. CSS  CSS is aloof. If it encounters something it doesn't understand, it just shrugs and moves on  Some IE CSS hacks take advantage of CSS quirks (It's not a bug, it's a feature)
  • 5. Javascript  Javascript is a quitter. If it encounters a problem it just gives up and goes on strike.  Some browsers may ignore your script completely  Even when a browser can support JavaScript, users may turn it off for security reasons, or their corporate firewall may block it  Even when a browser supports JavaScript, it may not understand parts of your script because it has a proprietary implementation of some parts of the DOM specification (usually IE)  Even when the script is interpreted correctly, it may depend on HTML that is very complicated and/or might change in unpredictable ways.
  • 6. A lesson from history
  • 7. First world problems  Last February the download button for google chrome broke.  Nobody could download chrome for 12 hours  It was caused by a javascript error  This was an easy problem to avoid
  • 8. What went wrong?  Somebody broke an unrelated javascript library used by the google chrome website and included in all pages  Uncaught TypeError: Cannot read property 'value' of undefined  Because google did not include a href, the browser could do nothing except sit there looking embarrassed
  • 10. What google did wrong  Didn't follow the rules of unobtrusive javascript  Created a single point of failure  Ignored web standards  Trusted core functionality to the most fragile part of the front end stack
  • 11. Why do you hate javascript?  Javascript is great  But don't start with it  It's like building a house by choosing the wallpaper first  The purpose of JavaScript is to add a layer of usability to your site. If the script is the entire usability layer (in other words, if the site is unusable without JavaScript), your javascript is not unobtrusive.
  • 12. Principles of unobtrusive javascript  Your site should work without JavaScript.  If JavaScript happens to be enabled, you can present your users with an extra layer of usability; a layer that allows them to perform their tasks more quickly, and that avoids jarring page reloads where possible.  JavaScript is unsafe. That is, you should *never* trust in JavaScript-only routines for crucial tasks such as checking user input in a form.
  • 13. p.s. Google still don't have a href on that link. Maybe they invested in better functional tests instead?