TOC: Web Application development

• About
  1. Course Goals
  2. Challenges of Mobile web development
  3. About the course
  4. Editors
• Backend
  1. Proxy and Mojolicious Ajax server
• HTML and CSS
  1. Emulate devices
  2. Browserstack screenshots
  3. Mobile or Responsive?
  4. HTML elements
  5. HTML form elements
  6. Bare HTML
  7. HTML and CSS
  8. Viewport and Media Query for body
  9. Viewport and Media Query
  10. Pixels (px), em, rem
  11. Units: px (pixels)
  12. Units: em (The size of Letter M)
  13. Units: rem (root em)
  14. Viewport width and height
  15. Exercise: Responsive HTML
• CSS
  1. CSS - embed in HTML file
  2. CSS - include from external file
  3. CSS syntax
  4. CSS attributes
  5. CSS selectors
  6. HTML/CSS frameworks
• AngularJS
  1. What is AngularJS
  2. MVC Model-View-Controller and Angular (MVW or MV*)
  3. Learning curve
  4. Major Parts of AngularJS
  5. Getting Started AngularJS
  6. Simple AngularJS expression
  7. Variables in AngularJS expressions
  8. Separate variable assignment and usage into two expressions
  9. Separate variable assignment and usage into two expressions - fixed
  10. Minimal Hello User: Binding with ng-model
  11. Full Hello User
  12. AngularJS controller with output
  13. AngularJS - Dependency Injection
  14. Angular controller with binding
  15. Add numbers using AngularJS
  16. Add numbers in controller
  17. Add numbers using function call
  18. Add numbers using HTML5
  19. Add numbers ng-init
  20. Exercise: In memory counter
  21. Solution: In memory counter
  22. Solution: In memory counter with decrement
  23. Solution: In memory counter with controller
  24. Exercise: Calculator
  25. Solution: Calculator
• AngularJS - Services
  1. Services
  2. Console log
  3. Logging with $log
  4. Turn off logging with $logProvider
  5. Showing the correct line number
  6. Dependency Injection
  7. Automatic counter with $timeout
  8. Automatic counter with stop button
  9. Automatic counter with stop and start buttons
  10. Simple pages
  11. Simple pages with controller
  12. HTML form elements with AngularJS
  13. Input validation with $messages
  14. TODO with AngularJS
  15. TODO with AngularJS (ENTER to submit and delete item)
  16. TODO with AngularJS (localStorage)
  17. Exercise: Automatic Counter with $interval
  18. Exercise: TODO
  19. Solution: Automatic Counter with $interval
• AngularJS - Routing
  1. Routing
  2. Simple routing
  3. Routing from code
  4. Two Angular controllers on the same page
  5. Two Angular Apps on the same page
  6. Routing with controller
  7. Routing with parameters
  8. Exercise: Routing
• Bootstrap
  1. Start with Bootstrap
  2. HTML5 Skeleton
  3. Bootstrap Skeleton
  4. Bootstrap HTML Tags
  5. Bootstrap Grid
  6. Fluid Container, rows and columns
  7. Buttons
  8. Glyphicons
  9. Menu or navigation bar
  10. Bootstrap tables
  11. Bootstrap form elements
  12. Lead Paragraph
  13. Bootstrap Grid is Responsive
  14. Bootstrap Grid can be hidden
  15. Bootstrap Grid hide the side when small
  16. Exercises: Bootstrap
• AngularJS - Design
  1. Design
  2. Bootstrap Angular
  3. AngularJS resources
  4. Other resources
• AngularJS - Ajax - Building a Single Page Application
  1. What are Single-page web applications?
  2. Access data on server
  3. Mojolicious Backend
  4. $http GET request
  5. $http GET request with CORS enabled
  6. $http GET request with data
  7. $http POST, OPTIONS requests
  8. $http list items
  9. $http DELETE request
  10. Using ngResource
  11. ngResource error handling (no CORS)
  12. ngResource GET with param
  13. Public APIs with Cross-origin Resource Sharing (CORS) enabled
  14. MetaCPAN API
  15. Exercise: Implement a new interface for MetaCPAN
