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 013115


Published on

Tacoma-JS meetup presentation including selected schools, books, text editors, a basic Bootstrap web page leading to the next step of our goal to create a weather delivery app that we can publish on our Github account.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Meetup js 013115

  1. 1. Javascript beginners lightning round Today’s Event hosts • St. Patrick’s Church & School - Tacoma • Knights of Columbus Tacoma Council 809 • Moderator: Joe Devlin • Access this slide at: 1/31/2015
  2. 2. 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 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  1/31/2015
  3. 3. A word from our hosts • Knights of Columbus 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, Coats for Kids, Wheelchair Mission. 1/31/2015
  4. 4. 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. 1/31/2015
  5. 5. Time management 1/31/2015 Present Code Discuss
  6. 6. 1/31/2015 Schedule 0830-0845 Set-up laptops, coffee and pastries 0845-0900 Introduce ourselves 0900-1000 Beginners Lightning Round - Bootstrap 1000-1015 Break 1015-1130 projects weather app 1100-1200 Node.js discussion? 1200-1230 Lunch
  7. 7. Rest Rooms • Down the hall passed the fireside room 1/31/2015
  8. 8. 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 A quick tip for beginner coders is _____________. o I have: a) Never coded before, and this is my first day. b) Javascript is my first coding language and I am in my first few months c) I know several languages and am just now beginning to learn Javascript d) I know several languages and have been working on Javascript for several months. 1/31/2015
  9. 9. Feedback / Comment review 1/31/2015 • Online schools o Pierce County Library  - prepaid w/ tax dollars  - prepaid w/ tax dollars o Codecademy - free o - free o Khanacademy - free o W3schools – free o o – buy the book o - free and fee o – (TDD) not free
  10. 10. Feedback / Comment review 1/31/2015 • Text Editors or IDE o Sublime for Windows, Linux, and Mac OSX o VIM - for Windows, Linux, an Mac OSX o Atom – node.JS based hackable o Brackets o Notepad++ for windows o Text++ for IOS o Webmatrix cloud-connected web development tool o Visual Studio o Xcode for the Mac o Construct2 for gaming o GameSalad “ “ o Net+ ? o NetBeans IDE for Windows, Linux, an Mac OSX o Vi – Linux terminal based o Pico, Nano - Linux terminal based o UltraEdit – 30 day trial – fee based
  11. 11. Taking advantage of online schools 1/31/2015 • – Mike Myers • Pierce County Library o o • • • Books: • Quick notes
  12. 12. Bootstraping a web page: Setup 1/31/2015 In your text editor… • Blank o Create a blank for template: • Step A - header o Goto: o o In the page header add links for plugins and template :
  13. 13. 1/31/2015 Bootstrap webpage: Step A header Source:
  14. 14. Bootstraping a web page: Setup 1/31/2015 • Step B - navbar in body o Goto: o In the body add the <div><ul><li> for the navbar:
  15. 15. 1/31/2015 Bootstrap webpage: Step B navbar in body Source:
  16. 16. 1/31/2015 Bootstrap webpage: Step B navbar in body Source:
  17. 17. Bootstraping a web page: Body 1/31/2015 • Step C – main content component in body o Goto: o o In the body below the navabar add <div> component for the message or call to action: o Note the container div tags surround everything in the <body>. o
  18. 18. 1/31/2015 Bootstrap webpage: Body Source:
  19. 19. Bootstraping a web page: Detail 1/31/2015 •Step D – Mock up a weather widget in main content component o Goto: o o In the body below the view-components button add <div> Accuweather widget: o Inspect the widget and see the JavaScript just for fun: o
  20. 20. 1/31/2015 Bootstrap webpage blank Source:
  21. 21. DeMinifying Javascript 1/31/2015 •Copy the text of the compressed Javascript o Goto: o Paste the text into the Step 3 generate field: o Press the generate button o Copy code from “Your code is ready” o Paste prettified code into your text editor.
  22. 22. GitHub for collaboration 1/31/2015 • o Weather App Ideas o Simple free widget downloads    o Government data o NOAA - o Commercial Data (free but must register first and then comply with use agreement) o Yahoo - o