JavaScript AllStars

Learn high level JavaScript from the Masters.
Instructed by Todd Wieland
  • Lectures 17
  • Video 8 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

Course Description

JavaScript AllStars features lectures, lessons and tutorials from the legends of JavaScript.

It is designed for JavaScript programmers who want to enhance their understanding of the language, take their skills to the next level and engage the brightest ideas in the JavaScript community.

It includes high level coding concepts and practices, as well as leading technologies like jQuery and Node.js.

What are the requirements?

  • A prerequisite understanding of JavaScript will be helpful, as the course is taught on a conceptual level, but not necessary
  • Optional: Text editor to follow along with coding discussions

What am I going to get from this course?

  • Over 17 lectures and 8 hours of content!
  • 'By the end of this course, you will have a high level understanding of JavaScript's purpose and origins
  • By taking this course you will become familiar with the structure of JavaScript
  • By the end of this course you will be familiar with the developers who have created and developed JavaScript
  • By taking this course you will become familiar with specialized applications of JavaScript, such as server-side processing and specialized libraries

What is the target audience?

  • Current developers seeking a deeper understanding of JavaScript
  • Prospective developers seeking high level knowledge about a useful, contemporary and powerful scripting language

Curriculum

Section 1: Course Intro and Overview
06:08

JavaScript AllStars is a curated course featuring JavaScript's legendary inventors, developers and evangelists.

It consists of a variety of lectures, lessons and tutorials from elite JavaScript programmers and community leaders.

Designed to provide high level insight and information, JavaScript AllStars is intended for experienced JavaScript coders - and those who plan to be!

05:27