• AngularJS - Filters
  1. Filters in HTML view
  2. Filters in JavaScript Controller
  3. Filter date
  4. Filter number
  5. Filter by case-insensitive substring
  6. Filter by attributes
  7. Filter table
  8. Filter by calling a function
  9. New (crazy) filter
  10. Filter number in JavaScript Controller
  11. Exercise: display clock and stopper
• AngularJS - Directives
  1. Directives
  2. Example: List people
  3. Example: List people with directive
  4. Example: List people with directive and templateUrl
  5. Hello World directive
  6. Create new directive
• Weather App
  1. Weather App background
  2. Weather App - steps
  3. Weather App Skeleton
• TODO
  1. v3 - todo
  2. v3 - back-end
  3. v3 - html and templates
  4. v3 - javascript
• Building a Single-page application
  1. Source Code
  2. Technology
  3. Setting up Vagrant
  4. Install Perl and Dancer2
  5. Install Node.JS
  6. Dancer single file
  7. Create Dancer Skeleton
  8. Dancer Directory layout
  9. Dancer script and module
  10. Run Dancer
  11. Clean-up Dancer Skeleton
  12. Run tests
  13. Makefile.PL
  14. Dancer Test scripts
  15. Dancer Config file
  16. HTML forms
  17. Log form parameters
  18. Accessing parameters in Dancer
  19. Logging in Dancer
  20. Passing values to the template
  21. Template::Toolkit
  22. Exercise: Create reverse echo page
  23. Exercise: Implement a TODO list
  24. First Ajax example
  25. Add route returning JSON
  26. Test route returning JSON
  27. Page with AJAX request
  28. Route serving template with AJAX request
  29. Next step: Stand alone client
  30. Stand-alone AJAX client
  31. HTTP Access Control (CORS)
  32. Testing the v1 and v2 API calls
  33. Proxy
  34. Next step: Create reverse echo
  35. Reverse echo with AJAX and Dancer
  36. Test reverse echo in Dancer
  37. Client side of AJAX string reverse
  38. Refactoring Dancer app - use the before hook
  39. Silencing the noisy tests
  40. Next step: TODO list
  41. Add item to MongoDB (POST route)
  42. Test adding item to MongoDB (POST route)
  43. MongoDB client
  44. Use separate database for testing
  45. Fetch all the items
  46. Test: Fetch all the items
  47. Add more tests
  48. Add and retrieve elements using jQuery and AJAX
  49. Add item
  50. Setting up Travis-CI
  51. Code refactoring: _mongodb
  52. Deleting item: Dancer, MongoDB backend
  53. Test Deleting item backend
  54. Deleting item: client side
  55. Access-Control-Allow-Methods
  56. Add header: Access-Control-Allow-Methods
  57. Replace manual HTML generation by the use of Handlebars
  58. Handlebars code
  59. Add timestamp to item (back-end)
  60. Add timestamp to item (back-end TO_JSON)
  61. Monkey patching DateTime::Tiny
  62. Add timestamp to item (front-end)
  63. jQuery Tablesorter
  64. Add Tablesorter themes
  65. Add Tablesorter Date column
• Handlebars
  1. Getting started with Handlebars
  2. Handlebars Template
  3. Handlebars process
  4. Handlebars inject into DOM
  5. Greeting in JavaScript - html
  6. Greeting in JavaScript - js
  7. Greeting with Habdlebars - html
  8. Greeting with Habdlebars - js
  9. Greeting with Habdlebars and jQuery - html
  10. Greeting with Habdlebars and jQuery - js
  11. Handlebars data
  12. Handlebars process
  13. Handlebars object and array
  14. Handlebars each
  15. Handlebars if
  16. Handlebars parent context
  17. Handlebars static helpers - html
  18. Handlebars static helpers - js
  19. Handlebars link helper - html
  20. Handlebars link helper
  21. Handlebars if_eq - html
  22. Handlebars if_eq
  23. Handlebars conditionals - html
  24. Handlebars conditionals
  25. Handlebars helpers
  26. Page with back and forward buttons (html)
  27. Page with back and forward buttons (js)