You can learn anything on Udemy. Start today with one of our 10,000+ online courses

JavaScript AllStars

Learn high level JavaScript from the Masters.
19 reviews
WHAT'S INSIDE
  • Lifetime access to 17 lectures
  • 7+ hours of high quality content
  • A community of 19300+ students learning together!
TAUGHT BY
  • 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.

SHARE

JavaScript AllStars

Learn high level JavaScript from the Masters.
19 reviews

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.

    • 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
    • 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
    • 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
  • 1
    Intro
    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!

  • 2
    On Curation
    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.

  • 3
    Brendan Eich on the Foundations and Purposes of JavaScript
    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.

  • 4
    Course Topic List
    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
  • 5
    JavaScript AllStar Profile: Doug 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…
  • 6
    Douglas Crockford: Advanced JavaScript
    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

  • 7
    Doug Crockford on JavaScript: The Good Parts
    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
  • 8
    JavaScript 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…
  • 9
    John Resig: Advanced Javascript to Improve your Web App
    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

  • 10
    John Resig: The DOM is a Mess
    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
  • 11
    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…
  • 12
    Ryan Dahl Introduces Node.js: JavaScript on the Server
    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

  • 13
    Ryan Dahl - Interactive Node.js Presentation
    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
  • 14
    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.…
  • 15
    Paul Irish on HTML5 Boilerplate
    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
  • 16
    Building a JavaScript-Based Game Engine for the Web
    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!
  • 17
    JavaScript AllStars - Coming Soon
    Upcoming
    We'll be adding more JavaScript AllStar profiles soon!

RATING

  • 12
  • 3
  • 2
  • 1
  • 1
AVERAGE RATING
NUMBER OF RATINGS
19

REVIEWS

  • Jasmine Celeste Kozack
    Can download this to my itouch

    Awesome!

  • Yeoh Thiam Gim

    Pls help me....

  • Steve Senior

    nice lectures on the subject!

  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion