Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup-js-042515

528 views

Published on

AJAX to automatically submit webpage markup to Validator.nu a markup validation web-service.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Meetup-js-042515

  1. 1. AJAX with Validator.nu API 4/25/2015 1parish.saintpats.org kofc809.org
  2. 2. AJAX with Validator.nu API Today’s Event hosts • St. Patrick’s Church & School - Tacoma • Knights of Columbus Tacoma Council 809 4/25/2015 2parish.saintpats.org kofc809.org
  3. 3. AJAX with Validator.nu API Moderator: Joe Devlin 4/25/2015 3parish.saintpats.org kofc809.org
  4. 4. AJAX with Validator.nu API Access this slideshow at: http://www.vividventures.biz/d/?q=node/8 4/25/2015 4parish.saintpats.org kofc809.org
  5. 5. A word from our hosts •St. Patrick’s Church – Tacoma o The pastoral council has generously offered us this location for today, as part of the churches community outreach. o Founded in 1892 o Aligned with St. Patrick’s Catholic School link o Reference: The Bible API o Working on the Engaged Church model “Growing an Engaged Church” by Albert Winseman, Gallup Press, ISBN 978-1-59562-014-9 o Promoting personal development with Strengths Finder. “Strengths Finder” by Tom Rath, Gallup Press, ISBN 978-1-59562-015-6 strengthsfinder.com 4/25/2015 5parish.saintpats.org kofc809.org
  6. 6. A word from our hosts • Knights of Columbus www.kofc.org o Founded in 1882 o Dedicated to “Saving Lives and Changing Lives” o Promoting strong families through charitable giving and a AAA rated life insurance and annuity program. o Local projects Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care & 4US.org, Coats for Kids, Wheelchair Mission. 4/25/2015 6parish.saintpats.org kofc809.org
  7. 7. Introduction •Joe Devlin - moderator o Member of St Patrick’s Parish and K of C council 809 o Working as a web host for small to medium sized businesses. o Interested in Javascript for the obvious reasons that it is a must for web development, plus for the purposes of getting people together to code; JS is a universal standard that comes with freely downloadable browsers and tools. We can easily collaborate. 4/25/2015 7parish.saintpats.org kofc809.org
  8. 8. Time management 4/25/2015 8parish.saintpats.org kofc809.org Present Code Discuss
  9. 9. 4/25/2015 9parish.saintpats.org kofc809.org Schedule 0830-0845 Set-up laptops, coffee and pastries 0845-0900 Introduce ourselves 0900-1000 Workspace setup, AJAX Basics, validator.nu 1000-1015 Break 1015-1130 validatorNu-JSwebServiceAPI 1130-1200 Lunch
  10. 10. Rest Rooms • Down the hall past the fireside room 4/25/2015 10parish.saintpats.org kofc809.org
  11. 11. Attendee Introduction • Let each of us introduce ourselves o My name is ____________. (First name) o Working as a ____________, or looking for work as a _________. o I have been working on / studying ____________________. o My current question is _____________________. o What am I doing with social networking to market myself in the job market, or my business? 4/25/2015 11parish.saintpats.org kofc809.org
  12. 12. Setup for today 4/25/2015 12parish.saintpats.org kofc809.org • Pierce County Library apply o Teamtreehouse.com o teamtreehouse.com/gateways/pierce_county_public_library/signup o Why? Teachable, repeatable, powerful • codepen.io • http://www.it-ebooks.info/ ajax • https://github.com/Tacoma-JS • Send a request to me for write access.
  13. 13. HTML Validation in the spirit of Test Driven Development 4/25/2015 13parish.saintpats.org kofc809.org • When writing javascript in the DOM it is imperative that the HTML be valid, especially if manipulating the DOM. • One possible way to confirm the validity is to submit your markup to Validator.nu in one of the following formats o Address o File upload o Text field • Try it!
  14. 14. HTML Validation automation sure would be nice 4/25/2015 14parish.saintpats.org kofc809.org • After repeatedly testing a few pages the novelty wears off and I think it would be nice if each page under development returned validation automatically so I can focus on writing code and not waste time on validating the document. • So I clearly need to send data to the validator.nu API (application programmer interface) in the background (asynchronously) so the validator does not hog the intended page function. • This is clearly a job for AJAX.
  15. 15. AJAX Basics at Teamtreehouse 4/25/2015 15parish.saintpats.org kofc809.org • Teamtreehouse AJAX-basics link (must be logged in) o Introducing AJAX - link  In Chrome w/ settings->tools->javascript console Log XMLHttpRequest tool; view the validator.nu page for XHR requests. See any? o How AJAX works – link  XMLHttpRequest - Mozillas Developer Network  Create the XHR object, callback function, open request, and send the request o A simple AJAX example - link  AJAX requests ONLY work through a web server!  onreadystatechange, readystate
  16. 16. HTML Validation automation sure would be nice – Deja Vu 4/25/2015 16parish.saintpats.org kofc809.org • After repeatedly testing a few pages the novelty wears off and I think it would be nice if each page under development returned somewhat automatic validation so I can focus on writing code and not waste time on validating the document. • I clearly need to send ‘data’ to the validator.nu API (application programmer interface) in the background (asynchronously) so the validator does not hog the intended page function. • How does the validator.nu form interact with the server?
  17. 17. Validator.nu API 4/25/2015 17parish.saintpats.org kofc809.org • You might be inclined to view the source of the validator.nu form and javascript to inspect how it works. o When viewing page source the markup is all on one line.  Clean it up at http://www.dirtymarkup.com o Inside find HTML form stuff and the script name ‘script.js’ which you can see: https://validator.nu/script.js o Using the browsers find feature search for clues in code :  An AJAX call keyword XMLHttpRequest (none found)  A jQuery keyword $.ajax, $.post (none found) o Conclusion is: script only manipulates the DOM and data is sent via the standard HTML form submission button.
  18. 18. Validator.nu API 4/25/2015 18parish.saintpats.org kofc809.org OR • maybe you would rather read the extensive instructions at https://about.validator.nu/ and https://github.com/validator/validator/wiki/Service:-HTTP- interface • You will find no specific Javascript patterns that can be copied from the instructions, and by extensively searching the web you find no published working Javascript yet . • Naturally one would suspect the easiest solution would be to submit the data with jQuery.ajax.
  19. 19. jQuery.ajax submission to validator.nu 4/25/2015 19parish.saintpats.org kofc809.org •Stuff that did not work with validator.nu o Following jQuery ajax instructions o Sending multipart form data with jquery – stackoverflow o http://hayageek.com/jquery-ajax-form-submit o http://digipiph.com/blog/submitting-multipartform- data-using-jquery-and-ajax o How to $.post send multipart form data to validator.nu - link
  20. 20. XMLHttpRequest submission to validator.nu 4/25/2015 20parish.saintpats.org kofc809.org • What javascript did work with validator.nu • Find my code at: o at validatorNu-JSwebServiceAPI on github o http://vividventures.biz/examples/js/validate_html o codepen.io - link  http://codepen.io/NorthDecoder/pen/JdjmVO
  21. 21. 4/25/2015 21parish.saintpats.org kofc809.org Main logic of test_valid_html.js
  22. 22. 4/25/2015 22parish.saintpats.org kofc809.org sendFileData() of test_valid_html.js
  23. 23. 4/25/2015 23parish.saintpats.org kofc809.org sendFileData() of test_valid_html.js
  24. 24. 4/25/2015 24parish.saintpats.org kofc809.org sendURLData() of test_valid_html.js
  25. 25. 4/25/2015 25parish.saintpats.org kofc809.org sendURLData() of test_valid_html.js
  26. 26. Issues with XMLHttpRequest submission to validator.nu 4/25/2015 26parish.saintpats.org kofc809.org • Internet Explorer enters quirks mode on receiving invalid html, therefore the code will fail. Need to detect quirks mode and issue a warning. • If the DOM is changed after the test then those changes are untested.
  27. 27. Reference 4/25/2015 27parish.saintpats.org kofc809.org • https://gist.github.com/NorthDecoder • https://github.com/VividVenturesLLC/validatorNu-JSwebServiceAPI • Validator.nu – link • How to $.post send multipart form data to validator.nu - link

×