A number of good resources came out of the session, and to save you filtering through the entire transcript, they are listed below. If you missed the session and want to see how it all went down, then you’re in luck – you’ll also find the transcript in its entirety below.
An interesting article on how to help people to learn programming.
An interesting article on prototypes
A couple of JS linting tools: JSLint & JSHint
How to activate the browser’s console to get access to the debugger
Mozilla’s JS resource site
Brackets – an open source code editor
jQuery on Github
YUI on Github
Backbone on Github
Underscore on Github
And finally – some JS Templating tools: Mustache JS Handlebars JS and Underscore
If you missed this session because you didn’t know about it, make sure you sign up for email notifications of future sessions here.
And lastly, next week we’re trying something a bit different. Our in-house CSS guru Alex Walker will be helping you out with any tricky CSS issues that you might be having, so don’t miss that one.
And now… the transcript. Enjoy.
[21:23] <HAWK> Hey everyone – we’ll be kicking off shortly. Feel free to introduce yourselves in the mean time.
[21:24] <codepo8> My name is Chris and I love the web
[21:25] <HAWK> I’m Hawk, and I’m Community Manager at SitePoint – I’ll be moderating this session
[21:30] <HAWK> Right – so we may as well kick off
[21:30] <HAWK> There are only two things that you really need to know. You can @ tag people to get their attention, and you can ask questions at any time.
[21:30] <HAWK> If Ara is answering someone else, I’ll queue them for him
[21:31] <Ara> So, the one thing I found interesting while writing the book was trying to figure out what order to explain stuff in.
[21:33] <Ara> A lot of things are interdependent. So, for example, when explaining arrays, there were a few instances where you could do stuff with arrays using functions, but we hadn’t covered functions yet…
[21:33] <Ara> …so it was one of those, “we’ll touch on this in more detail later” situations.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
[21:33] <Ara> It happened a few times.
[21:33] <codepo8> it is tricky
[21:33] <Sagar> It is a good line of thinking.
[21:33] <codepo8> personally I want “hello world” to die in a big fire.
[21:33] <johnlacey> lol. I love “Hello world.”
[21:33] <HAWK> Yeah – although there is something to be said for “Hello World”
[21:33] <codepo8> explaining concepts in context gets people much more excited.
[21:34] <MalCurtis> There should be a a generic ‘basics of programming’ book that is language agnostic, that everyone is required to read before reading any other programming book
[21:34] <Ara> Sadly, I did use “Hello, world.” once or twice. But I think I slipped in a few “World dominations” as well.
[21:34] <Ara> ;)
[21:34] <Velochicdunord> Yes. One of my questions as a CS student is simply where to start with the existing libraries and APIs
[21:34] <MalCurtis> Because every book has to cover that ad infinitum
[21:34] <steven> MalCurtis, The Art of Computer Programming :P
[21:35] <codepo8> Learnable programming is trying to disrupt that idea. http://worrydream.com/LearnableProgramming/ and I’ve seen people get jumpstarted with this approach.
[21:35] <MalCurtis> steven JumpStart: Every Language… ever.
[21:35] <Ara> Velochicdunord: a lot of the core API is useful in both scenarios
[21:36] <Ara> Velochicdunord: Or do you mean DOM API?
[21:37] <codepo8> starting with a game is dangerous. To make games work you need to cut a lot of corners and introduce a lot of concepts only applicable to a game, like the ticker and the main loop. You never need this in a “web site” or “web app” scenario.
[21:37] <Ara> Velochicdunord : If you’re building a game, the majority of it will be built using the core language’s logic operators, data manipulation, etc… it’s when you get to the rendering that the choice of game vs. web is made.
[21:38] <Ara> You might choose to render your game using Canvas or you might use sprites manipulated in the DOM
[21:38] <Ramy> thanks HAWK for reply :)
[21:38] <brick> @Ara what about browser dependencies? isn’t it safer to use jQuery ?
[21:38] <Velochicdunord> OK – so look at the DOM (which I haven’t done yet) :P
[21:39] <Velochicdunord> So – which bits are best for which uses? The available libraries multiply monthly.
[21:39] <Ramy> Thanks Ara :)
[21:40] <HAWK> To everyone else in the session – don’t wait for a gap if you have questions. Jump in and I’ll queue them.
[21:40] <Ara> Velochicdunord: the DOM is basically the web page’s HTML converted into an hierarchy of objects. Working with the DOM means updating the web page.
[21:41] <brick> I hear an echo
[21:42] <johnlacey> If you’re doing something simple you may want to avoid the extra weight of JQuery.
[21:42] <Ara> johnlacey: Yep. It’s really a decision to be made on a case by case basis.
[21:42] <Ara> brick: apologies :)
[21:42] <JoshySav> Awesome thanks :)
[21:43] <codepo8> A lot of jQuery was needed to plug the holes in browser support and simplify complex ways of accessing the document. This has changed. Browsers are more compliant with the standards and a lot of what we use jQuery for can be done in CSS and there it can be hardware accellerated and memory optimised by the browser for you.
[21:44] <HAWK> johnlacey – I’d say relying on it, considering these days so many people have it disabled ;)
[21:44] <johnlacey> @Hawk — Absolutely. That’s my fear. lol
[21:44] <Ara> johnlacey: variable scoping can be an issue. If you don’t understand variable scope, you can potentially overwrite data and cause errors. Also, understanding type coercion is another one. Not knowing the difference between == and === could potentially lead to unintended consequences.
[21:45] <Velochicdunord> Thx codepo8.
[21:45] <HAWK> Hi codemaestro – that hasn’t been covered. Let’s throw it to Ara
[21:46] <JoshySav> Ara Thanks :)
[21:46] <JoshySav> Its nice to talk to people with Brains ;)
[21:47] <Ara> codemaestro: It’s a touchy subject. Some libraries do it and some developers are comfortable doing it, but you have to remember that on the web, more often than not your code is going to coexist with other people’s, so if you get really fancy with native object prototypes, you might start running into conflicts with other people’s code.
[21:47] <Ara> JoshySav: I assume you mean the other guests. :)
[21:47] <HAWK> I think he was talking about me Ara
[21:47] <JoshySav> :)
[21:47] <Ara> HAWK: :)
[21:48] <codemaestro> Thanks Ara — so the answer is, “it depends.”
[21:48] <HAWK> Yeah, interesting question JoshySav. I (obviously) spend a lot of time on the SitePoint forums so my perspective is skewed – but there is a fairly large contingent of people over there that do…
[21:49] <HAWK> The accessibility guys
[21:50] <ginader> especially in mobile environments it more likely that a user fails to load js rather than having turned of js
[21:52] <codepo8> ^ that. I have cURL and I will use it!
[21:53] <Ara> an IIFE (Immediately Invoked Function Expression) where the values for “undefined” and “window” are reinitialized.
[21:54] <Velochicdunord> I just found Doug Crockford this February. Still much to dig through.
[21:54] <codepo8> You lost him before?
[21:55] <Ara> Ramy: The book explains JS syntax and the DOM but doesn’t explicitly deal with Mobile environments.
[21:56] * mattevans slaps MalCurtis around a bit with a large trout
[21:56] <HAWK> Ah – the old trout slap
[21:56] <mattevans> :-)
[21:56] <johnlacey> lol. I hadn’t seen the ol’ trout slap in forever.
[21:57] <Ara> but is billed as being more friendly.
[21:58] <HAWK> Now that things are a bit quieter – has anyone asked a question that hasn’t been answered yet?
[21:58] <Velochicdunord> Merci – yeah, found the JSLInt & Hint business. :)
[21:58] <codepo8> Having worked with Douglas for a while was very eye-opening. He knows his stuff, but can be very dogmatic about things. I like that. If you haven’t annoyed anyone in your life then you probably had no opinion or new thought.
[21:59] <Ara> ralphm: Learn to love the debugger. I’ve found that if you set breakpoints in your code then step through it, keeping a close eye on the values being passed around, you’ll often find what’s going wrong pretty quick.
[22:00] <codepo8> @ralphm the developer tools in browsers will tell you in a lot of cases what is wrong. JSLINT only tells you glaring syntax problems. For example a failure of interaction or data coming in in the wrong format is not caught by it. That’s where the browser’s error console helps you.
[22:00] <Barney> to annoy someone is easily done… just say “MS Rulz!”
[22:00] <Velochicdunord> Barney:)
[22:00] <johnlacey> I kind of wish I had more questions… but I am waiting for the coffee to reach my brain. I have however downloaded the book and look forward to reading it.
[22:01] <codepo8> also just playing with the console is fun. Type navigator. and see all the things the browser offers you and play with them. Many a time you find a feature you never heard of.
[22:01] <ralphm> Haven’t really got my head around debugging, other than using console.log() at various point to see where the code is up to. Problem is, if things are going wrong, it doesn’t say what else to try, and that’s where I get a bit stuck.
[22:01] <Barney> “..takes well deserved bow!”
[22:01] <Ara> johnlacey: feel free to hit me up with more questions any time. I’m @ara_p on Twitter
[22:01] <Ara> That goes for anyone else too. I’m always free to answer questions. ^^
[22:01] <johnlacey> @Ara — Thanks!
[22:02] <Ara> and by free I mean “happy to.” :)
[22:02] <codepo8> also http://www.webplatform.org/ is the new up and coming one-stop-shop for curated web content rather than hearsay you get on w3schools or stackoverflow.
[22:02] <Velochicdunord> I second JC’s question.
[22:03] <codepo8> And of course sitepoint :)
[22:03] <Ara> ralphm: I guess I need to write a blog post on debugging. :)
[22:03] <codepo8> @JC dig into the source of some libraries and tools. Adobe’s Brackets is a very hot and amazingly well crafted project http://brackets.io/
[22:04] <Ara> JC: open up the jQuery source code and look at what they’re doing. That will give you a lot of pro-level insight. Likewise with lots of projects on GitHub. Also, in your free time, try and code the craziest things you can think of.
[22:04] <ralphm> @Ara That would be great. :-)
[22:04] <Ara> Velochicdunord ^^
[22:04] <Ara> Barney +1
[22:04] <codepo8> first time I see SIMPLY screamed
[22:04] <Velochicdunord> following a mess of libraries on GitHub
[22:04] <HAWK> Hehe, glad to be of service Barney
[22:05] <HAWK> Welcome NickY – feel free to jump in with questions (if you have any) at any time
[22:05] <Ara> Velochicdunord & JC: You’re probably better off following the more popular open source projects as they’ve got a lot more eyes scrutinizing the code.
[22:05] <Barney> no prob, HAWK – I have some 20 books from you guys and did like 5 classes — I brag up siteP and Lean… all the time
[22:05] <Velochicdunord> Any suggestions for open source to follow?
[22:05] <Ara> That’s the great thing about open source projects, you can’t get away with junk–at least not if your code is popular enough to have lots of people looking at it. :)
[22:05] <Barney> … is bucking for a free month!” *smiles*
[22:06] <Barney> the WP bookis here are great open source guides…
[22:06] <codepo8> yes, being open means your successes and your failures speak for you
[22:06] <Velochicdunord> Own a few. :)
[22:06] <HAWK> Ah Capt_Snickle_Fritz – nice to see you again
[22:07] <Ara> Velochicdunord: jQuery (https://github.com/jquery/jquery), YUI (https://github.com/yui/yui3), Backbone (https://github.com/documentcloud/backbone), Underscore (https://github.com/documentcloud/underscore)
[22:07] <Velochicdunord> Thx
[22:07] <Capt_Snickle_Fritz> Likewise HAWK
[22:07] <Barney> Vel, you got Anthology books?
[22:08] <Ara> I guess “come at me, bro!” isn’t the best way to ask people for more questions, huh? ;)
[22:08] <HAWK> Hehe, love it Ara
[22:08] <HAWK> But yeah – if anyone has a question, jump in now while there’s a space!
[22:08] <Ara> This is fun.
[22:08] <HAWK> You’re owning it. Nice work.
[22:09] <Ara> Thanks to the guests. Great questions, folks.
[22:09] <codepo8> http://vanillawebdiet.com
[22:09] <HAWK> Hi to those of you that have just joined – jump in at any time if you have a question. You can check the full transcript later today on SitePoint.
[22:09] <codepo8> no
[22:10] <codepo8> try it in a script, it doesn’t fire an error
[22:10] <Ara> codepo8: I wonder if the IRC client filtered out the code then ’cause all I saw was the vanillawebdiet.com URL
[22:10] <Ara> maybe paste it in jsfiddle?
[22:10] <Velochicdunord> No – WP Novice to Ninja was a bit of a disappointment – not enough substance. Held off purchasing additional SitePoint books after that.
[22:11] <HAWK> The IRC client shouldn’t do that – it should paste it as a gist
[22:11] <ralphm> OK, I might as well ask. No matter what I read (books and online) I can’t find a simple, conceptual answer to what a “prototype” is. E.g. Array.prototype. Can anyone offer a potted explanation?
[22:11] <Velochicdunord> Second ralph’s question!
[22:11] <codepo8> https://jsfiddle.net/jp5PZ/
[22:11] <Velochicdunord> Thx, Ara.
[22:13] <HAWK> I’m just going to jump in to let you know that if you want reminders of future sessions like this, sign up for the mailing list here http://www.facebook.com/sitepoint/app_115462065200508
[22:13] <codepo8> this article is very good on prototype: http://dailyjs.com/2012/05/21/js101-prototype/
[22:14] <ralphm> Thanks codepo8. Will check it out.
[22:14] <Velochicdunord> No – that’s good.
[22:14] <HAWK> Hey Jess
[22:14] <JC> Thank you for your answers
[22:15] <scruggs> Would you classify that as a limitation of the JS language itself? After all, it is only recently that tools like jQuery and Node.js has sprung popularity in the JS community again
[22:15] <jessirwin> Hi HAWK
[22:15] <Ara> codepo8: It’s odd, because in the Chrome console I get the following error: SyntaxError: Unexpected token }
[22:16] <Ara> JC: my pleasure!
[22:16] <Ara> scruggs: I’m not sure I follow. What would be classified as a potential limitation? (Prototypes?)
[22:17] <Ramy> HAWK the mail reminder is good but i wish there is another reminder for facebook beside posts like an event
[22:17] <codepo8> scruggs different audiences I’d say. jQuery lowered the barrier a lot and is focused on DOM access and interface element creation like widgets. It made it damn easy to reach things and change things in a document. Node got a new audience as it moved JS to the server and made it unhindered by the DOM. The main boost for JS however was HTML5 and Flas
[22:17] <codepo8> h being less reliable as it wasn’t supported on the hottest and newest devices (iOS)
[22:17] <HAWK> Very good point Ramy – I can totally post them as events.
[22:18] <Barney> Thanks for letting me join, see you all on the flipside…
[22:18] <Ara> Cheers, Barney!
[22:19] <codepo8> the unexpected token is from jsfiddle’s wrapper around it.
[22:19] <Ara> codepo8: I didn’t get the error in jsfiddle, i got it directly in the chrome console.
[22:19] <scruggs> okay…maybe it’s not a limitation. I guess I am struggling to jump into the JS side of things yet…inheritance from what I have seen has been painful in many JS applications. For example, jumping into frameworks like Knockout.js and Backbone.js…it seems like the real trick is learning the frameworks and their limitations and what not
[22:21] <codepo8> uage $x” are pretty futile.
[22:22] <NickY> I agree with you Scruggs. You do have to learn the framework. You could build applications using jquery with almost no knowledge of js itself
[22:22] <Ara> ing on an entirely different level at that point. You’re kind of abstracted away from the nuts and bolts of the language and are working with a framework’s API.
[22:23] <codepo8> NickY of course that comes at the cost of being reliant on a framework. If you go to town on a document with heavy jQuery that is not really taking care of caching and re-using things it accesses you’ll be very disappointed when you want to ship your app to mobile devices.
[22:24] <codepo8> (disclaimer: I work with a focus on FirefoxOS devices right now – low spec smartphones for a new market, so every event handler and every DOM access hurts) :)
[22:25] <Ara> scruggs & NickY: regardless of the library or framework though, you still need to have a basic understanding of variables, variable types, logic operators, arrays, objects, functions… you still need to work with those things. jQuery gives you helpers to access DOM elements and iterate over objects and Backbone lets you do some great MVC stuff, bu
[22:25] <HAWK> No such thing as a dumb question when you’re learning
[22:25] <Ara> There’s no such thing as a dumb question :)
[22:26] <Ara> HAWK *boom!*
[22:26] <HAWK> hehe indeed
[22:26] <BluePandaStudios> codepo8 / Ara: I’m late to the talk, so I apologize if this was covered, but are there frameworks you would recommend that take mobile access into account?
[22:26] <NickY> That is a good point, but there are many functions in jquery that you still won’t even need to know that
[22:27] <johnlacey> @HAWK I am pretty sure I have angered the techno-gods today… but I am on the Facebook page for email notifications for Talk with the experts… and should there be a button to click after I enter details? Because there isn’t. lol
[22:27] <codemaestro> Oh yeah. How many users are actually using ExtJS/Sencha Touch vs. jQuery Mobile?
[22:27] <scruggs> ara…I think the hardest part is trying to learn how the language cooperates at times lol. I am a C# programmer by trade, but I am trying to get a strong foothold into the JS community, so I have been trying to learn all I can about knockout.js, backbone, and trying to build things with node.js
[22:27] <Ara> BluePandaStudios: off the top of my head I know that jQuery has a mobile component and YUI has mobile built into it (as well as modules you can use that are mobile specific like touch controls)
[22:28] <BluePandaStudios> Also, any feedback on libraries that you feel are “_must checkout_” (besides jQuery…)?
[22:28] <NickY> take for example $(element).is(‘:hidden’) – no need to understand any core js fundamentals there jquery does it all for you
[22:29] <NickY> i love jquery but sometimes I think it makes us lazy.
[22:29] <HAWK> Oh johnlacey, you’ve broken it.
[22:29] <codepo8> BluePandaStudios sencha touch is good, jQuery mobile needs some brushing up, Zepto.js is a very lightweight one (for the moment). A lot is dependent on what you do. Sometimes just something like hammer.js is all you want (this one makes touch interaction simple)
[22:29] <HAWK> Ok, I have – sorry! Fixing now.
[22:29] <johnlacey> @HAWK — So it would seem. lol
[22:31] <Ara> NickY: jQuery is definitely more convenient than writing out what it’s doing under the hood longhand every time. That said, understanding what it’s doing can be helpful. Especially if you’re going to be coding web applications that do a lot of heavy lifting in the client but not necessary on the DOM layer.
[22:31] <HAWK> Check back in an hour johnlacey – I’ll sort it straight after this session
[22:31] <codepo8> NickY I’d argue there that if you don’t know when some element of your YUI is hidden and you need to ask the browser to tell you that (which means it needs to access the DOM and try it out) then you have not planned your UI right. The browser is there to display, not to retain display logic.
[22:31] <scruggs> Are there any nifty JS templating tools available?
[22:32] <HAWK> Whoa – the time has flown. We’re going to need to start wrapping things up so that I can cut Ara free
[22:32] <codepo8> scruggs you’d be surprised how many times you don’t need to traverse the DOM if you add a CSS class to a parent element and keep this logic in your CSS.
[22:32] <HAWK> I’m going to call no more new questions, but I won’t be closing the room so you’re free to hang around and chat as long as you like
[22:32] <codepo8> scruggs yes – mustache.js and handlebars.js
[22:32] <johnlacey> Thanks @Ara @Hawk
[22:33] <Ara> scruggs: Definitely. You’ve got Mustache JS (https://github.com/janl/mustache.js/), Handlebars JS (http://handlebarsjs.com/) and even Underscore has a templating system (http://underscorejs.org/#template)
[22:33] <HAWK> And same time next week we’re running a live CSS codefix session with Alex Walker
[22:33] <codemaestro> This has been a real ADHD experience.
[22:33] <Ara> scruggs: just off the top of my head
[22:33] <Ara> codemaestro: tell me about it! :D
[22:33] <NickY> I agree ara, I guess all I was really trying to say is that I believe everyone should get a strong understanding of js before turning to libraries
[22:33] <Ara> I hope I didn’t miss anyone’s questions. Please repeat them if I did.
[22:34] <codemaestro> NickY or go into the libraries with a desire to find the underlying behaviours
[22:34] <HAWK> I want to say a huge thanks to Ara – you’ve been an absolute legend today, handling the hoards alone
[22:34] <codemaestro> I had a problem with $(elem).text(”) not producing the same result in two different point versions of Chrome.
[22:34] <Ara> NickY: I agree. Although over the years, the hardcore engineer in me has given way a little to the business dude in me who says that sometimes, to get the job done, you can just go the route of not having to know everything. (Shhhh, don’t tell anyone I said that.) ;)
[22:34] <HAWK> Much appreciated
[22:34] <codemaestro> @ara LOL
[22:34] <Ara> HAWK: You’re too kind. :)
[22:35] <NickY> Ara lol yes I have been getting to that point. I blame freelancing:)
[22:35] <BluePandaStudios> HAWK, thanks for the talk, great time!
[22:36] <scruggs> Thanks. I am pleased with the suggestions and that nudge forward to continue learning more about the basics of JS and the technologies that incorporate it!
[22:36] <Ara> codemaestro: Yeah, i’m not sure what text() uses under the hood, but it could be that they didn’t account for changes from one Chrome release to another.
[22:36] <NickY> HAWK – is there a way to get alerts without going to Facebook?
[22:36] <Ara> codemaestro: I know that there are differences between IE and the rest of the browsers when it comes to innerText and textContent, so it could be something like that.
[22:37] <HAWK> NickY not at the moment, but you don’t need to have a Facebook account to use that form
[22:37] <NickY> Oh ok sweet I will do that then
[22:37] <codemaestro> true. eventually i discovered through trial/error/much googleing that the element needed the hasLayout property or something to be set.
[22:38] <NickY> thanks to ara, hawk, and everyone. This was fun.
[22:38] <codemaestro> I got a few more library names to scope out when I have time.
[22:39] <Ara> codemaestro Ahh.. the legendary hasLayout ;)
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers