December 2013: Debugging Tools

News from the Bleeding Edge / traceGL Demo

— Brian Moeskau (@bmoeskau)

Performance Analysis using Chrome DevTools

— Renuka Rajan (@renukarajan2013 )

Dive into Firefox Developer Tools

— Ryan Stinnett, Mozilla (@jryans)

Drinks

Sponsor: CM First

http://www.cmfirstgroup.com/

Contact John Rhodes for more info

Golden Age of Web Dev

Golden Age of Web Dev

Driven by many factors

• Competition
• Choice
• Quality
• Innovation

End of the Year

It's a good time to step back and reflect

What makes this a golden age?

Amazon Web Services for JS

http://aws.typepad.com/aws/2013/10/developer-preview-aws-sdk-for-javascript.html

In developer preview since October

• Access AWS APIs without server-side code
• Supports S3, SQS (message queues), SNS (distributed notifications), DynamoDB
• CORS support out of the box

Rackspace Open Cloud

http://www.rackspace.com/open-cloud/

Announced in November

• Built on OpenStack APIs
• 100% SSD storage

Google Cloud Platform

https://cloud.google.com/

Virtual machines. Managed platform. Blob storage. Block storage. NoSQL datastore. MySQL database. Big Data analytics. Google Cloud Platform has all the services your application architecture needs.

• App Engine, Cloud SQL / Datastore, Hadoop, Cloud Storage, Google APIs
• Officially "generally available" as of today

Amazon WorkSpaces

http://aws.amazon.com/workspaces/

"Fully managed desktop computing service in the cloud"

Browser Pop Quiz

Name the latest versions of:

• IE
• Chrome
• Firefox
• Safari
• Opera

Browser Pop Quiz

HINT — versions as of October 2013:

• IE 10
• Chrome 29
• Firefox 23
• Safari 6
• Opera 16

Browser Pop Quiz

Name the latest versions of:

• IE 10 → 11
• Chrome 29 → 31
• Firefox 23 → 25
• Safari 6 → 7
• Opera 16 → 18

(since October 2013)

Browser Pop Quiz

A gentle reminder of where we were, not long ago:

Google Web Designer

https://www.google.com/webdesigner/

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device

• Scene-based animation builder
• CSS3-based 3D content authoring

( compare to Adobe Edge Animate, Sencha Animator, etc. )

Imager.js

By BBC News

https://github.com/BBC-News/Imager.js

Responsive images while we wait for srcset to finish cooking

• Image placeholders
• Lazy-loading of images
• Responsive image generation via Grunt

Retire.js

http://bekk.github.io/retire.js/

Helps detect versions of third-party libraries with known security vulnerabilities

• Command line code scanner
• Grunt plugin
• Chrome plugin
• Scans JS libs and/or Node modules

Big (New) Players

• Facebook: React / Phabricator
• LinkedIn: Hopscotch / Dustjs
• Netflix: SimianArmy / Asgard
• PayPal: Krakenjs
• Twitter: Bootstrap / Flight

Pop Quiz

What do all the previous projects have in common?

It's never been a better time to be a web developer!

Looking Toward 2014

Some food for thought:

• If you aren't in the cloud, you're building for obsolescence
• If you aren't taking open source seriously, START NOW
• If you are a developer and not on Github, you don't exist

D'oh...

#FAIL

Google WTF

http://google.github.io/tracing-framework/

spy-js

https://github.com/spy-js/spy-js

Debug/trace/profile JavaScript running on different platforms/browsers/devices

Upcoming Events

2013 Austin Web Bash

Tues, Dec 10, 7pm — free!

Data Day Texas

Sat, Jan 11, 8:30am — $165 (through Dec 7)

Performance Calendar

A new performance article every day in December

http://calendar.perfplanet.com/2013/

The speed geek's favorite time of the year

Resume with pauses blocked

Long-press the "resume" button at breakpoints (Chrome DevTools)

Easily preserve breakpoints / debugger statements between passes

Console.table()

var browsers = [
    { name: "IE",      version: 11, vendor: "Microsoft" },
    { name: "Chrome",  version: 31, vendor: "Google" },
    { name: "Firefox", version: 25, vendor: "Mozilla" },
    { name: "Safari",  version: 7,  vendor: "Apple" },
    { name: "Opera",   version: 18, vendor: "Opera Software" }
];

Console.table()

var browsers = [
    { name: "IE",      version: 11, vendor: "Microsoft" },
    { name: "Chrome",  version: 31, vendor: "Google" },
    { name: "Firefox", version: 25, vendor: "Mozilla" },
    { name: "Safari",  version: 7,  vendor: "Apple" },
    { name: "Opera",   version: 18, vendor: "Opera Software" }
];

Q & A

Brian Moeskau — @bmoeskau

Thanks!