Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Visual-Q

Javascript intermediate and advanced learning?

Recommended Posts

This isn't a GSAP question so apologies if anyone is annoyed by it, but this forum is so helpful and knowdgeable that I thought I'd put it out there.

 

Can any one suggest some good learning resources online to help take my javascript skills to the next level. I've done the usual basic training w3c, code academy etc... so where do I go from here?

 

I would expect there may be a lot of people that might benefit from some good advice along these lines.

 

 

Link to comment
Share on other sites

HI Visual-Q  :)

 

I know what you mean. You can only look at tutorials about basic functionality and syntax so many times.

 

In my opinion, tutorials and online learning can only take you so far. I think you have to start building some real world projects to truly start reaching the next skill levels. If you ask yourself why you want to learn more and what you want to build, you'll probably give yourself an answer about what to do next. Do you want to create websites, games, apps or maybe just focus on canvas animations? Ultimately only you can answer that.

 

I know all too well that the desire to learn and know everything about JavaScript and every framework and library is strong, but unless you're Blake, I don't know if that's humanly possible or truly the best way to go. My own learning process was loaded with false starts and it took a few times to really start understanding things. If you haven't read it, I did a forum post about my first year with GSAP. 

 

https://greensock.com/forums/topic/14610-one-year-of-greensock-forum-participation-%E2%80%93-what-i%E2%80%99ve-experienced/

 

A few books that I've enjoyed and found quite valuable.

 

Professional JavaScript for Web Developers: by NIcholas Zakas

It's a few years old so it doesn't cover ECMAScript 6, but it's quite good and the author explains things well. I've highlighted and dogeared many section and pages of that one.

 

Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers: by Nicholas Zakas

Since the other book doesn't cover ECMAScript 6, I also have this one handy. Also excellent.

 

Foundation HTML5 Animation with JavaScript: by Billy Lamberta and Keith Peters

This is one Blake recommended and it's fantastic. It's particularly helpful since it starts with a bit of a refresher in Trigonometry.

 

For my two cent opinion, I say learn plain JavaScript backwards and forwards. It will almost certainly be with us for a long time while frameworks and libraries will come and go. (Except GSAP. That will be here forever  ;) ) After that, figure what you want to build. Looking for some 3D in the browser? Maybe try Three.js. Canvas animations? Maybe try PIXI.

 

Others may jump in with their opinions too. Hopefully this has helped a little bit.

 

Happy tweening.

:)

  • Like 7
Link to comment
Share on other sites

Hello Visual-Q,

 

I would recommend Mozilla Developer Network (MDN).

 

Which has a lot of up to date information on JavaScript.

 

Javascript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

Javascript Guide:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

 

And also you should be looking at CSS since a lot of what JS manipulates are CSS which is used to render the page.

 

CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS

 

CSS Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

 

Hope this helps :)

  • Like 6
Link to comment
Share on other sites

Hey Guys,

 

Thank you for taking the time to respond, I can always count on this forum for help, quality peeps here.

 

With respect to my goals as PointC mentioned - mainly design oriented for websites, I've been a designer for a number of years and more and more of my work is now shifting from print to websites. After doing on and off development for about a decade I've started putting a strong focus on getting my developing skills up to par. My experience with javascript is much like Point Cs fits and starts, learn a little, forget alot, a little bit sticks and I make incremental progress. I think I've finally gotten to the point where I'm starting grasp javascript so hopefully I can structure my learning some moving forward. 

 

Frameworks are great and GSAP simply awesome, and you can you use them fairly effectively without knowing what's going on under the hood, but it's clear that to really harness their full potential you have to be solid in javacript. Not a guru necessarily, but at least competent.

 

I will check out the suggestions, thanks again for the advice.

  • Like 2
Link to comment
Share on other sites

I learned a lot big and small from exercises such as Wes Bos' Javascript 30: javascript30.com/

 

I also enjoy watching conf talks on all different Js topics. It goes beyond syntax and coding techniques, and slowly but surely provides a great general knowledge on how JS things work and why. This in turn gives you a really good understanding on why devs do like they do. I.e: What the heck is the event loop anyway?

 

 

I also follow people on youtube and listen to their opinions and watch them code live. I.e. FunFunFunctions

 

GLHF!

  • Like 4
Link to comment
Share on other sites

Thanks Johan, I watched 

 with my morning coffee and I got an insight how to solve a bottleneck I couldn't figure out. I'm going to start watching more things like this. 
  • Like 1
Link to comment
Share on other sites

I think the best way to get better at JavaScript is to first learn the basics of object-oriented programming. This is much easier using the new class syntax. Understanding objects is key to understanding JavaScript as everything in JavaScript is an object. Once you get that down, try to make some games.

 

Making a game is pretty involved, and it will teach you how to structure your objects, state, app flow, event loops, etc. Start with something simple, like a memory game, and then move onto something more advanced, like an Asteroids type game using canvas. Get that down, and you'll be at an advanced level.  ;-)

  • Like 3
Link to comment
Share on other sites

Thanks Blake,

I know you're right, if I want to be good at it I'll have to understand the core concept of objects and how to approach OOP. This is definitely the hump I need to get over. And that's very much my goal in starting this thread to find some advice on how to structure my learning moving forward to learn how to do it right, rather than just memorizing the syntax for this method and that method without really knowing what it going on.

Link to comment
Share on other sites

Learning OOP can be confusing at first, but once you get it, it makes coding a lot easier. I would start out learning how to create everything programmatically. So here's a simple example of how to create an object using a constructor, and how to add methods to that object.

See the Pen 973bf804feb2702e1ae1593fbf21631e?editors=0010 by osublake (@osublake) on CodePen

 

But that's kind of messy, which is why I would recommend using the new class syntax. Here's how that looks using the cleaner, class syntax.

See the Pen d14328e8948d2c55d92b666e5c7a73de?editors=0010 by osublake (@osublake) on CodePen

 

Where OOP starts to get interesting is with inheritance. A class can extend another class, adding new properties and methods to it. A simple example is to look at TweenLite and TweenMax. TweenMax extends TweenLite, inheriting all the properties and methods from TweenLite, but adds some new methods, like staggerTo.

 

So here I start out with a DisplayObject base class. There's a Box class which extends the DisplayObject class, and adds a rotateTo method. And then there's a Circle class which extends the DisplayObject class and adds a scaleTo method.

See the Pen 44fd943b80c95bb48a030410f9b8f91b?editors=0010 by osublake (@osublake) on CodePen

 

That's just a quick introduction, using really simple objects, but hopefully you can understand it and see how it nicely makes structuring your code. Everything is self-contained in object that can be created on the fly. No more spaghetti code.

 

.

  • Like 7
Link to comment
Share on other sites

I would chime in by saying: Go into forums and try to answer whatever questions there. You don't need to actually post your answer at the beginning, just try to come up with an answer, then, compare it with the answers given and the one that turns out to be correct. As you grow in confidence, start posting your answers. See what you get right, see what other people suggest on top of your answer.

 

You will learn loads by doing that. I do it all the time. Made me go up a step for sure.

  • Like 6
Link to comment
Share on other sites

I just came across this giant JavaScript video course. May not be advanced enough for some but appears to cover a lot of ground:

 

 

My giant JavaScript Basics course is now live on YouTube. And it’s 100% free.

https://medium.freecodecamp.com/my-giant-javascript-basics-course-is-now-live-on-youtube-and-its-100-free-9020a21bbc27

  • Like 5
Link to comment
Share on other sites

Great JS resource Carl :) Their youtube channel FreeCodeCamp is pretty good as well, Thanks Carl!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×