Book of analogies

Learn Programming with real world examples

#amatterofcontext

#amatterofcontext

when you’re learning something new, connect it to something you already know

-- Alex Coleman, via Self-taught coders

Why Analogies?

• Coding isn't easy
  • creativity, problem solving
• New concepts, familiar mechanisms
• Provides required context for learning
• Programming -> Learn to think + new language
• Work differently for everyone
  • contexts they're used to differ
  • distinct ways of thinking 

#amatterofcontext

Algorithms

• Recipes (again)
• Telephone list, looking for a number

#amatterofcontext

Variables

• Boxes that can be filled with content

#amatterofcontext

Objects, associative arraws 

• Key-value pairs (key is unique)
• Just like a dictionary
  • ​terms are unique, othewise we couldn't look for them
  • actually called "dictionaries" in Python
• Options for a videogame
  • imagine having different entries for the same option...
• Any "object": what's its size, what does it do?... [3]

#amatterofcontext

The Phone Store

(Kyle Simpson)

• Price of phone is 99.99 (number)
• Price of phone call if "free" (string/literal)
• Does phone include a charger? (yes/no)

Number (maths), string (literal value), boolean (true/false)

#amatterofcontext

Source: You don't know JS, chapter 1 (Kyle Simpson)

Types and values

Databases and files

• File Cabinet (source)

#amatterofcontext

Frameworks

• Framework = Foundation to Build a House
• MVC - Building a LEGO Spaceship on demand
  • Models - ​Blocks
  • Controller - Builder (he's "in control")
  • View - Actual spaceship
  • Request - person who asked for spaceship

#amatterofcontext

Promises

• Like phone calls
• ​​Can be answered or rejected
• You can do other stuff while you wait

#amatterofcontext

Source: Understanding JavaScript Promises – with correct terminology (Robin Pokorny)

APIs

REST vs GraphQL

online shop:

multiple products at once, single payment

#amatterofcontext

Author: Brenda Clark, in 'What is GraphQL: History, Components, and Ecosystem

vending machine: one product and payment at a time

#amatterofcontext

Source: WDS 

If Web development was a house

• HTML - structure (ex.: celing, walls, door)
• CSS - aestetics (ex.: colors, texture)
• Javascript - functionalities (ex.: opening doors)

Bibliografia

1. (Most) Coding Diagrams are Useless - Learning to Code Using Analogies - Self-taught coders 
2. Playing with Legos: The Inner-Workings of a Model-View-Controller (MVC) Web Applications - Self-taught coders
3. Getting Started with Javascript Objects - scotch.io