clase4.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 4

Tools for Web Developers

• Qué es Chromium
• Blog de Chromium
• Google Developers
• @ChromiumDev en Twitter
• Shows for Web Developers
• Google Chrome Team en Github
• Web Fundamentals: GUIDES
• Web Fundamentals: Code Labs
• Novedades

Canary

• Chrome vs Chrome Canary
• Web oficial

PageSpeed

• ¿Qué es PageSpeed?
• PageSpeed
• Guía PageSpeed Insights
• Referencia API
• F.A.Q

Lighthouse

• Lighthouse en Github
• Extensión de Chrome

puppeteer

• Web Oficial
• Web Oficial | Video presentación
• Web Oficial | Quick start
• Headless Chrome: an answer to server-side rendering JS sites
• Github
• Ejemplos
• Ejemplo de login en Facebook con Puppeteer

Workbox

• Video presentación
• Guias
• Módulos
• Ref. Doc.
• Service Workers con workbox para progressive Web Apps

ChromeDevTools

• Device Mode
• Prueba ventanas de visualización adaptables y específicas para cada dispositivo
• Emula sensores: ubicación geográfica y acelerómetro
• Inspecciona y modifica ligeramente tus páginas
• Edita estilos
• Edita el DOM
• Cómo usar la consola
• Interactúa desde la línea de comandos
• Depura con puntos de interrupción
• Depura código ofuscado
• Configura la persistencia con los espacios de trabajo de DevTools
• Conceptos básicos del panel Network
• Comprensión de Resource Timing
• Limitación de la red
• Cómo ver el rendimiento
• Analiza el rendimiento del tiempo de ejecución
• Diagnostica diseños sincrónicos forzados
• Generador de perfiles de CPU en JavaScript
• Generador de perfiles de montón
• Administra datos
• Seguridad

Extensiones para developers

Básicas

• Lighthouse
• aXe
• Wappalyzer
• Full Page Screen Capture
• JSONView
• ColorZilla
• checkbot

Extras

• Site Palette
• WhatFont
• Web Developer Checklist
• BuiltWith Technology Profiler
• Awesome Screenshot
• Pestaña de Flickr
• Allow-Control-Allow-Origin:
• User-Agent Switcher
• Lorem Ipsum Generator (Default Text)
• Site Spider, Mark II
• CSSViewer
• Check My Links
• Chrome Daltonize!
• Search by Image (by Google)
• Instant Wireframe
• Dimensions
• Window Resizer

Extensiones para developers: SAFETY FIRST

• Browser Extensions Are a Privacy Nightmare: Stop Using So Many of Them
• Google Chrome WARNING – Using these popular extensions could put your computer at risk
• Look out: chrome extension malware has evolved
• Hijacked Extensions Put 4.7 Million Chrome Users at Risk
• Quora | What dangers are associated with Google Chrome extensions?
• Why you should be careful with browser extensions
• Chrome Has a Malware Problem, and Google Needs to Fix It
• Understand the Inherent Risk in Browser Extensions
• Google Chrome Extensions: 6 Security Facts
• 4 Malicious Chrome Extensions Put 500k Users at Risk of Click Fraud
• Stackoverflow | How Big a Security Risk are Browser Extensions?

Consola

• Más información:

  • Curso Chrome DevTools
  • Chrome DevTools

• Métodos:

  • .assert()
  • .count()
  • .dir()
  • .dirxml()
  • .error()
  • .group()
  • .groupCollapsed()
  • .groupEnd()
  • .info()
  • .log()
  • .profile()
  • .profileEnd()
  • .table()
  • .time()
  • .timeEnd()
  • .timeStamp()
  • .trace()
  • .warn()

Interacción Básica con el Usuario

• Más información:
  • Window.alert()
  • Window.confirm()
  • Window.prompt()