Thinkful LA

1. Getting Started with Dev Tools
May 2017

2. About us
We train developers and data
scientists through 1-on-1
mentorship and career prep

3. About me
• Anna Mendoza
• Designer + Developer
• Work in Design + Digital
Services as a hybrid
• Co-Founder Curve Design
• Thinkful teacher FEWD + UX
+ Backend ( full stack! )

4. Thank you for joining us
HI EVERYBODY!
let’s talk about you first

5. What’s your programming background?
• Is this your first time writing code?
• Been self teaching for 1-3 months?
• Been at this for a couple of years?
• Been at this since you were a kid? ( secret ninja )
Let’s see a show of hands!

6. Key Topics
• HTML/CSS Live Editing
• Mobile & responsive testing
• Editing with “Sources”
• Using the console
• Javascript Debugging
• Network performance

7. Setup — Download Chrome
• Standard for developers (Google!)
• Simple & polished
• Mobile & Desktop
• Firefox & Safari are OK
• Avoid Internet Explorer!

8. What are DevTools?

9. How do I open DevTools?
• Go to a page in Chrome
• Right Click => Inspect
• Also — Cmd + Shift + I

10. What are the benefits?
• Inspect Document Object Model (DOM)
• Update HTML/CSS in real-time
• Test responsive and mobile friendliness
• Run Javascript in console
• Test & debug Javascript
• Measure & improve performance

11. Why live editing for HTML/CSS?

12. Typical Workflow
• This style (or code) isn’t working!
• Open HTML/CSS/Javascript
• Guess where the problem is
• Make change
• Save change
• Refresh page
• Did it work?

13. Workflow with DevTools
• This style (or code) isn’t working!
• Open DevTools (“Inspect”)
• Make change
• Did it work?

14. What am I looking at?
DOM Styles

15. Live Editing HTML
• Inspect element
• Expand/Collapse
• Edit HTML
• Add attributes
• Click & drag
• Delete

16. Challenge
• Change your name to a friend’s name
• Try and change picture (advanced)
• Take a picture of their page
• Send to friend & say you hacked their account

17. Live Editing CSS
• See computed CSS styles
• CSS for states
• Add CSS properties
• Modify CSS properties
• Remove CSS properties
• Links to CSS source files

18. Challenge
• Change background to your favorite color
• Add a fun border to the post button
• Delete Newsfeed (advanced)

19. Sources Features
• Prettify
• Persistent changes
• Local modifications
• Revert
• Save As

20. Mobile Demo
• Responsive sizes
• Device
• Frame
• Media queries
• Rotate

21. Console Features
• Interact with page in real-time using Javascript
• https://googlechrome.github.io/devtools-
samples/debug-js/get-started

22. Console Demo
• Basic JS commands
• Grab/manipulate element
• Quick scrape

23. Challenge
• Go to https://dream-walker.herokuapp.com/
• Change the title using Javascript in the console

24. Javascript Debugging is Pain

25. Debugging Features
• See where Javascript is failing
• Inspect variables
• Step through code slowly

26. Debugging Demo
• http://samplerdj.com
• Add breakpoint (+ step through)
• Inspect variables
• Pause on caught & uncaught exceptions

27. Load times are important!
• Yahoo: reducing page load by .4 seconds increased
traffic by 9%
• Google: increasing page load times from .4 to .9
seconds decreased traffic by 20%
• Amazon: every .1 second increase in load time
decreases sales by 1%

28. Network Features
• Test load times
• Throttle to different speeds
• See which files are cached or not
• See which files are causing slowdowns
• See file download sequence
• Google PageSpeed!

29. Network Challenge
• Go to https://dream-walker.herokuapp.com/
• What is page load time?
• What files are causing slowdowns?
• What do you recommend as a fix?

30. Advanced Topics
• CPU profiling
• Memory profiling

31. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime

32. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor

33. Our Mentors
Mentors have, on average, 10+ years of experience

34. Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Frontend “Frameworks” (React.js)
• Backend Development (Node.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep

35. Try us out!
Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
noel@thinkful.com)

36. October 2015
Questions?
Email Noel at noel@thinkful.com