1. Web Application development
  2. About
    1. Course Goals
    2. Challenges of Mobile web development
    3. About the course
    4. Editors
  3. Backend
    1. Proxy and Mojolicious Ajax server
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. AngularJS - Design
    1. Design
    2. Bootstrap Angular
    3. AngularJS resources
    4. Other resources
  11. 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
  12. 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
  13. 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
  14. Weather App
    1. Weather App background
    2. Weather App - steps
    3. Weather App Skeleton
  15. TODO
    1. v3 - todo
    2. v3 - back-end
    3. v3 - html and templates
    4. v3 - javascript
  16. 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
  17. 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)