After a brief beta release, JavaScript AllStars will be reset as a paid course (sign up while it's free!).

As a "curated" course - made up of content and lesson sifted from public sources - it naturally invites a pretty good question: "Why should we pay for something we can get for free?"

This brief video introduces the nature of curation, why it provides value (or doesn't, depending on your view) and how it helps you structure your learning.

Thanks. Looking forward to seeing you in JavaScript AllStars.

12:00

Perhaps only a geek can appreciate a 12 minute interview on the origins of a programming language.

Granted.

But this one is very interesting as the man who jump started the entire JavaScript project - virtually inventing the language - sat down to talk a little shop, a little history and a little trash about the early days of our beloved JavaScript.

Eich is a highly engaging, very smart guy who's got a terrific story to tell. And he tells it brilliantly. Enjoy.

Text
This course contains the following lectures, lessons and exercises: 1. Introduction - Intro videos - Interview: Brendan Eich (JavaScript Inventor) 2. JavaScript AllStar: Doug Crockford - AllStar Profile - Advanced JavaScript (1 hr 6 minute lecture w/time stamp outline) - JavaScript "The Good Parts"…
Section 2: JavaScript AllStar: Douglas Crockford
Text
JavaScript All Star Profile Name: Doug Crockford Bio: Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for d…
01:06:51

Doug Crockford
Advanced JavaScript

Context: 3rd in a series of 3 talks (the others linked)
Audience: JavaScript Programmers (2006) [A tiny bit dated, but conceptually very strong]

Focus: Code patterns for:
Inheritance - Patterns of code reuse
Modules
Debugging
Efficiency
JSON

Theme: Practical Instruction in JavaScript Coding
- Adaptability and flexibility in JavaScript


Intro portion (first [.5 ] minutes) - Very brief introduction as this is the 3rd video in a series. The other two are available for your reference, but this one includes the most high level JavaScript info.

Topic Notes:

Open: Inheritance purpose and properties
Classical vs Prototypal "schools" of programming thought

1:25 - Prototypal Object inheritance in JavaScript

4:30 - Using object functions for augmentation

8:25 - Constructor function for creating new operators

9.55 - Prototype object in constructor functions

11:00 - The "method method" to manage constructor object

17:00 - Object function for instance of objects; writing and synthesizing object prototype operators

18:45 - Public methods using 'this' for binding and reuse

20:00 - Singletons (single object instances)

21:00 - Robust nature of functions, including modules; using functions to create module containers

24:50 - Privileged methods and power constructors

27:30 - Parasitic inheritance - self-contained objects based on other objects

32:00 - Private variables (secret methods) based on parasitic construction; achieving the effect of package scope at run time

35:00 - Super methods

35:45 - Review of Inheritance patterns in JavaScript

37:00 - Working "with the grain" in JavaScript patterns, classes and shallow hierarchies
 for inheritance


38:15 - Coding example showing closure featuring Ajax in the 'later' method

44:00 - Multiples and the role of closure for multiple instances

46:00 - Debugging tools - dated info

(NEEDS: Updated debugging tool info)

48:00 - Web debugging w/MS Script Debugger
52:00 - Debugging in Venkman
55:00 - The JavaScript 'debugger' statement

56:10 - Efficiency: The roles of performance and optimization of JavaScript code

59:30 - String concatenation with + and array.join

1:01:20 - Improving page load times in JavaScript

1:03:10 - JSON for data interchange across programming platforms; syntax for: objects, arrays, values, strings, numbers

01:03:47

Doug Crockford
JavaScript: The Good Parts

Context: A Google Tech Talk
Audience: Google programmers and team members

Focus: Crockford provides insights in parallel to his book "JavaScript: The Good Parts."

Theme: JavaScript has good parts.

Intro portion (first 10 or so minutes) - Crockford's overview of JavaScript as a language, features and benefits, advantages and drawbacks.

6:55 Critique of the DOM at 6:55 - connect to John Resig's video

11:40 "The Bad Parts" - sources of common errors
- Global variables
- Use of + to add and concatenates
- Semicolon insertion
- typeof
- with and eval
- phony arrays
- == and !=
- false, null, undefined, NaN

15:00 Transivity & Good Features that Interact Badly
Objects
Functions

17:10 the for in statement

18:30 Problems with Heritage

22:00 The Good Parts
Lambda
Dynamic Objects
Loose Typing (http://blog.jeremymartin.name/2008/03/understanding-loose-typing-in.html)
Object Literals

23:05 Inheritance & Prototypal Inheritance

25:40 Begin code samples

30:45 Purpose and concepts of programming style (actual coding style)

35:00 "working with the grain" of JavaScript

37:00 "Beautiful Code"

40:00 History and purpose of JSON

42:45 Intro to JS Lint (professional tool for JavaScript - free)

46:30 ECMAScript http://en.wikipedia.org/wiki/ECMAScript#Versions

48:50 "strict mode"

50:00 Safe subsets of JavaScript for security purposes

50:45 Review of "The Good Parts"

51:30 Pitch: Crockford's BOok

52:00 Q&A
- Strict mode
- DOM problem
- Lambda function
http://stackoverflow.com/questions/16501/what-is-a-lambda-function
- Global variables problem
- Standards for Web app development and HTML5

Resources:
http://www.JSON.com
http://www.JSLint.com

Section 3: AllStar Profile: John Resig
Text
JavaScript All Star Profile Name: John Resig Bio: JavaScript programmer, Dean of Computer Science @ Khan Academy, creator of JQuery John Resig is an American computer programmer and entrepreneur, best known as the creator and lead developer of the jQuery JavaScript library.John Resig currently works…
24:51

John Resig
Advanced Javascript to Improve your Web App
Context: Talk at "Future of Web Apps," Carsonified's Miami 2010
Audience: Web app developers and entrepreneurs

Focus: Advanced JavaScript for Web Apps

Theme: Using JavaScript (esp. JQuery) to improve Web apps

Intro portion (first [1.0] minute) - Very brief intro, overview of the key topics and then it's right to work!

Key topics:
Improve Performance
Improve Accessibility
Reduce Complexity
Simplify Design

Topic Notes:

1:00 Improving Performance
Event delegation
Fragment caching
CDN's and Gzipping

2:30 JQuery handling event delegation
.delegate Method
Live Events

4:35 Caching with Fragments
Document Fragments
Caching Fragments

6:35 JavaScript and Content Delivery Networks (CDN)
Automated minifiying and Gzipping


8:35 Improving accessibility and speed
Unobtrusive scripting
Document Ready event
Click and Load
Extra Header in Ajax request
.load() page fragment
Loading "chunks" of a remote HTML document

12:40 Reducing Complexity
Data storage away from DOM element
Internal data storage
Removing data (garbage collection) to manage memory leaks
Data events

15:20 Custom Events
Event namespaces

17:00 Events and Plugins
Special events
vs. Custom events
Example: Focusin/Focusout Events
Example: Hotkeys plugin

19:50 Customizable Themes with JQuery
Themeroller
Routing around cross-browser CSS issues

23:05 Future directions of of the jQuery project
Focus on mobile
Testing against mobile browsers


Resources:
From Casonified:http://www.futureinsights.com/home/how-to-run-a-successful-web-design-business.html
From Paul Boag (Web Slides from above) http://boagworld.com/talks/running-a-successful-web-design-business/
Developer Paul Boag on Twitter:https://twitter.com/#!/boagworld

01:12:59

The DOM is a Mess!

Context: Resig addresses the Yahoo User Interface team about

issues related to the Document Object Model
Audience: Yahoo Programmers

Focus: State of the DOM and using DOM for coding JavaScript apps, with a focus on realistic and practical coding problems and strategies.

Theme: The DOM is a mess!

Intro portion (first 2 minutes) - Resig introduction, background and overview of presentation content.

Topic Notes: A Messy DOM
2:00 Fundamental brokenness of every DOM method - for SOME browser.

2:45 Problematic methods: getElementByID

4:30 Problmatic methods: getElementsByTagName

6:15 Problematic methods: getElementsByClassName

8:00 querySelectorAll

10:00 Cost/Benefit of supporting browsers, by type (somewhat dated, but valid in principle )

12:00 jQuery browser support grid by type

13:30 Origins of scripting bugs by browser type

14:30 Browser bugs (unspecified, undocumented behavior)

16:10 Testing code

18:30 jQuery Test Suite - Environment Testing

20:20 Issues related to Object.prototype

21:40 Greedy IDs (document.get by tag name)

22:30 Order of stylesheets

23:00 Pollution (guarding code against outside changes and creating issue with outside code)

26:00 Missing featurs - esp. for older browsers

27:00 Object detection for APIs

27:40 Event Binding

28:20 Fallback detection

30:30 Bug Fixes

33:00 Feature simulation (examples)

36:00 Regressions introduced by browswers (introducing "bugs" due to browser configuration or code)

38:00 Safe cross browser fixes

40:20 Untestable problems

42:45 Improving code by removing (coder) assumptions

47:30 DOM Traversal vs Traditional DOM

49:30 Top-down CSS selector engine - with code implementation

51:20: Bottom-up CSS selector issues

53:45 CSS to XPath transition

55:30 querySelectorAll

58:00 DOM modification (with code examples)

1:03:00 Inline script processing

1:05:00 Events and event handling

1:08:20 Libraries & data stores (esp in jQuery)

Section 4: JavaScript AllStar: Ryan Dahl
Text
JavaScript All Star Profile Name: Ryan Dahl Bio: Venture Beat calls him " the hacker who brought the world Node.js." Dahl's original goal was to create the ability to make web sites with push capabilities as seen in web applications like Gmail. After trying solutions in several other programming lan…
59:59

Ryan Dahl
Node.js, Overview and Applications

Context: A Google Tech Talk
Audience: Google programmers and team members

Focus: Node.js developer Ryan Dahl appears before the Google Tech Talk audience to announce what was then a brand new concept: Node.js and server side JavaScript

Theme: Intro Node.js to an informed and skeptical audience

Note:This lecture is very server-focused with special emphasis on high speed network servers. The concepts and technology are fascinating and it's a great introduction to Node.js. But it's server- and not application-focused.

Intro portion (first 1 minutes) - Intro by Googler

Lesson Contents

1:30 Focus on scripting network servers as a roadmap to wider

implementation

2:00 Challenges of abstractions

3:10 Challenges of high performance servers: Outlines current

state of programming for high performance data servers

9:30 Uses of C and related languages for server programming

14:25 JavaScript's role in making server side scripting fast

17:00 Introduction of Node for use at network (HTTP) level

25:20 Architecture of Node

27:00 Code examples using Node

42:00 Node and HTTP parsing

43:30 Node and buffering

46:40 Modules for Node Programming

46:45 Step library for Asynch control-flow

48:00 PCAP module (packet)

48:15 MDNS module (service discover)

49:30 Q&A
- Asynchronicity
- DNS
- Scalability of Node

01:06:34

Ryan Dahl
An Interactive Intro to Node.js with Ryan Dahl

Context: San Francisco PHP Meetup Group
Audience: PHP Programmers

Focus: A free-flowing, quite technical introduction of server-side Node to a group of high level PHP coders.

Theme: Code-intensive programmer-to-programmer intro of a new operating concept

Note: Ryan Dahl and Node are very server-oriented. Node represents an exciting expansion of JavaScript at a conceptual or framework level but mainly operates deep within the server realm.

Intro portion (first 1 minute) - Very brief introduction from Dahl of Node and his approach to the presentation - very code-centric.

Lesson Contents

2:00 Install and compile Node

3:00 Intro V8 (virtual machine written for Google Chrome) on which Node runs

4:30 Process object in Node

5:40 Hello world in Node

6:20 setTimeout

7:20 Connection btw Node and traditional JavaScript

12:00 Libraries bundled with Node

12:00 Example http server in Node

22:00 Concurrency and connections in Node

24:30 Example TCP server in Node (for chat server)

48:00 Nonblocking code and database functionality in Node

51:00 Anonymous functions and abstractions w/database calls

54:00 Q&A
- Challenges of a new platform
- Event loops
- Process security
- ExpressJS for Web

Section 5: JavaScript AllStar: Paul Irish
Text
Name: Paul Irish Developer Advocate, Google Chrome Bio: JavaScript & JQuery developer; Google Chrome Team Also headed up the HTML5 Boilerplate project Contribution: Leading member and advocate for front end development including and beyond Google Chrome. Web Site or Blog: @paul_irish http://twitter.…
01:04:20

Paul Irish
HTML5 Boilerplate

Context: Irish presenting at San Francisco HTML5 User Group

Audience: Web (HTML5) Developers
Focus: Introduction of HTML5 Boilerplate
Theme: Free flowing intro and application of HTML5 Boilerplate

Intro portion (first 2.5 minutes) - Irish introducing himself and his various projects

Notes: Although HTML5 is not specifically JavaScript, per se, Web development is moving quickly toward a "stack" approach in which tools are combined to create powerful apps as well as sites. HTML5 and JavaScript - among others - are blending into the effort.

Note: This lecture, while not exlusively dedicated to JavaScript, is focused on "front end development." For developers working on user-facing projects, HTML5 Boilerplate can be a very powerful tool.

Topic Notes:

2:40 Introducing HTML5 Boilerplate as a collection of "best practices" for front end development and performance

4:00 Cross browser functionality

5:00 Demo sites for HTML5 Boilerplate

7:30 HTML5 Boilerplate Walkthrough - contents

8:15 JavaScript file structure and placement in HTML5 Boilerplate

9:30 10 things about the Boilerplate you should know (first 5)
- IE Conditional comments
- X-UA-Compatible (and validation)
- meta charset (and validation)
- jQuery include
- overflow-y: scroll
- ie6 background cache

11:50 Writing JS styles

13:00 Chrome Edge for IE (IE=edge)

17:00 Meta charset

21:00 jQuery include (protocol-relative URL)

24:40 overflow-y: scroll (to limit scroll shifting)

25:30 ie6 background cache

28:30 5 more things you should know
- helvetica, arial, sans-serif
- @print styles
- helper classes
- test page.. (pre, buttons,)
- viewport http://goo.gl/ykKad
- log();

29:00 Font types and sizes - accessiblity and visual issues

32:00 Media print query

36:00 Viewport for mobile

40:30 Gzip

43:30 Build script

46:00 hsl() color demo

50:00 Build and test demo

57:00 FAQ/Q&A

58:30 Shout out for mobile development

Section 6: Special Topics
48:11

Building a JavaScript-based Game Engine for the Web

Description: Game developer Paul Bakaus, Dextrose AG


Context: Bakaus delivers a Google Tech Talk (mid 2010) dedicated to browser-based games and game engine development in JavaScript

Audience: Google developers

Focus: JavaScript for browser based games and game engines

Theme: Game development is transitioning from consoles to the Web. Using JavaScript to develop engines to join the migration.

Note: The subject of this presentation, the Aves Game Engine, has been acquired by Zynga - of Farmville and Facebook game fame - so the content may seem a tiny bit dated, but the concepts are market-validated.

Note 2: He finishes with a fairly thorough and rather prescient review of then-brand new Node.js and its importance for high volume game play.

Intro portion (first 3 or so minutes) - Bakaus introduces his perspective on the game industry as a developer of browser based games.


Topic Notes & Timeline

3:45 Browser games, lifespan and legacy code

6:00 Technological base for browser-based games is just now emerging

7:30 Challenge of merging coding and game development skills

8:15 The open Web stack and game development and the importance of mobile

10:30 HTML5 as a game development tool/environment

12:35 A tool recipe for game dev (HTML5, JavaScript, CSS Transforms)

13:45 Pros and cons of cross browser coding

14:10 Pick your technologies from the future!

14:45 Selecting jQuery (and jQuery UI) and why

15:40 Architecture and API design for a game engine

16:50 2 and 2.5D games

17:45 Game world screen shot overview and requirements

19:00 Advanced Techniques for Game Engine Development (with code)

19:30 Rendering at extreme speed
- with Canvas (and efficiency problems)
- Block rendering using HTML

22:00 Lazy node linking

23:00 Smart rendering
- with

's (including code)
- using layout layers (Web method)

24:50 Event Delegation (and scalability)

27:40 Click through maps for clickable objects (using event delegation)

28:40 JS Code for pixel map

29:10 Action surfaces (with code for CSS transforms)

31:00 Server side JavaScript for a game engine
- Efficient code sharing based on single language
- Easy code reuse
- Node.js

34:20 ECMAScript5 features

37:00 Server considerations

39:00 Stretching viewports (browser real estate) for true multiplayer worlds - with millions of players

40:00 Aves Engine Demo (ahh-ves) Game and world prototypes

41:10 - "Patch loading" similar to Google maps

45:00 Q&A
- Audio issues
- Flexibility
- Browser to browser performance differences

Resources:
Paul Bakaus @pbakaus
http://ajaxian.com/archives/aves-game-engine

Section 7: AllStar Profiles - Coming Soon!
Upcoming
We'll be adding more JavaScript AllStar profiles soon!

Instructor Biography

Todd Wieland , Rapid Learning & Micropublishing Developer

Todd Wieland operates Canis Learning Systems in Tampa, FL where he creates learning products and systems that help people leverage knowledge and technology to create great careers and businesses.

His projects focus on topics as diverse as marketing, analytics, manufacturing math, game and app development, filmmaking and media, automation and transportation technology.

The theme that ties all of Canis Learning Systems' and Todd's projects together is opportunity: We live in an age of unbounded possiblity, empowered and ennobled by the acquisition and application of knowledge.

The promise of the future for generations to come is built on specialization. Helping others gain and apply specialized knowledge, sharing specialized applications and leveraging unique niches is an economic and social trend with almost unlimited potential.

Coming from a long line of entrepreneurs and small business operators (he started working in his dad's neighborhood store at age 11), he has an eclectic background in education, technology, media and even runs a snow cone machine on the weekends.

Reviews

Average Rating
4.3
Details
  1. 5 Stars
    12
  2. 4 Stars
    3
  3. 3 Stars
    2
  4. 2 Stars
    1
  5. 1 Stars
    1
    • Jasmine Celeste Kozack

    Can download this to my itouch

    Awesome!

    • Yeoh Thiam Gim

    Pls help me....

    • Steve Senior

    nice lectures on the subject!

What you get with this course

30 day money back guarantee

Lifetime access

Available on desktop, iOS and Android

Certificate of completion

Join the biggest student community

5,400,000

Hours of video content

21,000,000

Course enrollment

6,300,000

Students

Ready to start learning?
Enroll for free now